WebGLの能力を引き出すプログラマブルシェーダー：Webグラフィックをハックする（最終回）（3/5 ページ）
プログラマブルシェーダーの基本的な書き方と、Three.jsの各機能に組み込む方法を解説します
GLSLの組み込み変数
引き続き、GLSLについて解説していきます。文法については前ページでおおむねカバーしたので、ここからは標準で使える変数や関数について解説します。
まずは頂点シェーダーで使える組み込み変数を以下に示します。いずれも出力用で、特にgl_Positionはポリゴン（三角形）の頂点座標として使われるので、必ず有意な値を書き込まなくてはなりません。
| 変数名 | 型 | 説明 |
|---|---|---|
| gl_Position | vec4 | 座標変換後の頂点座標 |
| gl_PointSize | float | ポイントスプライトのサイズ |
フラグメントシェーダーで定義される組み込み変数は以下になります。gl_FragColorのみ出力用で、他は入力（読み込み専用）です。gl_FragColorにピクセルへの描画色を出力することが、フラグメントシェーダーの主な目的になります。
| 変数名 | 型 | 説明 |
|---|---|---|
| gl_FragColor | vec4 | ピクセルの描画色 |
| gl_FragCoord | vec4 | ピクセルの座標 |
| gl_PointCoord | vec2 | ポイントスプライト内の座標 |
| gl_FrontFacing | bool | 表面ならtrue、裏面ならfalse |
GLSLの組み込み関数
GLSLは、頂点処理やライティング処理などでよく使用する計算を組み込み関数として提供しています。それらを使うことで実装の手間を省き、さらに利用可能であればGPUのネイティブな機能を呼び出して演算を高速に処理してくれます。GLSL組み込み関数のリファレンスは以下のページで公開されています。
OpenGL ES Shading Language (GLSL ES) Reference Pages
組み込み関数のうちで代表的なものを簡単に見ていきましょう。まずはJavaScriptでもおなじみの算術関数です。実行する演算はJavaScriptとほぼ同じですが、引数としてfloat、 vec2、 vec3、 vec4のいずれかを取ることができ、同じ型の値を返します。ベクトルに適用した場合は各要素に対して演算を行って、結果を返り値の対応する要素に格納します。
| 関数 | 説明 |
|---|---|
| radius(x) | xを度数からラジアンに変換する |
| degrees(x) | xをラジアンから度数に変換する |
| abs(x) | xの絶対値を返す |
| sign(x) | xが正なら+1.0、0.0なら0.0、負なら-1.0を返す |
| floor(x) | x以下の最大の整数を返す |
| ceil(x) | x以上の最小の整数を返す |
| fract(x) | x-floor(x)を返す |
| mod(x, y) | x-y*floor(x/y)を返す |
| min(x, y) | xとyのより小さい値を返す |
| max(x, y) | xとyのより大きい値を返す |
| clamp(x, a, b) | min(max(x, a), b)を返す |
| mix(x, y, a) | x(1-a)+y*aを返す（つまり線形補間） |
| step(a, x) | x |
| smoothstep(e0, e1, x) | エルミート補完を行う |
| sin(x) | 正弦を返す |
| cos(x) | 余弦を返す |
| tan(x) | 正接を返す |
| asin(x) | 逆正弦を返す |
| acos(x) | 逆余弦を返す |
| atan(y, x) | 逆正接を返す |
| pow(x, y) | xのy乗を返す |
| exp(x) | eのx乗を返す |
| log(x) | xの自然対数を返す |
| exp2(x) | 2のx乗を返す |
| log2(x) | xの底2のlogを返す |
| sqrt(x) | xの平方根を返す |
| inverssqrt(x) | 1/sqrt(x)を返す |
オーソドックスなベクトル演算も用意されています。dot3()以外は引数としてfloat、vec2、vec3、vec4のいずれかを取れます。dot3()の引数はvec3型のみです。
| 関数 | 説明 |
|---|---|
| length(x) | xの長さをfloatで返す |
| distance(x, y) | xとyの距離をfloatで返す |
| normalize(x) | xを正規化した値を返す |
| dot(x, y) | xとyの内積をfloatで返す |
| cross(v1, v2) | vec3型の引数v1とv2の外積をvec3で返す |
| faceforward(N, I, R) | dot(R, I) < 0ならNを返し、それ以外は-Nを返す |
| reflect(I, N) | Nを法線として、Iの反射方向をIと同じ型で返す |
| refract(I, N, eta) | Nを法線、eta（常にfloat型）を屈折率として、Iの屈折方向をIと同じ型で返す |
ベクトル値同士の比較演算を行う関数もあります。any()、all()、not()は引数としてbvec2、bvec3、bvec4のいずれかを取ります。返り値はany()、all()がbool、not()は引数と同じ型です。それ以外の関数はvec2、vec3、vec4、ivec2、ivec3、ivec4のいずれかを引数として取り、同じ要素数のbvecを返します。
| 関数 | 説明 |
|---|---|
| lessThan(x, y) | 要素ごとの x < y の比較結果を返します |
| lessThanEqual(x, y) | 要素ごとの x <= y の比較結果を返します |
| greaterThan(x, y) | 要素ごとの x > y の比較結果を返します |
| greaterThanEqual(x, y) | 要素ごとの x >= y の比較結果を返します |
| equal(x, y) | 要素ごとの x == y の比較結果を返します |
| notEqual(x, y) | 要素ごとの x != y の比較結果を返します |
| any(x) | xのすべての要素がfalseならfalseを、それ以外ならtrueを返します |
| all(x) | xのすべての要素がtrueならtrueを、それ以外ならfalseを返します |
| not(x) | xの全要素の真偽値を反転して返します |
テクスチャのフェッチも組み込み関数を通して行います。用途に応じて複数用意されていますが、ここでは通常の2次元テクスチャからの読み込みと、キューブテクスチャの読み込みのみを挙げておきます。sampler引数にはsampler2D型もしくはsamplerCube型のuniform変数を指定してください。
| 関数 | 説明 |
|---|---|
| texture2D(sampler, coord) | vec2型のcoordが示す座標の色をvec4型で返します |
| textureCube(sampler, coord) | vec3型のcoordの方向の色をvec4型で返します |
Three.jsが定義する変数
WebGLの組み込み変数に加えて、Three.jsが自動的に定義する変数もあります。例えば頂点シェーダーでは以下の変数が必ず定義されます。
| 変数定義 | 説明 |
|---|---|
| uniform mat4 modelMatrix | モデル座標系からワールド座標系への変換行列 |
| uniform mat4 viewMatrix | ワールド座標系からビュー座標系への変換行列| |
| uniform mat4 modelViewMatrix | modelMatrixとviewMatrixを乗算したもの |
| uniform mat4 projectionMatrix | 透視変換行列 |
| uniform mat3 normalMatrix | 法線をビュー座標系に変換する行列 |
| uniform vec3 cameraPosition | ワールド座標系でのカメラ座標 |
| attribute vec3 position | 頂点座標 |
| attribute vec3 normal | 頂点法線 |
| attribute vec2 uv | UV座標 |
フラグメントシェーダーでは以下の変数が定義されます。
| 変数定義 | 説明 |
|---|---|
| uniform mat4 viewMatrix | ワールド座標系からビュー座標系への変換行列 |
| uniform vec3 cameraPosition | ワールド座標系でのカメラ座標 |
これらの変数によって、Three.js上で指定した座標変換などを自作のシェーダーでも利用できます。ここに挙げられていない情報はマテリアルの種類によって定義が変化するため、Three.jsにおけるマテリアルの扱いを理解する必要があります。この記事の最後に部分的にですが取り上げているので、参考にしてください。
Copyright © ITmedia, Inc. All Rights Reserved.