创建一个O3D对象
设置全局变量初始化通用库
创建一个O3D包管理对象
创建一个渲染图
设置绘图上下文（包括投影矩阵和观察转化矩阵）
创建材质效果对象，加载shader 文件或内容，付给材质效果对象
创建材质对象和形状对象，设置材质 draw list（透明或不透明）设置材质对象其他参数
j加载一个矩阵变换（transforms）和形状对象（shapes）到转换图对象（transform graph）.
为图元对象（primitives）创建一个draw elements.
设置渲染回调操作函数, 3D图形每渲染一次都会执行渲染回调函数。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Hello Cube: Getting started with O3D
</title>
<!--连接O3D 的js文件-->
<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');
// javascript事件
// Run the init() function once the page has finished loading.
// Run the uninit() function when the page has is unloaded.
window.onload = init;
window.onunload = uninit;
// 创建全局变量
var g_o3d;
var g_math;
var g_client;
var g_pack;
var g_clock = 0;
var g_timeMult = 1;
var g_cubeTransform;
var g_finished = false; // for selenium testing
/**
* 渲染回调函数
* 每渲染一次形状的位置就变换一次.
* @param {o3d.RenderEvent} renderEvent The render event object that gives
* us the elapsed time since the last time a frame was rendered.
*/
function renderCallback(renderEvent) {
g_clock += renderEvent.elapsedTime * g_timeMult;
// Rotate the cube around the Y axis.
g_cubeTransform.identity();
g_cubeTransform.rotateY(2.0 * g_clock);
}
/**
* Creates the client area.
*/
function init() {
o3djs.util.makeClients(initStep2);
}
/**
* Initializes O3D, creates the cube and sets up the transform and
* render graphs.
* @param {Array} clientElements Array of o3d object elements.
*/
function initStep2(clientElements) {
// 初始化全局变量和库.
var o3dElement = clientElements[0];
g_client = o3dElement.client;
g_o3d = o3dElement.o3d;
g_math = o3djs.math;
// Initialize O3D sample libraries.
o3djs.base.init(o3dElement);
// 创建包对象，材质、纹理效果等对象都是由包创建、管理和销毁.
g_pack = g_client.createPack();
// 创建渲染图的视图窗口对象.
var viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot);
// 设置视图窗口的投影矩阵（平行投影-orthographic或透视投影-perspective）.
viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30), // 30 度视野角度.
g_client.width / g_client.height,//比例
1, // z轴近点剪切平面.
5000); // z轴远点剪切平面.
// 设置观察点的位置方向角度
// cube is located.
viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 1, 5], // eye
[0, 0, 0], // target
[0, 1, 0]); // up
//创建效果对象
var redEffect = g_pack.createObject('Effect');
//加载shader内容
var shaderString = document.getElementById('effect').value;
redEffect.loadFromFXString(shaderString);
// 创建材质对象.
var redMaterial = g_pack.createObject('Material');
// 设置材质对象drawList的方式（透明-zOrderedDrawList或不透明-performanceDrawList）.
redMaterial.drawList = viewInfo.performanceDrawList;
// 应用效果给材质对象，效果对象提交shader文件给3D硬件处理
redMaterial.effect = redEffect;
// 创建一个立方体，应用材质效果.
var cubeShape = o3djs.primitives.createCube(g_pack,redMaterial,1);
// 创建转换图节点，把立方体加入到转换节点
g_cubeTransform = g_pack.createObject('Transform');
g_cubeTransform.addShape(cubeShape);
//将转换节点加入到根节点下
g_cubeTransform.parent = g_client.root;
// 开始对立方体进行渲染
cubeShape.createDrawElements(g_pack, null);
// 执行渲染回调函数
g_client.setRenderCallback(renderCallback);
g_finished = true; // for selenium testing.
}
/**
* 清除所有对象.
*/
function uninit() {
if (g_client) {
g_client.cleanup();
}
}
</script>
</head>
<body>
<h1>Hello Cube</h1>
This example shows how to display a spinning red cube in O3D.
<br/>
<!-- Start of O3D plugin 必须以O3D开头-->
<div id="o3d" style="width: 600px; height: 600px;"></div>
<!-- End of O3D plugin -->
<!-- shader内容，告诉3D硬件，如何渲染的内容-->
<div style="display:none">
<!-- Start of effect -->
<textarea id="effect">
// 世界、视口、投影矩阵 ，这三个矩阵和顶点坐标矩阵计算，得出顶点的屏幕坐标
float4x4 worldViewProjection : WorldViewProjection;
// 顶点数据结构，
struct VertexShaderInput {
float4 position : POSITION;
};
//像素数据结构
struct PixelShaderInput {
float4 position : POSITION;
};
/**
* 此函数输入顶点的相关数据，返回给像素数据结构*/
PixelShaderInput vertexShaderFunction(VertexShaderInput input) {
PixelShaderInput output;
// 计算顶点位置=顶点坐标*世界坐标*视口坐标*投影坐标
output.position = mul(input.position, worldViewProjection);
return output;
}
/**
* 返回像素着色颜色，都是红色。.
*/
float4 pixelShaderFunction(PixelShaderInput input): COLOR {
return float4(1, 0, 0, 1); // Red.
}
//以下三行是必须的留的，不是注释，告诉3D硬件-顶点着色程序的入口点、像素着色程序的入口点
// #o3d VertexShaderEntryPoint vertexShaderFunction
// #o3d PixelShaderEntryPoint pixelShaderFunction
// #o3d MatrixLoadOrder RowMajor
</textarea>
<!-- End of effect -->
</div>
</body>
</html>