×
文章路径: 翻译 > babylonjs

05-Lights

发表于11个月前(May 9, 2017 7:33:00 PM)  阅读 566  评论 2

分类: 翻译 babylonjs

标签: babylonjs

现在您已经了解了各种camera,以及如何将它们加入到scene,接下来我们将继续我们的教程,来学习lights。

上面的球体是不是很漂亮,因为有多个光源的照射。

我们该如何做?

lights用来产生像素接收的漫射和镜面反射。这个颜色通过materials最终决定每个像素的颜色。

通过这节,我们将学会使用各种各样的light。

激活/解除lights

light可以通过调用setEnabled(true/false)方法来激活或者解除。你也可以通过设置intensity属性来设置全局所有light的光线强度。intensity是浮点数(如1.5)。在章节末尾我们将演示如何使用intensity属性以及setEnabled()方法。

各种Lights类型

下面我们将介绍4种很cool的light:

  • Point Light

Point Light是在全范围内唯一的一个点光源。Point Light从这个点向四周发射光线,一个很好的例子就是太阳。

你可以通过diffuse和specular属性来控制任何light的颜色:

var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);
light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

Red diffuse和white specular。

  • Directional Light

directional light是通过一个方向来定义(真令人吃惊!)。光线从任意方向射向一个特殊的方向,无限范围。默认情况下,directional light在坐标(0,0,0)创建。同point light一样,你可以通过diffuse和specular属性来控制光线颜色:

var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -1, 0), scene);
light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

Red diffuse和white specular。

  • Spot Light

spot light通过position,direction,angle,exponent来创建。这些参数定义了一个圆锥体的光源,从position向direction方向发射。

angle定义照明领域的大小和锥体的弧度,exponent定义随距离光线的衰减即光源能到达的距离。同其他light一样,你可以通过diffuse和specular属性来控制光线颜色:

上图是spot light光线射出范围的简图。

var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

red diffuse,white specular,0.8弧度锥体,exponent 2

  • Hemispheric Light 

hemispheric light是一个简单的模拟真实环境光线的方法。hemispheric light通过天空的方法,以及三个颜色(天空的颜色像素朝上,地面的颜色像素朝下,以及specular的颜色)来定义。

在上面,我们使用了向上和向下的术语,但请记住,天空的方向可以设置成任意方向。天空的方向通常是直线向上(0,1,0)。我们模拟多云的天空,甚至是阴天,太阳也会穿过云层,所以,我们可以将光线向东稍微进行倾斜,作为多云的早晨的天空,稍微向西倾斜作为多云傍晚的天空。这是一个柔和的光,没有阴影。

现在,我们来创建这个非常有用并有趣的hemispheric light:

var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
light0.diffuse = new BABYLON.Color3(1, 1, 1);
light0.specular = new BABYLON.Color3(1, 1, 1);
light0.groundColor = new BABYLON.Color3(0, 0, 0);

White/black hemispheric light - upward pixels white (diffuse), downward pixels black (groundColor)

我们网站有很多非常棒的light演示例子,类似light的演示例子可以在我们的playground中找到。

关于Babylon.js One-Line Constructors:

下面是一个one-line constructor的例子:

var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);

上面这行代码完整创建了一个spot light。我们希望babylon.js场景内容的创建既快又简单。我们也希望场景内容创建只需一行代码。spot light是一个非常重要的场景内容,它的构造函数需要很多参数。one-line constructor需要给每一个参数设置一个必要的初始属性。

有一些属性我们将会隐式设置。例如intensity,我们设置他默认的属性为1.0。我们为你设置了必要的初始属性,同时调用了setEnabled(true)方法。

注意两件非常重要的事。首先,spot light和其他babylon.js场景内容的所有属性都可以在对象创建完以后设置。然后,如果你选择这样,你可以在one-line constructor中将这些属性设置为0或者空,随后再设置那些必要的属性,一个一个设置。你已经看到一个快而简单创建spot light的方法,下面,我们将展示一个比较慢,稍微复杂一点的spot light构造方法。

var light0 = new BABYLON.SpotLight("", new BABYLON.Vector3.Zero(), new BABYLON.Vector3.Zero(), 0, 0, scene);
light0.name = "My Slowly and Discretely Constructed Spot Light"
light0.position = new BABYLON.Vector3(0, 30, -10);
light0.direction = new BABYLON.Vector3(0, -1, 0);
light0.angle = 0.8;
light0.exponent = 2;
light0.intensity = 0.5;
light0.diffuse = new BABYLON.Color3(1, 1, 1);
light0.specular = new BABYLON.Color3(1, 1, 1);
light0.setEnabled(1);

上面这种方式我们很少需要,但是你还是应该知道,你可以通过这样构造,如果你愿意的话。

Light的法线和背面:

3D场景里你可能在口头或书面上听过'normals'和'backfaces'。在本节我们不会深入研究这两个术语,但是我们会试图来解释normals和backfaces如何来影响光线。

下图将帮助你来理解light如何与normals和backfaces交互。这张图展现了两个平面和两个光源。一个是spot light,一个是point light。这些箭头显示光源的法线,在实际场景中这些箭头是看不到的。它们用来帮助我们说明normals的概念。如钻石和圆锥形状的两盏灯。让我们来仔细看这张图。

一个蓝色背景的平面和一个蓝色前面的平面,一个spot light和一个point light。

你可以看到,当一个标准的babylon.js平面在他的背面发光(左边的平面),light没有受影响,因为它的法线没有面向light。相反,当在前面发光(右边的平面),两个light都工作得很好,因为他们的法线面向light。

有一点很有意思,这个平面并不能阻挡光线。你可以看到坐标平面的箭头被light照亮。平面没有阻挡光线。在babylon.js里面阻挡光线的唯一办法是使用一个或多个ShadowGenerator。

最后需要注意的事,如果将左边平面的material.backFaceCulling = false。不管它设置为true还是false,都不会影响灯光对背面的影响。灯光主要关注法线的方向。标准的babylon.js平面(地面)他的法线是对准前面。

在新的版本中,加入了range属性:

light.range = 300;

更多关于range属性的信息将会在以后介绍。

限制

Babylon.js运行你创建和注册许多light,但是一个标准的StandardMaterial只能处理一定数量的lights(默认值是4,即只有前四个定义的light将会生效)。你可以通过下面的代码更改这个值:

var material = new BABYLON.StandardMaterial("mat", scene);
material.maxsimultaneousLights = 6;

但是要小心!因为有更多的动态lights,babylon.js将会产生更大的阴影,这可能会造成无法与低端设备如手机或小型平板兼容。在这种情况下,babylon.js将尝试使用更少的light重新编译。

一个使用6个lights的例子可以在我们playground中找到。

下一步

随着这些强大灯光的使用,你的场景看起来非常炫。不要忘记,你还可以动态的修改light的position,directions,colors,这些可以创建美妙的灯光秀。我们将在随后讨论,你也可以自己去研究如何实现。也许你可以在场景循环渲染的方法中来进行灯光属性的设置。这是非常有趣和漂亮的。

虽然不是真正的光,但是会对我们的Volumetric Light Scattering (GodRays)系统感兴趣的。

下一节我们将讲述animation,动画。

 

 

 

 

发表评论