HTML5+JavaScript+CSS+WebGLによる3D Web コンテンツ制作

概 要

HTML5の3D機能「WebGL」を使ったコンテンツ制作手法の解説書です。WebGLは、Adobe Flashの3D機能「Stage3D」に対抗する技術であり、HTML5のサポートに力をいれているiPhoneやAndroidなどのスマートフォンで主力になると見込まれている技術です。本書では、WebGLとJavaScript、CSSを組み合わせてゲームなどの3Dコンテンツを制作するための手法を基礎から詳細に解説しています。また、著者が自ら開発したWebGLを扱いやすくするラッパーライブラリ「PsychoVision3D」、ボーンアニメーションツール「Vixar TransMotion」、リジッドボディアニメーションツール「Vixar Motion」を活用して、3D Webコンテンツの制作を体験しましょう!

著者 大西武
価格 本体2800円(税別)
ISBN 978-4-7980-3463-8
発売日 2012/8/22
判型 B5変
色数 2色
ページ数 416
CD/DVD
対象読者 中級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

第1章 HTML5+JavaScript+CSS+WebGLで3D Webコンテンツを制作する前に

1-1 HTML5について

HTML5とは?

HTML5と従来のHTML4(XHTML)

1-2 JavaScriptについて

JavaScriptとは?

1-3 CSS(スタイルシート)について

CSSとは?

1-4 WebGLについて

WebGLとは?

1-5 WebGL対応ブラウザについて

WindowsでのブラウザのWebGL対応状況

Mac OS XでのブラウザのWebGL対応状況

1-6 PsychoVision3Dについて

PsychoVision3Dとは?

1-7 3DCGについて

3DCGとは?

第2章 JavaScriptの文法について

2-1 変数について

変数とは?

2-2 関数・メソッドについて

関数・メソッドとは?

2-3 クラスについて

クラスとは?

2-4 グローバル関数、グローバル変数、ローカル変数について

グローバル変数、ローカル変数、グローバル関数とは?

2-5 配列について

配列とは?

2-6 if文について

if文とは?

2-7 for文について

for文とは?

2-8 while文について

while文とは?

2-9 switch文について

switch文とは?

第3章 PsychoVision3Dライブラリを使ってアゲハ蝶を3D表現する

3-1 アゲハ蝶デモ「Swallowtail」の遊び方

アゲハ蝶

この節のまとめ

3-2 PsychoVision3Dのテンプレート

PsychoVision3Dについて

PsychoVision3Dのテンプレート

HTMLファイルのbeginWebGL()関数

HTMLファイルのdrawWebGL()関数

HTMLファイルのonMouseDown(event)関数など

HTMLファイルでbodyなどのコーディング

この節のまとめ

3-3 地面を表示

静止モデルについて

HTMLファイルのheadで地面モデル読み込み

HTMLファイルのbeginWebGL()関数で初期化

HTMLファイルのdrawWebGL()関数

この節のまとめ

3-4 アルファベット文字を表示

アルファベットについて

Alphabet.jsのコンストラクタで初期化とマテリアルセットと頂点セット

Alphabet.jsのコンストラクタでテクスチャUV座標のセット

Alphabet.jsのModel3Dクラスからの派生

HTMLファイルのheadでアルファベットモデルの読み込み

HTMLファイルのグローバル変数

HTMLファイルのbeginWebGL()関数

HTMLファイルのdrawWebGL()関数

この節のまとめ

3-5 30匹のアゲハ蝶を表示

アゲハ蝶モデルについて

Butterfly.jsのコンストラクタでメンバ変数追加

HTMLファイルのheadでアゲハ蝶読み込み

HTMLファイル内でJavaScriptの記述

HTMLファイルの最初に一回だけ呼ばれるbeginWebGL()関数

HTMLファイルの毎フレーム呼ばれるdrawWebGL()関数

この節のまとめ

3-6 アゲハ蝶をクリックで飛び立たせる

アゲハ蝶のクリックと飛翔について

HTMLファイルの毎フレーム呼ばれるdrawWebGL()関数

