babylon101

灯火


灯火

正如您所料,灯光在照明和颜色方面都会影响网格的显示效果。除非激活阴影生成,否则所有网格都允许光线穿过它们。允许的默认灯数为4,但可以增加。

Elements

一个漂亮的球体与多个灯

灯的类型

有四种类型的灯可以与一系列照明属性一起使用。

点光源

点光源是由世界空间中的唯一点定义的光。从这一点开始,光在每个方向发射。点光源的一个很好的例子是标准灯泡。

var light = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(1, 10, 1), scene);

定向光

定向光由方向定义(多么令人惊讶!)。光从指定方向的任何地方发出,并且具有无限范围。定向光的一个例子是当距离行星被来自太阳的明显平行的光线照亮时。向下的光将点亮物体的顶部。

var light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 0), scene);

聚光灯

聚光灯由位置,方向,角度和指数定义。这些值定义了从该位置开始朝向该方向发射的光锥。

以弧度表示的角度定义了聚光灯锥形光束的大小(照明场),指数定义了光线随距离(到达)衰减的速度。

简单使用聚光灯

var light = new BABYLON.SpotLight("spotLight", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), Math.PI / 3, 2, scene);

半球光

半球形灯是模拟周围环境光的简单方法。半球形光由方向定义,通常朝向天空“向上”。然而,通过设置颜色属性可以实现完整效果。

var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);

颜色属性

灯的三个属性会影响颜色。其中两个漫反射和镜面反射适用于所有四种类型的光,第三种,groundColor,仅适用于半球光。

  1. 漫反射为对象提供基本颜色;
  2. Specular在对象上生成高亮颜色。

在这些游乐场中,看看镜面颜色(绿色)如何与​​漫反射颜色(红色)结合以产生黄色高光。

对于半球形光,groundColor是与创建期间指定的方向相反的光。你能想到的的漫反射和镜面反射光从对象的在给定的方向和所述的中心来groundColor在相反方向上的光。

白色半球形光与黑色groundColor是一种有用的照明方法。

相交的灯光颜色

\

限制

Babylon.js允许您创建和注册尽可能多的灯光,但是知道单个StandardMaterial只能处理定义数量的同时灯光(默认情况下,此值等于4,这意味着场景灯光的前四个启用灯光列表)。您可以使用以下代码更改此号码:

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

但要小心!因为拥有更多动态灯光,Babylon.js将生成更大的着色器,这些着色器可能与移动设备或小型平板电脑等低端设备不兼容。在这种情况下,babylon.js将尝试使用较少的灯重新编译着色器。

开,关或调光

每个灯都可以使用

light.setEnabled(false);

然后打开

light.setEnabled(true);

想要调暗或照亮光线?然后设置intensity属性(默认值为1)

light0.intensity = 0.5;
light1.intensity = 2.4;

对于点光源和聚光灯,您可以使用range属性设置光线到达的距离

light.range = 100;

选择网格光

创建灯光时,所有当前网格都将被点亮。有两种方法可以排除某些网格被点亮。可以将网格添加到excludedMeshes数组中,或者将不要排除的网格添加到includedOnlyMeshes数组中。要排除的网格数量可以是决定使用哪种方法的一个因素。在以下示例中两个网格要被从排除light0和从23 光线1。反过来评论第26和27行将显示个别效果。

照明法线

灯光对网格的反应取决于为每个网格顶点设置的值,这些值称为法线,如下图所示为箭头,给出了法线的法线方向。图为两架飞机和两盏灯。一盏灯是聚光灯,另一盏是点光源。每个平面的正面是法线指向你时看到的那个,背面是对面。

Elements

蓝色背面平面和蓝色前面平面,带有聚光灯和点光源

如您所见,灯光仅影响正面而不影响背面。

光照贴图

在运行时计算复杂照明的计算成本可能很高。为了节省计算,可以使用光照贴图将计算的光照存储在将应用于给定网格的纹理中。

var lightmap = new BABYLON.Texture("lightmap.png", scene);
var material = new BABYLON.StandardMaterial("material", scene);
material.lightmapTexture = lightmap;

注意:要将纹理用作阴影贴图而不是光照贴图,请将material.useLightmapAsShadowmap字段设置为true。

场景灯与灯光图混合的方式基于场景中灯光的lightmapMode。

light.lightmapMode = BABYLON.Light.LIGHTMAP_DEFAULT;

这将导致在应用此灯光的照明后混合光照贴图纹理。

light.lightmapMode = BABYLON.Light.LIGHTMAP_SPECULAR;

这与LIGHTMAP_DEFAULT相同,只是将应用镜面光照和灯光阴影。

light.lightmapMode = BABYLON.Light.LIGHTMAP_SHADOWSONLY;

这与LIGHTMAP_DEFAULT相同,只是将应用从此灯光投射的阴影。

投影纹理

在某些情况下,最好从纹理而不是恒定颜色定义光的漫反射颜色(漫反射为对象提供基本颜色)。想象一下,你正试图模拟大教堂内的灯光效果。透过彩色眼镜的光线将投射到地面上。对于来自投影仪的光线或您在迪斯科舞厅中可以看到的灯光效果也是如此。

为了支持此功能,您可以依赖projectionTexture灯光的属性。到目前为止,SpotLight仅支持此功能。

var spotLight = new BABYLON.SpotLight("spot02", new BABYLON.Vector3(30, 40, 30),
        new BABYLON.Vector3(-1, -2, -1), 1.1, 16, scene);
spotLight.projectionTexture = new BABYLON.Texture("textures/stainedGlass.png", scene);

为了控制投影方向和范围,您还可以依赖以下属性:

  • projectionTextureLightNear : 纹理投影的近距离范围。如果平面在光空间中的范围之前,则没有纹理投影。
  • projectionTextureLightFar : 远距离的纹理投影。如果平面在光空间中的范围之前,则没有纹理投影
  • projectionTextureUpDirection : 有助于定义朝向光方向并与向上方向对齐的光空间。

投影信息与正常光值相乘,以更好地适应巴比伦JS照明。它也只影响漫反射值。因此,可能需要更改灯光的镜面反射颜色以更好地适应场景。

下一步

通过使用这些强大的灯光,您的场景可能真的开始“闪耀”。不要忘记,您可以设置光线位置,方向,颜色的动画,从而创建精彩的“灯光秀”。我们很快就会谈到这一点,或者很自在地发现如何自己做。也许你可以在场景的渲染循环功能中进行光属性设置。它的乐趣和美丽!

你猜怎么着!下一个教程......是关于动画的! 点击这个,我们走吧!

Further Reading

Lights Overview