primitive 的 Appearance编写着色器材质

在这里插入图片描述

import { nextTick, onMounted, ref } from 'vue'
import * as Cesium from 'cesium'
import gsap from 'gsap'onMounted(() => { ... })// 1、创建矩形几何体，`Cesium.RectangleGeometry`：几何体，`Rectangle`：矩形
let rectGeometry = new Cesium.RectangleGeometry({rectangle: Cesium.Rectangle.fromDegrees(115, // 西边的经度20, // 南边维度135, // 东边经度30 // 北边维度),height: 0, // 矩形的高度：0，意味着，它紧贴地球表面`vertexFormat：顶点格式，这里使用`PerInstanceColorAppearance`的顶点格式，允许每个实例有独立的颜色`// vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT`如果使用【Cesium.Material.fromType】这里的【vertexFormat】就必须用这个EllipsoidSurfaceAppearance`vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})// 2、创建几何体实例，`Cesium.GeometryInstance`：几何体实例
let instance = new Cesium.GeometryInstance({id: 'redRect',geometry: rectGeometry, // 将，矩形几何体`rectGeometry`，赋给实例// 定义实例的属性attributes: {// 设置颜色为红色，透明度为0.5color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5))}
})let rectGeometry_1 = new Cesium.RectangleGeometry({rectangle: Cesium.Rectangle.fromDegrees(140, // 西边的经度20, // 南边的纬度160, // 东边的经度30 // 北边的纬度),height: 0 // 矩形的高度：0，意味着，它紧贴地球表面
})
let instance_1 = new Cesium.GeometryInstance({id: 'blueRect',geometry: rectGeometry_1,attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE.withAlpha(0.5))},vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
})// 3、设置外观
let material_1 = new Cesium.Material({fabric: {type: 'Color',uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 0.5)}}
})
let material_1 = new Cesium.Material({fabric: {type: 'Image',uniforms: {image: '../public/texture/logo.png'}}
})
console.log('material_1=', material_1)
console.log('material_1=', material_1.shaderSource)`【编写着色器材质】`
let material_1 = new Cesium.Material({`【`fabric`属性，是Cesium材质的核心，它允许你使用GLSL（OpenGL Shading Language）代码来自定义材质的行为】`fabric: {uniforms: {uTime: 0},// source：GLSL源代码source: `// czm_getMaterial(), 是GLSL函数的开始, 是Cesium材质系统的核心czm_material czm_getMaterial(czm_materialInput materialInput){// 调用 czm_getDefaultMaterial 函数, 初始化为Cesium的默认材质, 这允许你在默认材质的基础上进行修改czm_material material = czm_getDefaultMaterial(materialInput); // 官方默认// ----------- 自定义内容-start -----------// 效果一// 将材质的, 漫反射颜色, 设置为红色(RGB: 1.0, 0.0, 0.0), 这意味着对象将显示为红色// material.diffuse = vec3(1.0, 0.0, 0.0);// 效果二： materialInput.st ，是一个包含纹理坐标的二维向量// material.diffuse = vec3(materialInput.st, 0.0);// 效果三material.diffuse = vec3(materialInput.st+uTime, 0.0);// 效果四：条纹效果// float strength = mod((materialInput.st.s+uTime) * 10.0, 1.0); // 加减的作用：调整方向// float strength = mod((materialInput.st.s-uTime)*10.0, 1.0);// float strength = mod((materialInput.st.t-uTime)*10.0, 1.0);// material.diffuse = vec3(strength, 0.0, 0.0);// 效果五float strength = mod((materialInput.st.x-uTime) * 10.0, 1.0);material.diffuse = vec3(strength, 0.0, 0.0);// ----------- 自定义内容-end -----------return material; // 官方默认}`}
})gsap.to(material_1.uniforms, {uTime: 1,duration: 2,repeat: -1,ease: 'linear'
})// ---------------------------- start 着色器 编写 appearance ----------------------------
``EllipsoidSurfaceAppearance`：设置，几何体都是与地球的椭球体平行，假定，几何体 与 地球的椭球体 平行，就可以，在计算大量顶点属性的时候节省内存。`
let appearance = new Cesium.EllipsoidSurfaceAppearance({// material: material_1,// aboveGround: true, // true：几何体将渲染在地面之上；false：几何体可能部分或全部嵌入地面以下// translucent: truefragmentShaderSource: `varying vec3 v_positionMC; // 模型坐标下的位置varying vec3 v_positionEC; // 眼坐标（或地球中心坐标）下的位置varying vec2 v_st; // 纹理坐标uniform float uTime;void main(){czm_materialInput materialInput;gl_FragColor = vec4(v_st, uTime, 1.0);}`
})appearance.uniforms = {uTime: 0
}gsap.to(appearance.uniforms, {uTime: 1,duration: 2,repeat: -1,yoyo: true,ease: 'linear'
})console.log('appearance=', appearance)
console.log('appearance.vertexShaderSource=', appearance.vertexShaderSource)
console.log('appearance.fragmentShaderSource=', appearance.fragmentShaderSource)// ---------------------------- end 着色器 编写 appearance ----------------------------// 4、创建图元：`Cesium.Primitive`：创建一个图元，它是Cesium中用于渲染的最基本单位 `
let primitive = new Cesium.Primitive({geometryInstances: [instance, instance_1], // 将之前创建的几何体实例赋给图元appearance: appearance, // 将之前创建的外观赋给图元show: true
})nextTick(() => {setView()// 5、添加到Viewerviewer.value.scene.primitives.add(primitive)
})