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的光照。它也只影响漫反射的值。因此,可能需要更改光源的镜面反射颜色来适应场景。

来源:https://blog.csdn.net/qq_30100043/article/details/88095901

WEBGL学习网(WebGLStudy.COM)专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息:
1. 本站部分资源来源于用户上传和网络,如有侵权请邮件联系站长:1218436398@qq.com!我们将尽快处理。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源打赏售价用于赞助本站提供的服务支出(包括不限服务器、网络带宽等费用支出)!
7.欢迎加QQ群学习交流:549297468 ,或者搜索微信公众号:WebGL学习网
WEBGL学习网 » 6 Babylonjs基础入门 光源

发表评论

提供优质的WebGL、ThreeJS源码

立即查看 了解详情