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.5
		color: 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: true
	
	fragmentShaderSource: `
		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、添加到Viewer
	viewer.value.scene.primitives.add(primitive)
})