WebGL研究 (3) Three.jsでGLSLを学習する時に初めに知りたいシステム変数・慣習的な変数

前回、前々回を経て、GLSLの世界とWebGLの優れたパフォーマンスについて理解が出来たところで、あらためて、こちらの書籍と向き合いたいと思います。

リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング

前提として、自分のフロント案件に活かす (インタラクションを付け足したり出来るようにする) ために、あえて、Three.js と組み合わせてサイト内に埋め込む手法にこだわってみたいと思います。

書籍内のサンプルコードは Shadertoy 上で公開されており、GLSL ES 3.0の仕様で書かれています。GLSL 2.0をデフォルトとして扱う Three.js では ShaderMaterial の初期化時に .glslVersion を明示的に指定する必要があります。

// シェーダーを使用する
const material = new THREE.RawShaderMaterial({
  vertexShader: vertexShaderSource,
  fragmentShader: fragmentShaderSource,
  glslVersion: THREE.GLSL3, // ← この行を追加
  uniforms: uniforms
})

また、 データの入出力のためのキーワードの attribute を in に、varying を out に書き換える必要があります。

// GLSL 2.0
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv;

// GLSL 3.0
in vec3 position;
in vec2 uv;
out vec2 vUv;

あとは、写経中に出てくる様々な変数について理解すればOKです。

• それぞれの役割・用途

• 型

• 正規化された値か、ピクセル値か

• 値の範囲

• 頂点シェーダー、フラグメントシェーダーそれぞれから参照可能か

• システム変数か (どこのレイヤーに備わった機能なのか)

について整理したいと思います。サンプルコードはこちら

position

モデル空間内の頂点の位置を表す

• 型: vec3

• 正規化された値か、ピクセル値か: どちらでもない。3D空間の座標系で使用される単位である

• 値の範囲: 3D空間内の任意の位置を指定できる

• 頂点シェーダーから参照可能か、フラグメントシェーダーから参照可能か: 頂点シェーダーからのみ参照可能

• システム変数か: Three.jsによって定義されている

gl_Position

変換された頂点の位置を表すベクトル。頂点シェーダーが出力する

• 型: vec4

• 正規化された値か、ピクセル値か: 正規化された値

• 値の範囲: -1.0から1.0

• 頂点シェーダーから参照可能か、フラグメントシェーダーから参照可能か: 頂点シェーダーからのみ参照可能

• システム変数か: GLSLによって定義されている

uv

テクスチャマッピングでテクスチャ上の位置を指定するのに使用される

• 型: vec2

• 正規化された値か、ピクセル値か: 正規化された値

• 値の範囲: 0.0から1.0

• 頂点シェーダーから参照可能か、フラグメントシェーダーから参照可能か: 頂点シェーダーからのみ参照可能

• システム変数か: Three.jsによって定義されている

vUv

uv座標をフラグメントシェーダーに渡すために使用される

• 型: vec2

• 正規化された値か、ピクセル値か: 正規化された値

• 値の範囲: 0.0から1.0

• 頂点シェーダーから参照可能か、フラグメントシェーダーから参照可能か: 両方から参照可能

• システム変数か: ユーザーが定義 (この命名は慣習的に決まっている)

gl_FragCoord

フラグメントのウィンドウ上の位置を表す

• 型: vec4

• 正規化された値か、ピクセル値か: ピクセル値

• 値の範囲: レンダリングウィンドウの大きさに依存

• 頂点シェーダーから参照可能か、フラグメントシェーダーから参照可能か: フラグメントシェーダーからのみ参照可能

• システム変数か: GLSLによって定義されている

u_resolution

描画領域の解像度を表すユニフォーム

• 型: vec2

• 正規化された値か、ピクセル値か: ピクセル値

• 値の範囲: レンダリングウィンドウの大きさに依存

• 頂点シェーダーから参照可能か、フラグメントシェーダーから参照可能か: フラグメントシェーダーからのみ参照可能

• システム変数か: ユーザーが定義

fragColor

フラグメントシェーダーの出力カラーを表す変数です。この色が最終的に画面に表示される。

• 型: vec4

• 正規化された値か、ピクセル値か: 正規化された値

• 値の範囲: RGBとアルファチャネルの値がそれぞれ0.0から1.0

• 頂点シェーダーから参照可能か、フラグメントシェーダーから参照可能か: フラグメントシェーダーからのみ参照可能

• システム変数か: GLSL ES 3.0以降では、ユーザーが定義。(outキーワードで宣言時に命名する。慣習的に名前を変える必要はなさそう。以前のバージョンでは、gl_FragColorという名前の変数が予約されていた。)

まとめ

これで書籍のサンプルを土台に、書き換えて良い場所・書き換えられない場所、理解すべきところ・スルーして良いところ、適正な値の範囲をイメージしながら学習を進められる気がします！

引き続き挑戦して、発見があればまた書きたいと思います。