0);}行列計算用ライブラリDartは標準では行列計算をサポートしていない。getを実行した後にimportしておこう。'package:vector_math/vector_math.dart';ちなみにこのライブラリには変換行列を生成する機能がある。この記事の大半を割いて説明した数学的な知識は一切不要ということになる。当初は標準ライブラリのみで説明する予定だったが、試しに書いてみたところ、あまりにも冗長になりすぎたため、ライブラリを使用することにした。WebGLの記事であって線形代数の記事ではないので、これでも十分だろう。シェーダを書き換える前回の記事ではシェーダをハードコーディングしていたが、外部ファイルに保存しておいた方がいいだろう。拡張子は特に決まりはないようで、glsl、shader、vert、fragなど各々好き勝手につけているようだ。ここでは.glslを使うことにする。今回の主な変更は、全てバーテックスシェーダ側だ。変換行列の数だけ変数を作ることになる。基本的にはmodel、view、matrixの3つさえあればよいが、人によっては3つをまとめてmvpMatrixなどとしたり、逆にもっと細かくわけることもある。このあたりは好きにすればいいだろう。変換行列の値は全ての頂点で共通になる。よってattribute変数で頂点ごとの値を設定する必要はない。いうときはuniform変数を使用する。ここで1.0を付け足す。そのまま、model→view→projectionの順でよい。1.0);}フラグメントシェーダは単に色を書き込むだけでよい。vColor;}設定の変更デプステストと背面カリングは有効にしておこう。この2つを使わないという場面は、そうそう無いと思われる。設定の変更はプログラム作成直後でいいだろう。デプステストなどを有効にする。背面カリングuniform変数の設定方法uniform変数は頂点に依存しない変数だ。変換行列などは全ての頂点で共通のため、uniform変数として宣言されることが多い。位置を取得してから値を書き込むという流れはattribute変数と変わらないが、使用するメソッドが異なる。uniform変数を設定する。値を設定する面倒なのが値の設定方法で、シェーダ側の型によってメソッドが異なる。uniformMatrix4fvはmat4にfloatの配列を設定するメソッドになる。z)はvec3の値を個別に指定できる。int型を使用するときはfのかわりにiを使い、uniform2ivというようなメソッドを使う。vのような命名規則になっている。uniformMatrixにv無しのメソッドは存在しない。変換行列に設定する値は後述する。今回も普通の四角形を用意する。後から様々な変換をほどこすので、初めから正規化デバイス座標に収める必要はない。単位(メートル、センチメートルなど)も好きなように決めてしまえばいい。背面カリングを有効化しているので、ワインディングオーダーが反時計回りであることには注意したい。準備が全て整ったので、改めて変換行列を用意していこう。用意する行列は、モデル変換行列・ビュー変換行列・プロジェクション変換行列の3つだ。描画したいものにあわせて任意に設定するといいだろう。uniform変数を設定する。好きに組み合わせればよい。通常は平行移動より先に行う。カメラ位置・見ている座標・上方向の3つで定義する。カメラと水平になることだけは避けよう。今回は透視投影を使用する。makePerspectiveMatrixというメソッドもある。普通はそちらを使用する。nearとfarは「Z座標」ではなく「距離」を表す。uniform変数を設定する。位置を取得→値を設定の流れになる。projection.storage);実行結果プログラムの実行結果プログラムを実行すれば、カメラなどの設定に応じた描画がされるはずだ。シェーダを読み込んでから開始する。表示用キャンバスの用意。WebGL描画コンテキスト。デプステストなどを有効にする。uniform変数を設定する。好きに組み合わせればよい。通常は平行移動より先に行う。カメラ位置・見ている座標・上方向の3つで定義する。カメラと水平になることだけは避けよう。今回は透視投影を使用する。makePerspectiveMatrixというメソッドもある。普通はそちらを使用する。nearとfarは「Z座標」ではなく「距離」を表す。uniform変数を設定する。位置を取得→値を設定の流れになる。