上の記事でグラデーションのかかった四角形を描きました。WebGLで表示しているので3D空間に板状の四角形を配置してそれを表示しているのですが、表示しているものが板状で3D感がありませんでした。
今回はそれを改善するために回転し、しかもアニメーションで角度を変化させています。下に今回の作成物を表示します。（回転する四角形が見えるはずです。）
以前と異なるのは行列の計算を入れたことです。あとアニメーションさせるために、時間を変えて描画処理を何度も呼び出すようになっています。
すごく3Dっぽくなりましたね。奥行による見た目の変化も立体だと思わせる原因だと思います。
glMatrix
行列演算用のライブラリです。公式サイトがあります。Documentも公式にあります。ベクトル、行列、クォータニオンの演算ができます。行列は4×4のものにlookAt、frustum、ortho、perspectiveがあり、CGで使う行列が簡単に作成できるようになっています。
使用したバージョンは2.4.0です。
ライブラリのzipを展開したら、その中にあるdistフォルダにgl-matrix-min.jsがあります。それをサーバーの公開フォルダのどこかに置けば使えます。どうもJavaScriptのファイルをツールを使って短くしているようです。
requestAnimationFrame
requestAnimationFrameという名前の関数でアニメーションを行いました。ブラウザの再描画のタイミングで引数に渡した関数を実行してくれるため、これでアニメーションをすると無駄がなく良いようです。
Renderという描画用の関数を作りこれを何度も呼ぶようにしました。
requestAnimationFrame(Render);と書けば、一度だけ再描画時に関数が呼ばれます。アニメーションをするにはRender内の最後にrequestAnimationFrame(Render);入れておきます。そうすると、Renderが呼ばれるたびに最後にrequestAnimationFrameが呼ばれ、またRenderが呼ばれるように登録できます。
参考
MDN Web docsの『WebGL でのオブジェクトのアニメーティング』を参考にしています。回転の向きが違いますが、見た目の差はそれくらいです。名前も同じなので、同じ行列演算用のライブラリを用いているはずです。