[WebGL書評]実践プログラミングWebGL

doxas : 2014-11-06 13:11:05

さらに上を目指す中級者以上向けの本格技術書

翔泳社から出版されている本格的な WebGL の技術書である「実践プログラミングWebGL」

大型本で価格もけして安くはありませんが、一歩上を目指す中級者以上の WebGL 開発者にとってかなり強力な一冊になるのではと思います。ただし、逆に初心者向けという感じではないのでその点は注意が必要です。

全八章からなる本書。

以下から章ごとに解説も踏まえつつ見ていきたいと思います。

色褪せない技術を幅広く紹介している良書

WebGL の紹介

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

描画

コンパクトな Javascript ライブラリと変換処理

テクスチャリング

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

ライティング（照明）

WebGL の性能を最適化する

全八章を順番に読み進めていくスタイルになっていて最初から最後まで割とみっちり書かれています。本書前書きにも書かれていますが、あくまでも HTML や CSS、javascript に関する基礎的な知識を持っている前提で書かれているので、まったくそれらの経験がない人がいきなり読むのは若干苦しいかなと思います。

全体的に、コードの掲載よりも概念や仕組みの解説がメインとなっていて、コードをコピーペーストしてとりあえず動かしたいというタイプの人にはあまりお勧めできません。どちらかというと、深く 3D プログラミングや WebGL について知識を蓄えたいという人向けの書籍になっていると思います。

図解されている場所も多くあり、読みやすいように工夫されてはいますが、割と硬派な仕上がりになっています。

第一章：WebGL の紹介

個人的にはこの本の中で最初にして且つ最大の読みごたえを持つのが第一章です。

章題は軽く「WebGL の紹介」と謳っていますが、もう全然そんな気軽な感じではないです(笑)

恐らく「WebGL ってどんな感じなんだろう？」みたいな感覚で 3D プログラミング初学者がこの書籍を読み始めてしまうと、この第一章を読み終えた時点で「3D ヤバい……やっぱり無理だ」になってしまうと思います。

第一章では、OpenGL などの起源や歴史を振り返ったり、WebGL のレンダリングパイプラインの話に触れたりしつつ、最終的にはベクトルや行列といった数学の話まで出てきます。

これだけ盛りだくさんだと、初心者はまず最初で躓くこと必須のようにも思います。しかし、逆にある程度 3D をかじっていたり、3D プログラミングの経験はあるけどなんとなくぼんやりとしか理解していない、といった中級者の人にとってはかなり有益な内容になっていると思います。

正直なところ、レンダリングパイプラインの話なんかは完全に理解していなくてもプログラムは書けます。ある程度動くものを作れるようになってから読み返すのが、実はこの章との正しい向き合い方なのかもしれません。

第二章：基礎的なWebGLサンプルの作成

第二章では、WebGL によるプログラミングの基本的な構成を学習できます。ひとつひとつ丁寧に手順が解説されているので、順番に読み進めていくと理解が深まると思います。

この章で特筆すべきは、WebGL に限らず言えることかもしれませんが、ブラウザで javascript や WebGL のプログラムをデバッグする方法について言及している点だと思います。

Chrome の開発者ツールの使い方などが細かく解説されていて、プログラムを書いていくうえで絶対に欠かせないデバッグの基礎を身に着けることができると思います。

第三章：描画

レンダリングに関連する部分に細かく言及しているのが第三章。

この章では、WebGL によってレンダリングできるプリミティブ形状、つまり点や線、ポリゴンといったものをどのように使い分けたらいいのかなどに触れています。

また、効率よく頂点データを扱うための TIPS や javascript の型付き配列などについても言及されています。

普通にレンダリングができたことの次の段階として、いかに効率化やメモリ管理を行っていけばいいのか、それなりに踏み込んだ知識を得られると思います。

このあたりからはコードの掲載も増えてきますが、それなりにコメントも書かれているのでわかりやすいのではないでしょうか。

第四章：コンパクトな Javascript ライブラリと変換処理

この章では 3D プログラミングには欠かすことのできない行列処理についての解説がメインとなります。

