シェーダーを記述する

シェーダーを記述する

前ページでユニフォームバッファから送られたプロジェクション行列、ビュー行列、ワールド行列をWGSLのシェーダーで受け取って計算します。ここで解説したことができれば、図2のように回転する三角形が表示されます。プロジェクション行列にパースペクティブ行列を乗算しているため遠近法がかかった三角形になり、遠くほど小さく見えます。

図2：三角形が回転して遠くほど小さく見える遠近法

シェーダーでユニフォーム定数を受け取る

次のサンプルコード「lib」→「WGSL.js」ファイルで、前ページで「group」の0番の「binding」の0番にバインドしたユニフォームバッファを不変の「Uniforms」構造体の定数として受け取ります。そのユニフォーム定数のプロジェクション行列とビュー行列とワールド行列を各頂点に乗算して変形します。

const vertWGSL = `
struct Uniforms {
  projectionMatrix : mat4x4f,
  viewMatrix : mat4x4f,
  worldMatrix : mat4x4f,
}
@group(0) @binding(0) var uniforms : Uniforms;

struct VertexOutput {
  @builtin(position) position : vec4f,
}

@vertex
fn main(
  @location(0) position: vec4f,
) -> VertexOutput {
  var output : VertexOutput;
  output.position = uniforms.projectionMatrix *
    uniforms.viewMatrix * uniforms.worldMatrix * position;
  return output;
}
`;
const fragWGSL = `
struct VertexOutput {
  @builtin(position) position : vec4f,
}
@fragment
fn main(fragData: VertexOutput) -> @location(0) vec4f {
  return vec4f(0.0,0.0,0.0,1.0);
}
`;

【サンプルコードの解説】
グループ0番のバインディング0番のユニフォーム定数を「uniforms」変数に受け取ります。
頂点シェーダーのmain関数で受け取った1つ1つの頂点にユニフォーム定数の各行列を乗算して変換します。
VertexOutput構造体を戻り値としてフラグメントシェーダーのmain関数に渡します。
フラグメントシェーダーでは三角形を黒色に決定します。

実行するHTML5文書をコーディングする

次のサンプルコード「index.html」ファイルをコーディングしたら、index.htmlをGoogle Chromeで実行してください。「draw」関数でモデルを毎フレーム1度(1°)回転させ(「addY」メソッド)て、カメラを向け(「lookAt」メソッド)て描画し(「draw」メソッド)ます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>UltraMotion3D</title>
    <meta name="viewport" content="width=device-width">
    <script src="lib/Vector3D.js"></script>
    <script src="lib/Matrix3D.js"></script>
    <script src="lib/Model3D.js"></script>
    <script src="lib/WGSL.js"></script>
    <script src="lib/UltraMotion3D.js"></script>
    <script type="text/javascript">
var _model;
  
function init() {
  _model = new Model3D();
  _model.initBuffers();
}

function draw() {
  _model.rotate.addY(1);
  _camera.lookAt(new Vector3D(0,0,500),new Vector3D(0,0,0),new Vector3D(0,1,0));
  _model.draw();
}
    </script>
  </head>
  <body onload='initWebGPU("CanvasAnimation");'>
    <canvas id="CanvasAnimation" width="1000" height="900"></canvas>
  </body>
</html>

【サンプルコードの解説】
<script>タグで「lib/Vector3D.js」「lib/Matrix3D.js」を読み込みます。
draw関数でモデルを1ずつ回転し(_model.rotate.addY(1);)、カメラを原点Oに向け(_camera.lookAt(new Vector3D(0,0,500),new Vector3D(0,0,0),new Vector3D(0,1,0));)ます。

おわりに

今回は、ユニフォームバッファとユニフォーム定数を使って遠近法とカメラを考慮し、回転する三角形を描画しました。

次回は長らくお待たせしましたが、いよいよ意味のある形状を描画します。何もマテリアルを反映しない、真っ白な3Dアコースティックギターモデルを表示するだけの解説をします。