返回列表 发新帖

babylonjs教程(23)-释放标准材料(StandardMaterial)

[复制链接]

138

主题

171

帖子

2564

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2564
发表于 2016-6-21 23:13:05 | 显示全部楼层 | 阅读模式
在前面章节我们探索了怎么加载场景,这一些要分享一些Babylon.js的StandardMaterial对象的知识。

StandardMaterial对象是负责定义对象如何渲染和对象的样子。

让我们从一个小的html页面开始:
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Using babylon.js - How to load a scene</title>
  5.     <script src="hand.js"></script>
  6.     <script src="babylon.js"></script>
  7.     <style>
  8.         html, body {
  9.             width: 100%;
  10.             height: 100%;
  11.             padding: 0;
  12.             margin: 0;
  13.             overflow: hidden;
  14.         }

  15.         #renderCanvas {
  16.             width: 100%;
  17.             height: 100%;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <canvas id="renderCanvas"></canvas>
  23. </body>
  24. </html>
复制代码

然后你可以添加下面一小段代码来创建Babylon.js场景:
  1. <script>
  2.     if (BABYLON.Engine.isSupported()) {
  3.         var canvas = document.getElementById("renderCanvas");
  4.         var engine = new BABYLON.Engine(canvas, true);
  5.         var scene = new BABYLON.Scene(engine);
  6.         var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 1, scene);
  7.         var light = new BABYLON.PointLight("light01", new BABYLON.Vector3(0, 3, -2), scene);
  8.         var camera = new BABYLON.FreeCamera("camera01", new BABYLON.Vector3(0, 3, -2), scene);

  9.         camera.setTarget(new BABYLON.Vector3(0, 0, 0));
  10.         camera.attachControl(canvas);

  11.         // Render
  12.         engine.runRenderLoop(function() {
  13.             scene.render();
  14.         });
  15.     }
  16. </script>
复制代码

这段简单的代码创建了一个有灯光,摄像机和球体组成的场景:

5123.image_thumb_2F796B2C.png

为了能够配置我们球体的外貌,我们需要一个材料:
  1. // Material
  2. var material = new BABYLON.StandardMaterial("material01", scene);

  3. sphere.material = material;
复制代码

你可以注意到在有和没有材料的时候结果是一样的,因为没有材料的时候渲染使用默认材料

添加一些颜色

StandardMaterial支持很多颜色的组合。你可以看到这些东西是如何工作的。

Diffuse color(漫反射颜色)

diffuse颜色定义了对象的基本颜色。这个颜色依赖于灯光,意味着如果没有灯光也就没有diffuse颜色或者其它方式最终的颜色等于diffuse颜色乘光的密度给每一个像素。

最终的颜色依赖于灯光的diffuse颜色和材料的diffuse颜色(material.diffuseColor和light.diffuseColor):
  1. material.diffuseColor = new BABYLON.Color3(1, 0, 0);
复制代码
7446.image_thumb_0841B2A8.png

Specular color(高光颜色)

