×
文章路径: 翻译 > babylonjs

03-Materials(材料,材质)

发表于1年前(Mar 29, 2017 10:00:00 AM)  阅读 1320  评论 0

分类: babylonjs 翻译

标签: babylonjs

介绍

现在您已经可以在场景的任意位置来创建不同的基础元素,接下来,我们将给这些元素一些materials,用来定义他们的材质外观。

Playground Demo Scene 4 - Materials

我们该怎么做呢?

我们现在已经非常熟练createScene方法的使用,闭着眼睛都能做到。现在我们来使用一个全方位的PointLight光源和一个ArcRotateCamera摄像头,然后我们来测试我们的材料。

function createScene() {
    var scene = new BABYLON.Scene(engine);
    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);

    //Creation of spheres
    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 6.0, scene);
    var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 7.0, scene);
    var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 8.0, scene);
[…]
    //Positioning the meshes
    sphere1.position.x = -40;
    sphere2.position.x = -30;

到目前为止,我们只有一些灰色的物体,多么单调。要想给他们加入material,我们必须创建一个新的material对象:

var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);

然后将material应用到您选择的对象上:

sphere1.material = materialSphere1;

或者直接在创建的时候就应用,一步到位:

sphere1.material = new BABYLON.StandardMaterial("texture1", scene);

“我这样做了,但是发现没有什么变化啊。。。”

准确的说,确实是这样,因为您使用的material就是默认的配置。您必须自己定制您需要的material。您不需要改变物体本身,只需要改变material即可。

“那我该怎么给我的物体一个好看的material外观呢?”

我们应该来设置material的各个属性:

  • Transparency(透明度,alpha通道)

Alpha compositing和Transparency有点复杂。您可以在这里查看到更多内容(原链接已经失效)。您也可以从wikipedia获取相关信息。以后在您使用babylonjs的particle系统和sprites系统时,您会经常碰到它。

Alpha transparency,使用%百分比为单位,可以这样应用到material上面:

materialSphere1.alpha = 0.5;
  • Diffuse(扩散、发散、漫射)

Diffuse是当物体被照亮时发散的原生颜色。您可以通过diffuseColor属性来指定一个solid color。

materialSphere1.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);

或者您可以使用texture:

materialSphere1.diffuseTexture = new BABYLON.Texture("grass.png", scene);

Textures注意事项:确保图片的路径是正确的(相对路径和绝对路径都可以)。支持的图片格式包括JPG,PNG,JPEG,BMP,GIF等等(所有被浏览器支持的图片都可以)。

如果您想移动您的texture,您可以设置“uOffset”和“vOffset”两个属性:

materialSphere1.diffuseTexture.uOffset = 1.5;
materialSphere1.diffuseTexture.vOffset = 0.5;

如果您想repeat/tile一个图片,您可以使用“uScale”和“vScale”属性:

materialSphere1.diffuseTexture.uScale = 5.0;
materialSphere1.diffuseTexture.vScale = 5.0;

记住(u,v)表示的坐标轴是如下所示:

如果您的图片具有透明度,您可以这样设置:

materialSphere1.diffuseTexture.hasAlpha = true;

这种情况下,alpha用于alpha测试。如果您想用于alpha混合,必须设置materialSphere1.useAlphaFromDiffuseTexture。

上面所有的这些设置可以应用于那些标准的StandardMaterial属性(emissiveTexture,ambientTexture,specularTexture)。现在,让我们继续讨论其他属性。

  • Emissive(放射性)

Emissive是物体自身产生的颜色。您可以通过emissiveColor属性来设置颜色:

materialSphere1.emissiveColor = new BABYLON.Color3(1, .2, .7);

也可以通过texture:

materialSphere1.emissiveTexture = new BABYLON.Texture("grass.png", scene);

同上面提到的Textures一样,您只需要把“diffuse”换成“emissive”即可。

  • Ambient(环绕)

Ambient可以看成是第二级的diffuse。它产生的颜色是diffuse的两倍。当你想让光照图变成textures时将非常有用。您可以通过ambientColor属性来指定一个颜色:

materialSphere1.ambientColor = new BABYLON.Color3(1, 0.2, 0.7);

也可以使用texture:

materialSphere1.ambientTexture = new BABYLON.Texture("grass.png", scene);

同上面提到的Textures一样,您只需要把“diffuse”换成“ambient”即可。

  • Specular(镜面反射)

Specular是由表面反射光照产生的颜色。您可以通过specularColor属性来设置颜色:

materialSphere1.specularColor = new BABYLON.Color3(1.0, 0.2, 0.7);

