glslの読み込みは.glslファイルをインポートか、js/tsファイル、htmlファイルに文字列直書きでいける。
vscodeの拡張機能「Shader language」をインストールするといい。
カンマ忘れでエラー出るので注意。
あとテクスチャのローダーにパスで画像を渡すとなぜか表示されないので、画像をインポートして引数に渡す必要あり。
vertexShaderとfragmentShaderの基本
vertexShader.glsl
void main() {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1);
}fragmentShader.glsl
void main() {
gl_FragColor = vec4(1.0,0,0,1.0); // rgba的な
}シェーダーとは、３Dグラフィックス描画処理を制御するためのプログラム。頂点シェーダーとフラグメントシェーダーがある。
頂点シェーダー
上のコードの変数それぞれの説明
- ローカル座標(position): オブジェクト自身を基準(0,0,0)とした各頂点の座標系。
- モデル行列 (modelMatrix): ローカル座標をワールド座標に変換。
- ビュー行列 (viewMatrix): カメラの位置や向きに基づいて、ワールド座標をカメラ座標に変換。
- 射影行列 (projectionMatrix): カメラ座標をスクリーン座標に変換。
modelMatrix,viewMatrix,projectionMatrixは変換行列。（Matrix＝行列）
vec3は(x,y,z)みたいな感じ。positionはvec3。
ローカル座標が各頂点の座標系なのにvec3とはこれいかに？と思ったが、
GLSLのシェーダープログラムでは、void main() が各頂点ごとに呼び出される。
ワールド座標
3次元、シーン基準。
モデルやカメラの配置。
スクリーン座標
2次元、画面（スクリーン）基準。
projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1)
について、
modelMatrix * vec4(position, 1) で頂点のローカル座標をワールド座標に変換。→ modelPosとする。
projectionMatrix * viewMatrix * modelPos で ワールド座標をスクリーン座標に変換。