6 Babylonjs基础入门 光源

光源会在照射方式和颜色方面影响模型网格的显示效果。除非你开启阴影效果,要不然光线可以穿透所有的网格。场景默认的光源数量为4个,可以通过修改增加。

光源的类型

在Babylon.js中,有四种光源的类型和一系列光源属性。下面介绍一下哪四种

点光源

点光源是有三维空间中的一个点定义的光。从这一点开始,光向每一个方向发射光线。点光源的一个很好的例子是灯泡。
创建点光源需要配置:光源名称,光源位置,场景对象:

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);

光的颜色属性

光源有三个属性会影响到颜色。其中有两个属性diffuse(漫反射)和specular(镜面反射)适用于所有的四种光源,而第三种groundColor(地面反射)仅适用于半球光。

  1. diffuse(漫反射)为对象提供基本的颜色。
  2. specular(镜面反射)可以在模型对象上生成高亮颜色。
    我们可以通过查看案例来查看 diffuse(漫反射)红色和specular(镜面反射)绿色集合产生的黄色高光。

对于半球光来说,groundColor(地面颜色)照射方向刚好与设置的方向相反。就是说,半球光上的漫反射和镜面反射光的方向与地面反射的方向是相反的。
设置颜色为白色的漫反射光和黑色的地面反射是一种有用的照明方法。

相交的灯光颜色

相交的灯光案例

光源数量限制

Babylon.js允许你创建尽可能多的光源,但是单个的StandardMaterial材质只能处理默认定义数量的光源(默认情况下,为四个光源)。你可以使用下面的方式设置更多:

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

但是要注意!使用更多的动态光源,Babylon.js将生产更多的着色器,这些着色器可能与移动设备或者小型平板电脑等低性能设备不兼容。在这种情况下,请尝试使用较少的光源。

六个光源的的案例

开启,关闭或者调整强度

每个光都可以使用setEnabled方法传入false,禁掉光的使用:

light.setEnabled(false);

或者,传入true来开启使用:

light.setEnabled(true);

通过调整intensity属性调整光的亮度,默认值为1:

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

对于点光源和聚光灯光源,我们还可以调整range属性来设置光的照射范围:

light.range = 100;

设置选择照亮的模型

创建光源时,默认是所有的网格都会被它点亮。有两种方式可以排除某些网格被点亮。

  1. 可以将不需要照亮的模型添加到light.excludedMeshes数组中,光源将影响除了数组内的其它所有模型。
  2. 可以将不要排除掉的网格添加到light.includedOnlyMeshes数组中,光源将只会影响到数组内的模型。
    两种方式具体使用哪种是通过模型的数量决定的。如果照亮的比排除的较少,那推荐第二种,如果照亮的比排除掉的多,那推荐第一种。

设置选择照亮的模型案例

照明法线

光源对网格的发硬取决于为每个网格顶点设置的方向值,这些值称为法线,如下图所示为箭头,给出了法线的方向。图为两个平面和两个光源。一个光源是聚光灯,一个是点光源。每个平面的正面是法线指向的面,反面就是背面。
在这里插入图片描述
如图所示,我们发现,光源仅仅能够影响到法线正面,不会影响到背面。

光照贴图

在运行时计算复杂的照明的计算成本可能很高。为了解决性能,可以使用光照贴图将计算的光照存储在网格的纹理中:

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光源属性。目前为止,只有聚光灯支持此功能!

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 :有助于定义朝向光方向并与向上方向对齐的光空间。

投影的数据将会和正常光的数值相乘,更好的适应Babylon.js的光照。它也只影响漫反射的值。因此,可能需要更改光源的镜面反射颜色来适应场景。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值