经纬志
首页 / three.js / 使用示例

高程色带查找

色带不再写进顶点,而是压成一张 256 × 1 的一维纹理。 顶点只带一个归一化高程值,片元着色器按这个值采样配色,换配色不需要动几何体。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

查找表的三个细节

第一,纹理宽 256 高 1,格式为 RGBAFormat,每个像素填一个色带采样点。 第二,过滤方式设为 LinearFilter,相邻像素之间才插值,否则会出现 256 级色阶。 第三,采样坐标要避开 0 和 1 的边界:vT * 0.996 + 0.002, 这样不会因为纹理边缘的钳制行为取到错色。

切配色时只重写 Uint8Array 并置 needsUpdate = true, 一帧之内新颜色就生效。同一套查找表还能复用到别的图层,例如降雨量、温度、人口密度。

项设置原因
尺寸256 × 1一维色带,高度方向只有一个像素
色彩空间sRGB颜色按显示空间解释,接近设计值
包裹默认钳制越界值取两端颜色
光照半兰伯特背光面保留底色,不出现纯黑

与逐顶点颜色的取舍

顶点着色方案把数据写死在几何体里,同一份地形要出两套配色就得准备两份几何体。 查找表把颜色与形状解耦,几何体只保留一个 aT 属性, 多个主题图层可以共享同一份网格数据。代价是要自己写着色器, 并且失去 MeshStandardMaterial 自带的完整 PBR 光照。

查找表也能存离散分级。把色带换成分级色块、纹理过滤设为 NearestFilter,一次采样就得到分层设色,不需要在着色器里做量化运算。