初めてのWebGL 2 第2版

―JavaScriptで開発するリアルタイム3Dアプリケーション

[cover photo]
TOPICS
Programming , Web
発行年月日
PRINT LENGTH
440
ISBN
978-4-87311-937-3
原書
Real-Time 3D Graphics with WebGL 2
FORMAT
Print PDF EPUB
Ebook
4,400円
Ebookを購入する
Print
4,400円

WebGL 2プログラミングの入門書。WebGL APIによりプラグインなしで3Dコンピューターグラフィックスをブラウザに表示できます。本書では、自動車の3Dモデルビューアーを例に、インタラクティブな3DCGを使用するウェブアプリケーションの開発方法について解説します。対象読者は初中級のウェブプログラマー。JavaScriptの基礎知識は必須ですが、3D数学の詳しい知識は不要です。ベクトル演算や行列演算にはライブラリを使用するので、具体的な計算処理を意識することなくWebGL 2プログラミングに集中できます。読者はWebGL 2で本当に必要な部分を本書一冊でマスターできます。

関連ファイル

目次

序文
訳者まえがき
まえがき

1章 イントロダクション
    1.1 システム要件
    1.2 WebGLレンダリング
        1.2.1 ソフトウェアベースレンダリングとハードウェアベースレンダリング
        1.2.2 サーバーベースレンダリングとクライアントベースレンダリング
        1.2.3 保持モードレンダリングと即時モードレンダリング
    1.3 WebGLアプリケーションの要素
    1.4 やってみよう:HTML5のcanvas要素を作成する
        1.4.1 CSSスタイルの定義
        1.4.2 canvasの属性を理解
        1.4.3 canvasがサポートされていなければどうするか
    1.5 やってみよう:WebGLコンテキストにアクセスする
    1.6 ステートマシン
    1.7 やってみよう:WebGLコンテキストの属性を設定する
        1.7.1 コンテキストを利用してWebGL APIにアクセス
    1.8 3Dシーンの読み込み
        1.8.1 バーチャルな自動車ショールーム
    1.9 やってみよう:3Dショールームを可視化する
    1.10 アーキテクチャの更新
    1.11 まとめ

2章 レンダリング
    2.1 WebGLレンダリングパイプライン
        2.1.1 頂点バッファオブジェクト(VBO)
        2.1.2 インデックスバッファオブジェクト(IBO)
        2.1.3 頂点シェーダ
        2.1.4 フラグメントシェーダ
        2.1.5 フレームバッファ
        2.1.6 アトリビュート
        2.1.7 ユニフォーム
        2.1.8 テクスチャ
        2.1.9 バリイング
    2.2 WebGL内での描画
        2.2.1 頂点
        2.2.2 インデックス
        2.2.3 JavaScriptの配列を使用したジオメトリの定義
        2.2.4 WebGLバッファの作成
        2.2.5 アトリビュートとVBOの関連付け
        2.2.6 レンダリング
        2.2.7 すべてをまとめる
    2.3 やってみよう:正方形のレンダリング
        2.3.1 腕試し:正方形の色の変更
        2.3.2 腕試し:drawArraysを使用してレンダリング
    2.4 頂点配列オブジェクト
    2.5 やってみよう:VAOを使用して正方形をレンダリング
    2.6 やってみよう:レンダリングモード
    2.7 ステートマシンとしてのWebGL:バッファ操作
    2.8 やってみよう:バッファ状態の問い合わせ
        2.8.1 腕試し:確認をひとつ追加
    2.9 複雑なジオメトリの読み込み
        2.9.1 JavaScript Object Notation(JSON)の紹介
        2.9.2 JSONを使用した3Dモデル定義
    2.10 やってみよう:JSONのエンコードとデコード
        2.10.1 AJAXを使用した非同期読み込み
    2.11 やってみよう:円錐をAJAXで読み込む
        2.11.1 腕試し:自動車モデルの読み込み
    2.12 アーキテクチャの更新
    2.13 まとめ

