WebGPUではじめる3DCGアニメーション入門第9回

シェーダーを記述する

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

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

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

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

・「lib」→「WGSL.js」ファイル

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」メソッド)ます。

・サンプルコード「index.html」ファイル

<!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));)ます。

【コラム】「技術書がより理解できる本の書き方や読み方を研究したい」

以前、本を書かせたり賞をとらせてAO入試(総合型選抜)で有利にさせるビジネスを考えました。でも、できなかった場合には受験生に申し訳ありません…。そこで、絶対本を出版させられなくても、技術書がより理解できる本の書き方や読み方を研究して教える大学教授を目指すのはどうかと考えました。これならステータスも得られます！