初めての Three.js 第 2 版

Three.js によるウェブ 3D コンテンツ作成のすべてをわかりやすく解説!
JavaScript 3D ライブラリ Three.js の解説書。実用的なサンプルを例示しながら、Three.js によるウェブ 3D コンテンツ作成のすべての側面を解説します。対象読者は、初中級のウェブ開発者。JavaScript と HTML の基礎知識があれば数学や WebGL に詳しくなくてもかまいません。本書では、光源や影、マテリアル、ジオメトリ、パーティクルなど 3D シーンの作成に必須の基本的な内容から、カスタムシェーダーや物理エンジン、立体音響の利用といった応用的な内容までをわかりやすく丁寧に解説します。日本語版では、モバイル VR アプリの開発と、MikuMikuDance モデルデータをブラウザ上で扱う方法についての解説を巻末付録として収録しました。

『初めての Three.js 第 2 版』 (Jos Dirksen 著、あんどう やすし 訳、オライリー・ジャパン、2016 年 7 月刊) は、ブラウザーで 3D を描く JavaScript ライブラリ Three.js を、実用的なサンプルを動かしながら一通り学ぶ解説書です。副題は「WebGL のための JavaScript 3D ライブラリ」、原書は Learning Three.js, 2nd Edition です。版元は対象読者を初中級のウェブ開発者とし、JavaScript と HTML の基礎知識があれば数学や WebGL に詳しくなくてもかまわないと明記しています。Web ページの中に動く 3D シーンを置きたい開発者が、最初に全体像をつかむための一冊です。

全 12 章と付録 2 本、最初のシーンから物理演算と立体音響まで

構成は訳者まえがきとまえがきに続く全 12 章で、1 章「初めての 3D シーン作成」で HTML のスケルトンからオブジェクトの表示、マテリアルとライトと影の追加、requestAnimationFrame によるアニメーションまでを一度に通します。2 章でシーンの基本要素とタイプの異なる 2 つのカメラを押さえたあと、3 章の光源、4 章のマテリアル、5 章のジオメトリと、3D シーンを構成する部品を 1 つずつ掘り下げていきます。6 章は高度なジオメトリとブーリアン演算、7 章はパーティクル、スプライト、ポイントクラウド、8 章は高度なメッシュとジオメトリで、8 章には Blender の利用や 3D ファイルフォーマットからのインポートの節もあります。後半は 9 章のアニメーションとカメラの移動、10 章のテクスチャ、11 章のカスタムシェーダーとポストプロセス、12 章の物理演算と立体音響と、応用的な題材へ進みます。巻末には日本語版の付録として、付録 A の Google Cardboard を使用したモバイル VR と、付録 B の THREE.MMDLoader による 3D モデルの制御が収録されています。

WebGL を直接書かずに済ませる道具としての Three.js

WebGL はブラウザーから GPU を使って描画するための API ですが、そのまま使うと、頂点データのバッファー転送やシェーダーのコンパイル、座標変換の行列計算まで自分で書くことになり、画面に立方体を 1 つ出すまでの手数が多くなります。Three.js はこの層を包み、シーンにメッシュやライトを置き、カメラから見た像をレンダラーで描くという、3D ソフトに近い考え方でコードを組めるようにします。本書の章立ても、シーン、カメラ、光源、マテリアル、ジオメトリという部品の単位で並んでいて、部品の性質と組み合わせ方を順に覚えていく形と読めます。11 章で扱うカスタムシェーダーとポストプロセスは、こうした包みの内側にある GPU の処理へ踏み込む箇所で、ライブラリの既定の見た目から一歩出たい時に効いてきます。前提となる JavaScript の文法に不安があるなら、JavaScript と TypeScript の本の選び方 を参考に入門書を先に一冊通しておくと進みが速くなります。

2016 年刊のコードを読むときに押さえておく点

本書は 2016 年 7 月の刊行で、サンプルもその時点の Three.js を前提にしています。Three.js は開発が続いているライブラリで、たとえば公式のリリース記録では、2021 年 2 月公開の r125 で Geometry クラスがコアから外されたことが記されています。このため、手元の版でサンプルを動かすと書き方の違いに出会う箇所があり得るので、公式の移行ガイドと照らし合わせながら読む前提で臨むと戸惑いが減ります。逆に、シーングラフの組み立て方や、光源とマテリアルの組み合わせで見た目が決まる仕組みといった考え方は、版の差に左右されにくい部分です。

ブラウザー上の製品紹介やデータの立体表示、ちょっとした 3D の演出を自分の手で作りたいウェブ開発者にとって、部品ごとに試せるサンプルで全体を一巡できる本書は、学ぶ範囲の地図として役に立ちます。Web 開発の分野でほかの技術書と組み合わせて学習の順序を組みたい場合は、Web 開発本の選び方 も併せて眺めておくと、どこにこの本を置くかを決めやすくなります。