ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 自定义动态墙体 垂直扫描效果

ArcGIS JSAPI 高级教程 – ArcGIS Maps SDK for JavaScript – 自定义动态墙体 垂直扫描效果

• • 一、功能介绍
  • 二、功能实现
  • 三、功能应用
  • 四、核心代码
  • • 4.1 墙体几何构建（多段线 → 网格）
    • 4.2 坐标转换（地理坐标 → 渲染坐标）
    • 4.3 片元着色器核心算法（垂直扫描）
    • 4.4 渲染主循环（上传矩阵 + 绘制）
  • 五、完整代码
  • 六、在线示例
  • 七、关键API说明
  • • 构造与属性
    • 着色器 uniform 映射
    • 关键 API 对照

一、功能介绍

自定义动态墙体（垂直扫描） 是一种基于 RenderNode 的自定义几何后处理特效：它把一条三维多段线「拉伸」成有高度的墙体网格，并用一张竖向条纹贴图沿墙体垂直方向（纵向，即沿墙高）循环滚动，形成类似「光柱从底向上流动 / 能量向上输送」的动态效果，常用于数据流向、竖向光幕、上升动画等可视化。

本示例基于 RenderNode 自定义渲染节点，直接把墙体网格画进 transparent-color 透明通道：

• 用多段线 + 高度生成墙体几何（buildWallSimple，内联，不再依赖 ./wall_util.js）
• 用 Texture 加载条纹贴图，在片元着色器里沿 st.t（纵向）用 fract(u_count*st.t – time) 滚动采样，得到向上/向下移动的光带
• 通过 u_count（扫描次数）、u_color（颜色）、_wall_opacity（透明度）实时调参
• 支持用 SketchViewM