冒頭にはオープンソースで比較的有名な、行列処理をサポートするライブラリが紹介されています。またそれらを利用しつつ、実際に座標変換を行う手順が解説されているので参考になるでしょう。

行列を用いた座標変換には様々な種類のものがありますが、それぞれがどのような意味合いを持つのか、この章を読破すればある程度理解できるようになっていると思います。非常にわかりにくい部分でもあると思いますので、忘れたらまた読み返せばいいくらいの感じで、気軽に読み進めるといいかもしれませんね。

第五章：テクスチャリング

第五章はそのタイトル通り、テクスチャを扱うための情報が網羅されています。

テクスチャを利用した描画の方法から、テクスチャパラメータやテクスチャのラッピングモード、さらにはクロスオリジンの制約などについても言及されていて、かなり詳細にテクスチャについて理解することができると思います。

テクスチャのパラメータ関係はなかなか紛らわしいものが多いので、書籍で詳細に解説されているものが手元にあると、なにかと便利かもしれませんね。

第六章：アニメーションとユーザー入力

WebGL のプログラムは、そのインタラクティブ性の高さが大きな売りになることが多いです。動的に、またダイナミックにコンテンツを生成して配信できること――これこそが WebGL の強力な長所のひとつでもあります。

本章では、アニメーションやユーザーのアクションの扱い方などを通して、動的に美しくレンダリング結果をコントロールする方法について言及されています。

注目すべきは、各ブラウザごとにイベントの扱い方が異なっている点や、あるいはアニメーション処理を行う上で setTimeout や setInterval よりも requestAnimationFrame を使うべき理由など、それなりに踏み込んだ内容までを扱っているところでしょう。

それぞれにどんな違いがあるのか、またそれを知ったうえで何を採用すべきなのか、詳細に理解できるでしょう。

第七章：ライティング（照明）

3D プログラミングに欠かせないライティングに関する内容を扱うのが第七章です。

WebGL に限りませんが、3D プログラミングにおけるライティング処理は、品質を向上するうえで避けては通れない大事なポイントになります。

光源(ライト)の種類についてや、陰影付けのための補間処理の方法など、基本的なことは全てカバーしていると思います。

ライティングの有無は本当に見た目に大きな影響を与える部分ですので、この章をしっかり読んで理解しておきたいところですね。

第八章：WebGL の性能を最適化する

最終章となる第八章では、最適化についてかなり深くまで詳細に触れられています。

正直、私レベルではなかなかここまで自力で調査・実験できないので非常に参考になりました。

ハードウェアレベルで WebGL のプログラムがどう動いているのかを知り、またそこからどうやってボトルネックとなっている部分を見つけ最適化していけばいいのかを理解する。非常に濃い内容になっているので一度でなかなか理解しきれない部分もありますが、それだけ価値のある情報だとも思います。

総括

冒頭にも書いた通り、本書はけして初心者向けという内容ではないと思います。

しかし、ある程度 WebGL や 3D プログラミングを理解してきた段階で、次に習得すべき深い知識を身につけさせてくれる良書だと思います。

個人的には、WebGL を全く知らない状態でこの本を読むことはあまりお勧めしません。ただ、本気で WebGL と向き合うなら、この本はかなり助けになると思います。特に、最適化やデバッグの方法、ハードウェア寄りの部分でどのようなことが起こっているのかなど、ほかではなかなか目にすることのできない有益な情報がたくさん詰め込まれています。

この記事を書いている 2014 年 11 月現在から、二年ほど前に初版が出版された本ですがほとんど色褪せる部分が見つからないくらい完成度が高いです。さすがに、Chrome の開発者ツールなどは外観がちょっと違ってしまったりしていますが、そんなことは些細な問題。

それよりも、基本的な WebGL や数学、ハードウェアの知識が得られる本書は非常に有益な一冊だと言えると思います。

wgld.org のテキストを中盤ぐらいまで読み進めている方なら、間違いなくこの本を手に取って更なるレベルアップを図ることができると思います。

※以下のリンクから Amazon で書籍を購入していただきますと、当サイトに売り上げの一部が還元されます。