WebGLで実現!3Dのリッチなウェブ表現

2021.11.01ピックアップ
黒川

ウェブサイトでできる表現は年々進化しています。

「近未来的なイメージの、幾何学模様が自動で動く表現」

「サイト上で軽快に動く3Dゲーム」

「クリックやタッチ操作で動くインタラクティブな3Dアニメーション」

のような表現も、

より美しく、ウェブサイトの読み込み速度なども大きく損なうことなく、 実現できるようになってきました。

これらを実現するための方法としてWebGLがあります。

目次

  • WebGLとは
  • three.jsと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を使う上でデメリットらしいデメリットはあまりないですが、あえて無理やりデメリットを挙げると

  • three.js の流儀に従う必要がある
  • ややファイル容量が大きめ
  • バージョンアップに追従するのが大変
  • 成果物の見た目が似通う となるかと思います。

以上がWebGLの簡単な説明となります。

先駆では、皆様に少しでもご満足いただけるように技術を追求しております。 是非、お気軽にご相談をお願いいたします。

メールマガジン

ウェブの活用を見直してみたいけれど、専門知識ばかりでも良くわからない。 セミナーを受けても、なかなか手元で活かしきれない。 先駆の今にちょっと興味がある。

そんなあなたのために、 活用しやすい最新技術のTipsや、ウェブ解析入門など、様々なトピックを配信しています。 ぜひご登録ください。

PC・携帯端末どちらでも
お読みいただけます。

メールマガジンを登録する

過去のメールマガジンを
ご覧いただけます。

バックナンバーはこちら

お問い合わせ

お電話でのお問い合わせ042-669-0669 平日10:00~17:00
※セールス目的のお電話はご遠慮ください。

お問い合わせ