#[レビュー]【技術本】初めてのThree.js：自分が買ってよかった商品レビュー

site_review: 2021-12-08 07:57:08.512954

【技術本】初めてのThree.js

https://amzn.to/46ba9CR

【技術本】初めてのThree.js

x post へポスト
Webアプリ(ブラウザ)ベースの3D技術のThree.jsの入門書。
下記のことが学べる。

・3Dオブジェクトの生成(単純なジオメトリから複数をブーリアン値で結合して新しい形状を作るまで)
・3Dオブジェクトの質感設定（光沢、くすみ、独自のシェーダー設定まで）
・光源設定（スポットライト、太陽光、レンズフレアなど）
・パーティクル（粒子）の表現
・カメラ（FPS視点操作、フライトシミュレータ調など各種）
・アニメーション
　->Tweenによる滑らかな物体の移動
　->モーフィング：特定座標から、別の座標へオブジェクトの形状を変化 -> 例：顔の表情の変化
　->スケルタルアニメーション：ボーンを定義して骨格の動きを再現
・テクスチャ
　->バンプマップや法線マップを利用した奥行きのあるテクスチャ
　->環境マップを使用した擬似反射
　->UVマップ：特定のテクスチャをどの部分に対応するか指定
　->canvas要素やvideo要素をテクスチャとして使用
・ポストプロセッシング：レンダリング後のレタッチのようなもの
・物理演算ライブラリの利用
・立体音響の実装
・各種3Dツール(blender)などの連携(モデルデータ、アニメーションデータ読み込み、書き出し)
・VR(スマホ、本格VR HMD(ヘッドマウントディスプレイ )対応)コンテンツの作成
・MMDデータの読み込み

推奨環境：git

内容は、ほぼThree.jsのAPIや各種プロパティの手引書であると言える。
簡易的なシーンにオブジェクトを追加し、実装や各種プロパティなどを追加したり変更して様々なAPIを網羅していく流れ。
APIインタフェース自体も近年成熟してきた3Dエンジンの流れを組んでるもので、他のエンジン等経験のある人は補正が効いてすぐに対応できると思われる。
逆に3D関連の知識技術に初心者の人は前提として必要となる覚える要素が多く大変かもしれないが、そこは踏ん張っていただきたい。記載されている説明どおり高度な数学やWebGLの知識は不要だが3D処理に関する様式は頭に入れる必要はある。
平面に3Dオブジェクトを乗せただけの3Dシーンは第一章ですぐに作れる。
その後、ライティングや質感、テクスチャ、複雑なジオメトリ、アニメーション、カメラなどを学ぶことで、自分なりにこだわったモデル、シーンを作れるようになる。
物理演算ライブラリを使用したデモも作成できるので、よりダイナミックなコンテンツやゲームなどにも応用できる。
Blenderなどフリーツールや各種フォーマットの3Dモデリングデータやアニメーションデータとの連携も記載されているので、より高度で実践的な素材を利用することも可能。
日本語版の特典としてVRに関する技術の紹介にも言及してくれている。スマホなどで位置や傾きを検知して利用できるコンテンツを作成できる。

以上の事から、一通りWeb(スマホ・VR含む)を視野に入れた3Dコンテンツを作成する基盤を整えることができる著作だと感じた。
ただ、本格的なゲームを構築する場合は更に別途ゲームエンジンを利用したり実装するなどの知識や考察が必要であり本書ではそこまで言及していない。
モダンブラウザで、プラグインなしで動く3Dコンテンツを作ることに興味がある初心者に価値が出てくる著作だと感じた。

注意事項：
・実装コードを紹介し徐々に実装追加などの作業をして進めていくスタンスだが、全文コードが載っているわけでないので、著者がwebに用意したソースコードをダウンロードして参考にするなり部分的に利用するなりして実践していくほうが良い。
・ソースを正常に実行するために、Webサーバにデプロイが必要なため、ローカルでWebサーバを立ち上げて作業するのが基本。
・一部：サンプルで、一部three.jsのgithubのリポジトリからライブラリを入手する必要のあるものがある。
　都度、ソースやブラウザのデベロッパーツールのエラーなどをみて判断する。

記載されている内容の補足メモは下記の様です。

------------------------------------------------
1章　初めての3Dシーン作成
環境作成後、three.jsによる初めての3Dシーンを作成する。

・環境作成
　->サンプルコードの入手
　->localでWebサーバの起動手順
　(Node.js http-server, python SimpleHTTPServerなどで紹介)
・プリミティブ型のオブジェクトの配置
・ワイヤーフレーム表示
・マテリアル表示、ライト、影の追加
・アニメーション処理(requestAnimationFrame関数)
　->球体の擬似投射運動など
・dat.GUIライブラリによる変数値のGUI経由での操作
・ブラウザがリサイズされた時の再描画テクニック

