WebGLの勉強にオススメな3つの書籍を紹介

2023.12.01(公開: 2023.12.01)

はじめまして、エンジニアスタイル編集部です！

コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします！
本記事が、皆様の参考になれば幸いです。

経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。

エンジニアスタイルは、最高単価390万円、国内最大級のITフリーランス・副業案件検索サービスです。WebGLのフリーランス・副業案件一覧をご覧いただけますのであわせてご確認ください。

WebGLとは

Web制作の現場に勤める方の中には、「WebGL」という言葉を耳にしたことがある方もいるのではないでしょうか？

まずはWebGLの概要について解説いたします。WebGLについて知りたい方はこちらの内容を参考にしてみてください。

WebGLの対応ブラウザ

WebGLとは、Webブラウザで3次元グラフィックスを高速に描画する技術仕様の一つです。初版のWebGL 1.0と区別する場合には、WebGL 2.0と呼ばれることもあります。

またWebGLは、OpenGLというハードウェアの持つ3次元コンピュータグラフィックス関連の演算機能をソフトウェアから呼び出すための規約を定めたAPIの派生使用であり、Webページ内に記述されたスクリプトからコンピュータに搭載されたGPUやCPU内蔵グラフィックスの演算・描画機能を呼び出すことができます。

WebGLを活用することで、コンピュータ内部の専用の装置を直接呼び出してグラフィックス処理を高速化することが可能になります。

従来、Webサイト上で3Dグラフィックスを描画する技術といえば、Flash PlayerやUnity Web Playerが主流でした。それらの技術とWebGLとの大きな差異が、ブラウザのプラグインを導入しなくても動作するという点です。

WebGLは、Chrome・FireFox・Safariをはじめ、すべてのブラウザで動作可能です。ブラウザごとに表示揺れが発生せず、リッチデザインを環境に左右されない点は、メリットの一つであり、Web制作者の柔軟で幅広い制作を実現しています。

デバイスに依存せずスマートフォンでも利用可能

WebGLはブラウザだけでなくデバイスにも依存しません。WebGLはスマートフォンを含むモバイル端末でも利用することができます。

従来主流であったFlash PlayerやUnity Web Playerなどの描画技術では、特定のプラグインが必要だったため、スマートフォンで利用することができませんでした。

一方、モバイル端末でも利用可能なWebGLは、スマートフォンユーザーが増加した現代において注目を集めています。このような技術の革新により、Web制作者はより自由なスタイルで業務に取り組むことが可能となりました。

ただし、OSのバージョンやブラウザのバージョンによってはモバイル端末上で使用できない場合があるため、使用前の確認は必須です。

GPUを利用

GPUとは、コンピュータに搭載される半導体チップの一種で、画面表示や画像処理に特化した演算装置の一種です。特に、3次元グラフィックス描画や動画の圧縮・展開などに必要な演算を高速化する並列処理に優れています。

GPUはグラフィック描画に関連する機能を豊富に用意しており、3次元から2次元への座標値の変換や、立体表面に貼り付けられた画像パターン、立体表面に貼り付けられた画像パターンなどを高速で実行することができます。

WebGLはGPUで起動出来るコードを提供することで動きます。そのため、色や法線、テクスチャーの座標などの再現性が高く、美しい3次元グラフィックスを描画することが可能です。

また、GPUは処理能力が高く、CPUには処理負荷が大きい高解像度画像や3Dモデルの処理も実行できます。GPUを利用することで、WebGLは高度なグラフィックをブラウザ上で実現することができるのです。

WebGLで何ができるのか

次に、WebGLを利用してできることについて解説いたします。

Webサイト上にゲームコンテンツを設置

WebGLを利用することで、Webサイト上にゲームコンテンツを設置することができます。

UnityのようなIDE内蔵ゲームエンジンやThree.jsなどのJavaScriptライブラリで作成したゲームをWebGLで出力することで、作成したゲームをブラウザ上で動かすことが可能となります。

