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コンテンツの制作を体験しましょう！
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/3463.html
【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/3463.html
第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)関数
この節のまとめ
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)関数
この節のまとめ
