「ユニフォームバッファ」を使って三角形を描画してみよう

開発言語

技術解説

連載 [第9回] :

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

2025年10月8日(水)

大西武 (オオニシタケシ)

第9回の今回は、WebGPUでユニフォームバッファを通して行列をユニフォーム定数としてシェーダーに渡し、三角形を描画する解説をします。

シェーダーを記述する

前ページでユニフォームバッファから送られたプロジェクション行列、ビュー行列、ワールド行列を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入試(総合型選抜)で有利にさせるビジネスを考えました。でも、できなかった場合には受験生に申し訳ありません…。そこで、絶対本を出版させられなくても、技術書がより理解できる本の書き方や読み方を研究して教える大学教授を目指すのはどうかと考えました。これならステータスも得られます！

おわりに

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

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

著者

大西武 (オオニシタケシ)

この著者の記事一覧この著者の
記事一覧

1975年香川県生まれ。大阪大学経済学部経営学科中退。プログラミング入門書など30冊以上を商業出版する作家。Microsoftで大賞やNTTドコモでグランプリなど20回以上全国区のコンテストに入賞するアーティスト。オリジナルの間違い探し「3Dクイズ」が全国放送のTVで約10回出題。
https://profile.vixar.jp