Specular颜色是有灯光在表面的高光颜色(在前面的图片是一个白色的点)。它依赖于灯光的specular颜色和材料的specular的颜色((material.specularColor和light.specularColor)。高光区的大小依赖于material.specularPower。

这里有个只有specular的例子(没有diffuse):
  1. material.diffuseColor = new BABYLON.Color3(0, 0, 0); // No diffuse color

  2. material.specularColor = new BABYLON.Color3(1, 0, 0);
  3. material.specularPower = 32;
复制代码
5810.image_thumb_767CD5C6.png

高光色

Ambient color(环境光颜色)

Amibent颜色是对象相对于场景环境光颜色的颜色。场景的环境光颜色可以在任何位置可用(没有吸收,没有方向,没有位置)。

要使用它,只需要使用下面代码:
  1. material.diffuseColor = new BABYLON.Color3(0, 0, 0); // No diffuse color

  2. material.specularColor = new BABYLON.Color3(0, 0, 0); // No specular color


  3. scene.ambientColor = new BABYLON.Color3(1, 1, 1);
  4. material.ambientColor = new BABYLON.Color3(1, 0, 0);
复制代码

0066.image_thumb_3D45AD2A.png

Emissive color(自发光颜色)

最后,Emissive color是对象内部颜色(对象的颜色没有任何光源)
  1. material.diffuseColor = new BABYLON.Color3(0, 0, 0); // No diffuse color

  2. material.specularColor = new BABYLON.Color3(0, 0, 0); // No specular color
  3. material.specularPower = 32;

  4. scene.ambientColor = new BABYLON.Color3(1, 1, 1);
  5. material.ambientColor = new BABYLON.Color3(0, 0, 0); // No ambient color

  6. material.emissiveColor = new BABYLON.Color3(0, 1, 0);
复制代码

3531.image_thumb_2EBDDD90.png

自发光颜色

所有一起

所以当你带着所有的颜色一起,结果是下面这样:
  1. material.diffuseColor = new BABYLON.Color3(0, 1, 0);

  2. material.specularColor = new BABYLON.Color3(1, 1, 1);
  3. material.specularPower = 32;

  4. scene.ambientColor = new BABYLON.Color3(1, 1, 1);
  5. material.ambientColor = new BABYLON.Color3(0, 0, 1);  

  6. material.emissiveColor = new BABYLON.Color3(1, 0, 0);
复制代码
0841.image_thumb_7E2A5FD7.png

使用纹理

StandardMaterial也可以使用纹理代替纯色。

Diffuse texture(慢反射纹理)

定义diffuse颜色使用纹理,你只需要使用下面这些代码:
  1. // Material
  2. var material = new BABYLON.StandardMaterial("material01", scene);

  3. sphere.material = material;

  4. material.diffuseTexture = new BABYLON.Texture("Tree.png", scene);
复制代码

“Tree.png”纹理是下面这个(请让这张图片有alpha通道)

6038.image_thumb_0D635956.png

下面是渲染的结果:

4331.image_thumb_7A44BD5A.png

你可以配置Texture对象考虑alpha通道来激活alpha测试(丢弃像素当alpha<0.5)
  1. material.diffuseTexture = new BABYLON.Texture("Tree.png", scene);
  2. material.diffuseTexture.hasAlpha = true;
复制代码

3716.image_thumb_79DB1B16.png

Diffuse纹理伴随着alpha测试

Specular texture(高光纹理)

同样的方式,你可以定义高光纹理来控制高亮部分的样子:
  1. material.diffuseColor = new BABYLON.Color3(1, 1, 1);
  2. material.specularPower = 32;
  3. material.specularTexture = new BABYLON.Texture("Tree.png", scene);
复制代码
0066.image_thumb_3D45AD2A.png

Specular texture(高光纹理)

Ambient texture(环境光纹理)

环境光纹理的主要目标是提供光照贴图(lightmap)的支持(纹理包含烘焙阴影)。主要的环境光纹理的值乘于漫射值产生最终的结果:
  1. material.diffuseColor = new BABYLON.Color3(1, 0, 0);
  2. material.ambientTexture = new BABYLON.Texture("Tree.png", scene);
复制代码
2018.image_thumb_25B09068.png

环境光纹理和红色漫射光

Emissive texture(自发光纹理)

自发光纹理可以定义没有任何光源对象的颜色:
  1. material.emissiveTexture = new BABYLON.Texture("Tree.png", scene);
复制代码
0160.image_thumb_7BD2ACE3.png

Emissive texture和漫射颜色

Reflection texture(反射纹理)

StandardMaterial对象支持4种类型的反射:
  • Spherical(球形的)
  • Cubic(立方体的)
  • Planar(平面的)
  • Projection(投影)

要使用反射纹理,你可以使用 standard Texture或者CubeTexture:
  1.   var material = new BABYLON.StandardMaterial("material01", scene);
  2. material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
  3. material.reflectionTexture = new BABYLON.Texture("Tree.png", scene);
  4. material.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;
  5. sphere0.material = material;

  6. material = new BABYLON.StandardMaterial("material02", scene);
  7. material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
  8. material.reflectionTexture = new BABYLON.Texture("Tree.png", scene);
  9. material.reflectionTexture.coordinatesMode = BABYLON.Texture.CUBIC_MODE;
  10. sphere1.material = material;

  11. material = new BABYLON.StandardMaterial("material03", scene);
  12. material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
  13. material.reflectionTexture = new BABYLON.Texture("Tree.png", scene);
  14. material.reflectionTexture.coordinatesMode = BABYLON.Texture.PLANAR_MODE;
  15. sphere2.material = material;

  16. material = new BABYLON.StandardMaterial("material04", scene);
  17. material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
  18. material.reflectionTexture = new BABYLON.Texture("Tree.png", scene);
  19. material.reflectionTexture.coordinatesMode = BABYLON.Texture.PROJECTION_MODE;
  20. sphere3.material = material;

  21. material = new BABYLON.StandardMaterial("material05", scene);
  22. material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
  23. material.reflectionTexture = new BABYLON.CubeTexture("refcube3", scene);
  24. sphere4.material = material;
复制代码

CubeTexture必须要包含6个文件代码立方体的每个面(用特定的名字):

5315.image_thumb_542EC16A.png

对于IE11预览用户,你可以点击这个图片,打开一个新的tab来看例子

0068.image_1AABB173.png

各种类型的反射纹理

Bump texture(凸凹贴图)

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

5482.image_thumb_60866212.png

法线贴图
  1. var material = new BABYLON.StandardMaterial("kosh", scene);
  2. material.bumpTexture = new BABYLON.Texture("normalMap.jpg", scene);
复制代码

凸凹纹理扰动了法线产生的结果像这样:

5734.image_thumb_52DB581D.png

Opacity texture(不透明纹理)

不透明纹理允许对象在每个像素基础上定义透明度(alpha混合)
  1. // Material
  2. var material = new BABYLON.StandardMaterial("material01", scene);
  3. material.emissiveColor = new BABYLON.Color3(1, 0, 0);
  4. material.opacityTexture = new BABYLON.Texture("Degrade.png", scene);
  5. sphere0.material = material;
复制代码
8877.image_thumb_264591FF.png

Alpha混合对象

其它属性

StandardMaterial支持下面的属性来控制它们的行为: - backFaceCulling:允许或者不允许背面剔除(主要用于alpha测试和混合) - alpha:对象全局alpha * wireframe:将对象作为一个线框展示

2061.image_thumb_139328F9.png

线框对象

回复

使用道具 举报

发表回复

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

本版积分规则

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