HTMLファイルのonMouseUp(event)関数

この節のまとめ

3-7 クリックで飛翔させたアゲハ蝶を戻らせる

アゲハ蝶が飛翔して戻ってくる

HTMLファイルのグローバル変数

HTMLファイルの毎フレーム呼ばれるdrawWebGL()関数

この節のまとめ

3-8 アゲハ蝶に隠れた全てのアルファベットが現れたら

アゲハ蝶に隠れた文字が全て現れたら全てのアゲハ蝶を飛翔させる

HTMLファイルのグローバル変数

HTMLファイルの毎フレーム呼ばれるdrawWebGL()関数

HTMLファイルのonMouseUp()関数

この節のまとめ

第4章 シェーダーを使って三角形を1つ描画

4-1 HTML5の基本コードとJavaScriptでWebGLの初期化

初期化の準備

HTMLの始まり

PsychoVision3Dライブラリで最初に呼ばれるinitWebGL()関数

WebGLをセットするsetWebGL()関数

レンダリングの最初にするbeginDraw()関数

HTMLの本文とタグの閉じ

この節のまとめ

4-2 シェーダーの初期化

シェーダーについて

変数の宣言

PsychoVision3Dライブラリで最初に呼ばれるinitWebGL()関数

三角形の色を塗るフラグメント・シェーダー

三角形を形づくる頂点シェーダー

シェーダーのセット

この節のまとめ

4-3 三角形の描画

シェーダーに値の受け渡しについて

Vector3D.js

PsychoVision3Dライブラリで最初に呼ばれるinitWebGL()関数

頂点座標バッファの初期化

三角形を一個だけ描画

この節のまとめ

第5章 ベクトルと行列

5-1 ベクトル

二次元ベクトル

三次元ベクトルのコンストラクタとメンバ変数

四次元ベクトル

三次元ベクトルのメソッド

この節のまとめ

5-2 4×4行列「Matrix3D」クラス

Matrix3Dとは?

Matrix3Dクラスのコンストラクタ

Matrix3Dクラスのidentity()メソッド

Matrix3Dクラスのtranslate()メソッド

Matrix3DクラスのrotateX()メソッド

Matrix3DクラスのrotateY()メソッド

Matrix3DクラスのrotateZ()メソッド

Matrix3Dクラスのscale()メソッド

Matrix3Dクラスのtransform()メソッド

Matrix3Dクラスのメソッド

Matrix3DクラスのlookAtCamera()メソッド

Matrix3Dクラスのfrustum()メソッド

Matrix3Dクラスのperspective()メソッド

Matrix3Dクラスのortho()メソッド

Matrix3Dクラスのset()メソッド

Matrix3Dクラスのcopy()メソッド

Matrix3DクラスのinverseMat33()メソッド

Matrix3DクラスのtoString()メソッド

この節のまとめ

5-3 3×3行列「Matrix33」クラス

Matrix33とは?

Matrix33クラスのコンストラクタ

Matrix33クラスのidentity()メソッド

Matrix33クラスのtranspose()メソッド

この節のまとめ

第6章 PsychoVision3Dクラス、Model3Dクラス、Materialクラスの作成

6-1 Model3Dクラスの作成

Model3Dクラス

Model3D.jsにコンストラクタを

Model3D.jsにメソッドを

Model3D.jsにdraw()メソッド

HTMLファイルでModel3Dクラス

HTMLファイルでinitWebGL()関数

HTMLファイルで描画メソッドの削除

この節のまとめ

6-2 PsychoVision3D.jsの作成

PsychoVision3D.js

HTMLファイルのJavaScriptコードのカット

PsychoVision3D.jsの作成

HTMLファイルにライブラリファイルの追加コード

この節のまとめ

6-3 HTMLファイルで初期化と毎フレーム呼ばれるグローバル関数

初期化と毎フレーム呼び出し

PsychoVision3D.jsのグローバル変数

PsychoVision3D.jsのinitWebGL()関数

PsychoVision3D.jsでユニフォーム変数のセット

PsychoVision3D.jsでanimate()関数

PsychoVision3D.jsでアニメーションフレーム

