HTML/HTML5 , WebGL , three.js

「HTML5だ、モダンWebだと言うけど、ぶっちゃけ何ができるの？」という問いに、正確かつ最も魅力的に答えるなら、WebGLです。本記事では、WebGLを使ったWebコンテンツ制作について紹介します。

HTML5時代を象徴するWebGL

WebGLWebGLブラウザ上で3Dグラフィックスを表示させる技術。百聞は一見にしかず。制作実例を集めたこちらのサイトをご覧ください。https://threejs.org/とは、簡単に言うとOpenGLOpenGLOpen Graphics Libraryの略。3Dグラフィックス処理のために開発されたプログラミングインターフェース。OSなどのシステムに依存しないため、汎用性が高くあらゆるプラットフォームで使用されている。のWeb版で、今までネイティブアプリネイティブアプリiOSやAndroidのアプリのようにデバイス上で直接動作するアプリケーションのこと。ブラウザ上で動作する「Webアプリ」とよく比較して使われる。にしかできなかったGPUGPUGraphics Processing Unitの略。画像を表示するための処理を行う装置のこと。処理能力が高いほど3Dグラフィックスや高画質の動画などを滑らかに表示させることができる。へのアクセスを可能にするグラフィクスAPIグラフィクスAPIコンピュータグラフィクスの処理（描画）のためのプログラミングインターフェイスの仕様のこと。WebGL、OpenGLの他、Direct3Dなどがあり、2016年にはOpenGLの後継にあたるVulkanが注目された。です。WebGLを使えば、例えばGPUのパワーを使ったバリバリの3DゲームもWeb上で実現可能になります。FlashPlayerなどのプラグインも一切不要。HTML5のcanvas要素を通してブラウザだけで動作するので、ユーザーはすぐにコンテンツを体験できます。

端末の進化によって導入の障壁がほとんどなくなりつつあり、国内のWebサイトでも多く見かけるようになってきました。今、最もわかりやすい形でWebを席巻しているトレンド技術と言えます。

WebGLが流行中！そのワケとは？

WebGLが普及した理由は、単に表現上のインパクトが強かっただけではありません。3つの視点から紐解くと、今の時代にとてもよくフィットしている技術である事がわかります。

まず、ユーザー目線では今まで通りのWebサーフィンでこれまでにない素敵な体験を得られる、まるで魔法です。軽快に動作する3DインタラクティブコンテンツはWebGLの真骨頂。最近のスマートフォンでもある程度動作するので、モバイルファーストモバイルファーストWebページの制作や開発において、スマートフォンに代表されるモバイル環境への最適化を最優先にする考え方のこと。と相性抜群です。

次に、それを提供するクライアント目線では、リリースするWebサイトやサービスの付加価値を高め、アイデア次第でUXを劇的に変化させる事ができます。訴求力を増し、ビジネスチャンスも大きく広がる可能性を秘めていますが、より効果的に使うためはプランニングが重要です。

最後に、我々クリエイター目線では、これまで培ってきたJavaScriptスキルを応用できるメリットがあります。当然、プロとして良質なコンテンツを提供するためには高い錬度が必要ですが、WebGLの開発には高額なソフトウェアを購入する必要もなく、オープンソースのプラグインも充実してきています。

WebGLを軸にしたクリエイターの交流

Web業界に新しい大きな流れを生み出したWebGLですが、もしかすると、Web業界以外の分野に特化してきたクリエイターにも、変革を呼び起こすかもしれません。

例えば、Webとゲームクリエイター。3Dゲームエンジンの「Unity」や「UnrealEngine」からWebGLコンテンツを生成できるようになり、ゲーム業界とWeb業界が協力し合える部分が出てくるかもしれません。

それから、Webと3DCGモデラー。WebGLは「Shade3D」や「Maya」などの3DCGソフトウェアと連携できるので、専門的で尖ったスキルと言える3Dモデリング能力は、WebGLを通してWeb上でも活躍できるかもしれません。

WebGLでこんなコンテンツが作れます！

WebGLの代表的なライブラリとして、「three.js」があります。JavaScriptだけで3Dインタラクティブコンテンツを作り上げようとすると莫大なコストがかかるところ、「three.js」が大幅にそのコストを削減してくれます。このライブラリが、WebGLの普及に大きく貢献しているのは間違いないでしょう。

「three.js」の公式サイトでは、WebGLを実際に体感できる魅力的な導入事例と共に、練習と実装に役立つサンプルがたくさんあるので、ぜひ覗いてみてください。
https://threejs.org/

時代を席巻するトレンド技術「WebGL」について紹介しました。コンテンツの訴求力、表現力をアップさせ、かつ従来の制作手法に比べてコスト削減にもつながる、まさに「魔法」の技術。クリエイターとしても大注目です！

この記事を書いた社員