検索
連載

WebGLの能力を引き出すプログラマブルシェーダーWebグラフィックをハックする(最終回)(3/5 ページ)

プログラマブルシェーダーの基本的な書き方と、Three.jsの各機能に組み込む方法を解説します

PC用表示 関連情報
Share
Tweet
LINE
Hatena

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.

ページトップに戻る