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代码:
< 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>
< ! -- 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);
[0, 1, 0]); // up
}
< / script>
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;//结束标志