PR：この記事にはアフィリエイトリンクが含まれます。
WebGLの本を探すと、JavaScriptでブラウザーに3Dを描く入門書もあれば、GLSLやレンダリング設計を掘り下げる専門書もあります。題名が似ていても、学べる層はかなり違うんですよね。
紹介するのは、WebGL APIを直接扱う入門書、Three.jsで3Dシーンを作る本、英語の教科書、実装事例を集めた論稿集です。APIの実装からCG全般、実際の設計例まで、一冊ごとに学習範囲が変わります。
本の早見表
WebGL本は、APIの基礎、ライブラリを使った制作、CG全般の学習、実装事例の参照と、役割が分かれています。下の表に各書の主題と読者像をまとめました。
| 書名 | 学べる中心 | 向いている読者 |
|---|---|---|
 初めてのWebGL 2（第2版） | WebGL 2 API、シェーダー、3Dビューアー | JavaScriptの基礎がある初中級者 |
 初めてのThree.js（第2版） | 3Dシーン、光、素材、アニメーション | ライブラリで形にしたい初中級者 |
 Interactive Computer Graphics with WebGL, Global Edition | WebGLとCG理論、演習 | 英語で学べる学生や実務者 |
 WebGL Insights 日本語版 | 実装、エンジン、描画、可視化の事例 | 中上級者 |
