03-Cesium自定义着色器完整代码以及注释

最新推荐文章于 2026-04-28 17:09:13 发布
原创 最新推荐文章于 2026-04-28 17:09:13 发布 · 2.8k 阅读 · 11 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#着色器 #javascript
文章展示了如何使用CesiumJavaScript库创建一个自定义着色器，包括顶点着色器和片段着色器的代码，以实现3D平面上动态颜色变化的效果。通过设置顶点数据、纹理坐标和统一变量，实现了对3D图形的渲染控制。

1. 效果展示

2. 完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义着色器完整代码</title>
    <!-- 线上 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.107.1/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.107.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />

    <style>
      #map {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZjZkZDAwZC1mNTFhLTRhOTEtOGExNi00MzRhNGIzMDdlNDQiLCJpZCI6MTA1MTUzLCJpYXQiOjE2NjA4MDg0Njd9.qajeJtc4-kppqfR1--Y2FqCu5r3TE1xYYGnEQhy-JF0'
      const viewer = new Cesium.Viewer('map', {
        infoBox: false,
        shadows: true,
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,
        terrain: Cesium.Terrain.fromWorldTerrain(),
      })

      //平面的顶点数据
      let points = [110.2, 20.0, 112.2, 20.0, 110.2, 22.0, 112.2, 22.0]
      let positions = Cesium.Cartesian3.fromDegreesArray(points)
      //顶点对应的纹理坐标数据
      let sts = [0, 0, 0, 1, 1, 0, 1, 1]

      //顶点卷绕的方式
      let positionIndex = [0, 1, 2, 1, 2, 3]

      function primitivePlaneShader(options) {
        console.log(options, 'options')
        let viewer = options.viewer
        let vertexShader = v_shader()
        let fragShader = f_shader()
        let sts = new Uint8Array(options.sts) //纹理数据
        let positionIndex = new Uint16Array(options.positionIndex) //顶点索引数据
        let tempPosition = []
        for (var i = 0; i < options.positions.length; i++) {
          tempPosition.push(options.positions[i].x)
          tempPosition.push(options.positions[i].y)
          tempPosition.push(options.positions[i].z)
        }
        positions = new Float64Array(tempPosition) //顶点数据
        let geometry = createGeometry(positions, sts, positionIndex) //几何体
        let appearance = createAppearance(vertexShader, fragShader) //外观
        //primitive方式加载
        viewer.scene.primitives.add(
          new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
              //渲染的几何体
              geometry: geometry,
            }),
            appearance: appearance, //外观
            asynchronous: false,
          })
        )
      }
      function createAppearance(vertexShader, fragShader) {
        return new Cesium.Appearance({
          material: new Cesium.Material({
            /* 在Cesium中，fabric 是用于创建着色器材质（Shader Material）的对象。
            它允许您定义一种着色器材质类型，并通过uniforms（统一变量）传递外部数据给着色器。 */
            fabric: {
              /* 
              uniforms是一个包含统一变量（Uniform）的对象。
              统一变量是一种在着色器程序中定义的全局变量，
              它们的值可以在渲染过程中从CPU（JavaScript代码）传递给GPU（着色器代码）。 */
              uniforms: {
                speed: 0.1,
              },
              source: getMS(),
            },
          }),
          translucent: false, //显示不为半透明
          renderState: {
            blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND, //使用Alpha混合功能启用混合
            depthTest: { enabled: true }, //深度检测
            depthMask: true, //将深度值写入深度缓冲区
          },
          fragmentShaderSource: fragShader, //片段着色器
          vertexShaderSource: vertexShader, //顶点着色器
        })
      }
      //构建几何体
      function createGeometry(positions, sts, positionIndex) {
        return new Cesium.Geometry({
          attributes: {
            //几何顶点属性
            position: new Cesium.GeometryAttribute({
              componentDatatype: Cesium.ComponentDatatype.DOUBLE, //数据类型
              componentsPerAttribute: 3, //定义几个为一组
              values: positions, //坐标值
            }),
            st: new Cesium.GeometryAttribute({
              componentDatatype: Cesium.ComponentDatatype.FLOAT, //数据类型
              componentsPerAttribute: 2, //定义几个为一组
              values: sts, //坐标值
            }),
          },
          indices: positionIndex, //顶点索引
          primitiveType: Cesium.PrimitiveType.TRIANGLES, //图元类型
          boundingSphere: Cesium.BoundingSphere.fromVertices(positions), //包围球
        })
      }
      function v_shader() {
        // 这段着色器代码的作用是将顶点变换到裁剪空间，并传递纹理坐标给片段着色器，为后续的光栅化和渲染阶段做准备。
        return `
                in vec3 position3DHigh;//这是一个输入变量，表示高精度的3D位置。通常情况下，这个变量的值是由CesiumJS引擎在渲染过程中提供的，它表示当前处理的顶点或片段的高精度3D位置。
            		in vec3 position3DLow;//这也是一个输入变量，表示低精度的3D位置。在CesiumJS中，当高精度3D位置无法完全表示时，这个变量提供额外的信息，以便更准确地确定位置。
            		in float batchId;//这是一个输入变量，表示批次ID。在CesiumJS中，通常用于将相同类型的几何体分组在一起，以优化渲染性能。
            		in vec2 st;//这是一个输入变量，表示纹理坐标。
            		out vec2 v_st; //这是一个输出变量，表示处理后的纹理坐标。
            		void main() {
                  // czm_computePosition() //计算模型视图相对眼睛坐标空间中的顶点位置。
                  //czm_modelViewProjectionRelativeToEye//变换顶点位置到裁剪空间，并将结果保存在position中。
            		  vec4 position = czm_modelViewProjectionRelativeToEye *czm_computePosition();
                  //将输入变量st赋值给输出变量v_st，这样纹理坐标将在顶点着色器中传递给片段着色器。
            		   v_st = st;
                   //将经过变换后的顶点位置position赋值给内置变量gl_Position，这样OpenGL将使用这个值来确定顶点在屏幕上的位置。
            		   gl_Position = position;
            		}
              `
      }

      function f_shader() {
        return `
              in vec2 v_st;//这是一个输入变量，表示纹理坐标。在片段着色器中，v_st变量将包含插值后的纹理坐标值，这些值在顶点着色器中计算并传递给片段着色器。
              //uniform float speed;
              void main() {
                //这一行将纹理坐标(v_st)转换为范围在[-1, 1]的坐标(position)。在OpenGL中，纹理坐标的范围通常是[0, 1]，而转换后的坐标在顶点着色器的插值过程中进行了变换，使其范围变为[-1, 1]。
            		   vec2 position = -1.0 + 2.0 *v_st;
                   //这行代码调用一个函数getSpeed()，该函数返回一个浮点数，表示速度。
            		   float speed = getSpeed();
                   //这一行根据帧号(czm_frameNumber)和速度(speed)计算时间(time)。czm_frameNumber是CesiumJS引擎提供的一个内置变量，表示当前渲染帧的序号。
            		   float time= czm_frameNumber *speed;
                   //计算颜色
            		   float r = abs( cos( position.x * position.y + time / 5.0 ));
            		   float g = abs( sin( position.x * position.y + time / 4.0 ) );
            		   float b = abs( cos( position.x * position.y + time / 3.0 ) );
                   //并将其赋值给特殊的输出变量out_FragColor，这个变量是CesiumJS中用于存储片段着色器输出颜色的内置变量。
            		   out_FragColor = vec4( r, g, b, 1.0 );
            		}

              `
      }

      function getMS() {
        return `#version 300 es
              uniform float speed;
              float getSpeed(){
            		  return speed;
            		}
              `
      }

      var plane = new primitivePlaneShader({
        viewer: viewer,
        positions: positions,
        sts: sts,
        positionIndex: positionIndex,
      })
      viewer.scene.camera.setView({
        destination: new Cesium.Cartesian3.fromDegrees(110.2, 20.0, 500000),
      })
    </script>
  </body>
