前言 Primitive是cesium核心api之一，与entity方式绘制方式(基于数据)不同，primitive更接近渲染引擎底层。entity适合以数据绘制实体，而primitive更适合图形学对有webgl经验的更亲和。primitive绘制的图形比entity添加的实体性能更好，webgl特性使primitive能绘制更多样式的图形。 Primitive 特性 1 由两部分组成（1）几何形状（Geometry）：定义了Primitive的结构，例如三角形、线条、点等（2）外观（Appearance ）：定义Primitive的着色（Sharding），包括GLSL（OpenGL着色语言，OpenGL ShadingLanguage）顶点着色器和片段着色器（ vertex and fragment shaders），以及渲染状态（render state） 2 使用Geometry和Appearance 具有以下优势：（1）性能：绘制大量Primitive时，可以将其合并为单个Geometry以减轻CPU负担、更好的使用GPU。合并Primitive由web worker线程执行，UI保持响应性（2）灵活性：Geometry与Appearance 解耦，两者可以分别进行修改（3）低级别访问：易于编写GLSL 顶点、片段着色器、使用自定义的渲染状态 3 同时具有以下劣势：（1）需要编写更多地代码（2）需要对图形编程有更多的理解，特别是OpenGL的知识示例数据准备 //雷达的高度 var length = 400000.0; //地面位置(垂直地面) var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.39, 39.9); //中心位置 var centerOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.39, 39.9, length*0.5); // 顶部位置(卫星位置) var topOnEllipsoid = Cesium.Cartesian3.fromDegrees(116.39, 39.9,length); //矩阵计算 var modelMatrix = Cesium.Matrix4.multiplyByTranslation( //转换矩阵 Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid), //矩阵 new Cesium.Cartesian3(0.0, 0.0, length * 0.5), //要转换的笛卡尔坐标 new Cesium.Matrix4() //返回新的矩阵 ); Geometry 创建一个圆锥几何图形 //1. 构造geometry var cylinderGeometry = new Cesium.CylinderGeometry({ length: length, topRadius: 0.0, bottomRadius: length * 0.5, vertexFormat: Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat}); //2. 创建GeometryInstance var redCone = new Cesium.GeometryInstance({ geometry: cylinderGeometry, //geomtry类型 modelMatrix: modelMatrix, //模型矩阵调整矩阵的位置和方向 }); shader着色器定义glsl代码 let source = //传入的动态数值 `uniform vec4 color; uniform float repeat; uniform float offset; uniform float thickness; //设置图形外观材质 czm_material czm_getMaterial(czm_materialInput materialInput){ czm_material material = czm_getDefaultMaterial(materialInput); //获取内置的默认材质 float sp = 1.0/repeat; //重复贴图 vec2 st = materialInput.st; //二维纹理坐标 float dis = distance(st, vec2(0.5)); //计算距离 float m = mod(dis + offset, sp); //间隔 float a = step(sp*(1.0-thickness), m);//线条拼色 //修改材质 material.diffuse = color.rgb; material.alpha = a * color.a; return material; }` appearance 自定义material外观材质，修改着色器 let material = new Cesium.Material({ fabric: { type: 'VtxfShader1', uniforms: { //动态传递参数 color: new Cesium.Color(0.2, 1.0, 0.0, 1.0), repeat: 30.0, offset: 0.0, thickness: 0.3, }, source ：source }, translucent: false }) 定义appearance外观 let appearance = new Cesium.MaterialAppearance({ material：material，//自定义的材质 faceForward : false, // 当绘制的三角面片法向不能朝向视点时，自动翻转法向，从而避免法向计算后发黑等问题 closed: true // 是否为封闭体，实际上执行的是是否进行背面裁剪 }) 创建Primitive 创建自定义primitive图元，实现动态效果 //添加Primitive var radar = viewer.scene.primitives.add( new Cesium.Primitive({ geometryInstances: [redCone], appearance：appearance })); //动态修改雷达材质中的offset变量，从而实现动态效果。 viewer.scene.preUpdate.addEventListener(function() { var offset = radar.appearance.material.uniforms.offset; offset -= 0.001; if (offset > 1.0) { offset = 0.0; } radar.appearance.material.uniforms.offset = offset; }) 效果

cesium Primitive图元自定义着色器

vip168

前言
Primitive是cesium核心api之一，与entity方式绘制方式(基于数据)不同，primitive更接近渲染引擎底层。entity适合以数据绘制实体，而primitive更适合图形学对有webgl经验的更亲和。primitive绘制的图形比entity添加的实体性能更好，webgl特性使primitive能绘制更多样式的图形。

Primitive
特性

1 由两部分组成
（1）几何形状（Geometry）：定义了Primitive的结构，例如三角形、线条、点等
（2）外观（Appearance ）：定义Primitive的着色（Sharding），包括GLSL（OpenGL着色语言，OpenGL ShadingLanguage）顶点着色器和片段着色器（ vertex and fragment shaders），以及渲染状态（render state）

2 使用Geometry和Appearance 具有以下优势：
（1）性能：绘制大量Primitive时，可以将其合并为单个Geometry以减轻CPU负担、更好的使用GPU。合并Primitive由web worker线程执行，UI保持响应性
（2）灵活性：Geometry与Appearance 解耦，两者可以分别进行修改
（3）低级别访问：易于编写GLSL 顶点、片段着色器、使用自定义的渲染状态

3 同时具有以下劣势：
（1）需要编写更多地代码
（2）需要对图形编程有更多的理解，特别是OpenGL的知识