- 浏览: 298001 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
创建一个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>
发表评论
-
bufferData
2011-07-21 14:30 966/*void*/ bufferData //缓冲区数 ... -
导入支持的格式(Import)
2011-05-31 16:54 2406导入对话框选择格式,你会看到众多导入的格式。3ds m ... -
法线贴图
2011-05-13 11:48 1870本文转自:http://yumi08.jimdo.co ... -
法线向量
2011-05-13 10:20 2475面法线的计算相对来 ... -
ShowWebGL 强大的3D模型查看器
2011-04-12 14:01 5995ShowWebGL http://showwebgl.com ... -
o3d 创建一个平面
2011-03-29 15:27 824var vertexInfo = o3djs.primitiv ... -
o3d 常见几何图形创建
2011-03-29 15:25 10721、基本形状包括: o3djs.primitives.cre ... -
o3D 材质-定义透明材质
2011-03-29 15:20 1054//定义一个为白色并且是透明材质 var material = ... -
o3D 光照设定材质的光反射系数
2011-03-29 15:19 8651、创建材质 2、设定效果 3、创建光源的位置 4、设置材质环 ... -
Google 三维 JavaScript API
2011-03-28 15:59 848O3D 是一个开源的Web API,其可以创建相当牛X的基于浏 ... -
3D引擎CopperLicht(二)
2011-03-28 15:14 1339在上一个课程的基础上 ... -
3D引擎CopperLicht
2011-03-28 15:09 1685WebGL是一种3D绘图标准, ... -
o3d 文档原文
2011-03-18 18:00 819Basic TasksThe basic tasks perf ... -
WebGL的框架
2011-03-18 16:23 3803WebGL的框架 WebGL http://www.khro ... -
c3dl 官方教程(二)
2011-03-18 16:13 1858教程#2:一个简单的场景本教程将展示C3DL)的基础知识使用三 ... -
C3DL 官方教程(一)
2011-03-18 15:57 1494本文笔者翻译,如有错误请留言。 教程#1:Web ... -
3D模型导入 CanvasMatrix.js引擎 demo(一)
2011-03-17 17:51 2971为广大html5 3d开发的朋友们演示 代码贴图,请下载附 ... -
c3dl 可以直接导入3dmax文件的3D引擎
2011-03-17 17:41 1087c3dl可以直接在网页代码中使用.dae格式的3dma ... -
o3d 模型导入引擎CanvasMatrix.js
2011-03-17 16:09 1581最近研究3d引擎在html5中的效果实现,需求当然是 ... -
o3d API总结
2011-03-17 13:52 848Making an Application with O3D ...
相关推荐
使用基于密度泛函理论(DFT)的Cast叩量子力学计算程序模块,对CHX(X=0-4)在Y-AI2O3(ll0D)表面吸附的位置,空间结构和能量进行了理论计算。计算结果表明.CHx=(x=0-3)与表面形成强的相互作用。CH3,CH2物种处于表面八面体...
C在安装活动目录之前,要确保计算机满足基本系统要求:* Z& t: _9 N6 A1 c" C - B7 H( D6 e+ q- W9 x(1)计算机运行Windows 2000 Server版本,且系统盘是NTFS分区。0 O0 F/ N" {4 M2 A* V6 X$ g; f/ Z9 g & t' m4 ...
43_连接查询2 R: d" J9 J1 O3 D* B1 }2 u( {2 v 44_事务并发现象-脏读-幻读-不可重复读-隔离级别 45_隔离级别-并发现象展示-避免 46_表级锁-行级锁-forupdate 47_mysql数据源连接池 48_NIO" d% v1 P# ~3 S/ L 49_NIO...
│ 03 线程等待与唤醒.mp4# b* ^" k$ d# O3 f8 t8 a3 k │ 04 WaitForSingleObject函数分析.mp4$ V7 L' C3 I( W │ 05 事件.mp4 │ 06 信号量.mp4 │ 07 互斥体.mp4 │ ├─保护模式- }! n! C$ O/ s" Q │ 014 中断...
5 软件设计思想………………………………………………………………………… 5 数字滤波计算法说明………………………………………………………………… 6 主程序流程图……………………………………………………...