Three.jsシェーダー

モデル行列

モデルマトリックスには、ジオメトリの回転、平行移動、およびスケーリング変換が含まれます。シェーダコードを記述する際、プログラマがモデル行列を手動で宣言する必要はありません。Three.js レンダラーは、レンダリング時に自動的に ShaderMaterial バーテックスシェーダ文字列に行を挿入します。 uniform mat4 modelMatrix;

投影行列とビュー行列

基本クラス Camera の matrixWorldInverse プロパティはシェーダ内のビュー行列変数 viewMatrix に対応し、基本クラス Camera の projectionMatrix プロパティはシェーダ内の投影行列変数 projectionMatrix に対応します。projectionMatrix はシェーダ内の投影行列変数に対応します。

uniform mat4 viewMatrix; uniform mat4 projectionMatrix; ShaderMaterial コンストラクタを使用して頂点シェーダをカスタマイズする場合、ShaderMaterial コンストラクタのように viewMatrix と projectionMatrix を手動で宣言する必要はありません。 WebGL レンダラーが WebGLProgram.js モジュールを通じてこれらの変数を頂点シェーダ コードに挿入して自動的に宣言します。

シェーダーで使用する場合は、左乗算行列の順序に従う必要があります。

gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 )

種類のシェーダー変数

ユニフォームは、頂点シェーダでもスライスシェーダでも、js側からデータを受け取ります。

/********/
var shaderMaterial = new THREE.ShaderMaterial( {
 uniforms: {
 pointTexture: { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
 },
 vertexShader: document.getElementById( 'vertexshader' ).textContent,
 fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
} );
/*** ****/
uniform sampler2D pointTexture;
void main() {
 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 gl_FragColor = gl_Position * texture2D( pointTexture, gl_PointCoord );
}

attribute vec3 position属性はwebglキャッシュに保存されるデータで、頂点シェーダでのみ取得でき、スライスシェーダでは取得できません。 頂点の位置、面の法線、頂点の色は、自分で頂点シェーダに宣言する必要はありません。Three.jsが自動的に頂点シェーダに挿入するので、自分で宣言する必要があります。

Varyingsは、頂点シェーダーがピースワイズシェーダーと通信するために使用する変数で、頂点シェーダーからのデータをピースワイズシェーダーに渡すことができます。

// 頂点シェーダー
varying vec3 vColor;
void main() {
	vColor = color;
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
// チップシェーダー
varying vec3 vColor;
void main() {
	gl_FragColor = vec4( vColor, 1.0 );
}