cesium 泛光 bloom效果

实际上核心就是获取bloom对几个属性值进行设置

let viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: mapbox,contextOptions: {webgl: {alpha: true}},selectionIndicator: false,animation: false, //是否显示动画控件baseLayerPicker: false, //是否显示图层选择控件geocoder: false, //是否显示地名查找控件timeline: false, //是否显示时间线控件sceneModePicker: false, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件infoBox: false, //是否显示点击要素之后显示的信息fullscreenButton: false,shouldAnimate: true //动画播放});//取消双击事件viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);//设置homebutton的位置Cesium.Camera.DEFAULT_VIEW_RECTANGLE =Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)//设置初始位置viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)});//开启深度检测for (let i = 0; i < 10; i++) {//buildingGeojson.features.lengthlet height = buildingGeojson.features[i].properties.floor * 3;let geotype = buildingGeojson.features[i].geometry.type.toUpperCase();let coordinates = buildingGeojson.features[i].geometry.coordinates;if (geotype == 'POLYGON') {//console.log(coordinates);} else if (geotype == 'MULTIPOLYGON') {for (let j = 0; j < coordinates.length; j++) {for (let k = 0; k < coordinates[j].length; k++) {let positions = [];let positionWithoutH=[]let positionSHU=[]for (let l = 0; l < coordinates[j][k].length; l++) {positions.push(coordinates[j][k][l][0]);positions.push(coordinates[j][k][l][1]);positions.push(height);}// positions.length=positions.length-3viewer.entities.add({name: 'Red wall at height',wall: {positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),material: new Cesium.ImageMaterialProperty({image: getColorRamp([0.0, 1.0], true),color: Cesium.Color.BLUE.withAlpha(0.99)}),outline: true,outlineColor: Cesium.Color.WHITE,outlineWidth: 3,}});//positions.length=positions.length-3for(let i=0;i<positions.length;i=i+3){positionWithoutH.push(positions[i])positionWithoutH.push(positions[i+1])positionWithoutH.push(0)positionSHU.push(positions[i])positionSHU.push(positions[i+1])positionSHU.push(0)positionSHU.push(positions[i])positionSHU.push(positions[i+1])positionSHU.push(positions[i+2])}viewer.entities.add({name: '橙色多边形',polyline : {positions : Cesium.Cartesian3.fromDegreesArrayHeights(positions),width : 5,material : new Cesium.PolylineGlowMaterialProperty({glowPower : 0.3,color : Cesium.Color.BLUE.withAlpha(0.7),})}});//console.log(positionSHU)positionSHU.length=positionSHU.length-6// positions.map((v,index)=> {//     if((index+1)%3==0){//         v=0//     }//     positionWithoutH.push(v)// })viewer.entities.add({name: '橙色多边形',polyline : {positions : Cesium.Cartesian3.fromDegreesArrayHeights(positionWithoutH),width : 5,material : new Cesium.PolylineGlowMaterialProperty({glowPower : 0.9,color : Cesium.Color.BLUE.withAlpha(0.7),})}});// viewer.entities.add({//     name: '橙色多边形',//     polyline : {//         positions : Cesium.Cartesian3.fromDegreesArrayHeights(positionSHU),//         width : 5,//         material : new Cesium.PolylineGlowMaterialProperty({//             glowPower : 0.9,//             color : Cesium.Color.BLUE.withAlpha(0.7),//         })//     }// });}}}}viewer.zoomTo(viewer.entities);// 亮度设置var stages = viewer.scene.postProcessStages;viewer.scene.brightness =  viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());viewer.scene.brightness.enabled = true;viewer.scene.brightness.uniforms.brightness = Number(2);var scene=viewer.scene// var flashlight = new Cesium.DirectionalLight({//     direction : scene.camera.directionWC // Updated every frame// });// scene.light = flashlight;// scene.globe.dynamicAtmosphereLighting = false;var viewModel = {show : true,glowOnly : false,contrast : 120,brightness : -0.3,delta : -10.0,sigma : 3.78,stepSize : 5.0};function updatePostProcess() {var bloom = viewer.scene.postProcessStages.bloom;bloom.enabled = true;bloom.uniforms.glowOnly = Boolean(viewModel.glowOnly);bloom.uniforms.contrast = Number(viewModel.contrast);bloom.uniforms.brightness = Number(viewModel.brightness);bloom.uniforms.delta = Number(viewModel.delta);bloom.uniforms.sigma = Number(viewModel.sigma);bloom.uniforms.stepSize = Number(viewModel.stepSize);}updatePostProcess();setInterval(()=>{viewModel.delta+=0.5updatePostProcess()console.log("更改delta值")},1000)function getColorRamp(elevationRamp, isVertical = true) {let ramp = document.createElement('canvas');ramp.width = isVertical ? 1 : 100;ramp.height = isVertical ? 100 : 1;let ctx = ramp.getContext('2d');let values = elevationRamp;let grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0);let v=0.2let varr=0for(let i=0;i<20;i++){v=v-0.01varr=varr+0.025// console.log(varr,v)grd.addColorStop(varr, 'rgba(137,242,245,'+v+')'); //white}for(let i=0;i<19;i++){v=v+0.01varr=varr+0.025//console.log(varr,v)grd.addColorStop(varr, 'rgba(137,242,245,'+v+')'); //white}// grd.addColorStop(0, 'rgba(0,0,206,0.3)'); //white//// grd.addColorStop(1, 'rgba(35,97,250,0.3)'); //whitectx.globalAlpha = 0.3;ctx.fillStyle = grd;if (isVertical)ctx.fillRect(0, 0, 1, 100);elsectx.fillRect(0, 0, 100, 1);return ramp;}

