WebGL+HTML5
3DCG プログラミング入門
- 著者 松田 晃一
- 判型 B5 変型, 592頁, CD-ROM付属
- 本体価格 5,800円
- ISBN 978-4-87783-273-5
2012年6月10日 初版第1刷発行
本書の記載内容について訂正があります。
こちらを参照してください。
本書について
本書は、ウェブブラウザ上に三次元グラフィックスを表示するための標準仕様であるWebGLを用いてプログラムを作成するための入門書です。
WebGLは、3DCGの分野で広く用いられているOpenGLをもとに組み込み機器向けの描画ライブラリとして策定されたOpenGL ESを、ウェブブラウザ上で使用できるようにしたものです。Google ChromeやFirefoxなど、WebGLに対応するウェブブラウザであれば、グラフィックスハードウェアの処理能力を活用した3DCGを特別なプラグインなしに表示することができます。
本書は、WebGLやOpenGLについて特別な知識を持たない読者でも独力で読み進められるよう、さまざまな例を提示しながら丁寧かつ詳細にWebGLプログラミングについて説明します。特に、実際の画面表示で必要となるシェーダについては、その動作の仕組みを示しながら具体的な使い方を多数取り上げています。
その他、キーボードやマウス操作への対応や、アニメーション、テクスチャ、視界の設定、光の扱い、各種効果など、主要なトピックを網羅した本書は、WebGLはもちろんのこと、OpenGLやOpenGL ESといった他の環境も含めたグラフィックスプログラミングの入門書としてもお勧めです。
目 次
- 第1章 WebGLとは
- 1.1. WebGLの特徴
- 1.2. WebGLはOpenGLの一種
- 1.3. WebGLのソフトウェア構造
- 1.4. 対応するブラウザとその設定
- 1.5. サンプルプログラム
- 1.6. 参考文献の表記に関して
- 1.7. まとめ
- 第2章 HTML5とJavaScript入門
- 2.1. HTML入門
- 2.2. JavaScript入門
- 2.3. Canvasとは
- 2.4. マウスが押された場所に四角形を描画する
- 2.5. デバッグ用のメッセージの表示とデバッグツール
- 2.6. まとめ
- 第3章 はじめの一歩
- 3.1. 世界一短いWebGL:描画領域をクリアする(HelloCanvas)
- 3.2. 点を描画する(1)
- 3.3. 点を描画する(2)
- 3.4. マウスがクリックされた場所に点を描画する
- 3.5. 点の色を変更する
- 3.6. まとめ
- 第4章 三角形の描画とアニメーション
- 4.1. 複数の点を描画する
- 4.2. 三角形さん、こんにちは
- 4.3. 移動、回転、拡大縮小
- 4.4. 移動し、回転する
- 4.5. アニメーションさせる
- 4.6. まとめ
- 第5章 色と画像を使う
- 5.1. 頂点に関する複数種類のデータをシェーダに渡す
- 5.2. 三角形に色を付ける(ColoredTriangle.js)
- 5.3. 四角形に画像を貼る
- 5.4. 複数のテクスチャを貼る
- 5.5. まとめ
- 第6章 小休止:OpenGL ESシェーダ記述言語 (GLSL ES)
- 6.1. GLSL ESとは
- 6.2. Hello Shader!
- 6.3. 扱えるデータ(数値、論理値)
- 6.4. 変数
- 6.5. 型に厳しい言語
- 6.6. 基本の型
- 6.7. ベクトル型と行列型
- 6.8. 構造体
- 6.9. 配列
- 6.10. サンプラ
- 6.11. 演算子の優先順位
- 6.12. 条件分岐と繰り返し
- 6.13. 関数
- 6.14. 組み込み関数
- 6.15. グローバル変数とローカル変数v
- 6.16. 型修飾子
- 6.17. 精度修飾子
- 6.18. プリプロセッサ指示子
- 6.19. まとめ
- 第7章 3次元の世界へ
- 7.1. どこからどこを見ているかを指定する
- 7.2. 矢印キーで視点の位置を変える
- 7.3. どこからどこまでが見えるかを指定する(直方体型)
- 7.4. どこからどこまでが見えるかを指定する(四角錐型)
- 7.5. 前にある物が後ろにある物を隠す
- 7.6. 立方体さん、こんにちは
- 7.7. ワールド座標系とローカル座標系
- 7.8. まとめ
- 第8章 光溢れる世界へ
- 8.1. 物体に光を当てる
- 8.2. 回転し、平行移動した物体に光を当てる
- 8.3. 物体に点光源をあてる
- 8.4. 複数の物体から構成される物体の描画と操作
- 8.5. シェーダとプログラムオブジェクト——initShaders()は何をやっているのか?
- 8.6. まとめ
- 第9章 さまざまなテクニック
- 9.1. 物体をマウスで回転する
- 9.2. 物体を選択する
- 9.3. HUD(Head Up Display)
- 9.4. フォグ(大気効果
- 9.5. 四角い点を丸くする
- 9.6. アルファブレンディング
- 9.7. シェーダを切り替える
- 9.8. 描画した内容をテクスチャ画像として使用する
- 9.9. 影を表示する
- 9.10. モデルを読み込み表示する
- 9.11. コンテキストロストイベントへの対応
- 9.12. まとめ
- 付録
- 付録A スワップバッファは要らない?
- 付録B GLSL ES 1.0の組み込み関数
- 付録C 行列一覧
- 付録D WebGL/OpenGLは左手系?
- 付録E 逆転置行列!
- 付録F 自分のPCにWebサーバを立てる