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添加到场景。现在我们可以看到场景中显示出一个物体了。