------------------------------------------------
2章　シーンの基本要素

・シーングラフはノードを木構造で保持
・シーンで追加できるオブジェクトは全て子要素を持つことができる
・オブジェクトのnameプロパティ：オブジェクトに直接アクセスするキーなどにも利用
・traverse関数でシーンに追加された全ての子要素を再帰的に精査
・シーンにフォグ（霧）の追加
・overrideMaterialで全てのシーンオブジェクトを同一の属性に
・標準的なジオメトリ（プリミティブオブジェクト）の紹介
・頂点、面構成をプログラミングしてジオメトリを構築する方法
・基本的にメッシュのジオメトリが生存期間中は変更されないことを仮定
　->変更には座標等変更後にcomputeFaceNormalsなどで通知が必要
・clone関数でオブジェクトのクローン作成
・２つのカメラの紹介
　->透視投影カメラ：線遠近法による自然な見た目
　->平行投影カメラ：遠方まで同じサイズ＝シムシティ系のクォータービューなどに利用

------------------------------------------------
3章　光源

WebGL自体にライトのサポートは組み込まれていない
　->Three.jsが用意したもの以外を使う場合はゼロからの実装が必要
　※ただし参考ドキュメントあり

以下、各種ライトの特徴と、各種プロパティを紹介

基本的なライト

・Three.AmbietLight
　ライトの色が全体に適応
　特定の入射角がないため影を落とさない
　オブジェクト全てオブジェクトに設定した色をベースに同じ色になってしまう
　他の光源と組み合わせて使うのがベスト

・Three.PointLight
　一点から全方向に向かって光を発する光源
　影は無し：全方向に光を発するので影の計算が重いため除外されている
　
・Three.DirectionalLight
　太陽の光の様にすべて平行角度で光があたる
　影あり

特殊なライト
　
・Three.HemisphereLight
　屋外のライティングに最適

・Three.LensFlare
　レンズフレアの再現

------------------------------------------------
4章　マテリアル

ブレンディングプロパティ：
　->描画されている色が物体の後ろにある色とどのように相互作用するかを指定するもの
マテリアルの組み合わせも可能

単純なマテリアル
・THREE.MeshBasicMaterial
　単純なマテリアル、ライトの影響を考慮しない

・THREE.MeshDepthMaterial
　オブジェクトからカメラの距離によって見た目が変化する

・THREE.MeshNormalMaterial
　球を構成する法線の向きで色のグラデーションを作る

・THREE.MultiMaterial
　ポリゴンの面ごとにマテリアルを設定できる

高度なマテリアル
・THREE.MeshLambertMaterial
　くすんだ見た目の光沢のない表面を作成できる

・THREE.MeshPhongMaterial
　光沢のある表面を作成できる

・THREE.MeshStandardMaterial
　簡易的な物理ベースレンダリングができる
　本格的な物理ベースレンダリングを導入することを前提とした簡易実装

・THREE.ShaderMaterial
　独自のシェーダーを設定できる、その分複雑
　
・THREE.LineBasicMaterial
・THREE.LineDashedMaterial
　頂点と辺だけで構成されたオブジェクトを作成できる
　後者は、線と線間の長さを指定できる

------------------------------------------------
5章　ジオメトリ

２次元のメッシュを構成する少数のジオメトリ
３次元のメッシュを構成する多くのジオメトリ

２次元のジオメトリ
・THREE.PlaneGeometry
　単純な２次元の四角形

・THREE.CircleGeometry
　扇状の三角形の底辺を外側に放射状に並べて円を構成した様な図形

・THREE.RingGeometry
　上記三角形を放射状に並べた円の中心に穴が空いた様な図形

・THREE.ShapeGeometry
　任意の２次元形状を定義できる

３次元のジオメトリ
・THREE.BoxGeometry
　立方体

・THREE.SphereGeometry
　球を定義

・THREE.CylinderGeometry
　円柱

・THREE.ConeGeometry
　円錐

・THREE.TorusGeometry
　ドーナツ状の形状

・THREE.TprusKnotGeometry
　トーラス結び目を作成できる

・THREE.PolyhedronGeometry
　多面体の作成

・THREE.lcosahedronGeometry
　１２個の頂点を持ち２０個の同一形状の三角形で構成される多面体

・THREE.TetrahedronGeometry
　正四面体

・THREE.OctahedronGeometry
　正八面体

・THREE.DodecahedronGeometry
　多面体：面１２

------------------------------------------------
6章　高度なジオメトリとブーリアン演算