PsychoVision3D.jsでメインループ

Model3D.jsのdraw()メソッド

Model3D.jsでsetVertices()メソッド

HTMLファイルでコーディング

この節のまとめ

6-4 三角形の回転

初期化と毎フレーム呼び出し

PsychoVision3D.jsでグローバル変数

PsychoVision3D.jsでinitWebGL(fullScreen)関数でWebGLの初期化

PsychoVision3D.jsで行列スタックで行列を保持

PsychoVision3D.jsでmvPopMatrixで保持していた行列スタックを取り出し

PsychoVision3D.jsでディグリーからラジアンに変換するdegreeToRadian()関数

PsychoVision3D.jsでラジアンからディグリーに変換するradianToDegree()関数

Model3D.jsのコンストラクタ

Model3D.jsでモデル描画のdraw()メソッド

Model3D.jsの頂点属性をシェーダーに送るsetVertices()メソッド

Model3D.jsのY軸に回転するaddRotateY()メソッド

Model3D.jsのaddRotateY2()メソッド

HTMLファイルの毎フレーム呼ばれるdrawWebGL()関数

この節のまとめ

6-5 三角形を二つで矩形の描画

三頂点で三角形一個を複数描画

PsychoVision3D.jsの最初に呼ばれるinitWebGL()関数

Model3D.jsのコンストラクタ

Model3D.jsでデータ初期化のinit()メソッド

Model3D.jsで1頂点追加のsetVertex()メソッド

Model3D.jsの頂点数を取得するgetVerticesLength()メソッド

Model3D.jsの頂点バッファを初期化するinitBuffers()メソッド

Model3D.jsでモデル描画のdraw()メソッド

矩形モデルのデータをRectangle.jsに分離

HTMLファイルでRectangle.jsの読み込み

この節のまとめ

6-6 指定したマテリアル色をシェーダーに反映

マテリアルクラス

PsychoVision3D.jsのgetFragmentShader()関数

PsychoVision3D.jsのgetVertexShader()関数

PsychoVision3D.jsのsetShaders()関数

Model3D.jsのコンストラクタ

Model3D.jsでデータ初期化のinit()メソッド

Model3D.jsの1頂点を追加するsetVertex()メソッド

Model3D.jsの1マテリアルを追加するsetMaterial()メソッド

Model3D.jsで頂点ごとの色を取得するgetColors()メソッド

Model3D.jsの頂点バッファを初期化するinitBuffers()メソッド

Model3D.jsの頂点をシェーダーに送るsetVertices()メソッド

Material.jsのコンストラクタ

Material.jsのメソッド開始

Material.jsのマテリアルを取得するgetMaterial()メソッド

Material.jsのマテリアルカラーを取得するgetColor()メソッド

Rectangle.jsのコンストラクタ

HTMLファイルでMaterialクラスの読み込み

この節のまとめ

6-7 法線で陰影をシェーダーに反映

ポリゴン面に垂直な直線である法線

PsychoVision3D.jsでgetFragmentShader()関数

PsychoVision3D.jsのgetVertexShader()関数

PsychoVision3D.jsのsetShaders()関数

PsychoVision3D.jsのsetMatrixUniforms(pMatrix)関数

Model3D.jsのコンストラクタ

Model3D.jsでデータ初期化のinit()メソッド

Model3D.jsの1頂点を追加するsetVertex()メソッド

Model3D.jsで頂点バッファの初期化のinitBuffers()メソッド

Model3D.jsの頂点属性をシェーダーに送るsetVertices()メソッド

この節のまとめ

6-8 テクスチャをシェーダーに

テクスチャ

PsychoVision3D.jsでgetFragmentShader()関数

PsychoVision3D.jsでgetVertexShader()関数

PsychoVision3D.jsでsetShaders()関数

PsychoVision3D.jsでinitTexture(textureName)関数

PsychoVision3D.jsでbindTexture(texture)関数

Model3D.jsのコンストラクタ

Model3D.jsのデータ初期化のinit()メソッド

Model3D.jsで1組のUV座標をセットするsetUV()メソッド

