随着岁末将至,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赛瓦号——整装待发!的更多相关文章

  1. 第二篇T语言实例开发(版本5.3),福彩3D摇号器

    ---恢复内容开始--- 福彩3D摇号器 先验知识功能的含义与使用 功能是TC源程序的基本模块,通过对功能模块的调用实现特定的功能,TC语言中的功能相当于其他高级语言的子程序. 在TC里面,功能分为三 ...

  2. 利用KeyVault来加强存储Azure Storage访问密钥管理

    很多时候管理Azure的存储账号我们都需要通过下面的界面管理访问密钥,大部分情况下通过密钥的轮替使用更新就可以做到安全管理了. 但是很多时候存储账号的Key就会不小心分发到开人员.测试人员.和管理员手 ...

  3. 关于模拟登陆微博(PC)

    微博模拟登陆 1.基类对象的方法建立一个类__init__初始化方法,接收username和password. class launcher(): def __init__(self, usernam ...

  4. Android OAuth认证

    OAuth认证 为了安全地访问在线服务,用户需要在服务上进行身份验证,即要提供他们的身份的证明.对于一个要访问第三方服务的程序来说,安全问题甚至更复杂.不仅仅是用户需要在访问服务前要进行身份验证,而且 ...

  5. HttpUtility.UrlEncode讲解

    hello 大家好,今天讲讲HttpUtility.UrlEncode编码 HttpUtility.UrlEncode方法有4个重载分别如下 我们有这么一个字符串 string str = " ...

  6. 8月7号晚7点Autodesk北京办公室,我们来聊聊HTML5/ WebGL 3D 模型浏览技术

    Autodesk 发布了一款完全无需插件的三维模型浏览器 Autodesk 360 Viewer,大家有没有兴趣,下班后过来聊聊吧!   8月7号 周四, 19:00~21:00 Autodesk北京 ...

  7. 当点阵字库遇到3D

    早在遥远的DOS时代,点阵汉字库为计算机处理汉字起到了关键作用.当时的显示器在图形模式下的分辨率只有640x480甚至320x200,显示汉字直接使用点阵字库在屏幕上打点就可以了.如今的电脑屏幕甚至手 ...

  8. 2D、3D形变

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span { ...

  9. Android ViewPager打造3D画廊

    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...

随机推荐

  1. BestCoder Round #56/hdu5463 Clarke and minecraft 水题

    Clarke and minecraft 问题描述 克拉克是一名人格分裂患者.某一天,克拉克分裂成了一个游戏玩家,玩起了minecraft.渐渐地,克拉克建起了一座城堡. 有一天,克拉克为了让更多的人 ...

  2. node.js 在函数内获取当前函数

    js 如何在函数体内部知道 自己在哪个函数内运行呢? 打比方: function a() { // 我想在这里知道我的函数名a和函数function a () {...} } 使用Error的调用栈可 ...

  3. Linux/Android——input子系统核心 (三)【转】

    本文转载自:http://blog.csdn.net/jscese/article/details/42123673 之前的博客有涉及到linux的input子系统,这里学习记录一下input模块. ...

  4. pgsql数据库应用两点注意

    今天在写一个sql脚本时遇到了两个问题,记录一下. 1,pgsql中没有select top n语句,可以用limit n代替. 2,pgsql可以在定义函数存储过程时使用变量,但要注意函数定义中的函 ...

  5. HTTP方式播放FLV/mp4 :nginx+Yamdi/MP4BOX

    [导语]chrome浏览器确实很强,直接支持MP4拖动播放,对于其他播放器,可以使用以下方法来支持拖动播放.拖动的关键在于生成关键帧等元数据信息,便于服务器和播放器支持拖动. 另外,nginx web ...

  6. 8 种提升ASP.NET Web API性能的方法

    ASP.NET Web API 是非常棒的技术.编写 Web API 十分容易,以致于很多开发者没有在应用程序结构设计上花时间来获得很好的执行性能. 在本文中,我将介绍8项提高 ASP.NET Web ...

  7. E20171212-hm

    odd   adj. 古怪的; 奇数的; 剩余的; 临时的; odd number 奇数 even adj. 偶数的 even number 偶数

  8. Office Excel的几个快捷键记录

    Office Excel的几个快捷键记录: 切换Sheet:CTRL + PageUP/PageDown 另存为:F12

  9. [转]ASP.NET MVC的帮助类HtmlHelper和UrlHelper

    本文转自:http://www.cnblogs.com/greatandforever/archive/2010/04/20/1715914.html?login=1 在ASP.NET MVC框架中没 ...

  10. IntelliJ IDEA jrebel 实现热部署

    前提是能够访问登陆Facebook,有Facebook的账号(我注册了一个) 点击:https://my.jrebel.com 用Facebook登陆  之后按要求填写信息 然后获取激活码 打开 id ...