cesium纹理采样设置酷炫轨迹飞线

上一节我们学习了:cesium着色器实现实现上升流光飞线效果今天我们要学习的是cesium纹理采样设置酷炫轨迹飞线。

动态效果

上一节中cesium着色器实现实现上升流光飞线效果,我们学习了着色器的方法来绘制飞线，这一节课我们在上一节的基础上使用纹理采样的方式实现飞线。

我们通过调整纹理图片的位置来实现流光的效果。实现原理和threejs 实现流光线路图效果类似。

使用texture2D来设置图片的位置，达到流光的效果

Cesium.Material._materialCache.addMaterial("SpritelineMaterial", {
  fabric: {
    type: "SpritelineMaterial",
    uniforms: {
      uTime: 0,
      image: spriteline1,
    },
    source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
        // 生成默认的基础材质
        czm_material material = czm_getDefaultMaterial(materialInput);
        // 获取st
        vec2 st = materialInput.st;
        // 根据uv采样颜色,fract(x)返回x的小数部分
        vec4 color = texture2D(image, vec2(fract(st.s-uTime) , st.t));
        // 设置材质的透明度
        material.alpha = color.a;
        material.diffuse = color.rgb;
        
        return material;
      }

      `,
  },
});

texture2D介绍

texture2D 是 GLSL（OpenGL Shading Language）中用于从2D纹理中进行采样（即读取纹理像素颜色）的一个内建函数。这个函数在渲染管线中的片元着色器（Fragment Shader）中常被使用。

参数：

第一个参数：纹理采样器（sampler2D）。这是一个引用到2D纹理的变量。
第二个参数：纹理坐标（vec2 类型）。这是一个二维向量，用于指定从哪个位置进行纹理采样。

返回值：

texture2D 函数返回一个 vec4 类型的值，表示采样点的颜色，其中包括红、绿、蓝和 alpha（透明度）四个通道。

示例：

uniform sampler2D myTexture; // 2D纹理采样器
...
vec2 texCoord = vec2(0.5, 0.5); // 采样纹理的中心点
vec4 color = texture2D(myTexture, texCoord); // 采样颜色

这个例子中，myTexture 是一个 sampler2D 类型的纹理采样器，texCoord 是我们想从中进行采样的纹理坐标。最后，color 会存储这个坐标点的颜色信息。

注意：GLSL版本不同，这个函数的名称和用法可能略有不同。在较新的GLSL版本中，texture2D 被简化为 texture。

实例演示地址

cesium纹理采样设置酷炫轨迹飞线

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-cesium纹理采样设置酷炫轨迹飞线-实践的学习笔记

当前学习笔记实例代码下载

代码运行环境：vue3 + vite + js nodejs 14