Model3D.jsの頂点バッファを初期化するinitBuffers()メソッド

Model3D.jsの頂点属性をシェーダーに送るsetVertices()メソッド

Material.jsのテクスチャをセットするsetTexture()メソッド

Material.jsでライトをセットするsetLight()メソッド

Arrow.jsのコンストラクタ

HTMLファイルでArrow.jsを読み込み

この節のまとめ

第7章 BoneModel3Dの作成

7-1 静止キャラクターを表示

BoneModel3Dクラスについて

BoneModel3D.jsのコンストラクタ

BoneModel3D.jsのデータ初期化のinit()メソッド

BoneModel3D.jsの材質追加のsetMaterial()メソッド

BoneModel3D.jsの頂点追加のsetVertex()メソッド

BoneModel3D.jsのUV追加のsetUV()メソッド

BoneModel3D.jsの頂点数を取得するgetVerticesLength()メソッド

BoneModel3D.jsの色取得のgetColors()メソッド

BoneModel3D.jsの頂点バッファ初期化のinitBuffers()メソッド

BoneModel3D.jsのモデル描画のdraw()メソッド

BoneModel3D.jsのY軸回転のaddRotateY()メソッド

BoneModel3D.jsのY軸回転のaddRotateY2()メソッド

BoneModel3Dから派生したArrow.js

HTMLファイルにBoneModel3D.jsを追加

この節のまとめ

7-2 静止キャラクターをボーン変形

BoneModel3Dクラスについて

PsychoVision3D.jsの頂点シェーダーのgetVertexShader()関数

PsychoVision3D.jsのシェーダーセットのsetShaders()関数

Model3D.jsのモデル描画のdraw()メソッド

BoneModel3D.jsのコンストラクタ

BoneModel3D.jsのデータ初期化のinit()メソッド

BoneModel3D.jsの頂点追加のsetVertex()メソッド

BoneModel3D.jsの頂点バッファ初期化のinitBuffers()メソッド

BoneModel3D.jsのモデル描画のdraw()クラス

Arrow.jsのコンストラクタ

HTMLファイルの毎回呼ばれるdrawWebGL()関数

この節のまとめ

7-3 静止キャラクターをモデルデータを読み込んでボーン変形

BoneModel3Dクラスについて

BoneModel3D.jsのコンストラクタ

BoneModel3D.jsのデータ初期化のinit()メソッド

BoneModel3D.jsのボーン番号ごとのボーン行列setMatrix()メソッド

BoneModel3D.jsの時間ごとのボーン行列setMatrix2()メソッド

BoneModel3D.jsのアニメーションごとのボーン行列setMatrix3()メソッド

BoneModel3D.jsのモデルの描画draw()メソッド

Arrow.jsのコンストラクタ

この節のまとめ

7-4 ボーン変形でアニメーション

BoneModel3Dクラスについて

BoneModel3D.jsのコンストラクタ

BoneModel3D.jsのデータ初期化のinit()メソッド

BoneModel3D.jsのモデル描画draw()メソッド

BoneModel3D.jsのアニメーション再生開始playAnimation()メソッド

Arrow.jsのコンストラクタ

この節のまとめ

7-5 キャラクターのマウス・キー操作

キャラクターアニメーション

PsychoVision3D.jsのライブラリ開始時の初期化

PsychoVision3D.jsでキーコード取得

HTMLファイルのheadで3Dオブジェクトデータを読み込む

HTMLファイルのグローバル変数の宣言と初期化

HTMLファイルのdrawWebGL()関数でキャラクターの移動と描画

HTMLファイルのonMouseDown(event)関数

HTMLファイルのonMouseUp(event)関数

HTMLファイルのonMouseMove(event)関数

HTMLファイルのonKeyDown(event)関数

HTMLファイルのonKeyUp(event)関数

この節のまとめ

7-6 止まったモデルをキャラクターの方向に向ける

モデルを動くモデルに向ける

Model3D.jsのdirRadian()メソッドで向き取得

Model3D.jsのdirDegree()メソッドで向きをディグリーで取得