</html>

 

fxshy
关注
54.（cesium篇）cesium叠加动态流线(着色器).zip
06-13
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“54.（cesium篇）cesium叠加动态流线(着色器)”。如下载有问题，可联系博主。 解压密码：cesium
56.（cesium篇）cesium叠加动态扩散圈(着色器).zip
06-13
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“56.（cesium篇）cesium叠加动态扩散圈(着色器)”。如下载有问题，可联系博主。 解压密码：cesium
Cesium 颜色过渡渲染 - Shader
TqbcAbap的博客
09-23 1292
在Cesium中，我们可以使用着色器（Shader）来实现颜色的渐变效果。着色器是一种在图形渲染过程中控制颜色、纹理和光照等方面的工具。通过编写自定义的着色器代码，我们可以实现各种独特的视觉效果。为了实现颜色的渐变效果，我们需要编写一个简单的片段着色器（Fragment Shader）。通过使用该插值因子，我们可以根据垂直位置来计算颜色的过渡效果。在使用这段着色器代码之前，我们需要将其与Cesium的渲染管道进行关联。是传入的Uniform变量，用来指定起始颜色和结束颜色。函数来插值计算当前片段的颜色。
Cesium进阶学习四、shadertoy（着色器）
程迷学习的博客
10-08 4241
Cesium进阶学习着色器
Cesium 自定义纹理 着色器GLSL
最新发布
a378113472的博客
04-28 228
Fabric 是 Cesium 的材质定义语言，支持 GLSL 片段着色器。// 创建自定义几何体时指定纹理坐标),stRotation: Cesium.Math.toRadians(45), // 旋转纹理});// 手动指定每个顶点的 UV// 顶点坐标// 对应的 UV 坐标 [u1, v1, u2, v2, ...]}),st: new Cesium.GeometryAttribute({ // 纹理坐标属性})},// ... 其他几何信息});自定义纹理的核心要点。
Cesium 实战 13 - 模型亮度调整，自定义着色器（CustomShader）完美解决模型太暗的问题
非科班Java出身GISer的博客
01-08 4493
Cesium 实战 - 模型亮度调整，自定义着色器（CustomShader）完美解决模型太暗的问题。
cesium1.105.1以此版本的自定义着色器CustomShader中文文档
u012425087的博客
06-07 7907
用户想要添加到着色器的任何自定义uniform。
【Cesium学习】着色器详解【待进一步总结】
警警的博客
08-20 2252
在Cesium中，和是与渲染管线和自定义渲染效果相关的两个重要概念，但它们各自有不同的作用和应用场景。下面我将分别详解这两个概念。
基于Cesium使用自定义着色器的资源总结
wwx199126的博客
09-24 2628
基于Cesium使用自定义着色器的资源总结
Cesium 中的Shader解析1
苹果园dog
05-04 7900
Cesium中在创建点、线、面、球等Geometry的时候，可以动态指定材质。材质用于设置物体的外观。通常修改材质的片元着色器来改变外观。
Cesium 三维场景中通过自定义着色器实现多种特效（纹理、光带、点光源、反射）
GIS开发
04-27 2842
模型坐标。
CesiumJS PrimitiveAPI 高级着色入门 - 从参数化几何与 Fabric 材质到着色器 - 上篇
梅花寺
03-13 1860
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Cesium.js着色器的简单实现
热门推荐
weixin_42443851的博客
01-07 1万+
cesium.js着色器的简单实现 最近在研究cesium.js，第一次接触这个引擎，以前用Babylon.js和Three.js比 较多，对于这个新的引擎感觉还是比较新鲜，也扩充一下自己的知识面。学习了一段时间 感觉还是挺有意思的。于是乎就想实现一个简单的自定义shader，看一下cesium.js是 如何 ...
cesium中如何修改图层的着色器，使其达到我们想要的图层风格
webMinStudent的博客
05-20 1370
这里面的字符串是glsl代码，我们使用字符串的replace函数来替换掉我们想替换的代码。在cesium中我们可以，通过修改图层的着色器源代码使其达到一些酷炫的效果，现在我们。好现在 baseFragmentShader里面就是图层的着色器代码。这样就做到了，修改glsl代码的效果。这样就可以达到一些自定义的图层效果。获取图层对应的片源着色器源代码。来说说如何做到这一切。
Cesium 3D可视化中的自定义着色器开发指南
gitblog_00099的博客
06-03 863
Cesium 3D可视化中的自定义着色器开发指南 【免费下载链接】cesium 项目地址: https://gitcode.com/gh_mirrors/ces/cesium ...
Cesium glsl 学习
u010133378的专栏
11-07 2911
Cesium关于材质glsl的一些学习记录
VUE3-Cesium（着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现）
damadashen的博客
06-16 4159
cesium中着色器的使用-编写图案、动画绘图、圆环扩散效果、雷达效果实现
Cesium 使用着色器实现点光源
kuyewb的专栏
09-22 3124
可设置点光源位置，颜色，使用自定义着色器，混合3DTileset，实现点光源效果。
Cesium 顶点着色器修改
一路走一路学，总会不落后
02-16 984
通过上一篇文章的学习，我们只是实现了，对的修改,当我们想要实现一个三维的热力图的时候，就需要涉及到对顶点着色器的修改，因为cesium体系里面有着一套属于自己的构建glsl的方式，所有当我们要想修改顶点着色器，就不会像在threejs里面用起来那么顺手，这篇文章主要是讲解一下怎么去修改顶点着色器，简单实现。
Cesium进阶教程——自定义图形、外观、绘图基础、现有着色器移植至Cesium、ShadowMapping、视频GIS、模型压平、卷帘
警警的博客
12-12 3756
Cesium进阶教程——自定义图形、外观、绘图基础、现有着色器移植至Cesium、ShadowMapping、视频GIS、模型压平、卷帘
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值