ただし、Unityで作成したコンテンツは、WebGLに出力してもスマートフォンの動作に対応しない場合があります。また、Three.jsはあくまでもライブラリなので、コンテンツを作成するための開発環境を自分で用意し、コードのみでレンダラーやライト等を設定する必要があるため、実装までの難易度は高くなります。

WebGLを利用してWebサイト上にゲームコンテンツを設置する際は、自分と相性の良いライブラリ・ゲームエンジンを探してみてください。

データや情報の可視化

WebGLではデータや情報の可視化を実現することが可能です。

検索エンジンのGoogleは、WebGLを活用し、Google検索で2変数関数を入力すると、3次元グラフを表示する機能を実装しました。

例えば「sqrt(x*x+y*y)+3*cos(sqrt(x*x+y*y))+5 from -20 to 20」と検索すると、検索トップには回転する3Dグラフが表示されます。グラフは拡大・縮小や数値の変更が可能です。

WebGLでは、HTML5のCanvasに3Dオブジェクトをレンダリングしたり、操作することができます。数値やデータでは分かりにくい情報も、3Dで直観的なビジュアルに再現することができるため、「年代ごとの人口推移」や「地震発生時のエネルギーの伝わり方」など、可視化の実現が困難なデータは、WebGLを用いてグラフ化することで、訴求性が高まります。

商品の3Dモデルを設置

3Dグラフを作成できることと同様に、WebGLを活用することで、3Dモデルを描画することができます。

WebGLで作成した3Dモデルは、アパレル・ファッション業界が運営するECサイトにて用いられます。3Dグラフィックスを使うことで商品の細部まで確認することが可能になり、ユーザーの購買意欲を高める結果になりました。

他にも、建築・不動産業界では、WebGLを用いて3Dグラフィックで物件を再現しています。それにより、ユーザーはブラウザ上で疑似的な内見を体験できるようになりました。3Dグラフィックであれば間取り図と比べて実物がイメージしやすく、ユーザーの満足度も高まります。

WebGLを用いることで、画像やテキストだけでは与えられない視覚情報を生み出すことが可能となります。WebGLという新たな技術の導入により、新規顧客の獲得や、顧客満足度の向上を実現しています。

リッチデザインの実装

リッチデザインとは、影やテクスチャをつけることで奥行きなどが感じられるディティールにこだわったデザインのことです。Webサイトでは、ボタンやアイコン、カーソルなどに実装されています。

WebGLを利用することで、リッチデザインを実装することができます。例えば、ユーザーのカーソルの動きに応じて動作するアニメーションなど、操作に応じたアニメーションを実装することができるため、双方向的なコミュニケーションが実現します。

WebGLを用いてリッチデザインを実装することで、ユーザーに洗練された印象を与えることも可能です。ブランドイメージの向上や、製品の宣伝にもWebGLの活用は有効です。

オススメなWebGLに関する3つの本

WebGLに関するおすすめの書籍をご紹介いたします。

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

まず紹介するのは、『初めてのThree.js 第2版』です。こちらの書籍では、JavaScriptの3Dライブラリの1つであるThree.jsについて解説されています。

Three.jsは3Dコンテンツ作成に特化しており、オープンソースで商用でも無償で利用出来るためWebGLのライブラリの中でも特に人気の高いものとなっています。

そんなThree.jsに関する本書では、実用的なサンプルを例示しながら、Three.jsによるウェブ3Dコンテンツ作成のすべての側面を解説しています。初中級のWeb開発者を対象に、光源や影、マテリアル、ジオメトリ、パーティクルなど3Dシーンの作成に必須の基本的な内容から、カスタムシェーダーや物理エンジン、立体音響の利用といった応用的な内容まで説明されています。

巻末付録には、モバイルVRアプリの開発と、MikuMikuDanceモデルデータをブラウザ上で扱う方法について収録されています。WebGLを用いた3Dコンテンツ作成を始めようと考えているWeb制作者の方におすすめの1冊です。

