WebGLで3Dアニメーションを実装するための基礎知識
他とちょっと違う感を出すためにcanvasを使った3Dアニメーションをホームページに付けてみようと調査しているときの覚書。 HTML5とcanvas要素 canvas要素はHTML5以降で標準化された動的にグラフィックを描画する要素。 canvas要素 - Wikipedia canvas要素自体はIE9以降サポートされている。 "canvas" | Can I use... Support tables for HTML5, CSS3, etc WebGLとJavaScriptライブラリ WebGLは2D/3DグラフィックをレンダリングするJavaScript API。 描画処理にCPUではなくGPUを用いることで高速に処理が可能。 IE11以降と主要ブラウザでサポートされている。 WebGL - Wikipedia WebGL - 3D Canvas graphics | Can I use... Support tables for HTML5, CSS3, etc 簡素なグラフィック描画だけの場合は(CPUを利用した)canvas要素で十分。 3Dアニメーションをする場合はWebGL経由でGPU処理することでサクサク動く。 WebGLは次のようなJavaScriptライブラリを使うのが一般的。 three.js ・・・3D描画によく使われる PixiJS ・・・2D描画によく使われる 参考サイト wgld.org | WebGL: WebGL を始める前に canvas を知る HTML5 CanvasとWebGL 【関連記事】 Reactを使ったUIコンポーネント「Material-UI」