ThreeJS 实现等值线效果

THREE中实现等值线效果

等值线

如果geometry中的每个顶点有额外的数值用来着色，比如地形模型，每个几何顶点有高程值，可以通过材质实现等高线效果。

等值线材质

THREE中使用ShaderMaterial来作为等值线的基础材质。这里先预定义一个概念：

• 着色值：顶点附属的观测值，如地形中的高程值。

核心思想是通过片元着色器中，对GPU光栅化自动插值后的着色值进行取模，来实现固定间隔的绘制颜色。等值线的线宽暂取固定值，按像素指定。

归一化

为了计算方便，将着色值归一化到0-1之间，等值线的间隔也计算到0-1范围内，代码中contourmax,contourmin为着色值的最大最小范围，vcontour为当前像元的着色值。通过mod方法实现对着色值的间隔采样，最后在通过step函数将取模后的结果约束到一定范围内。代码中的stepresolution，我计算中取5个像素和整个绘制屏幕的比5/width，其实这里绘制出来的线宽并不是5个像素，因为step中使用的着色值并没有和屏幕像素挂钩，这里可以随意传值。

    float range=1.0/(contourmax-contourmin);
    // 当前值所在范围的百分比
    float m=(vcontour-contourmin)*range;
    float lxs=m;
    // 数值区间计算到范围百分比
    float stepm=cstep*range;
    // 归一后的数值取模，计算到0-stemp区间内
    m=mod(m,stepm);
    // 在stepm线宽内的指定为1，超过范围的指定为0
    m=step(stepm-stepresolution,m);

最后step后得到的m值即为需要绘制等值线的像元，可以通过mix其他颜色来在基础颜色上绘制等值线，或者m值为0是直接丢弃片元，只绘制等值线，或者提前计算好着色值对应的颜色，可以按值来绘制每条线。

截图

锯齿还是很严重的，太懒了，再说吧。。。。