3D赛瓦号——整装待发!
来源:互联网 发布:windows nginx 下载 编辑:程序博客网 时间:2024/05/01 00:44
随着岁末将至,twaver开发团队依旧马不停蹄,3d产品功能持续更新,新特效和功能目不暇接。现在,我们就利用一些新功能,制作一个全新“赛瓦号”飞船,大家看一下仿真程度是否有质的不同?
网页3d技术正在快速发展,3d可视化技术目前大热,不但是目前整个IT业中的技术热点,也是互联网、投资界的热门话题。各种3d虚拟仿真技术纷纷出现,对twaver这类底层3d展示引擎产品需求量也迅速加大,要求也不断上升。网页3d应用要求开发更加简单方便、效果更加逼真,twaver也在不断满足开发者这一需求。
要让3d场景更加真实,一个核心技术就是处理好“光线”。光线直接将外接实物的各种信息带入眼睛,模拟好光线的处理,3d场景就会更加真实。光线的处理一般有透视、反射、折射等。
让美工或程序员准备大量的高清贴图,并不现实,也不能完全解决真实度的问题。对于光线的反射,还需要直接用算法和一些辅助贴图进行实时计算和模拟。下面介绍几种常见的用法。
环境贴图
环境贴图,是指一个物体在一个环境中,对四周环境贴图的反射。例如,下面的一个球在一个完全空白的空间,它只是发出或反射一些灯光照射来的白光而已:
我们如果设置合理的材质和反光强度,会让它看上去更生动一些:
但是它依旧没有对环境的场景有什么更细致的反应。例如一个光鲜亮丽的汽车放在站台上,它会对头顶的灯光和俯身触摸油漆的看客有清晰的反射。这时我们可以使用环境贴图:
var envmap=['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg'];node.setStyle('m.envmap.image',envmap);
上面准备了6张环境贴图,分别对应环境立方体中的6个面,并设置给这个node对象。这样,node就会把这个环境给反射出来。
这看上去像一个剥了皮的皮蛋。通过下面的参数,可以进一步控制环境贴图的反射比例:
node.s({ 'm.reflectRatio': 0.4,});
折射,还可以配合透明来叠加投射效果。两者结合,可以做出既反射、又投射的“气泡”效果。当然这种情况要有背景参照物才能把“透明”观察的更清楚。为此我们添加一个天空盒环境。例如:
var skybox = new mono.Cube(10000,10000,10000);skybox.setStyle('m.texture.image',['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg']);box.add(skybox);
合理利用环境反光,可以让物体显得更加精致、逼真,有光泽。
高光反射
接下来再看高光反射的问题。我们假设一个物体有贴图、有纹理,但是没有高光反射。那么它看上去将是这样的:
是不是显得很“呆”?因为材质是’basic’,没有反光效果,就没有光泽变化,就像一张平面上的画,没有立体感。可以修改材质的类型为’phong’增加反光:
node.s({ 'm.type': 'phong',});
这样就有了反光:
生动多了。不过还是没有“高光”,材质感觉不是很“光亮、精致”。可以进一步设置白色高光:
node.s({ 'm.specular': 'white',});
一些局部位置对光有了更强烈的反应,更加真实了:
更进一步,如果我们希望物体外表一些特定区域有高光反光,其他区域暗淡,该如何处理?我们可以使用specular map贴图进行控制。例如我们把上面模型中的蓝色区域作为“玻璃窗户让它有更强烈的反光,设置了specular map后的效果会有进一步变化:
node.s({ 'm.specularmap.image': 'specularmap.jpg',});
现在的效果是,“该亮的地方亮、不该亮的地方不亮”。“哪里亮、怎么亮、亮不亮”,我们都可以通过上述手段进行精确的控制。
法线贴图
光滑没有一丝杂质的油漆,看上去有点假。有一些杂质、纹理的效果更加真实。利用贴图纹理可以实现这样的效果,例如皮革材质。但它比较呆板:不会随着光线的移动而改变对环境的光线反射变化。现在我们用normal map这一技术来代替图片纹理,看是否更简单、效果更好。
node.s({ 'm.normalmap.image': 'normalmap.jpg',});
怎么样,“皮革”一样的纹理效果立刻就出来了,而且比美工制图更加简单方便。
如果觉得皮革纹理波动有点大,可以通过控制法向干扰的比例进行调节。下面我们把干扰调节低一点:
node.s({ 'm.normalScale': new mono.Vec2(0.1,0.1),});
干扰只启动10%。看看效果:
皮革会平滑、柔和一些,不粗糙,但纹理依旧清晰可见。如果是我们买LV的包包,一定会选择这种材质而不是前面的粗糙材质。
即使不用任何贴图,也可以产生效果不错的纹理,如下图中的带雕刻效果的金属圆柱:
哦对了,差点忘记了将以上环境映射、高光、贴图几个伎俩同时并用,看看效果。
最后再加上玻璃头盔、天空盒,整个场景就完整了:
最后,大家就跟着我们这趟赛瓦号,出发踏上3d探索之旅吧!
- 3D赛瓦号——整装待发!
- 3D游戏编程入门探险 第一章 整装待发
- 整装待发
- 整装待发
- 2014,整装待发
- 国产动漫产业整装待发!!
- Java 8整装待发
- 开新博客,整装待发
- 3D—touch
- 3D小游戏——3D版俄罗斯方块
- CSS3/HTML5—3D
- 2006年开源巨作,《开源大本营》整装待发
- XNA 3D游戏开发入门基本——鼠标选择3D模型(3D物体的拾取)
- 3D特效——画廊
- 3D——VTK使用
- 3D数学读书笔记——四元数
- 3D数学读书笔记——四元数
- javaFX图形——几何3D
- 社説 20150216 高浜原発 関電は再稼働へ万全を期せ
- 系统吞吐量、TPS(QPS)、用户并发量、性能测试概念和公式
- 记Weblogic采用RAC方式链接数据库遇到的问题
- Server_如何从Apache官网下载windows版apache服务器;
- Perl 正则详述
- 3D赛瓦号——整装待发!
- 信号量与互斥锁性能对比
- 常用开发工具的密钥收藏
- 线段树总结
- leetcode_25_Reverse Nodes in k-Group
- Perl 懒惰匹配
- SHOI 2014 全
- Problem K: Cylinder
- 我为什么要求你用功读书