JUI 2009 O3D Programming

O3D Programminggyuque, Satoshi Ueyama

2009年7月12日日曜日

What’s O3D

Google の Web向け3DグラフィックAPI


object要素

What’s O3D

プラグイン

IE

ActiveXFirefox, Safari…

NPAPI

Javascript

Flash Player

QuickTime plugin

と同じ扱い

とか

なので、Canvas とは別物です

• Flash や QT はクローズドなので、プラグインが唯一の提供手段• O3D はオープンソースなので、ブラウザに組み込まれることもあり得る

ただし

(Google Gearsのように)


ソフトレンダラハードウェアレンダラ

What’s O3D

OpenGL Direct3D IM

今は亡き

Direct3D RM

今は亡き

VRML

新たな挑戦者

O3D

低レベルAPI

シーングラフAPI

座標変換エンジン

2Dポリゴンエンジン

JS !

2D Canvas !" HW実装


What’s O3D

O3D

シーングラフAPI

!"#$%&"#%$&"&"!!'!!"#(%&"#$$&"&"!!)!!"&&&&"&&&&*&"!!+!!"&&&&"&&&&"&*!!,!

座標変換

ポリゴンに分解D3D、GL等の呼び出し

全部勝手にやってくれる

出力

3Dシーン


What’s Scene Graph

scene {object {

material(red) {faces {

[0,0, 1,0 0,1]}

}material(blue) {

faces {[0,2, 3,0 0,4]

}}

}}

2. なんか出る

1. シーングラフを評価する

（イメージ）

!この「シーン記述言語」は実在せず、実際は API でシーングラフにノードを足していく（DOMと同じ）

（もちろんシーン記述言語を作ることはできるし、json から読み込む機能もある）


Reading Sample Code

!"#$%&'(')

**+,-#&./

**0#11'2132'#-"24"5$2+60/

**789#2#:""2;<

json形式のソーン記述テクスチャ画像等


超簡単！だじぇ！


……といった情報はぐぐれば山ほど出てきそうなので、もうちょっと細かい話をします


Working with Scene Graph

Material

ParentChild

position list: [0,0, 0,1, 1,1]index list: [0,1,2]

Transform

Transform

Transform

Shape

DrawListParent

Child

座標変換の流れ

描画の流れPrimitive


Working with Scene Graph

例）!t = pack.createObject('Transform');t.parent = o3dClient.root;

parent.appendChild( child );

child.parent = parent;

DOM

O3D

! add とか append でドキュメントを検索してもわかりません (addShape は例外)


Demo - js touch on O3D


2D on O3D

2D グラフィックスは簡単に扱えるの？Mozilla Party でいただいた質問


2D on O3D

Canvas provides an interface for drawing text and

2D primitives on a 2D surface.

O3D Canvas : テクスチャを2Dキャンバスとして使うAPI

2D グラフィックスは簡単に扱えるの？


http://code.google.com/intl/ja-JP/apis/o3d/docs/reference/classo3d_1_1_canvas.html

http://code.google.com/intl/ja-JP/apis/o3d/docs/reference/classo3d_1_1_canvas.html

2D on O3D

４つだけ！→


2D on O3D

Canvas

忘れましょう


2D on O3D

Canvas

忘れましょう

=4>

=4>

?@>

@A>

BC*D*B*E*F3?@>*G*=4>

8C*D*8*E*GF3@A>*H*=4>• ポリゴンに分割• 座標系を変換• Shape をシーンに追加


Demo - O3D BallPool

Canvas版 by Mr. doob

O3D版


Demo - O3D BallPool

on Internet Explorer


Demo - O3D BallPool

あまり話題になっていませんが、O3D plugin にはV8 JS Engineが内蔵されており重い処理をV8に投げることが可能です

"V8版 Demo （あまり期待してはいけません）


まとめ

• ドキュメントもまだまだ• 実装もまだまだ？（2D Canvasを見る限り）• API も変わりそう

地雷！


まとめ

• ドキュメントもまだまだ• 実装もまだまだ？（2D Canvasを見る限り）• API も変わりそう

地雷！

使いたくなってきましたね！


Enjoy O3D Programming

Thank You.


JUI 2009 O3D Programming

Technology

Transcript of JUI 2009 O3D Programming