O3D是google公司开发的一套用于web3D开发的javascript API,是为了创建基于网页的3D图形操作界面和3D游戏而开发。网上经常有人把它拿来和OpenGL作比较,实际上,O3D可以看做是对OpenGL和D3D的封装。O3D的架构如下所示,底层是基于OpengGL和Direct3D接口实现,支持顶点shader和像素shader,支持GPU加速运算,因此,在不考虑带宽限制的条件下,O3D的渲染性能几乎可以媲美很多本地应用(譬如游戏),大家可以在google O3D的官网上找到不少很炫的Demo。o3d0

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:

o3d1

这个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文档中所有ido3d开头的元素(像o3do3d_elem,o3d_lang等),然后在这些元素里面开辟一块区域(一个object),这个就相当于windows的窗口,以后操作都是在这里面进行的,所以这个函数所做的其实跟windows编程中的建立窗口差不多。makeClients函数会生成一个o3dobject的数组,参数就是回调函数,makeClients会将这个o3dobject的数组传给其回调函数。
(2) 进入回调函数initStep2。可以在这个函数里做一些初始化的工作,clientElements[0]就是第一个object(这里你也可以访问其他的object,如果存在的话)。g_client 整个o3d应用的入口点, g_o3do3d的命名空间, 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添加到场景。现在我们可以看到场景中显示出一个物体了。
o3d2

配合jquery实现异步加载页面元素

最近在做系统的时候,遇到了一个瓶颈,即在列出所有素材的列表列表的时候,由于素材都是swf或者jpg,结果几百个文件的时候,就会导致页面加载极慢,老大说让...

阅读全文

js对cookie的几个操作函数(仅作备忘)

js对cookie的几个操作函数,网上找的(仅作备忘) function getCookieVal(offset) {     var endstr = document.cookie.indexOf(“;”, offset);  ...

阅读全文

CGI返回弹出下载文件对话框的HTML代码

最近在做公司的一个内部管理系统,因为自己php不熟,公司又没有asp.net的环境,所以自己最后居然用js+CGI的模式,运行速度倒是飞快了,编码却麻烦的要死……罪...

阅读全文

4则回应给“O3D基础教程1 简明介绍和程序框架”

  1. 请问怎么在o3d中调用IME系统输入法说道:

    请问怎么在o3d中使用IME,怎么调用系统输入法?

    [回复]

    Dante 回复:

    呃,这个问题等另一位作者回答一下哦

    [回复]

    ian 回复:

    当翻译这个教材的时候,我没有在O3d的接口中发现对输入法的直接支持,对于这个问题我也还没有研究过呢,真是汗颜啊
    不过既然O3D是对Opengl和D3D的封装,那么理论上OpenGL或D3D中系统输入的解决方案在这里也是适用的

    [回复]

    O3d的输入法与D3D不很适用 回复:

    d3d的输入法是通过语言调用系统dll实现的,但是无法在JavaScript中调用普通DLL,只能使用new ActiveXObject调用ActiveX DLL,所以O3d的ActiveX中必须有对系统输入法的支持,才可以使用系统输入法吧?

    [回复]

发表评论