首页 / three.js / 使用示例
高程色带查找
色带不再写进顶点,而是压成一张 256 × 1 的一维纹理。 顶点只带一个归一化高程值,片元着色器按这个值采样配色,换配色不需要动几何体。
源码与运行效果
查找表的三个细节
第一,纹理宽 256 高 1,格式为 RGBAFormat,每个像素填一个色带采样点。
第二,过滤方式设为 LinearFilter,相邻像素之间才插值,否则会出现 256 级色阶。
第三,采样坐标要避开 0 和 1 的边界:vT * 0.996 + 0.002,
这样不会因为纹理边缘的钳制行为取到错色。
切配色时只重写 Uint8Array 并置 needsUpdate = true,
一帧之内新颜色就生效。同一套查找表还能复用到别的图层,例如降雨量、温度、人口密度。
| 项 | 设置 | 原因 |
|---|---|---|
| 尺寸 | 256 × 1 | 一维色带,高度方向只有一个像素 |
| 色彩空间 | sRGB | 颜色按显示空间解释,接近设计值 |
| 包裹 | 默认钳制 | 越界值取两端颜色 |
| 光照 | 半兰伯特 | 背光面保留底色,不出现纯黑 |
与逐顶点颜色的取舍
顶点着色方案把数据写死在几何体里,同一份地形要出两套配色就得准备两份几何体。
查找表把颜色与形状解耦,几何体只保留一个 aT 属性,
多个主题图层可以共享同一份网格数据。代价是要自己写着色器,
并且失去 MeshStandardMaterial 自带的完整 PBR 光照。
查找表也能存离散分级。把色带换成分级色块、纹理过滤设为
NearestFilter,一次采样就得到分层设色,不需要在着色器里做量化运算。