出版社	オライリージャパン
著者	Jos Dirksen
発売日	2016/7/23

初めてのWebGL 2 第2版 ―JavaScriptで開発するリアルタイム3Dアプリケーション

『初めてのWebGL 2 第2版 ―JavaScriptで開発するリアルタイム3Dアプリケーション』は、WebGL 2.0のプログラミングに関する入門書です。

本書では、自動車の3Dモデルビューアーを例に、インタラクティブな3DCGを使用するウェブアプリケーションの開発方法について解説しています。初中級のWebプログラマーを対象としており、読解にはJavaScriptの基礎知識が必要です。

ベクトル演算や行列演算にはライブラリを使用するので、具体的な計算処理を意識することなくWebGL 2.0について学ぶことができます。WebGL 2.0を用いたグラフィック開発を実践してみたいとお考えの方には、こちらの書籍がおすすめです。

出版社	オライリージャパン
著者	Farhad Ghayour、Diego Cantor
発売日	2021/7/21

英書：WebGL: Up and Running: Building 3D Graphics for the Web (English Edition)

『WebGL: Up and Running: Building 3D Graphics for the Web (English Edition) 』では、新たな3次元グラフィックスの主流となるWebGLの概要について解説しています。

JavaScriptの3DライブラリであるThree.jsを用いて、WebGL の開発と制作における重要なポイントについて学ぶことができます。読了後にはWebGLを使用して3Dアプリケーションを作成できる知識を身につけることが可能となります。

本書は全編英語表記となっているため、ご購入の際には注意が必要です。Three.jsを使用したグラフィック作成に挑戦したい方は、ぜひこちらの書籍を参考にしてみてください。

出版社	O’Reilly Media, Inc.
著者	Tony Parisi
発売日	2012/9/4

WebGL関連の本を選ぶときのポイントとは

WebGL関連の本を選ぶときのポイントを解説いたします。

ポイント① 理論がきちんとまとまっているものも選ぶ

WebGLの書籍の多くは初中級のWeb技術者を対象に制作されています。中には、内容にまとまりがなく、WebGLにまつわる様々な技術について淡々と解説する書籍も発売されているため、3次元グラフィックスについて1から学びたいと考えている人とは相性が悪い場合もあります。

WebGLの関連書籍を購入する際は、自身のレベルに合わせて内容をきちんと確認することが大切です。概要からグラフィックの作成方法までの流れを知りたい場合は、WebGLに関する理論がまとめられている書籍を選ぶと良いでしょう。

ポイント② アウトプットまでできる本を選ぶ

WebGLの関連書籍の中には、参考書のように読み進めながら実際に3Dグラフィック作成に挑戦できる内容のものもあります。現場で活用できる技術を身につけるためには、積極的にアウトプットしていくことが大切です。

3Dグラフィック作成の概要から光源やマテリアル、ジオメトリ、テクスチャなどのデザインの実装方法について順を追って詳しく解説されているものがおすすめです。

また、アウトプットを前提に書籍を購入する際は、発売日を確認することも大切です。IT業界は情報の刷新が頻繁に起こります。1年前の定番が現在は古いという状況も珍しくありません。実践で活用できる技術を身につけたい方は、ぜひ発売日が新しい書籍を手にしてみてください。

ポイント③ 自分に合うかを確認してから購入する

3次元グラフィックスを取り扱うWebGLは、Webデザインに関する様々な技術の中でも難易度が高いと言われています。そのため関連書籍のターゲットも初中級のWeb技術者に設定している場合が多いです。それらの書籍は、3次元グラフィックスの作成方法について1から学ぼうと考えている人には、理解しにくい内容であると考えられます。

また、WebGLには全編英語表記の関連書籍も多く、事前に内容を把握しておかなければ、求めている情報を獲得できない場合もあります。

WebGLの関連書籍を購入する際は、書籍の難易度や内容が自分に合っているかどうかを事前に確認することが大切です。