Model3D.jsのforward()メソッドで向いた方向に1秒間でdeltaだけ進む

Model3D.jsのforward2()メソッドで見た方向にdeltaだけ進む

BoneModel3D.jsのforward()メソッドで向いた方向に前進

BoneModel3D.jsのforward2()メソッド

BoneModel3D.jsのdirRadian()メソッドで向き取得

BoneModel3D.jsのdirDegree()メソッドで向きを度で取得

HTMLファイルのheadでギターモデルを読み込む

HTMLファイルのグローバル変数と初期化

HTMLファイルの毎フレーム呼ばれるdrawWebGL()関数

この節のまとめ

7-7 キャラクターを地面の高さに合わせて上下させる

三角形とレイの交差判定

Model3D.jsのコンストラクタ

Model3D.jsでデータ初期化のinit()メソッド

Model3D.jsの交点を全三角形で調べるintersect()メソッド

Model3D.jsのレイと三角形の交差判定intersectTriangle()メソッド

Model3D.jsの現在位置を取得するgetPos()メソッド

Model3D.jsの_posに引数の(x,y,z)を加算した座標を取得するposPlus()メソッド

BoneModel3D.jsの現在位置を取得するgetPos()メソッド

BoneModel3D.jsの_posに引数(x,y,z)を加算した座標を取得するposPlus()メソッド

HTMLファイルのヘッダーでGround.js読み込み

HTMLファイルのグローバル変数_bg追加

HTMLファイルで最初に一度だけ呼ばれるbeginWebGL()関数

HTMLファイルで毎回呼ばれるdrawWebGL()関数

HTMLファイルのonMouseDown(event)関数

HTMLファイルのonMouseUp(event)関数

この節のまとめ

第8章 Sprite2Dの作成

8-1 二次元スプライトを描画

Sprite2Dクラスの作成

Sprite2D.jsのコンストラクタ

Sprite2D.jsのsetVertex()メソッド

Sprite2D.jsのgetVerticesLength()メソッド

Sprite2D.jsのinitBuffers()メソッド

Sprite2D.jsのinitUVs()メソッド

Sprite2D.jsのdraw()メソッド

HTMLファイルのhead

HTMLファイルのJavaScriptをhtml内にコードを書き始める

HTMLファイルのbeginWebGL()関数

HTMLファイルのdrawWebGL()関数

HTMLファイルのonMouseDown(event)関数

HTMLファイルのonMouseUp(event)関数

この節のまとめ

8-2 二次元スプライトをクリックした位置に描画

canvasの座標

Sprite2D.jsのgetPos()メソッド

PsychoVision3D.jsのmouseX(event)関数

PsychoVision3D.jsのmouseY(event)関数

HTMLファイルのbeginWebGL()関数

HTMLファイルのonMouseUp(event)関数

この節のまとめ

8-3 フルスクリーンモード

フルスクリーン

PsychoVision3D.jsでグローバル変数

PsychoVision3D.jsでinitWebGL(fullScreen)関数

PsychoVision3D.jsでresize()関数

HTMLファイルのheadでcssファイルとCharacter.jsを読み込む

HTMLファイルのグローバル変数を追加

HTMLファイルで初期化のbeginWebGL()関数

HTMLファイルの毎回呼ばれるdrawWebGL()関数

HTMLファイルのbodyでPsychoVision3Dの開始

fullScreen.cssのhtmlタグ設定

fullScreen.cssのbodyタグ設定

fullScreen.cssのcanvasタグ設定

この節のまとめ

8-4 三次元座標を二次元座標に変換

三次元座標を二次元座標に

PsychoVision3D.jsで最初に呼ばれるinitWebGL(fullScreen)関数

PsychoVision3D.jsで三次元座標から二次元座標を取得するgetCanvasPosition(pos)関数

HTMLファイルでグローバル変数削除

HTMLファイルで最初に一度呼ばれるbeginWebGL()関数

HTMLファイルで毎回呼ばれるdrawWebGL()関数

HTMLファイルでonMouseUp(event)関数

この節のまとめ

PR

秀和システム