先日発売された WebGL の解説書「実践プログラミングWebGL」を翔泳社さんから献本いただいたので、本日はそれをレビューします。

本書は洋書「Professional WebGL Programming」を邦訳したもので、 WebGL 自体の解説はもちろん、ベースとなる GPU アーキテクチャ、座標変換などの数学、キー入力やマウス入力などの周辺 API 、パフォーマンス改善の勘所など、 Web ブラウザ上で 3D アプリケーションを開発するのに必要な知識を一冊に集約した、優れた入門書となっています。

日本語の WebGL 解説書は既にいくつか出版されていますが、本書はそれらの中でも最も中身の濃いものになっていると思います。値段も比較的リーズナブルなので、 Web 上でのグラフィック技術に興味のある方は要チェックの一冊です。

概要

まずは各章の内容を簡単にご紹介します。

1章 WebGL の紹介

WebGL のベースとなっているアーキテクチャ、他のグラフィック API との比較、そして基礎的な 3D 数学が解説されています。さすがに少し駆け足な印象は否めませんが、解説はわかりやすく書かれていると思います。とくに他のグラフィック API として Canvas や SVG はもちろん OpenGL や Direct3D、 VRML などが簡単なコード例とともに紹介されていて、豆知識としても面白い内容になっています。

2章 基礎的な WebGL サンプルの作成

三角形を表示するだけのサンプルを使って、 WebGL プログラミングのオーバービューを解説しています。とくに興味深いのはデバッグ方法の解説の部分で、 Chrome Developer Tools や WebGL Inspector の使い方、 WebGL のエラーハンドリングの方法などがかなり詳しく解説されています。こうした見過ごされがちな知識をきちんと解説してるあたり、この筆者さんはわかってますね :)

3章 描画

ここから本格的な WebGL API の解説が始まります。本章では WebGL による図形描画の中心となる drawArrays(), drawElements() と周辺の API についての解説です。基本的には必要な知識を淡々と説明しているのですが、縮退ポリゴンによるストリップの接続や GPU の頂点キャッシュなどのマニアックな（しかし重要な）知識も散りばめられていて、何気に読み応えがあります。

4章 コンパクトな JavaScript ライブラリと変換処理

ベクトル・行列計算ライブラリとして Sylvester, WebGL-mjs, glMatrix を紹介し、 glMatrix をベースに座標変換の基礎知識を解説しています。ベクトル・行列計算に慣れていない人は、 1 章の解説を参照しながら読み進めるとよいかも。ちなみに、ベクトル・行列演算ライブラリとしては Closure Library の vec モジュールもオススメ。 Closure Compiler の ADVANCED_OPTIMIZATIONS と組み合わせればパフォーマンスは最強です。

5章 テクスチャリング

WebGL でテクスチャを扱う方法を解説しています。環境マップや法線マップといった特殊なテクニックへの言及がまったくないのは残念ですが、それだけに基礎的な知識が網羅されています。とくにコンテキスト・ロストへの対処方法やクロスオリジンポリシーと CORS について詳しく解説があるのが素晴らしいです。

6章 アニメーションとユーザー入力

requestAnimationFrame() でアニメーションを実装する方法や、 DOM イベントによるキー入力・マウス入力のハンドリングが解説されています。一見 WebGL とは関係ない内容に思えますが、 WebGL アプリケーションはカーソルキーなどでキャラクターを制御することが多かったり、マウスクリックも座標から直接クリックされたオブジェクトなどを算出しなければいけなかったりして、通常の Web アプリとは少し違ったイベントハンドリングが必要になります。そうした理由から、独立した章を設けて解説しているのでしょう。

7章 ライティング

ライティング計算の基礎知識と、それを WebGL に適用する方法が詳しく解説されています。とくにライティング計算は基本的な Phong モデルに限定する代わりに CG 理論の解説書並みに詳しく、かつわかりやすく解説されています。

