O3D 程序框架

最新推荐文章于 2021-04-16 20:32:02 发布

佐笾已逝

最新推荐文章于 2021-04-16 20:32:02 发布

阅读量68

点赞数

分类专栏： 3D 文章文章标签：框架 HTML 浏览器脚本项目管理

本文链接：https://blog.csdn.net/wjlgryx/article/details/83873348

版权

3D 文章专栏收录该内容

45 篇文章 0 订阅

订阅专栏

一、要创建一个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>必须有大小设置，如下
________________________________________

<div id="o3d" style="width:800px; height:600px" />

<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);

佐笾已逝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
O3D 程序框架

一、要创建一个o3d项目需要做的基本工作 1、生成o3d对象 2、给全局变量赋值并且初始化API库 3、生成pack包，用于管理所有产生的o3d对象 4、生成渲染图形 5、建立上绘图环境（透视网格和视图转换） 6、生成效果，并加载渲染信息 7、生成素材和形状，设置素材列表及其他素材参数 ...
复制链接

扫一扫

专栏目录