O3D 簡明入門

O3D是google公司開發的一套用於web3D開發的javascript API ，是爲了創建基於網頁的3D圖形操作界面和3D遊戲而開發。網上經常有人把它拿來和OpenGL作比較，實際上，O3D可以看做是對OpenGL和D3D的封裝。O3D的架構如下所示，底層是基於OpengGL和Direct3D接口實現，支持頂點shader和像素shader，支持GPU加速運算，因此，在不考慮帶寬限制的條件下，O3D的渲染性能幾乎可以媲美很多本地應用（譬如遊戲），大家可以在google O3D的官網上找到不少很炫的Demo。

O3D目前主要支持Firefox, Safari, Google Chrome, Internet Explorer，當然，要想體驗或者開發基於O3D的應用，必須先給自己的瀏覽器安裝O3D插件。插件的下載地址爲：http://tools.google.com/dlpage/o3d/eula.html

O3D的官網地址：http://code.google.com/intl/zh-CN/apis/o3d/ ，在這裏可以找到很多文檔。

另外，如果有興趣，可以在google的svn服務器上找到O3D的所有代碼來研究，地址爲：http://o3d.googlecode.com/svn

介紹完O3D，下面開始用具體的代碼來慢慢深入研究。下面是一個最簡單的Demo：

這個Demo還沒有添加任何東西，但是卻可以讓我們瞭解到基於O3D開發的程序框架。

一個O3D程序需要完成的任務如下：

1 創建一個O3D object
2 給全局變量賦值，並初始化程序庫
3 創建pack以管理O3D objects
4 創建render graph
5 建立draw context（遠景和視野轉換）
6 創建一個效果，載入shader information
7 創建材質和形狀，設置材質繪製列表，並且設置其他材質參數
8 將transforms和shapes加入到transform graph
9 創建primitives的繪製單元
10 設置回調函數，在3D場景每次被渲染時執行特殊的任務

下面是HTML代碼：

 

< html>
< head>
< meta http- equiv= "content-type" content= "text/html; charset=UTF-8" >
< title> Tutorial A1: Loading a scene< / title>
< / head>
< body>
< h1> Loading a scene.< / h1>
This tutorial shows how we load and display a scene in O3D.

< ! -- Start of O3D plugin -- >
< div id= "o3d_elem1" style= "width:400px; height:300px" / >
< ! -- End of O3D plugin -- >
< / body>
< / html>

這段代碼裏定義了一個 o3d_elem1 元素，這是一個重點，後面會介紹到。

下面是JS代碼：

< script type= "text/javascript" src= "o3djs/base.js" > < / script>
< ! -- Our javascript code -- >
< script type= "text/javascript" id= "o3dscript" >
o3djs.require('o3djs.util' );
o3djs.require('o3djs.math' );
o3djs.require('o3djs.rendergraph' );
o3djs.require('o3djs.camera' );
o3djs.require('o3djs.pack' );
o3djs.require('o3djs.scene' );

window.onload = init;
window.onunload = unload;

//全局變量
var g_o3d;
var g_math;
var g_client;
var g_viewInfo;
var g_pack;
var g_finished = false;

function init()
{
o3djs.util.makeClients(initStep2);
}

function unload()
{
if (g_client)
g_client.cleanup();
}

function initStep2(clientElements)
{
var o3dElement = clientElements[0 ];
g_o3d = o3dElement.o3d;
g_math = o3djs.math;
g_client = o3dElement.client;

g_pack = g_client.createPack();
g_viewInfo = o3djs.rendergraph.createBasicView(g_pack,
g_client.root,
g_client.renderGraphRoot);

g_viewInfo. drawContext. projection = g_math. matrix4. perspective(

g_math .degToRad (30),

g_client .width / g_client .height ,

1,     //近切面的Z軸座標.

5000); //遠切面的Z軸座標.

// 設置照相機

g_viewInfo. drawContext. view = g_math. matrix4. lookAt([0, 1, 5], // eye

[0, 0, 0], // target

[0, 1, 0]); // up
}
< / script>

o3djs.require加載O3D庫文件。init() 和unload()則是HTML被載入和關閉時回調函數。從這裏我們來分析一下O3D的執行過程：

(1) HTML載入時，執行init()，調用o3djs.util.makeClients()函數。這個函數的功能是查找在當前html 文檔中所有id 以o3d 開頭的元素（像o3d ，o3d_elem,o3d_lang 等），然後在這些元素裏面開闢一塊區域( 一個object) ，這個就相當於windows 的窗口，以後操作都是在這裏面進行的，所以這個函數所做的其實跟windows 編程中的建立窗口差不多。 makeClients函數會生成一個o3dobject的數組，參數就是回調函數，makeClients會將這個o3dobject的數組傳給其回調函數。

(2) 進入回調函數initStep2。可以在這個函數裏做一些初始化的工作，clientElements[0 ]就是第一個object（這裏你也可以訪問其他的object，如果存在的話）。g_client 是 整個o3d 應用的入口點， g_o3d 是o3d 的命名空間， g_math 是整個數學庫的命名空間。

(3)  創建一個包(pack) 來管理所有的對象(object) 和這些對象的生存時間。

(4)  創建一個渲染圖(renderGraph),即g_viewInfo，然後設置照相機。

(5)  退出程序，執行unload()，清理所有callbacks。

到這裏差不多就是一個完整的程序了，不過還沒有任何東西可以顯示，下面往場景里加入一些元素，代碼直接加入到initStep2的尾部：

var effect = g_pack.createObject('Effect' );
var material = g_pack.createObject('Material' );
material.drawList = g_viewInfo.performanceDrawList;
material.effect = effect;
//創建一個球體
var shape = o3djs.primitives.createSphere(g_pack, material, 0 .5 , 20 , 20 );

g_cubeTransform = g_pack.createObject('Transform' );
g_cubeTransform.addShape(shape);
g_cubeTransform.parent = g_client.root;

g_finished = true;//結束標誌

 

可以看出來，O3d創建場景元素的過程和其他3D引擎很相似，首先創建一個材質渲染列表，然後創建object，將材質添加到物體上，最後將這個object添加到場景。現在我們可以看到場景中顯示出一個物體了。