![[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ——リアルタイムに動く画面を描く。プログラマー直伝の基本 (WEB+DB PRESS plus)](https://images-fe.ssl-images-amazon.com/images/I/81swk1bs2zL._AC_UL165_SR165,165_.jpg)
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の略称)
------------------------------------------------
以上。
無料のKindleアプリをダウンロードして、スマートフォン、タブレット、またはコンピューターで今すぐKindle本を読むことができます。Kindleデバイスは必要ありません。
ウェブ版Kindleなら、お使いのブラウザですぐにお読みいただけます。
携帯電話のカメラを使用する - 以下のコードをスキャンし、Kindleアプリをダウンロードしてください。
よく一緒に購入されている商品
+
+
![[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門 ——リアルタイムに動く画面を描く。プログラマー直伝の基本 (WEB+DB PRESS plus)](https://images-fe.ssl-images-amazon.com/images/I/81swk1bs2zL._AC_UL116_SR116,116_.jpg)
総額:
当社の価格を見るには、これら商品をカートに追加してください。
ポイントの合計:
pt
一緒に購入する商品を選択してください。
この商品をチェックした人はこんな商品もチェックしています
ページ 1 以下のうち 1 最初から観るページ 1 以下のうち 1
著者について
著者をフォローして、新作のアップデートや改善されたおすすめを入手してください。