日本語で基礎から読み進めるなら、「初めてのWebGL 2」と「初めてのThree.js」が候補です。APIの仕組みを追う本と、シーンを組み立てる本。ここが大きな分かれ目です。
発行年と言語も確認したいところです。英語の教科書はCG全体の学習に、論稿集は実装経験を広げる読書に使えます。価格は希望小売価格を目安として記しますが、実売価格は販売店や時期によって変わります。
WebGLの基本
WebGLは、ブラウザーのcanvasからGPU描画を扱うJavaScript APIです。画像表示に加えて、頂点データとシェーダーを渡し、画面のピクセルをどう描くか指定します。ブラウザーで3Dを描く仕組みの中心ですね。
立体が画面に出るまでには、モデルの頂点、座標変換、光の計算、テクスチャの貼り付けなど、いくつもの工程がつながっています。立方体ひとつでも、形状データから画面の色へ至る道筋があるわけです。
描画の流れを知っておくと、表示が崩れた際も原因を特定しやすくなります。座標かカメラかライトか、それともシェーダーか。仕組みが分かれば、手当たり次第にコードを直す時間を減らせます。
JSとGLSL
JavaScriptがブラウザー画面や入力操作、描画データの準備をまとめ、WebGL APIを呼んで頂点配列やテクスチャをGPUへ渡します。アニメーションでは、フレームごとの描画更新も担当します。
GPU側で動くシェーダーを書く言語がGLSLです。頂点シェーダーは頂点の位置などを処理し、フラグメントシェーダーは画面上の点ごとの色を決めます。二つの役割を押さえると、コードの見通しがよくなります。
本によって、JavaScriptとGLSLを扱う深さは異なります。Three.jsなら複雑な描画準備をまとめて、短いJavaScriptからシーンを作れます。APIの動作まで追いたい人には、WebGLを直接扱う本がおすすめです。
初めてのWebGL 2
「初めてのWebGL 2（第2版）」は、Farhad GhayourとDiego Cantorの著書をあんどうやすしが訳した日本語書籍です。2021年刊、440ページで、JavaScriptの基礎を身につけた初中級者を対象としています。
WebGL 2 APIを直接扱い、ESSLや頂点・フラグメントシェーダー、照明とシェーディングを学びます。頂点・インデックスバッファ、属性、ユニフォーム、フレームバッファ、テクスチャも登場し、描画パイプラインの各要素を順にたどれる構成です。
正方形や3Dモデルを描いた後は、自動車の3Dショールームを作る実装例へ進みます。各章に「やってみよう」「腕試し」の課題があり、読んだ内容をコードで試せます。手を動かして仕組みをつかみたい人に合う内容です。
参考価格は税込4,400円で、公式の希望小売価格です。実売価格は販売店や時期によって変わります。WebGL 2 APIとシェーダーを自分で組み、描画の仕組みまで学びたい人におすすめします。
Three.jsで作る
「初めてのThree.js（第2版）」は、Jos Dirksenの著書をあんどうやすしが訳した本です。2016年刊、416ページ。JavaScriptとHTMLの基礎があれば読み進めやすく、Three.jsを使った3D制作を主題にしています。
シーン、光源、影、マテリアル、ジオメトリ、パーティクル、アニメーション、カメラ、テクスチャを扱います。ブラウザー3Dでよく使う題材をひと通り学べる内容です。部品を組み合わせて画面にどう見せるか試したい人には、心強い一冊でしょう。
さらに、カスタムシェーダーやポストプロセス、物理エンジン、立体音響、モバイルVR、MikuMikuDanceモデルの利用も取り上げます。作品を形にしてからGLSLや表現の幅を広げたい人にも役立ちます。
参考価格は税込4,400円。実売価格は販売店や時期によって変動します。WebGL APIの仕組みを低い層から学ぶ用途より、Three.jsで3Dシーンを作る経験を重ねたい人におすすめです。
英語の教科書
「Interactive Computer Graphics with WebGL, Global Edition」は、Edward AngelとDave Shreinerによる第7版です。2014年刊の英語書籍で、752ページ。コンピューターサイエンスや工学系の学生、プログラミング経験のある読者を対象にしています。
WebGL API、状態機械、座標系、ポリゴン描画を取り上げ、頂点・フラグメントシェーダーやプログラマブルパイプラインも解説します。テクスチャ、合成、レンダー・トゥ・テクスチャまで、CGの広い範囲を見渡せる構成です。
JavaScriptのコードと章ごとの演習を収録しています。早い段階で3Dを作り、後半は低レベルのアルゴリズムへ進みます。CGの考え方を体系的に学びたい人や、授業の副読本を探す人に合う内容です。
2014年刊のため、WebGL 2固有機能を学ぶ用途では補助的な位置づけです。本文は英語。英語の技術書を読みながらCGとWebGLを広く学びたい人におすすめできます。
Insightsで深める
「WebGL Insights 日本語版」は、Patrick Cozzi編の論稿集をあんどうやすしが訳した書籍です。2018年刊、480ページ。実装詳細、テスト環境、エンジン設計、レンダリング、可視化、インタラクションなどを7部23章で扱います。
専門家による個別の事例から、設計の考え方に触れる構成です。WebGLの実装やモバイル、エンジン開発の課題を幅広い視点で読めます。基礎APIを学んだ後に読むと、実例とのつながりが見えてきます。
GLSL向けのモジュールシステムやシェーダー生成パイプラインを扱う章も収録しています。JavaScriptの実装例のほか、PythonからJavaScriptへつなぐデータ可視化の事例もあります。描画の周辺技術まで知りたい人におすすめです。
参考価格は税込6,160円で、実売価格は時期や販売店によって変わります。実運用や設計の発想を深めたい中上級者向けの一冊です。WebGL 2の入門には、別の本を選ぶとよいでしょう。
結論
JavaScriptの基礎があり、GPU描画の流れも知りたいなら、「初めてのWebGL 2（第2版）」を一冊目に選んでください。WebGL APIを直接扱うので、GLSLのコードを読むときにも処理の位置づけが見えてきます。
まず作品を作る楽しさを優先するなら、「初めてのThree.js（第2版）」が有力です。英語でCG全体を体系的に学ぶなら教科書、実装経験をもとに設計例を知りたいならInsightsが合います。
WebGL本の価値は、画面に3Dを出す方法だけでなく、頂点データから画素が生まれる道筋まで学べることです。今の関心に合う本から始め、必要な知識を次の一冊で補うと、学ぶ範囲を広げやすくなります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