3章 光源
    3.1 光源、法線、マテリアル
        3.1.1 点光源と平行光源
        3.1.2 法線
        3.1.3 マテリアル
    3.2 パイプラインでの光源、法線、マテリアルの利用
        3.2.1 並列性とアトリビュートとユニフォームの違い
    3.3 シェーディングメソッドと光反射モデル
        3.3.1 シェーディング/補間法
        3.3.2 光反射モデル
        3.3.3 環境光
        3.3.4 拡散反射
        3.3.5 鏡面反射
    3.4 OpenGL ES Shading Language(ESSL)
        3.4.1 ストレージ修飾子
        3.4.2 型
        3.4.3 ベクトル要素
        3.4.4 演算子と関数
        3.4.5 頂点アトリビュート
        3.4.6 ユニフォーム
        3.4.7 バリイング
        3.4.8 頂点シェーダ
        3.4.9 フラグメントシェーダ
    3.5 ESSLプログラム作成
        3.5.1 ランバート反射を伴うグーローシェーディング
    3.6 やってみよう:ユニフォームのリアルタイム更新
        3.6.1 腕試し:光源の移動
        3.6.2 フォン反射を伴うグーローシェーディング
    3.7 やってみよう:グーローシェーディング
        3.7.1 フォンシェーディング
    3.8 やってみよう:フォンライティングを伴うフォンシェーディング
    3.9 WebGLに戻る
        3.9.1 プログラム作成
        3.9.2 アトリビュートとユニフォームの初期化
    3.10 WebGLとESSLをつなぐ
    3.11 やってみよう:壁の表面を処理
    3.12 光源についてさらに:点光源
    3.13 やってみよう:点光源を試す
        3.13.1 バーチャルショールーム
    3.14 アーキテクチャの更新
    3.15 まとめ

4章 カメラ
    4.1 WebGLにはカメラがない
    4.2 頂点変換
        4.2.1 同次座標
        4.2.2 モデル変換
        4.2.3 ビュー変換
        4.2.4 投影変換
        4.2.5 透視分割
        4.2.6 ビューポート変換
    4.3 法線変換
        4.3.1 法線行列の計算
    4.4 WebGLの実装
        4.4.1 JavaScript行列
        4.4.2 JavaScript行列をESSLユニフォームに関連付ける
        4.4.3 ESSLで行列を使用
    4.5 モデルビュー行列
        4.5.1 ワールド空間の行列表現
    4.6 カメラ行列
        4.6.1 カメラの平行移動
    4.7 やってみよう:ワールド空間とカメラ空間の平行移動
        4.7.1 カメラの回転
    4.8 やってみよう:ワールド空間とカメラ空間での回転
        4.8.1 腕試し:回転と平行移動の組み合わせ
        4.8.2 カメラ行列はモデルビュー行列の逆行列
        4.8.3 WebGLでの行列の掛け算を考える
    4.9 基本的なカメラタイプ
        4.9.1 軌道カメラ
        4.9.2 追跡カメラ
    4.10 やってみよう:ショールームを探索
        4.10.1 腕試し:光源の位置を更新
    4.11 投影行列
        4.11.1 視野
        4.11.2 透視投影と平行投影
    4.12 やってみよう:平行投影と透視投影
        4.12.1 腕試し:モデルビュー変換と投影変換の統合
    4.13 WebGLのサンプルコードの構造
        4.13.1 サポートオブジェクト
        4.13.2 ライフサイクル関数
        4.13.3 行列処理関数
    4.14 まとめ

5章 アニメーション
    5.1 WebGL行列の命名規約
    5.2 行列スタック
    5.3 3Dシーンのアニメーション
        5.3.1 requestAnimationFrame関数
        5.3.2 JavaScriptタイマー
    5.4 タイミング戦略
        5.4.1 アニメーション戦略
        5.4.2 シミュレーション戦略
        5.4.3 アニメーション戦略とシミュレーション戦略の組み合わせ
        5.4.4 ウェブワーカー:JavaScriptのマルチスレッド
    5.5 アーキテクチャの更新
        5.5.1 アプリ再確認
        5.5.2 行列スタックのサポートを追加
    5.6 行列スタックとJavaScriptタイマーの接続
    5.7 やってみよう:単純なアニメーション
        5.7.1 腕試し:落下のシミュレーションとフレームのフリーズ
    5.8 パラメトリック曲線
        5.8.1 初期化ステップ
        5.8.2 アニメーションタイマーの準備
        5.8.3 アニメーション実行
        5.8.4 それぞれの現在位置にボールを描画
    5.9 やってみよう:バウンドするボール
    5.10 最適化戦略
        5.10.1 バッチパフォーマンスの最適化
        5.10.2 頂点シェーダーで移動を実行する
    5.11 補間
        5.11.1 線形補間
        5.11.2 多項式補間
        5.11.3 Bスプライン補間
    5.12 やってみよう:補間
    5.13 まとめ

