cesium之流动线纹理实现的两种方式

7 篇文章 6 订阅
6 篇文章 0 订阅

直接上代码吧

方法一:采用自定义shader 的实现,利用cesium内置的glsl变量是纹理随着时间按照指定方向进行流动。效果图中科技感的数字流动是呈现沿着线往上流动,这种效果很适合在智慧城市数字孪生的场景中结合其他的三维地物作为装饰。我们可以看到wall的方向跟线的方向流动的方向是不一样的,wall 的流动方向是横着流动,这是着色器中的纹理方向的设置相关,我这里没有把wall的代码放出来。不过,如何更改流动方向,我相信聪明的你应该清楚如何更改了。赶紧去试一试吧。这种方式用的是addPrimiFlowline 方法 

let source1 =  "czm_material czm_getMaterial(czm_materialInput materialInput)\n\        {\n\            czm_material material = czm_getDefaultMaterial(materialInput);\n\            vec2 st = fract (repeat *materialInput.st);\n\            float time = czm_frameNumber * animationSpeed;\n\            vec4 colorImage = texture2D(image, vec2(st.t,fract((st.s - time)) ));\n\            vec4 fragColor;\n\            fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\            fragColor = czm_gammaCorrect(fragColor);\n\            material.alpha = colorImage.a * color.a;\n\            material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\            material.emission = fragColor.rgb;\n\            return material;\n\        }";function addPrimitiveFlowAppear(pos){      var primitive = new Cesium.Primitive({          geometryInstances : new Cesium.GeometryInstance({            geometry : new Cesium.PolylineGeometry({              positions : pos,              width : 5,              vertexFormat : Cesium.PolylineMaterialAppearance.VERTEX_FORMAT//可以不设置,一般会根据 appearance的类型自动默认对应的类型            }),            attributes : {              //color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 1.0))            }          }),          appearance : new Cesium.PolylineMaterialAppearance({            material :             Cesium.Material.fromType(Cesium.Material.FadeType, {              repeat: true,              fadeInColor: Cesium.Color.BLUE.withAlpha(0),              fadeOutColor: Cesium.Color.WHITE,              time: new Cesium.Cartesian2(0.0, 0.0),              fadeDirection: {                x: true,                y: false,              }            })          })                });      return primitive    }  function addPrimiFlowline(pos,fs){      var primitive = new Cesium.Primitive({          geometryInstances : new Cesium.GeometryInstance({            geometry : new Cesium.PolylineGeometry({              positions : pos,              width : 10            }),            attributes : {              //color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 1.0))            }          }),          appearance : new Cesium.PolylineMaterialAppearance({            translucent : true          })                });      primitive.appearance.material=new Cesium.Material({        fabric: {            uniforms://uniforms,            {                image:wallMater,                animationSpeed:0,                color:Cesium.Color.GREEN.withAlpha(0.5),                repeat:new Cesium.Cartesian2(1.0,1.0)            },            source:fs        },      });      return primitive    }

// 通过设置fadetype 实现流动的线    let primi = this.addPrimitiveFlowAppear(positions)    viewer.scene.primitives.add(primi);// 添加数字流动线
    let linePos = Cesium.Cartesian3.fromDegreesArrayHeights([120.21725, 23.63556, 0,120.21725, 23.63556, 15000.0])    let linePos1 = Cesium.Cartesian3.fromDegreesArrayHeights([120.32044, 23.63392, 0, 120.32044, 23.63392, 15000.0])    let lineUniforms = {image:wallMater, animationSpeed:10,color:Cesium.Color.BLUE.withAlpha(0.6), repeat:new Cesium.Cartesian2(2.0,1.0)}    let num_line = this.addPrimiFlowline(linePos,source1)    num_line.appearance.material.uniforms=lineUniforms    let num_line1 = this.addPrimiFlowline(linePos1,source1)    num_line1.appearance.material.uniforms.color=Cesium.Color.BLACK     num_line1.appearance.material.uniforms.repeat=new Cesium.Cartesian2(2.0,1.0)    viewer.scene.primitives.add(num_line);    viewer.scene.primitives.add(num_line1);
    var timex = 0;    function render() {      timex += 0.01;      if (timex >= 1.0) {        timex = 0; // 控制在0.0到1.0之间      }                primi.appearance.material.uniforms.time.x = timex;      requestAnimationFrame(render);    }    requestAnimationFrame(render);

方法二:根据cesium 内置的材质类型实现。具体介绍各位可以去API文档查看,有哪些uniforms和各个属性代表的意思也写的很清楚。示例代码看addPrimitiveFlowAppear方法。

要注意:

1、cesium绘制地物有两种方式,一种是通过entity的方式。entity是cesium封装的一种高级接口,很适合上手入门。entity添加的地物可以使用如以下已经封装好的materialProperty 来组合各种材质效果,enetity详细内容参考官方文档,具体使用例子可以参考前面文章cesium property实现飞行实时姿态仿真中飞行尾部轨迹的实现

     另一种是primitive的方式,本文中这两个都是通过primitive来绘制几何体。他们的材质跟前面讲的property是不一样的机制,cesium通过primitive提高了渲染的自由度,让精通GLSL编程的开发者有更大的发挥舞台。在接口使用上的区别是:1、primitive通过appearance来给material赋值。2、上面列举的materialproperty是不可以在这里使用的,但是内置的几种类型材质可以使用,第二种实现方式实现就是利用内置的类型。

2、第二种实现方式中,通过内置材质类型的uniforms中的time必须是变化才能使其材质产生流动效果,因此为了让其变换,我们将其放到requstAnimation中,进行修改。有没有更好的实现方式呢,我们下期进行探讨。

 

  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Cesium 是一个基于 WebGL 的虚拟地球引擎,可以用来实现各种地球可视化应用。要实现流动线,可以使用 Cesium 的 Polyline 来绘制线条,并通过修改线条的位置和颜色来模拟流动效果。 具体实现步骤如下: 1. 创建一个 Polyline 实例,并设置线条的起点和终点坐标。 ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var polyline = new Cesium.Polyline({ positions: [ Cesium.Cartesian3.fromDegrees(0.0, 0.0), Cesium.Cartesian3.fromDegrees(10.0, 0.0) ], width: 5, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.RED }) }); viewer.scene.primitives.add(polyline); ``` 2. 设置 Polyline 的颜色和位置。 ```javascript var time = 0; viewer.clock.onTick.addEventListener(function(clock) { time += clock.deltaTime / 1000; var positions = []; for (var i = 0; i <= 100; i++) { var lon = i / 100 * 10; var lat = Math.sin(time + i / 10) * 10; positions.push(Cesium.Cartesian3.fromDegrees(lon, lat)); } polyline.positions = positions; polyline.material.color = Cesium.Color.fromHsl(time / 10, 0.5, 0.5); }); ``` 在每帧渲染时,根据时间计算出线条的位置和颜色,并设置到 Polyline 实例上即可。上面的代码中,我们通过修改纬度来模拟流动效果,同时通过修改颜色来使线条呈现出彩虹般的变化。 以上就是使用 Cesium 实现流动线的基本步骤,可以根据实际需求进行进一步的扩展和优化。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值