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