6章 色、奥行き、半透明
    6.1 WebGLでの色の利用
    6.2 オブジェクトの色
        6.2.1 単色での色付け
        6.2.2 頂点ごとの色付け
        6.2.3 フラグメントごとの色付け
    6.3 やってみよう:立方体の色付け
    6.4 光源の色
        6.4.1 スケーラビリティの問題
    6.5 アーキテクチャの更新
        6.5.1 光源オブジェクトの追加
    6.6 やってみよう:シーンに青い光源を追加
        6.6.1 腕試し:インタラクションを追加
        6.6.2 ユニフォーム配列を使用して複数の光源を処理
        6.6.3 ユニフォーム配列宣言
    6.7 やってみよう:白い光源をシーンに追加
    6.8 やってみよう:スポットライト
    6.9 シーンの色
        6.9.1 半透明
        6.9.2 レンダリングパイプラインの更新
    6.10 深度テスト
        6.10.1 深度関数
    6.11 アルファブレンディング
        6.11.1 ブレンディング関数
        6.11.2 ブレンディング関数の分離
        6.11.3 ブレンド式
        6.11.4 ブレンド色
        6.11.5 アルファブレンディングモード
    6.12 やってみよう:ブレンディングワークベンチ
    6.13 半透明オブジェクトの作成
    6.14 やってみよう:カリング
    6.15 やってみよう:半透明な壁を作成
    6.16 まとめ

7章 テクスチャ
    7.1 テクスチャマッピングとは何か
        7.1.1 テクスチャの作成とアップロード
    7.2 テクスチャ座標の利用
    7.3 シェーダー内でテクスチャを利用
    7.4 やってみよう:立方体にテクスチャを設定
        7.4.1 腕試し:別のテクスチャを試す
        7.4.2 テクスチャフィルタモード
    7.5 やってみよう:さまざまなフィルタモードを試す
        7.5.1 NEAREST
        7.5.2 LINEAR
        7.5.3 ミップマップ
        7.5.4 ミップマップ生成
    7.6 テクスチャラッピング
    7.7 やってみよう:さまざまなラッピングモードを試す
        7.7.1 CLAMP_TO_EDGE
        7.7.2 REPEAT
        7.7.3 MIRRORED_REPEAT
    7.8 複数のテクスチャを利用
    7.9 やってみよう:複数のテクスチャを利用
        7.9.1 腕試し:乗算以外を試す
        7.9.2 腕試し:多次元テクスチャの利用
    7.10 キューブマップ
    7.11 やってみよう:キューブマップを試す
        7.11.1 腕試し:光輝くロゴ
    7.12 まとめ

8章 ピッキング
    8.1 ピッキング
    8.2 オフスクリーンフレームバッファの設定
        8.2.1 色を保存するテクスチャの作成
        8.2.2 深度を保存するレンダーバッファの作成
        8.2.3 オフスクリーンレンダリングのためのフレームバッファの作成
    8.3 シーン内のオブジェクトごとにひとつの色を設定
    8.4 オフスクリーンフレームバッファに描画
    8.5 Canvas上をクリック
    8.6 オフスクリーンフレームバッファからピクセルを読み取る
    8.7 ヒットを探す
    8.8 ヒットを処理
    8.9 アーキテクチャの更新
    8.10 やってみよう:ピッキング
        8.10.1 Pickerのアーキテクチャ
    8.11 オブジェクトごとに一意のラベルを実装
    8.12 やってみよう:一意のオブジェクトラベル
        8.12.1 腕試し:シーンのクリア
        8.12.2 腕試し:その他の識別子をピッキングのために使用
        8.12.3 腕試し:WebGLコンポーネントの分離
    8.13 まとめ

