SuperMap iClient3D for
WebGL默认的光照系统,能够满足大多数情况下的需求。但在一些特殊的场景中,需要对场景内的光照系统进行个性化设置,这时就可以使用自定义光源来实现。本文以北京CBD夜景为例,介绍如何通过多种自定义光源来打造城市夜景灯光特效。
先来看看最终实现的北京CBD夜景灯光特效。
实现这样的灯光特效很简单,只需要四步哦!
第一步
因为是夜景,首先关闭太阳光与环境光
scene.sun.show
= false;
scene.lightSource.ambientLightColor
= new Cesium.Color(0, 0, 0, 1);
第二步
给场景添加一个平行光和点光源作为底光
平行光位置不限,保证整个场景都能有一个偏蓝的色调。点光源的置于重点建筑群附近,提升该区域的亮度,作为整个场景的视觉中心区域。
//
新增直射光-整个环境var
dirLightOptions = {
targetPosition: targetPosition1,
color: new Cesium.Color(0.01, 0.01, 0.3, 1.0),
intensity: 0.1
};
directionalLight_v
= new Cesium.DirectionalLight(position,
dirLightOptions);
scene.addLightSource(directionalLight_v);
//
新增点光源-整个环境var
pointLightPos3 = new
Cesium.Cartesian3.fromDegrees(116.46477932175468, 39.905807158839266,
220.0);
var
pointLightOptions3 = {
cutoffDistance: 2000,
color: new Cesium.Color(0.04, 0.18, 0.43, 1.0),
intensity: 0.001
};
pointLight3
= new Cesium.PointLight(pointLightPos3,
pointLightOptions3);
scene.addLightSource(pointLight3);
第三步
依次给重点建筑单独打造灯光效果
这里以场景中的最高楼-国贸大厦为例,在其周围添加多个点光源,并设置光源颜色为偏青蓝色的冷色调。点光源的高度大致位于80米处,以打亮建筑的中下部分。用同样的方法给其它重点建筑添加灯光效果。
//
新增点光源-最高建筑var
pointLightPoszuigao1 = new
Cesium.Cartesian3.fromDegrees(116.45976565628527, 39.91042009316276,
80.0);
var
pointLightOptionszuigao1 = {
cutoffDistance: 360.0,
color: new Cesium.Color(0.15, 0.45, 1.4, 1.0),
intensity: 0.12
};
pointLightzuigao1
= new Cesium.PointLight(pointLightPoszuigao1,
pointLightOptionszuigao1);
scene.addLightSource(pointLightzuigao1);
var
pointLightPoszuigao2 = new
Cesium.Cartesian3.fromDegrees(116.46059852558402, 39.91076488114754,
80.0);
pointLightzuigao2
= new Cesium.PointLight(pointLightPoszuigao2,
pointLightOptionszuigao1);
scene.addLightSource(pointLightzuigao2);
var
pointLightPoszuigao3 = new
Cesium.Cartesian3.fromDegrees(116.46058155476312, 39.9095945894333,
80.0);
pointLightzuigao3
= new Cesium.PointLight(pointLightPoszuigao3,
pointLightOptionszuigao1);
scene.addLightSource(pointLightzuigao3);
var
pointLightPoszuigao4 = new
Cesium.Cartesian3.fromDegrees(116.4615882163, 39.910460599,
80.0);
pointLightzuigao4
= new Cesium.PointLight(pointLightPoszuigao4,
pointLightOptionszuigao1);
scene.addLightSource(pointLightzuigao4);
第四步
给道路添加路灯效果
前面添加的灯光都是针对建筑添加的,道路上面也会有很多的路灯。这里我们通过聚光灯来模拟路灯的效果,因为路灯具有明显的方向性。由于之前添加的灯光都是冷色调的,这里给路灯设置一个比较明显的暖色调,平衡场景中的颜色分布。因为场景是支持HDR的,所以可以给光源颜色设置大于1的RGB值(6,
5, 0.2, 1)。另外给光源设置一个合适的衰减系数(3),保证灯光在向周围传播的时候逐渐减弱。
//
新增聚光灯-横向道路-路灯1var
spotLightPosludeng1_1 = new
Cesium.Cartesian3.fromDegrees(116.46215548997236, 39.907743432631186,
30);
var
spotLightTargetPosludeng1_1 = new
Cesium.Cartesian3.fromDegrees(116.46215548997236, 39.907743432631186,
0);
var
spotLightOtionsludeng1_1 = {
color: new Cesium.Color(6, 5, 0.2, 1),
distance: 100,
decay: 3,
intensity: 13,
angle: Math.PI / 2
};
spotLightludeng1_1
= new Cesium.SpotLight(spotLightPosludeng1_1,
spotLightTargetPosludeng1_1,
spotLightOtionsludeng1_1);
scene.addLightSource(spotLightludeng1_1);
//
新增聚光灯-横向道路-路灯2var
spotLightPosludeng1_2 = new
Cesium.Cartesian3.fromDegrees(116.46008198437434, 39.90779904562042,
30);
var
spotLightTargetPosludeng1_2 = new
Cesium.Cartesian3.fromDegrees(116.46008198437434, 39.90779904562042,
0);
spotLightludeng1_2
= new Cesium.SpotLight(spotLightPosludeng1_2,
spotLightTargetPosludeng1_2,
spotLightOtionsludeng1_1);
scene.addLightSource(spotLightludeng1_2);
//
新增聚光灯-横向道路-路灯3var
spotLightPosludeng1_3 = new
Cesium.Cartesian3.fromDegrees(116.45718936579341, 39.907836561376094,
30);
var
spotLightTargetPosludeng1_3 = new
Cesium.Cartesian3.fromDegrees(116.45718936579341, 39.907836561376094,
0);
spotLightludeng1_3
= new Cesium.SpotLight(spotLightPosludeng1_3,
spotLightTargetPosludeng1_3,
spotLightOtionsludeng1_1);
scene.addLightSource(spotLightludeng1_3);
基于以上四步,就实现了城市夜景灯光特效。
友情提示:
1.每种灯光的具体用法,可以参考在线范例:
http://support.supermap.com.cn:8090/webgl/examples/editor.html#lightSource
2.场景中的纹理自发光,泛光等其它特效可参考特效的制作流程文档。
网友评论