返回列表 发新帖

babylonjs教程(21)-高级纹理

[复制链接]

138

主题

171

帖子

2564

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2564
发表于 2016-6-21 13:29:28 | 显示全部楼层 | 阅读模式
目录

  • 我该怎么做?

你已经看到了怎么在网格上设置纹理,但这里我们要向前在走一步,更复杂的纹理比如说镜像,视频,凹凸贴图(bump mapping),多重纹理(multi-texture)。

0.png

这张图来自我们高级纹理playground例子

我该怎么做?

这些新类型的纹理本认为是高级的,因为我们不需要处理它们,你会发现用JavaScript和Babylon.js十分容易创建它们。

  • 镜像(Mirror)

镜像纹理被用来模拟镜子,这意味着babylon.js会计算反射并填充纹理作为结果。一个镜像纹理必须要设置StandardMaterial的reflectionTexture通道:
  1. var mirrorMaterial = new BABYLON.StandardMaterial("texture4", scene);
  2. mirrorMaterial.reflectionTexture = new BABYLON.MirrorTexture("mirror", 512, scene, true);
  3. mirrorMaterial.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -10.0);
  4. mirrorMaterial.reflectionTexture.renderList = [sphere1, sphere2];
复制代码

mirrorTexture由指定渲染缓冲区大小(512*512,如果增加会获得更好的反射品质)参数创建的。然后你要定义反射平面和渲染列表(在镜像里面渲染的网格)。

在StandardMaterial上面你也可以使用CubeTexture作为reflectionTexture。
  1. material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
复制代码

像CubeTexture使用在天空盒(skybox), textures/TropicalSunnyDay目录必须包含6个纹理,覆盖立方体的6个方向。每个图像的命名必须于CubeTexture对应的面对应:“TropicalSunnyDay_nx.jpg”, “TropicalSunnyDay_ny.jpg”, “TropicalSunnyDay_nz.jpg”, “TropicalSunnyDay_px.jpg”, “TropicalSunnyDay_py.jpg”, “TropicalSunnyDay_pz.jpg”。

你可以看到高级纹理技术...在playground场景里面,以及这个菲涅耳增强(Fresnel-enhanced)playground场景

  • 凹凸贴图(bump mapping)

凹凸贴图(bump mapping)是计算机图形学的一个技术,可以让渲染表面看起来更加真实,而不用修改表面的几何构成。这只是纹理修改,所以计算是相同的但是渲染效果要好太多,看一看:

1.png

凹凸纹理使用一个叫做法线贴图的贴图来模拟突起和凹陷。

normalMap.jpg

法线贴图

现在,让我们用两行代码来编写这个惊人的纹理:首先你要创建一个标准材料(StandardMaterial),然后简单的声明一个凸凹纹理。
  1. var bumpMaterial = new BABYLON.StandardMaterial("texture1", scene);
  2. bumpMaterial.bumpTexture = new BABYLON.Texture("normalMap.jpg", scene);
复制代码

就是这样,凸凹纹理干扰/扰乱了法线,产生了下面这样的结果,你应该能够认出我们的法线贴图:

2.png

结果是一个极好的颠簸球体。

请注意,正常情况下,法线地图被认为是DirectX格式的。如果你想提供不同约定的法线贴图,你可以设置material.invertNormalMapX = true或者material.invertNormalMapY = true。

  • 视频(Video)

如果你想在你的场景里面显示视频,Babylon引擎给你提供了一个特别的纹理来完成。这个纹理工作和其它纹理类似,除了几个参数。这些参数包括视频url(一个url数组),视频纹理大小(这里是256),场景和最后一个逻辑值来表明你是否想用mipmap

这里有个例子来自我们的Flat2009例子。这个例子在ZTV屏幕(ecran = screen)上播放视频。

VideoTexture对象接受一个视频数组(考虑到不同的编码器)。第一个能作为内容源的视频被加载。当前HTML5支持:.mp4, .webm和.ogv视频格式。

内部的视频dom对象可以通过VideoTexture.video属性获得...这允许你添加一些特性控制和监视视频状态(比如说:play,pause,loop,autoplay等等),查看上面的链接来获得完整的介绍。

3.png

即使我们有先进的纹理技术,VideoTexture还是结合StandardMaterial工作。简单的说,我们需要光源。作为一个方便的替代或者视频照明助手,你可能想在网格的基础材料上设置emissiveColor。
  1. ecran.material.emissiveColor = new BABYLON.Color3(1,1,1);
复制代码

移动设备不可以自动播放视频。需要用户交互(比如说tap)来开始视频播放。直到用户tap,视频纹理将会是黑的。简单的方式播放视频:
  1. scene.onPointerDown = function () {
  2.   videoTexture.video.play();
  3. }
复制代码

在第一次触摸后场景开始播放视频。一个例子可以在这里看到:http://www.babylonjs-playground.com/#CHQ4T#1

  • 折射(Refraction)

从Babylon.js 2.4开始,一个新的通道被添加到了StandardMaterial,折射通道。
  1. ecran.material.refraction = myCubeTexture;
复制代码

折射引擎用立方体纹理作为源,你可以通过反射探头(reflection probe)产生它.
  1. var probe = new BABYLON.ReflectionProbe("main", 512, scene);
  2. probe.renderList.push(yellowSphere);
  3. probe.renderList.push(greenSphere);
  4. probe.renderList.push(blueSphere);
  5. probe.renderList.push(mirror);
  6. mainMaterial.refractionTexture = probe.cubeTexture;
复制代码


当然你可以用RefractionTexture作为折射源当你处理平面对象。RefractionTexture工作有点像mirror纹理,这里你需要定义修剪平面:
  1. var refractionTexture = new BABYLON.RefractionTexture("th", 1024, scene);
  2. refractionTexture.renderList.push(yellowSphere);
  3. refractionTexture.renderList.push(greenSphere);
  4. refractionTexture.renderList.push(ground);
  5. refractionTexture.refractionPlane = new BABYLON.Plane(0, 0, -1, 0);
  6. refractionTexture.depth = 2.0;
复制代码

深度参数用来定义深度值用于偏移折射。在这里看例子:http://www.babylonjs-playground.com/#22KZUW#15

refraction cab的索引给可以通过 material.indexOfRefraction (1.05是默认值)控制。

你可以在这里看到例子:http://www.babylonjs.com/Demos/refraction/

  • 多重纹理(multi-texture)

使用专用的纹理,多重纹理可以被指定为单一的网格。如果你希望你的网格位于不同宽度,高度和深度看起来不一样(如:地球地幔的剖面横截面)

4.png

有时候是有点困难的,来决定网格的指数该有哪个多重纹理来纹理化。David Catuhe提高了一个综合文章,关于多重材料,在他的博客上:http://blogs.msdn.com/b/eternalcoding/archive/2013/07/10/babylon-js-using-multi-materials.aspx

你可以看看和试一试这个教程中的例子...这里

你可能对我们的释放标准材料教程,和基本材料教程感兴趣。

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表