ウェブサイトでできる表現は年々進化しています。
「近未来的なイメージの、幾何学模様が自動で動く表現」
「サイト上で軽快に動く3Dゲーム」
「クリックやタッチ操作で動くインタラクティブな3Dアニメーション」
のような表現も、
より美しく、ウェブサイトの読み込み速度なども大きく損なうことなく、 実現できるようになってきました。
これらを実現するための方法としてWebGLがあります。
目次
WebGLとは
WebGLはOpenGL ES2.0相当の機能を持つJavaScriptのAPIです。
OpenGLは、たいていの場合C++やJavaなど、それぞれのプラットフォームに合わせてネイティブな言語で記述されます。
WebGLはと言うと、JavaScriptで記述することになります。
ウェブ関係の開発を行っている人が普段から使い慣れているJavaScriptを使って、ブラウザ上でOpenGLのAPI を叩くことができるというのがWebGLの革新的なところだと言えます。 JavaScriptで記述されたWebGLのコードは、最終的にはJavaScriptを解釈しているウェブブラウザによってOpenGLのAPIとして実行されます。
これにより、通常のOpenGLなどに近い環境、具体的にはGPUを利用したレンダリングが行われるため、非常に高速な描画が実現できます。※Windowsの場合は多少異なります。
高速な描画を実感していただくために、サンプルを用意しました。
サンプルでは、3DCG空間内に粒子（パーティクル）を10万個ループで描画しています。 サンプルを開くとページロードを待つことなく、10万個のパーティクルが高速に描画されていると思います。
three.js と WebGL
WebGLはそのまま使うとコードの記述量が増え非常に大変なため、WebGLラッパーライブラリであるthree.jsを使うケースも多いです。
three.jsはMr.doobによって開発されたWebGLコンテンツの実装を助けるライブラリです。 正確には、様々な機能をもっているため必ずしもWebGL専用のライブラリというわけではありませんが、現在はほぼWebGL実装には欠かせない3D ウェブのjQuery的存在となっています。
three.jsを利用すると、難易度的にも実装工数的にもピュアなWebGLより格段に開発者の負担を軽減できます。
また、豊富なサンプルやドキュメントの他、日本語の解説書籍等もいくつか出ています。
three.jsを使う上でデメリットらしいデメリットはあまりないですが、あえて無理やりデメリットを挙げると
- three.js の流儀に従う必要がある
- ややファイル容量が大きめ
- バージョンアップに追従するのが大変
- 成果物の見た目が似通う となるかと思います。
以上がWebGLの簡単な説明となります。
先駆では、皆様に少しでもご満足いただけるように技術を追求しております。 是非、お気軽にご相談をお願いいたします。