SuperMap webgl中关于场景美化的一些操作

最近，三维场景的美化工作被许多人认可，也开始逐渐尝试利用webgl前端进行三维场景美化，这边总结了一些关于场景美化的操作喝代码供各位参考

1.日间场景优化

白天的场景优化主要是增加模型的立体感，可以通过调整太阳光和光源的方向来达到效果

//关闭太阳光
scene.sun.show = false;
//增加自定义光源，光源方向一般为45°，方向为从东南自西北
var position1 =  new Cesium.Cartesian3.fromDegrees(xxx,yyy, 480);
var targetPosition1 =  new Cesium.Cartesian3.fromDegrees(xxz,yyz,,430);
var dirLightOptions = {
    targetPosition: targetPosition1,
    color:  new Cesium.Color(1.0, 1.0, 1.0, 1),
    intensity: 0.55
};
directionalLight_1  =  new Cesium.DirectionalLight(position1, dirLightOptions);
scene.addLightSource( directionalLight_1);

2.夜间场景优化

夜间的场景主要是通过多种自定义光源和环境光形成夜间特效

//关闭太阳光
scene.sun.show = false;
//调整环境光亮度
scene.scene.lightSource. ambientLightColor =  new Cesium.Color(0, 0, 0, 1);

自定义光源主要有以下三种

2.1平行光源

平行光源主要用于奠定场景基础灯光

// 新增直射光 1--顶光
var position =  new Cesium.Cartesian3.fromDegrees(120.44180771257064, 27.51841602537714, 333.66);
var targetPosition1 =  new Cesium.Cartesian3.fromDegrees(120.44180771257064, 27.51841602537714, 0);
					
var dirLightOptions = {
	targetPosition: targetPosition1,
	color:  new Cesium.Color(0.8, 0.8, 0.8, 1.0),
	intensity: 0.3
};
directionalLight_v =  new Cesium.DirectionalLight(position, dirLightOptions);
scene.addLightSource(directionalLight_v);

2.2聚光灯

聚光灯可用于夜间的路灯，给与暖黄颜色，打造路灯特效

// 新增聚光灯-横向道路-路灯 1
var spotLightPosludeng1_1 =  new Cesium.Cartesian3.fromDegrees(120.44390046946401, 27.524059312439242, 30);
var spotLightTargetPosludeng1_1 =  new Cesium.Cartesian3.fromDegrees(120.44390046946401, 27.524059312439242, 0);
var spotLightOtionsludeng1_1 = {
	color:  new Cesium.Color(200/255, 181/255, 81/255, 1),
	distance: 50,
	decay: 0.5,
	intensity: 5,
	angle:  Math.PI/2
};
spotLightludeng1_1 =  new Cesium.SpotLight(spotLightPosludeng1_1,spotLightTargetPosludeng1_1,spotLightOtionsludeng1_1);
scene.addLightSource( spotLightludeng1_1);

2.3点光源

点光源可用于局部提亮，用于突出重要建筑物

// 新增点光源-最高建筑
var pointLightPoszuigao1 =  new Cesium.Cartesian3.fromDegrees(120.44371672809474, 27.523539888754094, 50);
var pointLightOptionszuigao1 = {
	cutoffDistance: 20.0,
	color:  new Cesium.Color(0.8, 0.8, 0.8, 1.0),
	intensity: 2
};
pointLightzuigao1 =  new Cesium.PointLight(pointLightPoszuigao1, pointLightOptionszuigao1);
scene.addLightSource( pointLightzuigao1);

3.光晕线

光晕线一般用于表示城市夜间道路，也可以用来表示建筑物的边框线，用于凸显重点建筑物的轮廓

光晕线是在前端加载geojson文件

//加载线数据
var promiseroute11 = Cesium.GeoJsonDataSource.load('./data/json/boarding_1.json');
promiseroute11.then(function(dataSource) {
	viewer.dataSources.add(dataSource);
	Routes11 = dataSource.entities.values;

	for(var i = 0; i < Routes11.length; i++) {
		var line = Routes11[i];
		line.polyline.material = new Cesium.PolylineGlowMaterialProperty({ //设置Glow材质
				glowPower: 0.1,
				//color: Cesium.Color.ORANGERED.withAlpha(0.9)
				color: Cesium.Color.AQUA.withAlpha(0.9)
		});
		line.polyline.width = 10;
	}

}).otherwise(function(error) {

	window.alert(error);
});

4.动态纹理

可以给模型缓存增加动态纹理，一般是给白膜数据添加动态纹理，达到夜间流动的效果，也可以给重点建筑建一个外边框图层，然后对外边框图层设置设置动态纹理，这样可以打造出流动的灯光特效

var bklayer = scene.layers.find('XK011');//获取边框图层
bklayer.bloomEffect.show = true;
bklayer.style3D.fillForeColor = Cesium.Color.AQUA; //设置模型自发光
					
var hyp = new Cesium.HypsometricSetting();
setHypsometric(bklayer);
//设置自发光纹理
function setHypsometric(layer) {
	hyp.emissionTextureUrl = "./images/speedline.jpg";//speedline.jpg
	//hyp.emissionTexCoordUSpeed = -0.1;
	hyp.emissionTexCoordVSpeed = 0.05;
	layer.hypsometricSetting = {
	    hypsometricSetting: hyp,
    }
}