・THREE.ConvexGeometry
　一群の座標を含む凸包を作成できる。（全ての3D座標を包んだ形状）

・THREE.LatheGeometry
　なめらかな曲線を元に３次元形状を作成

・THREE.ExtrudeGeometry
　２次元形状から３次元オブジェクトを作成

・THREE.TubeGeometry
　３次元のスプライン曲線に沿って押し出されたチューブを作成

・THREE.ParameticGeometry
　方程式に基づいてジオメトリを作成できる
　x,y,zに値、計算式などを代入して作成

・3Dテキストの作成
　
・ブーリアン演算を使用したメッシュの結合
　CSG(Constructive Solid Geometry)技術を用いて基本的なジオメトリの組み合わせから新しい形状を作成する
　Three.jsの拡張であるThreeBSPライブラリを使用
　複数の形状同士を差、和、積などで実装で指示しながらカスタマイズできる

------------------------------------------------
7章　パーティクル、スプライト、ポイントクラウド

パーティクル（粒子）の表現
・canvas要素を使って粒子を差し替えて表現
・テクスチャを使用して粒子を差し替えて表現
・スプライトマップを利用
・高度なジオメトリの頂点からTHREE.Pointsを作成しパーティクルをつくる

------------------------------------------------
8章　高度なメッシュとジオメトリ

ジオメトリのグループ化とマージ
・複数のメッシュをグループ化して管理
・マージで複数のジオメトリを一つのジオメトリにする
　->グループ化では内部的に各自処理してたものをマージで内部的にも一つにする
　->負荷軽減

ジオメトリの外部読み込み
・Three.jsnのJSPNフォーマットの保存と読み込み

Blenderとの連携
・BlenderにThree.jsエクスポータをインストール
・Blenderでモデルの読み込みと書き出し

------------------------------------------------
9章　アニメーションとカメラの移動

基本的なアニメーション
・requestAnimationFrameを使ったアニメーション
・javascriptイベントリスナーと連携したオブジェクトの選択
・Tweenを利用したなめらかな移動アニメーション

カメラ
・THREE.TrackballControls
　マウスを使用してシーン内を移動、パン、ズームできる
・THREE.FlyControls
　フライトシミュレータのようなコントロール
　キーボード、マウス使用
・THREE.FirstPersonControls
FPSゲームと同様の視点と操作
・THREE.OrbitControl
　軌道上の衛星をシミュレート

モーフィングとスケルタルアニメーション

モーフィング
・特定座標から、別の座標へオブジェクトの形状を変化
　->顔の表情の変化

スケルタルアニメーション
・ボーンを定義して骨格の動きを再現

Blender,Colladaなどのアニメーション形式を使用したアニメーション

------------------------------------------------
10章　テクスチャ

・バンプマップを利用した奥行きのあるテクスチャ
　->テクスチャと併用するバンプマップのピクセルの明度が凸凹を表現
・法線マップを利用した詳細な凹凸
・ライトマップテクスチャによる自然な影の作成
　->自然な陰影グラデーションをテクスチャで指定
・環境マップを使用した擬似反射
・スペキュラマップでハイライト指定：反射の強いところ、弱いところ

テクスチャの高度な利用
・UVマップ
　->特定のテクスチャをどの部分に対応するか指定
・canvas要素をテクスチャとして使用
・video要素をテクスチャとして使用

------------------------------------------------
11章　カスタムシェーダーとポストプロセス

ポストプロセッシング：レンダリング後のレタッチのようなもの
　->画像をプラグインで加工してアナログTV表示のようにしたりできる

独自のポストプロセッシングを行えるシェーダーの作成方法の紹介

------------------------------------------------
12章　物理演算と立体音響

Physijsライブラリによる物理演算
・ドミノ倒し
・摩擦係数、反発係数
・オブジェクトに物理的に動きを制限させる
　->制約を細かく指定してジオメトリを組み合わせて自動車モデルで物理演算処理をする

立体音響
・ライブラリなしでCameraと音源、メッシュを関連付けて再現できる

------------------------------------------------
付録A　Google Cardboardを使用したモバイルVR

スマホ用と、本格VR HMD(ヘッドマウントディスプレイ )対応のVRコンテンツ(Webアプリ)作成

本格VR HMD用には、現時点では使用ブラウザが限定される
別途jsライブラリが必要だが、位置や傾きの情報を利用できる

------------------------------------------------
付録B　THREE.MMDLoaderによる3Dモデルの制御

MMDデータを読み込んでThree.jsオブジェクトを生成
読み込んだ3Dモデルを音楽に合わせてダンス等できる
(MMD = Miku Miku Danceの略称)

------------------------------------------------

以上。

x post へポスト