WebGLで3Dアニメーションを実装するための基礎知識

投稿日：

他とちょっと違う感を出すためにcanvasを使った3Dアニメーションをホームページに付けてみようと調査しているときの覚書。


HTML5とcanvas要素

canvas要素はHTML5以降で標準化された動的にグラフィックを描画する要素。

canvas要素自体はIE9以降サポートされている。


WebGLとJavaScriptライブラリ

WebGLは2D/3DグラフィックをレンダリングするJavaScript API。
描画処理にCPUではなくGPUを用いることで高速に処理が可能。
IE11以降と主要ブラウザでサポートされている。

簡素なグラフィック描画だけの場合は（CPUを利用した）canvas要素で十分。
3Dアニメーションをする場合はWebGL経由でGPU処理することでサクサク動く。

WebGLは次のようなJavaScriptライブラリを使うのが一般的。

  • three.js ・・・3D描画によく使われる
  • PixiJS ・・・2D描画によく使われる


参考サイト


【関連記事】