cesium 泛光 bloom效果相关推荐

Unity3d HDR和Bloom效果（高动态范围图像和泛光）
文章开始先放两组效果,文章结尾再放两组效果本文测试场景资源来自浅墨大神,shader效果为本文效果 HDR 人们有限的视觉系统,只支持16.7百万的颜色,超出这个范围的颜色就不能显示了 bmp或jp ...
Bloom泛光后期处理效果
Bloom泛光泛光(Bloom) 是一种现实世界中的光现象,通过它能够以较为适度的渲染性能成本极大地增加渲染图像的真实感.用肉眼观察黑暗背景下非常明亮的物体时会看到泛光效果.亮度更高的物体还会造成 ...
Unity 关于仿崩坏3部分Bloom（部分泛光）效果实现原理（附源码）
之前写每个物体的材质球控制屏幕bloom效果,由于性能问题,换了另外一种实现方式部分泛光的功能,这个是之前写的,不过性能不行,如果简单的游戏还可以,如果大场景的话就不行了原理分析我这边就研究崩坏 ...
OpenGL 泛光Bloom
OpenGL 泛光Bloom 泛光Bloom简介提取亮色高斯模糊把两个纹理混合泛光Bloom简介明亮的光源和区域经常很难向观察者表达出来,因为监视器的亮度范围是有限的.一种区分明亮光源的方式 ...
UnityShader入门精要-屏幕后处理效果亮度饱和度对比度、边缘检测、高斯模糊、bloom效果、运动模糊
(从这里开始可能会记录的更简略一些,时间紧张想迅速读完这本书的主要内容,可能有的部分不会自己上手做) 屏幕后处理通常指渲染完整个场景得到屏幕图像后,再对图像进行操作,抓取屏幕可以使用OnRenderI ...
HDR和bloom效果的区别和关系
什么是HDR? 谈论游戏画面时常说的HDR到底是什么呢?HDR,本身是High-Dynamic Range(高动态范围)的缩写,这本来是一个CG概念.HDR的含义,简单说,就是超越普通的 ...
UnityShader屏幕后处理-Bloom效果(朦胧模糊)
原理:1 取出图片中比较亮(饱和度比较高.远离灰色)的一部分图 2 对1中的图进行高斯模糊的到新的图 3 将2中的图与原图色彩相加 1 取出图片中比较亮的的区域 C# material.SetFloa ...
Cesium 实现粒子效果贴地（伪）
有时我们面对这样的需求,需要在地面上放一个周期性放大缩小的标记,可以使用粒子效果实现,但是粒子效果图片很难贴地(如果你知道怎么做,欢迎分享,期待有人打我脸),我只能变通实现一个看似贴地但实际没有贴地的 ...
Cesium粒子系统-喷水效果
Cesium提供了ParticleSystem供我们使用,可以用实现一些比较高级的特效,具体效果如下图: 首先我们定义三个函数,第一个函数用来设置该粒子系统的位置,第二个函数用来控制粒子系统中粒子发射 ...

cesium 泛光 bloom效果

cesium 泛光 bloom效果相关推荐

最新文章

热门文章