也可以通过texture:

materialSphere1.specularTexture = new BABYLON.Texture("grass.png", scene);

使用texture时,您可以设置materialSphere1.useGlossinessFromSpecularMapAlpha为true,来使镜面反射具有光泽透明度。您可以控制镜面反射的alpha的实现方式。默认情况下,镜面反射不产生alpha,但是您可以设置materialSphere1.useSpecularOverAlpha为true来使镜面反射具有alpha。

同样,同上面提到的Textures一样,您只需要把“diffuse”换成“specular”即可。

Specular属性还有一个额外设置。通过specularPower属性来设置镜面反射的大小或强度。

materialSphere1.specularPower = 32;

OpacityTexture的介绍章节应该在这,现在还没完成,很快将补上。

现在,我们了解了StandardMaterial的颜色和texture属性,但还不够,以下是一些常用的属性:

  • Back-Face Culling

简单来说,“back-face culling”属性决定一个StandardMaterial是否能从背面可见。TRUE即不可见。更确切地来说,这是一种图形渲染优化技术,用来决定一个多边形物体是否可见。如果它被设置成true或者1,Babylon引擎将不会渲染被隐藏的面。默认值是true,您可以改成false,在你需要的时候。您可以在wikipedia找到更多关于back-face culling的信息。

在这个例子中,前面的球体texture有alpha,back-face culling设置为了false,这样可以看到它黑色的里面。

materialSphere1.backFaceCulling = false;
  • WireFrame

您可以在wireframe模式下查看您的对象:

materialSphere1.wireframe = true;

您可以在the Babylon.js Playground scene 4中找到上面的演示例子。

更多关于materials的内容可以在Unleash the StandardMaterial 和 Advanced Texturing中找到。

Playground可以使用的Textures

下面的图片是我们可以在palyground中使用的(使用textures和heightmaps时)。

new BABYLON.Texture("textures/name", scene);

albedo.png

amiga.jpg

bloc.jpg

candleopacity.png

cloud.png

co.png

crate.png

distortion.png

earth.jpg

equirectangular.jpg

fire.png

flare.png

floor.png

floor_bump.PNG

fur.jpg

grass.jpg

grass.png

grassn.png

ground.jpg

heightMap.png

heightMapTriPlanar.png

impact.png

invmask.png

Logo.png

mask.png

misc.jpg

mixMap.png

normalMap.jpg

orient.jpg

palm.png

player.png

reflectivity.png

rock.png

rockn.png

roundMask.png

sand.png

specmap.png

specularglossymap.png

sphereMap.png

sun.png

SunDiffuse.png

tree.png

walk.png

waterbump.png

worldHeightMap.jpg

xStrip.jpg

yStrip.jpg

zStrip.jpg

Playground可使用的CubeMap Groups

下面的图片组是我们在playground中可以用作skyboxes的图片:

new BABYLON.CubeTexture("textures/common part of names", scene);

skybox_nx.jpg

skybox_ny.jpg

skybox_nx.jpg

skybox_px.jpg

skybox_py.jpg

skybox_pz.jpg

skybox2_nx.jpg

skybox2_ny.jpg

skybox2_nx.jpg

skybox2_px.jpg

skybox2_py.jpg

skybox2_pz.jpg

skybox3_nx.jpg

skybox3_ny.jpg

skybox3_nx.jpg

skybox3_px.jpg

skybox3_py.jpg

skybox3_pz.jpg

skybox4_nx.jpg

skybox4_ny.jpg

skybox4_nx.jpg

skybox4_px.jpg

skybox4_py.jpg

skybox4_pz.jpg

TropicalSunnyDay_nx.jpg

TropicalSunnyDay_ny.jpg

TropicalSunnyDay_nx.jpg

TropicalSunnyDay_px.jpg

TropicalSunnyDay_py.jpg

TropicalSunnyDay_pz.jpg

Playground可以使用的HDR CubeMaps

下面的图片是我们在playground中可以使用的HDR图片(用作textures和heightmaps时):

new BABYLON.HDRCubeTexture("textures/name", scene);

country.hdr

environment.babylon.hdr

forest.hdr

night.hdr

parking.hdr

room.hdr

Playground在textures目录下另外一些可用的文件

babylonjs.mp4

big_buck_bunny.mp4

babylonjs.webm

HorrorBlue.3dl

LateSunset.3dl

下一节

通过使用materials,您的场景看起来漂亮多了。我们接下来会研究materials的高级特性,但是在此之前,我们先学习下如何使用cameras

发表评论