- 浏览: 298748 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
Basic Tasks
The basic tasks performed in an O3D program are the following:
1:Create the O3D object.
2:Assign values to global variables and initialize utility libraries.
3:Create the pack to manage O3D objects.
4:Create the render graph.
5:Set up the draw context (perspective and viewing transformations).
6:Create an effect and load the shader information into it.
7:Create the material and shape, set the material's draw list, and set up other material parameters.
8:Add the transforms and shapes to the transform graph.
9:Create the draw elements for the primitives.
10:Set the optional render callback function, if desired, to perform special tasks each time the 3D scene is rendered.
The following sections discuss how the Hello, Cube sample implements these tasks.
//-------------------------------------------------------------------------------------------------------------
HTML Document
An O3D application is contained in an HTML document. The main code for the O3D JavaScript application is contained in a <script> element inside the <head> element of the HTML document. In this example, when the HTML page is finished loading, the O3D init() function is called. The HTML page also sets up an onunload event, which calls the application's uninit() function to perform necessary cleanup, such as removing callback functions when the HTML page is unloaded..
<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;
.
.
.
//---------------------------------------------------------------------------
Utility Libraries
O3D includes a number of utility libraries that simplify the coding of common tasks. If you use functions from one of these libraries, you also need to include that code in <script> tags at the beginning of your program as shown below. (The first <script> element defines the require
function, which is used thereafter to initialize the other utility libraries.):
<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');
//--------------------------------------------------------------------------------
Creating the O3D Plug-in Object
In the code sample, the init() function calls the utility function o3djs.util.makeClients() to make the O3D objects. When this function returns, it invokes the callback function initStep2(). The user's browser must have scripting enabled in order for O3D HTML elements to be created.
function init() {
o3djs.util.makeClients(initStep2)
}
//-------------------------------------------------------------------------------
Setting the Size of the Client Area on the Page
Use the o3djs.util.makeClients() function to create O3D objects in HTML that can be used across platforms. This function finds all <div> elements with an id that starts with the word "o3d" (for example o3d, o3d-element, and so on) and inserts a client area inside. The size of the client area is always set to 100 percent, which means the <div> must have its size set or managed by the browser. For example:
<!-- 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%" />
The makeClients() utility takes a callback function as one of its parameters. This callback is triggered once the O3D objects have been created.
//------------------------------------------------------------
Basic Setup for O3D
This code assigns values to global variables:
var o3dElement = clientElements[0];
g_client = o3dElement.client;
g_o3d = o3dElement.o3d;
g_math = o3djs.math;
//---------------------------------------------------------------------------
These variables have the following meaning:
o3dElement is the HTML O3D element, which is part of the DOM
g_client is the entry point of the O3D application
g_o3d is the namespace for O3D
g_math is the namespace for the math library
//------------------------------------------------
Creating the Pack
The pack contains all O3D objects and manages their lifetime.
g_pack = g_client.createPack();
//---------------------------------------------------------
Creating the Render Graph
This example uses the utility function rendergraph.createBasicView() to create a standard render graph, as described in the Technical Overview. This render graph has two draw lists, one for draw elements with opaque materials (the performance draw list) and one for draw elements with transparent materials (the transparency draw list). A separate draw pass is performed for each draw list.
var viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot);
//------------------------------------------------------------
Setting Up the Draw Context
The draw context specifies the view projection and the position of a virtual camera that is viewing the scene (the view transformation). The drawContext object is created by the utility function renderGraph.createBasicView(). Here is an example of setting its values:
// Set up a simple perspective view.
viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30), // 30 degree fov.
g_client.width / g_client.height,
1, // Near plane.
5000); // Far plane.
// Set up our view transformation to look towards the world origin where the
// cube is located.
viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 1, 5], // eye
[0, 0, 0], // target
[0, 1, 0]); // up
//-----------------------------------------------------------------------------
Creating an Effect and Loading the Shaders
The vertex and pixel shaders are defined in the <textarea> element of the HTML document. The shaders control the calculations for the color of each pixel in each draw element. This code creates the effect (redEffect) and reads in the contents of the shaders:
var redEffect = g_pack.createObject('Effect');
// looks in the HTML document for an element named "effect"
var shaderString = document.getElementById('effect').value;
// loads the entire contents of the <textarea id="effect"> element into the redEffect object
redEffect.loadFromFXString(shaderString);
Creating the Material and Shape
The red material for the cube is created in the initStep2() function and assigned to the performance draw list, which handles opaque materials. The following code also sets the material's effect to redEffect so that the graphics hardware can apply the proper shading to the cube. In this example, no shading calculations are performed. The simple color red is returned for all pixels. The createCube() function constructs the cube geometry, as described in Shapes, and uses the red material. An alternative to setting up the geometry within O3D, as shown in the Hello, Cube examples, is to import geometry constructed using an application such as SketchUp, 3ds Max, or Maya.
var redMaterial = g_pack.createObject('Material');
redMaterial.drawList = viewInfo.performanceDrawList;
redMaterial.effect = redEffect;
var cubeShape = createCube(redMaterial);
Setting Up the Transform Graph
The Hello, Cube example has a very simple transform graph. The following code creates one transform for the cube shape, adds the shape to the transform, and then adds the transform to the O3D root.
g_cubeTransform = g_pack.createObject('Transform');
g_cubeTransform.addShape(cubeShape);
g_cubeTransform.parent = g_client.root;
Creating Draw Elements
Every primitive has a draw element constructed for it that describes what material and effect to use when the primitive is rendered. The createDrawElements() function creates draw elements for all primitives in the specified shape and adds the draw elements to the draw list associated with the primitive's material. At render time, one draw pass is performed for each draw list, and all draw elements in the lists are rendered.
cubeShape.createDrawElements(g_pack, null);
Setting the Render Callback Function
The scene is automatically rendered each time the hardware refreshes the screen. In this example, setRenderCallback() sets a callback that updates the cube's transform values each time the scene is rendered. This update makes the cube spin.
g_client.setRenderCallback(renderCallback);
发表评论
-
bufferData
2011-07-21 14:30 974/*void*/ bufferData //缓冲区数 ... -
导入支持的格式(Import)
2011-05-31 16:54 2409导入对话框选择格式,你会看到众多导入的格式。3ds m ... -
法线贴图
2011-05-13 11:48 1871本文转自:http://yumi08.jimdo.co ... -
法线向量
2011-05-13 10:20 2477面法线的计算相对来 ... -
ShowWebGL 强大的3D模型查看器
2011-04-12 14:01 6002ShowWebGL http://showwebgl.com ... -
o3d 创建一个平面
2011-03-29 15:27 832var vertexInfo = o3djs.primitiv ... -
o3d 常见几何图形创建
2011-03-29 15:25 10771、基本形状包括: o3djs.primitives.cre ... -
o3D 材质-定义透明材质
2011-03-29 15:20 1058//定义一个为白色并且是透明材质 var material = ... -
o3D 光照设定材质的光反射系数
2011-03-29 15:19 8721、创建材质 2、设定效果 3、创建光源的位置 4、设置材质环 ... -
O3D程序基本结构
2011-03-29 15:13 764创建一个O3D对象 设置全局变量初始化通用库 创建一个O3D ... -
Google 三维 JavaScript API
2011-03-28 15:59 853O3D 是一个开源的Web API,其可以创建相当牛X的基于浏 ... -
3D引擎CopperLicht(二)
2011-03-28 15:14 1346在上一个课程的基础上 ... -
3D引擎CopperLicht
2011-03-28 15:09 1692WebGL是一种3D绘图标准, ... -
WebGL的框架
2011-03-18 16:23 3808WebGL的框架 WebGL http://www.khro ... -
c3dl 官方教程(二)
2011-03-18 16:13 1866教程#2:一个简单的场景本教程将展示C3DL)的基础知识使用三 ... -
C3DL 官方教程(一)
2011-03-18 15:57 1502本文笔者翻译,如有错误请留言。 教程#1:Web ... -
3D模型导入 CanvasMatrix.js引擎 demo(一)
2011-03-17 17:51 2975为广大html5 3d开发的朋友们演示 代码贴图,请下载附 ... -
c3dl 可以直接导入3dmax文件的3D引擎
2011-03-17 17:41 1091c3dl可以直接在网页代码中使用.dae格式的3dma ... -
o3d 模型导入引擎CanvasMatrix.js
2011-03-17 16:09 1586最近研究3d引擎在html5中的效果实现,需求当然是 ... -
o3d API总结
2011-03-17 13:52 852Making an Application with O3D ...
相关推荐
关键字文档说明,含中文翻译~ 由于翻译由自己制作,因此可能比较简陋, 但是表明了O3D的整个架构体系,值得一眼~
实现O3D的布局,拖动、旋转(FireFox)
o3d是Google开发的基于web的3d编程API,因文件太大分三次上传
google开发的web3d编程APT o3d.提供的各种3d效果例子,因文件太大,分三个包传上
o3d lib1 graph javascript ajax
3D-o3d.zip,objective-3d视频游戏引擎,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
o3d goolge javascript texture graph
NULL 博文链接:https://xml.iteye.com/blog/531459
O3D 实例 这是我自己的实例,嘿嘿,好像研究的还可以
关于野村综研推广的大型机COBOL O3W架构的相关内部资料
网页 3D技术,谷歌O3D只适用于,chrome跟IE8
o3d是Google开发的基于web的3d编程API,因文件太大分三次上传
CaO-Al2O3-B2O3-5%SiO2四元相图研究,刘辰生,束奇峰,B2O3对降低保护渣熔点具有显著的作用,四元基础渣系CaO-Al2O3-B2O3-SiO2的研究对新型高铝钢保护渣和无氟保护渣具有重意义。本文结合Factsag
根据分子和离子共存理论,建立了CaO-Al2O3 和CaO-SiO2-Al2O3 渣系的活度计算模型,并利用模型对渣中各组元的活度进行了计算,分析了 w (CaO )对渣中组元活度的影响.结果表明,在 CaO-Al2O3 渣系中,当w(CaO)小于45%时,...
稀土氧化物掺杂SrO-CaO-Al2O3-SiO2-B2O3系统封接玻璃的研究,沈阳,李橙,本论文通过淬火的工艺制备了分别掺杂稀土氧化物CeO2和Pr2O3的SrO-CaO-Al2O3-SiO2-B2O3系统封接玻璃。通过差热分析确定两组玻璃的特征温度,...
CaO-Al2O3-B2O3-BaO四元系无氟连铸保护渣结构的探究,王志峰,束奇峰,探究了CaO-Al2O3-B2O3-BaO四元系无氟连铸保护渣的结构特征。研究得出了随着BaO含量的增加,渣中平均桥氧数增加,铝酸盐网络结构聚合度升
首先采用化学镀铜工艺制备了Cu包覆纳米Al2O3复合粉体,分析了预处理工艺和化学镀工艺对复合粉体的组成及形貌的影响;再将均匀包覆的复合粉体与铜粉充分混合后,利用热压烧结成型工艺制备了纳米Al2O3弥散强化铜基复合...
A low binding energy component in the Al 2p core peak spectra was observed and attributed to the formation of a LiAlxCo1−xO2 solid solution interphase for both Al2O3- and AlPO4-coated LiCoO2. The ...
此存储库包含 Open 3D Engine (O3DE) 的网站和文档。 在预览期间,站点和文档正在大量开发中 - 所以如果信息丢失或有时中断,请不要感到惊讶。 如果您想预览我们的官方网站,请直接联系我们获取信息。 如果您想构建...
o3d-webgl-pool 来自废弃 o3d 引擎开发者的 3D 台球游戏演示