「WebGL 開発支援サイト wgld.org」を運営している杉本雅広氏による書籍『明解WebGL iOS/Androidも対応した3D CGプログラミングのWeb標準』がリックテレコムさんから発売されます!サービスやコンテンツの多さから普通にネットサーフィンをしていても目にかかる機会がかなり増えてきましたよね。世は正にWebGL時代!
WebGLとは
WebGL(ウェブジーエル)は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。 OpenGL 2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。 技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。 WebGLは非営利団体のKhronos Groupで管理されている。
引用元:WebGL – ウィキペディア
明解WebGL iOS/Androidも対応した3D CGプログラミングのWeb標準
- 単行本(ソフトカバー): 312ページ
- 出版社: リックテレコム
- 言語: 日本語
- ISBN-10: 4897979900
- ISBN-13: 978-4897979908
- 発売日: 2015/5/13
本書の特徴
WebGL は、HTML5 で登場してきたグラフィックス処理技術を、遥かに超える高いパフォーマンスを発揮します。2D コンテンツの配信はもちろん、高度な3D 表現でさえもWebGL を用いれば容易に実現することができます。その活躍の場は、PC に限らず、近年ではiOS/Androidデバイスやゲーム機の内蔵ブラウザなど、多彩なシーンへと普及しております。
本書はこの最新鋭のオープンソースの技術を3D初心者にもわかりやすいよう「明解に」解説しました。
3Dを扱うとなると「行列」や「ベクトル」等々数学的な知識が必要になります。実際のところ、本書にもこれらの概念は登場します。でも大丈夫。ここは筆者がていねいに解説しました。
- 作品の中に、リアルな描写を含んだ多彩な表現を必要とするクリエイター
- 敏捷に動くiOS/Androidアプリを効率よく開発したいゲーム開発者
これらの人たち必読の一冊!
著者について
杉本雅広(すぎもと・まさひろ)
WebGL の普及に尽力すべく奔走する自称「WebGL エンジニア」。2012 年よりWebGL の開発支援サイトwgld.org を運営開始。同サイトは、日本語によるWebGL を解説したコンテンツとして今もなお貴重な存在。
2014 年からは、IT イベントや勉強会に積極的に登壇すると共に、WebGL 初心者向けの本格スクールを主催。フロントエンドエンジニアだけでなく、WebGL に興味を持つあらゆる人の助けとなるべく日夜活動中。
目次
第1章 WebGLの今までとこれから
~モバイルウェブの世界とWebGL
- 1.1 HTML5とWebGL
- 1.2 ウェブアプリケーションの進化
- 1.3 開発を始めるための障壁が少ないWebGL
- 1.4 なぜ今WebGLが注目されているのか
第2章 開発環境の準備
~WebGLの開発に適した環境を整える
- 2.1 ブラウザの準備
- 2.2 JavaScript開発に欠かせないデバッグテクニック
- 2.3 開発者ツールの代表的な機能
- 2.4 ローカルサーバを用いた開発
- 2.5 モバイル端末でのデバッグ
第3章 WebGLの基本構造と概念
~WebGLの基本的な処理の流れや概念を理解する
- 3.1 canvasとコンテキストオブジェクト
- 3.2 WebGLコンテキストの取得
- 3.3 「gl」という名前の変数を使う
- 3.4 最小構成のWebGLプログラム
- 3.5 WebGLとcanvas 2Dの違い
- 3.6 WebGLにおける頂点
- 3.7 頂点とプリミティブ形状
- 3.8 まずは描画してみる
- 3.9 WebGLとバッファオブジェクト
- 3.10 三角形を動かす
- 3.11 三角形を増やす
- 3.12 WebGLとの向き合い方
第4章 座標変換とシェーダ
~線型代数学の活用とシェーディング
- 4.1 線型代数学とは
- 4.2 行列という概念
- 4.3 座標変換はなぜ必要なのか
- 4.4 様々な座標変換
- 4.5 行列が実際に利用されるタイミング
- 4.6 シェーダを学習するタイミング
- 4.7 シェーダの記述方法
- 4.8 シェーダのコンパイルとリンク
- 4.9 関数にして手順を効率化する
- 4.10 シェーダやプログラムオブジェクトのエラーを検知する
- 4.11 行列演算の補助ライブラリ
- 4.12 minMatrix.jsの使い方
- 4.13 行列を適用して頂点を動かす
- 4.14 複数の行列を組み合わせる
- 4.15 回転を行うモデル座標変換行列
- 4.16 拡大縮小を行うモデル座標変換行列
- 4.17 アニメーション
- 4.18 行列やシェーダとの向き合い方
第5章 GLSLによるシェーダの記述
~シェーダ記述言語GLSLについて知る
- 5.1 シェーダの誕生とプログラマブルシェーダ
- 5.2 固定機能パイプラインとシェーダ記述言語
- 5.3 シェーダの種類と役割
- 5.4 GLSL記述の基礎知識
- 5.5 変数の型と厳密なデータ型チェック
- 5.6 スウィズル演算子
- 5.7 その他の特殊な変数型
- 5.8 制御構文と特殊な記述ルール
- 5.9 組込み変数(ビルトイン変数)
- 5.10 組込み関数(ビルトイン関数)
- 5.11 ストレージ修飾子
- 5.12 精度修飾子とprecision宣言
- 5.13 GLSLとの向き合い方
第6章 様々なライティングテクニック
~3DCGにおける基本的な照明効果
- 6.1 3DCGは「まやかしの表現」
- 6.2 ライティングとは
- 6.3 立体形状のモデルデータ
- 6.4 インデックスバッファ
- 6.5 インデックスバッファを用いたレンダリング
- 6.6 シェーダとアプリケーション
- 6.7 シェーダへのデータ転送
- 6.8 深度テスト
- 6.9 深度バッファ
- 6.10 基本的な3つの光
- 6.11 法線とライトベクトル
- 6.12 長さを揃える ~ベクトルの正規化
- 6.13 拡散光の実装
- 6.14 頂点シェーダとフラグメントシェーダ
- 6.15 反射光を加味したライティング
- 6.16 環境光を取り入れたライティング
- 6.17 ライティングとの向き合い方
第7章 テクスチャとブレンディング
~よりリッチな表現を目指して
- 7.1 WebGLとイメージデータ
- 7.2 画像やcanvasの一辺の長さに注意
- 7.3 テクスチャと画像ファイル
- 7.4 テクスチャオブジェクトの初期化
- 7.5 画像のロードを考慮した初期化処理
- 7.6 テクスチャ座標
- 7.7 テクスチャをシェーダで参照する
- 7.8 テクスチャパラメータの指定
- 7.9 テクスチャの元データ
- 7.10 動画をテクスチャに適用する
- 7.11 色の合成 ~ブレンディング
- 7.12 アルファブレンディング
- 7.13 アルファブレンディングと深度
- 7.14 カリング
- 7.15 面の表と裏
- 7.16 カリングの有効化と設定
- 7.17 テクスチャやブレンディングとの向き合い方
第8章 モデルデータの扱い方
~外部データを活用して3Dシーンをより豊かに
- 8.1 モデリングソフトウェアとWebGL
- 8.2 モデルデータのファイル形式
- 8.3 WebGLでモデルデータを利用するためには
- 8.4 objson.jsを利用したOBJ形式ファイルの読込み
- 8.5 オンラインでモデルデータを入手する
- 8.6 WebGLにおけるモデルデータとの向き合い方
第9章 インタラクティブに動きのあるシーンを描く
~ユーザのアクションに応じた対話的処理
- 9.1 より動きのあるコンテンツ制作のために
- 9.2 描画の前に外部ファイルを取得しておく
- 9.3 描画命令を複数回呼び出す
- 9.4 点光源の実装に必要な2つの座標
- 9.5 動的にライトベクトルを算出する
- 9.6 オブジェクトを落下させる
- 9.7 ユーザのアクションに応じて動くカゴを描く
- 9.8 カゴのモデルデータ読込みと描画
- 9.9 キー入力を検知する
- 9.10 シェーダによるエフェクトの追加
- 9.11 りんごとカゴのヒット判定
- 9.12 WebGLにおける表現
第10章 WebGLとモバイルウェブアプリケーション
~モバイル端末でのWebGLコンテンツ制作
- 10.1 真のマルチプラットフォームアプリ
- 10.2 モバイル端末上でのWebGL動作状況
- 10.3 モバイル端末ならではの入力方式
- 10.4 JavaScriptからジャイロセンサの情報を取得
- 10.5 WebGLの描画結果にイベント情報を反映する
- 10.6 モバイル端末ならではのコンテンツ作り
- 付録 GLSL ビルトイン関数一覧
明解WebGL iOS/Androidも対応した3D CGプログラミングのWeb標準 | リックテレコム 書籍情報
コメント