一、要创建一个o3d项目需要做的基本工作
1、生成o3d对象
2、给全局变量赋值并且初始化API库
3、生成pack包,用于管理所有产生的o3d对象
4、生成渲染图形
5、建立上绘图环境(透视网格和视图转换)
6、生成效果,并加载渲染信息
7、生成素材和形状,设置素材列表及其他素材参数
8、对模型添加动作及形状
9、生成绘制元素列表
10、建立渲染回调函数,在每次3D模型刷新时执行特定任务
二、HTML文档
一个o3d应用程序是基于HTML的,主要的o3d功能是HTML文档的<head><\head>标签之间,包含在<script>标签元素的代码实现的,例如下面的代码。
当HTML文档完成加载时,o3d的init()函数被调用。当关闭HTML文档时,会触发onunload事件,从而调用o3d的uninit()函数,完成一些清理工作,比如对象的删除,内存释放等。
________________________________________
<script type="text/javascript" src="o3djs/base.js"></script>
<script type="text/javascript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
window.onload = init;
window.onunload = uninit;
________________________________________
三、o3d接口API库
O3D包含了一系列公用库,如果要用某个功能函数,就需要在程序的开始在<script>标签内加载该代码。如下所示,第一个<script>标签内的加载的库中定义了require()函数,用这个函数来加载其他的接口API库。
________________________________________
<script type="text/javascript" src="o3djs/base.js"></script>
<script type="text/javascript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
________________________________________
四、生成O3D插件对象
在代码示例中,init()函数调用了o3d库函数o3djs.util.makeClients(),以此来产生o3d对象。当这个函数返回时,它会调用回调函数initStep2()。用户浏览器必须允许脚本执行。
________________________________________
function init() {
o3djs.util.makeClients(initStep2)
}
________________________________________
在页面设置客户区窗口大小(即O3D程序运行区域)
用库函数o3djs.util.makeClients()在HTML中生成O3D对象可以跨平台使用。这个函数查找HTML文档中所有id以"o3d"开头的(例如o3d,o3d-element等)<div>标签,并在里面插入一客户区,以运行O3D程序。客户区域大小默认设置为100%,因此<div>必须有大小设置,如下
________________________________________
<!-- A div of a specific size -->
<div id="o3d" style="width:800px; height:600px" />
<!-- A div that fills its containing element -->
<div id="o3d" style="width:100%; height:100%" />
________________________________________
makeClients()函数传入一个回调函数作为参数,一旦o3d对象被创建,此回调函数就会被触发。
五、建立基本的O3D
给全局变量赋值:
________________________________________
var o3dElement = clientElements[0];
g_client = o3dElement.client;
g_o3d = o3dElement.o3d;
g_math = o3djs.math;
________________________________________
上面的变量有如下意义:
• o3dElement 是HTML O3D元素,是DOM的一部分
• g_client 是O3D应用程序的入口点
• g_o3d 是O3D的命名空间
• g_math是o3d数学库的命名空间
六、产生对象包pack
对象包容纳了o3d的所有对象,并控制这些对象的生命周期。
g_pack = g_client.createPack();
七、创建渲染图
下这段例子代码,用库函数renderGraph.createBasicView()产生一个标准的渲染图。这个渲染图有两个绘图列表,一个用于绘制非透明材质的元素(性能绘图列表),另一个用于绘制透明材质元素(透明效果绘图列表)
________________________________________
var viewInfo = o3djs.renderGraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot);
________________________________________
八、设置绘图背景(drawContext)
绘图背景指定了视图投影和虚拟摄像机的位置。drawContext对象是用库函数renderGraph.createBasicView()产生的。下面的例子代码展示了如何设置它的参数:
________________________________________
// 建立一个简单的透视图
viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30), // 30度视场
g_client.width / g_client.height,
1, // 靠近平面
5000); // 远离平面
// 建立视图变换注视模型所在的区域
viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 1, 5], // 眼睛
[0, 0, 0], // 目标
[0, 1, 0]); // 向上
________________________________________
九、创建一个效果并加载渲染
顶点和像素着色器定义在HTML文档的<textarea>之间。着色器控制每个像素的颜色计算。下面的代码产生效果(redEffect)并将渲染内容读入着色器。
________________________________________
var redEffect = g_pack.createObject('Effect');
// 在HTML文档中寻找“Effect”的元素
var shaderString = document.getElementById('effect').value;
// 将元素<textarea id="effect"> 中的所有内容加载到Effect对象中
redEffect.loadFromFXString(shaderString);
________________________________________
十、生成材质和形状
模型的材质是在initStep2()中创建的,并被赋给渲染列表,该列表控制非透明材质。在下面的代码将模型的材质效果设置为红色 'redEffect’,这样图形硬件可以可以对模型进行适当的渲染。在下面的代码中,由于将模型所有像素都设置为红色,所以没有进行复杂的渲染计算。代码中的createCube()函数,创建了几何立方体,并渲染成红色材质。可以将立方体替换成SketchUp, 3ds Max或者Maya
等工具建的模型。
________________________________________
var redMaterial = g_pack.createObject('Material');
redMaterial.drawList = viewInfo.performanceDrawList;
redMaterial.effect = redEffect;
var cubeShape = createCube(redMaterial);
________________________________________
十一、给模型建立动作
下面的代码给模型赋予了简单的动作变换。
________________________________________
g_cubeTransform = g_pack.createObject('Transform');
g_cubeTransform.addShape(cubeShape);
g_cubeTransform.parent(g_client.root);
________________________________________
十二、产生绘制元素(Draw Elements)
每个图形基元都有一个用于描述该图形的材质及效果的绘制元素(draw element)。库函数createDrawElements()为每个图形基元生成不同的绘制元素(draw element)并将这些绘制元素添加到与图形基元材质有关的绘制列表(draw list)中。当窗口渲染时,系统会为每个绘制列表(draw list)产生一次绘制刷新(draw pass),这样所有的在绘制列表(draw list)中的绘制元素(draw element)就会被渲染。
________________________________________
cubeShape.createDrawElements(g_pack, null);
________________________________________
十三、设置渲染回调函数
每次硬件刷新屏幕时,场景都会被自动渲染。下面的例子代码中setRenderCallback()函数设置了一个回调,用于每次场景渲染时更新模型的动作及形状。
________________________________________
g_client.setRenderCallback(renderCallback);
1、生成o3d对象
2、给全局变量赋值并且初始化API库
3、生成pack包,用于管理所有产生的o3d对象
4、生成渲染图形
5、建立上绘图环境(透视网格和视图转换)
6、生成效果,并加载渲染信息
7、生成素材和形状,设置素材列表及其他素材参数
8、对模型添加动作及形状
9、生成绘制元素列表
10、建立渲染回调函数,在每次3D模型刷新时执行特定任务
二、HTML文档
一个o3d应用程序是基于HTML的,主要的o3d功能是HTML文档的<head><\head>标签之间,包含在<script>标签元素的代码实现的,例如下面的代码。
当HTML文档完成加载时,o3d的init()函数被调用。当关闭HTML文档时,会触发onunload事件,从而调用o3d的uninit()函数,完成一些清理工作,比如对象的删除,内存释放等。
________________________________________
<script type="text/javascript" src="o3djs/base.js"></script>
<script type="text/javascript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
window.onload = init;
window.onunload = uninit;
________________________________________
三、o3d接口API库
O3D包含了一系列公用库,如果要用某个功能函数,就需要在程序的开始在<script>标签内加载该代码。如下所示,第一个<script>标签内的加载的库中定义了require()函数,用这个函数来加载其他的接口API库。
________________________________________
<script type="text/javascript" src="o3djs/base.js"></script>
<script type="text/javascript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
________________________________________
四、生成O3D插件对象
在代码示例中,init()函数调用了o3d库函数o3djs.util.makeClients(),以此来产生o3d对象。当这个函数返回时,它会调用回调函数initStep2()。用户浏览器必须允许脚本执行。
________________________________________
function init() {
o3djs.util.makeClients(initStep2)
}
________________________________________
在页面设置客户区窗口大小(即O3D程序运行区域)
用库函数o3djs.util.makeClients()在HTML中生成O3D对象可以跨平台使用。这个函数查找HTML文档中所有id以"o3d"开头的(例如o3d,o3d-element等)<div>标签,并在里面插入一客户区,以运行O3D程序。客户区域大小默认设置为100%,因此<div>必须有大小设置,如下
________________________________________
<!-- A div of a specific size -->
<div id="o3d" style="width:800px; height:600px" />
<!-- A div that fills its containing element -->
<div id="o3d" style="width:100%; height:100%" />
________________________________________
makeClients()函数传入一个回调函数作为参数,一旦o3d对象被创建,此回调函数就会被触发。
五、建立基本的O3D
给全局变量赋值:
________________________________________
var o3dElement = clientElements[0];
g_client = o3dElement.client;
g_o3d = o3dElement.o3d;
g_math = o3djs.math;
________________________________________
上面的变量有如下意义:
• o3dElement 是HTML O3D元素,是DOM的一部分
• g_client 是O3D应用程序的入口点
• g_o3d 是O3D的命名空间
• g_math是o3d数学库的命名空间
六、产生对象包pack
对象包容纳了o3d的所有对象,并控制这些对象的生命周期。
g_pack = g_client.createPack();
七、创建渲染图
下这段例子代码,用库函数renderGraph.createBasicView()产生一个标准的渲染图。这个渲染图有两个绘图列表,一个用于绘制非透明材质的元素(性能绘图列表),另一个用于绘制透明材质元素(透明效果绘图列表)
________________________________________
var viewInfo = o3djs.renderGraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot);
________________________________________
八、设置绘图背景(drawContext)
绘图背景指定了视图投影和虚拟摄像机的位置。drawContext对象是用库函数renderGraph.createBasicView()产生的。下面的例子代码展示了如何设置它的参数:
________________________________________
// 建立一个简单的透视图
viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30), // 30度视场
g_client.width / g_client.height,
1, // 靠近平面
5000); // 远离平面
// 建立视图变换注视模型所在的区域
viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 1, 5], // 眼睛
[0, 0, 0], // 目标
[0, 1, 0]); // 向上
________________________________________
九、创建一个效果并加载渲染
顶点和像素着色器定义在HTML文档的<textarea>之间。着色器控制每个像素的颜色计算。下面的代码产生效果(redEffect)并将渲染内容读入着色器。
________________________________________
var redEffect = g_pack.createObject('Effect');
// 在HTML文档中寻找“Effect”的元素
var shaderString = document.getElementById('effect').value;
// 将元素<textarea id="effect"> 中的所有内容加载到Effect对象中
redEffect.loadFromFXString(shaderString);
________________________________________
十、生成材质和形状
模型的材质是在initStep2()中创建的,并被赋给渲染列表,该列表控制非透明材质。在下面的代码将模型的材质效果设置为红色 'redEffect’,这样图形硬件可以可以对模型进行适当的渲染。在下面的代码中,由于将模型所有像素都设置为红色,所以没有进行复杂的渲染计算。代码中的createCube()函数,创建了几何立方体,并渲染成红色材质。可以将立方体替换成SketchUp, 3ds Max或者Maya
等工具建的模型。
________________________________________
var redMaterial = g_pack.createObject('Material');
redMaterial.drawList = viewInfo.performanceDrawList;
redMaterial.effect = redEffect;
var cubeShape = createCube(redMaterial);
________________________________________
十一、给模型建立动作
下面的代码给模型赋予了简单的动作变换。
________________________________________
g_cubeTransform = g_pack.createObject('Transform');
g_cubeTransform.addShape(cubeShape);
g_cubeTransform.parent(g_client.root);
________________________________________
十二、产生绘制元素(Draw Elements)
每个图形基元都有一个用于描述该图形的材质及效果的绘制元素(draw element)。库函数createDrawElements()为每个图形基元生成不同的绘制元素(draw element)并将这些绘制元素添加到与图形基元材质有关的绘制列表(draw list)中。当窗口渲染时,系统会为每个绘制列表(draw list)产生一次绘制刷新(draw pass),这样所有的在绘制列表(draw list)中的绘制元素(draw element)就会被渲染。
________________________________________
cubeShape.createDrawElements(g_pack, null);
________________________________________
十三、设置渲染回调函数
每次硬件刷新屏幕时,场景都会被自动渲染。下面的例子代码中setRenderCallback()函数设置了一个回调,用于每次场景渲染时更新模型的动作及形状。
________________________________________
g_client.setRenderCallback(renderCallback);