- 浏览: 308507 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
1、创建材质
2、设定效果
3、创建光源的位置
4、设置材质环境光反射系数
5、设定材质光线漫反射系数
6、设置材质光线反射系数
7、设定材质光洁度
/*加载效果文件,创建材质*/
var effect = g_pack.createObject('Effect');
effect.loadFromFXString(document.getElementById('shader').value);
var myMaterial = g_pack.createObject('Material');
myMaterial.effect = effect;
var light_pos_param = myMaterial.getParam('light_pos');//光源的位置
light_pos_param.value = [10, 10, 20];
var light_ambient_param = myMaterial.getParam('light_ambient');//环境光反射系数
light_ambient_param.value = [0.04, 0.04, 0.04, 1];
var light_diffuse_param = myMaterial.getParam('light_diffuse');//漫反射系数
light_diffuse_param.value = [0.8, 0, 0, 1];
var light_specular_param = myMaterial.getParam('light_specular');//反射系数
light_specular_param.value = [0.5, 0.5, 0.5, 1];
var shininess_param = myMaterial.getParam('shininess');//光洁度
shininess_param.value = 30.0;
//------------------效果文件'shader'--------------------/
<textarea id="shader" name="shader" cols="80" rows="20"
style="display: none;">
// The 4x4 world view projection matrix.
float4x4 worldViewProjection : WorldViewProjection;
// positions of the light and camera
float3 light_pos;
float3 camera_pos;
// phong lighting components of the light source
float4 light_ambient;
float4 light_diffuse;
float4 light_specular;
// shininess of the material. (for specular lighting)
float shininess;
// input parameters for our vertex shader
struct VertexShaderInput {
float4 postion : POSITION;
float3 normal : NORMAL;
float4 color : COLOR;
};
// input parameters for our pixel shader
// also the output parameters for our vertex shader
struct PixelShaderInput {
float4 postion : POSITION;
float3 lightVector : TEXCOORD0;
float3 normal : TEXCOORD1;
float3 viewPosition : TEXCOORD2;
float4 color : COLOR;
};
/**
* Vertex Shader - vertex shader for phong illumination
*/
PixelShaderInput vertexShaderFunction(VertexShaderInput input) {
/**
* We use the standard phong illumination equation here.
* We restrict (clamp) the dot products so that we
* don't get any negative values.
* All vectors are normalized for proper calculations.
*
* The output color is the summation of the
* ambient, diffuse, and specular contributions.
*
* Note that we have to transform each vertex and normal
* by the world view projection matrix first.
*/
PixelShaderInput output;
output.postion = mul(input.postion, worldViewProjection);
/**
* lightVector - light vector
* normal - normal vector
* viewPosition - view vector (from camera)
*/
// NOTE: In this case we do not need to multiply by any matrices since the
// WORLD transformation matrix is the identity. If you were moving the
// object such that the WORLD transform matrix was not the identity, you
// would need to multiply the normal by the WORLDINVERSETTRANSFORM matrix
// since the normal is in object space. Other values (light_pos, camera_pos)
// are already in world space.
float3 lightVector = light_pos - input.postion.xyz;//计算光方向向量和长度
float3 normal = input.normal;
float3 viewPosition = camera_pos - input.postion.xyz;//计算照相机相对顶点的向量
output.lightVector = lightVector;
output.normal = normal;
output.viewPosition = viewPosition;
output.color = input.color;
return output;
}
/**
* Pixel Shader
*/
float4 pixelShaderFunction(PixelShaderInput input): COLOR {
float3 lightVector = normalize(input.lightVector);
float3 normal = normalize(input.normal);
float3 viewPosition = normalize(input.viewPosition);
float3 halfVector = normalize(lightVector + viewPosition);
// use lit function to calculate phong shading
// x component contains the ambient coefficient
// y component contains the diffuse coefficient:
// max(dot(normal, lightVector),0)
// z component contains the specular coefficient:
// dot(normal, lightVector) < 0 || dot(normal, halfVector) < 0 ?
// 0 : pow(dot(normal, halfVector), shininess)
// NOTE: This is actually Blinn-Phong shading, not Phong shading
// which would use the reflection vector instead of the half vector
float4 phong_coeff = lit(dot(normal, lightVector), dot(normal, halfVector), shininess);//lit光的计算函数
float4 ambient = light_ambient * phong_coeff.x * input.color;//环境光分量×颜色值
float4 diffuse = light_diffuse * phong_coeff.y * input.color;//漫反射分量X颜色值
float4 specular = light_specular * phong_coeff.z * input.color;//反色分量X颜色值
return ambient + diffuse + specular;
}
// Here we tell our effect file *which* functions are
// our vertex and pixel shaders.
// #o3d VertexShaderEntryPoint vertexShaderFunction
// #o3d PixelShaderEntryPoint pixelShaderFunction
// #o3d MatrixLoadOrder RowMajor
</textarea>
2、设定效果
3、创建光源的位置
4、设置材质环境光反射系数
5、设定材质光线漫反射系数
6、设置材质光线反射系数
7、设定材质光洁度
/*加载效果文件,创建材质*/
var effect = g_pack.createObject('Effect');
effect.loadFromFXString(document.getElementById('shader').value);
var myMaterial = g_pack.createObject('Material');
myMaterial.effect = effect;
var light_pos_param = myMaterial.getParam('light_pos');//光源的位置
light_pos_param.value = [10, 10, 20];
var light_ambient_param = myMaterial.getParam('light_ambient');//环境光反射系数
light_ambient_param.value = [0.04, 0.04, 0.04, 1];
var light_diffuse_param = myMaterial.getParam('light_diffuse');//漫反射系数
light_diffuse_param.value = [0.8, 0, 0, 1];
var light_specular_param = myMaterial.getParam('light_specular');//反射系数
light_specular_param.value = [0.5, 0.5, 0.5, 1];
var shininess_param = myMaterial.getParam('shininess');//光洁度
shininess_param.value = 30.0;
//------------------效果文件'shader'--------------------/
<textarea id="shader" name="shader" cols="80" rows="20"
style="display: none;">
// The 4x4 world view projection matrix.
float4x4 worldViewProjection : WorldViewProjection;
// positions of the light and camera
float3 light_pos;
float3 camera_pos;
// phong lighting components of the light source
float4 light_ambient;
float4 light_diffuse;
float4 light_specular;
// shininess of the material. (for specular lighting)
float shininess;
// input parameters for our vertex shader
struct VertexShaderInput {
float4 postion : POSITION;
float3 normal : NORMAL;
float4 color : COLOR;
};
// input parameters for our pixel shader
// also the output parameters for our vertex shader
struct PixelShaderInput {
float4 postion : POSITION;
float3 lightVector : TEXCOORD0;
float3 normal : TEXCOORD1;
float3 viewPosition : TEXCOORD2;
float4 color : COLOR;
};
/**
* Vertex Shader - vertex shader for phong illumination
*/
PixelShaderInput vertexShaderFunction(VertexShaderInput input) {
/**
* We use the standard phong illumination equation here.
* We restrict (clamp) the dot products so that we
* don't get any negative values.
* All vectors are normalized for proper calculations.
*
* The output color is the summation of the
* ambient, diffuse, and specular contributions.
*
* Note that we have to transform each vertex and normal
* by the world view projection matrix first.
*/
PixelShaderInput output;
output.postion = mul(input.postion, worldViewProjection);
/**
* lightVector - light vector
* normal - normal vector
* viewPosition - view vector (from camera)
*/
// NOTE: In this case we do not need to multiply by any matrices since the
// WORLD transformation matrix is the identity. If you were moving the
// object such that the WORLD transform matrix was not the identity, you
// would need to multiply the normal by the WORLDINVERSETTRANSFORM matrix
// since the normal is in object space. Other values (light_pos, camera_pos)
// are already in world space.
float3 lightVector = light_pos - input.postion.xyz;//计算光方向向量和长度
float3 normal = input.normal;
float3 viewPosition = camera_pos - input.postion.xyz;//计算照相机相对顶点的向量
output.lightVector = lightVector;
output.normal = normal;
output.viewPosition = viewPosition;
output.color = input.color;
return output;
}
/**
* Pixel Shader
*/
float4 pixelShaderFunction(PixelShaderInput input): COLOR {
float3 lightVector = normalize(input.lightVector);
float3 normal = normalize(input.normal);
float3 viewPosition = normalize(input.viewPosition);
float3 halfVector = normalize(lightVector + viewPosition);
// use lit function to calculate phong shading
// x component contains the ambient coefficient
// y component contains the diffuse coefficient:
// max(dot(normal, lightVector),0)
// z component contains the specular coefficient:
// dot(normal, lightVector) < 0 || dot(normal, halfVector) < 0 ?
// 0 : pow(dot(normal, halfVector), shininess)
// NOTE: This is actually Blinn-Phong shading, not Phong shading
// which would use the reflection vector instead of the half vector
float4 phong_coeff = lit(dot(normal, lightVector), dot(normal, halfVector), shininess);//lit光的计算函数
float4 ambient = light_ambient * phong_coeff.x * input.color;//环境光分量×颜色值
float4 diffuse = light_diffuse * phong_coeff.y * input.color;//漫反射分量X颜色值
float4 specular = light_specular * phong_coeff.z * input.color;//反色分量X颜色值
return ambient + diffuse + specular;
}
// Here we tell our effect file *which* functions are
// our vertex and pixel shaders.
// #o3d VertexShaderEntryPoint vertexShaderFunction
// #o3d PixelShaderEntryPoint pixelShaderFunction
// #o3d MatrixLoadOrder RowMajor
</textarea>
发表评论
-
bufferData
2011-07-21 14:30 1079/*void*/ bufferData //缓冲区数 ... -
导入支持的格式(Import)
2011-05-31 16:54 2456导入对话框选择格式,你会看到众多导入的格式。3ds m ... -
法线贴图
2011-05-13 11:48 1912本文转自:http://yumi08.jimdo.co ... -
法线向量
2011-05-13 10:20 2522面法线的计算相对来 ... -
ShowWebGL 强大的3D模型查看器
2011-04-12 14:01 6135ShowWebGL http://showwebgl.com ... -
o3d 创建一个平面
2011-03-29 15:27 870var vertexInfo = o3djs.primitiv ... -
o3d 常见几何图形创建
2011-03-29 15:25 11161、基本形状包括: o3djs.primitives.cre ... -
o3D 材质-定义透明材质
2011-03-29 15:20 1090//定义一个为白色并且是透明材质 var material = ... -
O3D程序基本结构
2011-03-29 15:13 814创建一个O3D对象 设置全局变量初始化通用库 创建一个O3D ... -
Google 三维 JavaScript API
2011-03-28 15:59 892O3D 是一个开源的Web API,其可以创建相当牛X的基于浏 ... -
3D引擎CopperLicht(二)
2011-03-28 15:14 1415在上一个课程的基础上 ... -
3D引擎CopperLicht
2011-03-28 15:09 1729WebGL是一种3D绘图标准, ... -
o3d 文档原文
2011-03-18 18:00 861Basic TasksThe basic tasks perf ... -
WebGL的框架
2011-03-18 16:23 3911WebGL的框架 WebGL http://www.khro ... -
c3dl 官方教程(二)
2011-03-18 16:13 1894教程#2:一个简单的场景本教程将展示C3DL)的基础知识使用三 ... -
C3DL 官方教程(一)
2011-03-18 15:57 1554本文笔者翻译,如有错误请留言。 教程#1:Web ... -
3D模型导入 CanvasMatrix.js引擎 demo(一)
2011-03-17 17:51 3040为广大html5 3d开发的朋友们演示 代码贴图,请下载附 ... -
c3dl 可以直接导入3dmax文件的3D引擎
2011-03-17 17:41 1186c3dl可以直接在网页代码中使用.dae格式的3dma ... -
o3d 模型导入引擎CanvasMatrix.js
2011-03-17 16:09 1630最近研究3d引擎在html5中的效果实现,需求当然是 ... -
o3d API总结
2011-03-17 13:52 888Making an Application with O3D ...
相关推荐
O3D库包含了一系列的类和方法,如几何体创建、材质应用、光照设置、相机控制等,支持开发者构建丰富的网络3D应用。 2. **3D物体编辑**:O3D 物体编辑器允许用户创建、修改和管理3D模型。用户可以导入现有的3D模型...
在本篇O3D学习笔记中,我们将探讨如何将3DS格式的三维模型转换为O3DTGZ格式,这是O3D系统所使用的专有格式。3DS是一种广泛使用的三维建模软件3ds Max导出的文件格式,而O3DTGZ是O3D(Open 3D Engine)框架下的压缩...
4. **Material 材质**:材质定义了3D物体表面的视觉特性,如漫反射颜色、环境光颜色和镜面反射颜色。通过应用不同的材质,可以改变物体在渲染中的外观和质感。 5. **Pack 包**:在O3D中,包是一个管理数据的对象,...
**O3D 实例研究详解** O3D 是一个开源的 JavaScript 库,它允许开发者在 Web 浏览器中创建高性能的三维图形应用。这个实例可能是为了展示 O3D 的基本用法和功能,帮助用户快速入门。下面我们将深入探讨 O3D 的核心...
6. **纹理和光照**:为了使3D模型看起来更真实,O3D支持纹理贴图和光照模型。理解如何应用纹理和设置光照参数对于创建逼真的3D场景至关重要。 7. **性能优化**:由于O3D依赖于硬件加速,因此了解如何有效地利用GPU...
o3d是Google开发的基于web的3d编程API,因文件太大分三次上传
google开发的web3d编程APT o3d.提供的各种3d效果例子,因文件太大,分三个包传上
在3D-o3d.zip这个压缩包中,我们看到的是Objective-3D视频游戏引擎的相关资料,这是一个专门用于3D游戏开发的工具。 Objective-3D游戏引擎,以其强大的功能和灵活性,为开发者提供了构建逼真3D游戏环境的可能性。它...
o3d lib1 graph javascript ajax
o3d goolge javascript texture graph
o3d是Google开发的基于web的3d编程API,因文件太大分三次上传
"o3dv_0.8.3.zip" 是一个压缩包文件,包含了 Online3DViewer 的 0.8.3 版本。Online3DViewer 是一个基于 Web 的三维模型查看器,它允许用户在浏览器中查看和交互三维模型,无需安装任何额外的软件。这个工具主要利用...
根据分子和离子共存理论,建立了CaO-Al2O3 和CaO-SiO2-Al2O3 渣系的活度计算模型,并利用模型对渣中各组元的活度进行了计算,分析了 w (CaO )对渣中组元活度的影响.结果表明,在 CaO-Al2O3 渣系中,当w(CaO)小于45%时,...
### 野村综研O3W架构资料:深入解析与技术要点 #### 一、背景与挑战 在1980年代至1990年代初,日本许多企业开始进行核心业务系统的信息化改造,主要采用大型机为核心的专用系统。当时的终端设备主要是哑终端,仅能...
Bi2O3具有较高的光吸收系数和优良的紫外光响应,而TiO2则以其优异的稳定性和可见光响应著称。 制备Bi2O3TiO2异质结电极的过程通常包括几个关键步骤: 1. 前处理:先对基底进行清洁处理,去除表面杂质和氧化物,以...
Al2O3对激光熔覆Ni基涂层性能的影响,况军,徐艳菊,本实验研究了在Ni60合金粉末中添加Al2O3粉末,采用预置涂层法,在45钢基材表面进行激光熔覆,得到Al2O3/Ni金属陶瓷涂层。研究了加入Al2O3