9章 WebGLアプリケーション
    9.1 WebGLアプリケーションの作成
    9.2 アーキテクチャの復習
    9.3 やってみよう:3Dバーチャル自動車ショールーム
        9.3.1 モデルの複雑さ
        9.3.2 シェーダーの品質
        9.3.3 ネットワーク遅延と帯域の消費
    9.4 GUIの設計
        9.4.1 canvasサポートの追加
        9.4.2 シェーダースクリプトの追加
        9.4.3 WebGLサポートの追加
    9.5 シェーダーの実装
    9.6 シーンの設定
        9.6.1 WebGLプロパティの設定
        9.6.2 カメラの設定
        9.6.3 カメラコントロールの作成
        9.6.4 シーンの変換
        9.6.5 光源の作成
        9.6.6 プログラムへのアトリビュートとユニフォームのマッピング
        9.6.7 ユニフォームの初期化
    9.7 自動車の読み込み
        9.7.1 Blenderモデルのエクスポート
        9.7.2 OBJフォーマットを理解する
        9.7.3 OBJファイルの構文解析
        9.7.4 自動車をWebGLシーンに読み込む
        9.7.5 レンダリング
        9.7.6 腕試し:インタラクティブなコントロール
    9.8 ボーナス
    9.9 まとめ

10章 高度なテクニック
    10.1 ポストプロセッシング
        10.1.1 フレームバッファを作成
        10.1.2 ジオメトリの作成
        10.1.3 シェーダーの設定
    10.2 アーキテクチャの更新
    10.3 やってみよう:ポストプロセスエフェクト
        10.3.1 腕試し:ミラーハウス効果
    10.4 ポイントスプライト
    10.5 やってみよう:火花の泉
        10.5.1 腕試し:泡
    10.6 法線マップ
    10.7 やってみよう:実際の法線マッピング
    10.8 フラグメントシェーダーでのレイトレーシング
    10.9 やってみよう:レイトレースしたシーンを試す
        10.9.1 腕試し:複数の球
    10.10 まとめ

11章 WebGL 2の見どころ
    11.1 WebGL 2の新機能
        11.1.1 頂点配列オブジェクト
        11.1.2 さまざまなテクスチャフォーマット
        11.1.3 3Dテクスチャ
        11.1.4 テクスチャ配列
        11.1.5 インスタンシング
        11.1.6 2の累乗ではないテクスチャのサポート
        11.1.7 フラグメントの深度
        11.1.8 シェーダー内でのテクスチャサイズ取得
        11.1.9 Syncオブジェクト
        11.1.10 テクセルの直接参照
        11.1.11 柔軟なシェーダーループ
        11.1.12 シェーダー行列関数
        11.1.13 標準の圧縮テクスチャ
        11.1.14 ユニフォームバッファオブジェクト
        11.1.15 整数テクスチャとアトリビュート
        11.1.16 トランスフォームフィードバック
        11.1.17 サンプラオブジェクト
        11.1.18 深度テクスチャ
        11.1.19 標準導関数
        11.1.20 UNSIGNED_INTインデックス
        11.1.21 ブレンド式のMINとMAX
        11.1.22 マルチレンダーターゲット
        11.1.23 頂点シェーダーでのテクスチャアクセス
        11.1.24 マルチサンプルレンダーバッファ
        11.1.25 クエリオブジェクト
        11.1.26 テクスチャLOD
        11.1.27 テクスチャLODバイアス
        11.1.28 常時利用可能な浮動小数点テクスチャ
    11.2 WebGL 2への移行
        11.2.1 コンテキストの取得
        11.2.2 拡張機能
        11.2.3 シェーダーの更新
        11.2.4 2の累乗ではないテクスチャのサポート
        11.2.5 浮動小数点数フレームバッファアタッチメント
        11.2.6 頂点配列オブジェクト
    11.3 まとめ

12章 さらなる旅路
    12.1 WebGLライブラリ
        12.1.1 小さなライブラリ
        12.1.2 機能豊富なライブラリ
        12.1.3 ゲームエンジン
    12.2 WebGL 2アプリケーションのテスト
        12.2.1 視覚的な回帰テスト
        12.2.2 アプリケーションのイントロスペクションテスト
    12.3 3D再構築
    12.4 物理ベースレンダリング
    12.5 コミュニティ
    12.6 まとめ

索引