8章 WebGL の性能最適化

WebGL のパフォーマンス測定の方法、最適化の方法、そしてアルファブレンディングについて解説されています。とくに最適化については、ボトルネックになるパターンごとに、どのような最適化が効果的かを解説していて、参考になるかと思います。

全体的に派手な内容ではありませんが、 WebGL を正しく活用する上で必須の知識がきちんと盛り込まれています。本書の内容をひと通り把握しておけば、他の書籍や Web 上の記事などで応用的な技術を学ぶことができるでしょう。

ただ、 WebGL を活用する上で必須となるシェーダー言語 (GLSL) について包括的な説明がないのが気になりました。各章で散発的に解説されてはいるのですが、ちょっと唐突すぎるように思います。これについては、別途解説書を用意するほうが良いかと思います。また、 @IT での私の連載でも近々 GLSL を取り上げる予定なので、よろしければそちらもどうぞ :)

Three.js を骨の髄まで活用したい方にオススメ

最近では WebGL をベースにしたライブラリが多数開発されています。なかでも Three.js はインターフェースの使いやすさから急速に普及しており、多数のプロジェクトで採用されています。これから WebGL を使い始めようという方も、おそらくほとんど Three.js から入るのではないでしょうか。

しかし、たとえ Three.js を使う場合でも、 WebGL 自体を知らずに目的を達成することは難しいでしょう。とくにデバッグ時には Three.js の内部まで分け入って調査する場面が多々ありますし、必要な表現を実現するために Three.js を拡張することもあるでしょう。 Three.js を使ったアプリケーション開発にも、本書で学習した知識は大いに役に立つはずです。

とくに 2 章で解説されているデバッグ手法や 6 章のイベントハンドリングの知識、 8 章のパフォーマンス改善手法などは Three.js を使っている場合でも同じように適用できます。他の章で解説されている内容も、 Three.js の内部処理を理解するためには必須の知識ばかりです。 Three.js の使い方を概ね把握して、これから本格的なアプリケーションを作ってみようという方は、ぜひ本書を通読してみることをお勧めします。その後の開発が数段有意義なものになることは間違いありません。

あわせて読みたい

本書は WebGL の知識をかなり包括的に解説していますが、前述のシェーダープログラミングについてなど、いくつか抜け落ちているものもあります。そうした知識を補うのにお勧めできる書籍をご紹介しておきます。

OpenGL+GLSLによる3D‐CGアニメーション

GLSL についての知識を補うのにお勧めなのが本書です。 WebGL ではなくデスクトップの OpenGL についての書籍ですが、 GLSL に関する部分はほとんど適用できます。 GLSL の基本文法だけでなく、環境マッピングやバンプマップ系の各種テクニックなど実用的なアルゴリズムをもとに GLSL を解説しているのが特徴で、 WebGL の表現力を確認しつつ、楽しみながら技術が学べるでしょう。

本書に限らず、工学社のこのシリーズは高度な知識を平易に解説しているものが多いので、興味のある方は調べてみると良いかと思います。

実例で学ぶゲーム3D数学

ベクトルや行列計算をはじめとした 3D グラフィックに必要な数学的知識を身につけるのに最適な書籍です。見ての通り、お馴染みのオライリー本です（笑）。

書名どおり数学的な解説が中心で、一部の章を除いて具体的なプログラミングの話はあまりありません。それだけに内容はとても充実していて、 3D グラフィックに関する線形代数の知識としては、この一冊を読んでおけばプロのゲームプログラマとしてもじゅうぶん通用します。本格的な 3D プログラミングを目指している方は、買って損のない一冊です。

以上、本日は WebGL の解説書「実践プログラミングWebGL」をご紹介しました。これまで WebGL は日本語の情報が少なくてなかなか手が出しづらい状況でしたが、こうした優れた入門書が出版されることで、 WebGL を使ってみようという方が増えてくるといいなと思っています。