OpenGL Shading Language

JavaScriptの3DライブラリThree.jsを使う機会から、そこで使われているシェーダープログラムに、興味をもつようになりました。(GPUで実行される言語なので)
Three.jsはJavaScriptなので、OpenGLではなく厳密にはWebGLと呼びますが、OpenGL ES 2.0がWebGL 1.0相当となるようです。(https://wgld.org/d/webgl2/w001.html)
今回はまずシェーディングの機能を試したかったので、このブログのロゴデータを加工してみました。

参考 : https://wgld.org/sitemap.html

このサイトはWebGLについて、とても詳しく丁寧に書かれており、大変勉強になります。Three.jsのようなライブラリは使わずに、自前のライブラリを使って書かれているので、しくみを一から勉強するのにはとても役に立ちます。ただコードのボリュームは多いので、さらにそこから必要な部分のみを切り取って使わせていただきました。このサイトにあるブラーの記事を参考に、ちょっとカッコいいエフェクトをつくってみました。

scriptタグにGPUで走る頂点シェーダ、フラグメントシェーダのプログラムを書くようになっています。(手軽すぎる・・)
組み込み変数やベクトル演算が特徴的です。attribute変数、uniform変数でJavaScriptの変数の値を受け取ります。
create_shader関数から下はそのまま引用させていただきましたが、結構なボリュームがあります。それだけOpenGLは手順が多いということですね。しかし一つずつ順を追っていくとその仕組みがよくわかるように書かれており、関数が機能ごとによくまとめられています。

num=20, strength=0

num=20, strength=2

num=10, strength=2

フラグメントシェーダでは自ピクセルの色を周辺ピクセルの色から計算して決定しています。ここでは縦方向のピクセルを対象にしてブレを起こしています。
どのピクセルを選択するかによって、ブレ方や方向を変化させることができそうです。

今回は平面だけでしたが、また掘り下げていきたいです。

About

Categories: Graphics タグ: