对 three.js webgl_clipping_stencil 例子的理解

three.js 中的官方例子 webgl_clipping_stencil 着实费解，我在不同的时间 看了有三次以上， 才逐渐理解。

概括的讲：这个例子是在说 如何使用webgl stencil 模板缓存来对 几何网格进行裁切。对几何网格进行裁切有三种方式了：

1. 自己开发切割工具，对网格进行切割，对网格的顶点进行分割，在切割边缘处新增顶点 和三角面
2. shader 中的片元着色器绘制几何体，在片元着色器中进行裁切，csg技术（Constructive Solid Geometry）
3. 使用模板缓存，就是例子中的方法
   第三种是最取巧的一种办法，没有像第一种 实实在在的修改了几何网格，也没有像第二种 涉及到 片元着色器的编写。

这个例子中，有意思的一点是，隐藏网格还可以这样做：

baseMat.colorWrite = false;

就是修改材质，不让材质写入颜色缓存。

模板缓存位于屏幕空间，createPlaneStencilGroup 方法 使用纽结几何网格对模板缓存进行写入，朝向相机的像素 减去1， 被向相机的像素 加上1；

createPlaneStencilGroup 中的代码

mat0.clippingPlanes = [ plane ];

用平面切割 纽结几何网格 后，会有这样的像素，只背向当前相机，没有朝向相机，这时该像素对应的模板缓存的值为 1；另外，还有很多这样的像素，既朝向相机，又背对着相机，这时该像素对应的模板缓存是0；
想象一下，有很多光线，从相机位置发出，射向屏幕的各个像素，对于这些射线，有点穿过 纽结几何网格 两次，有的没有穿过 纽结几何网格 零次，有点正好只穿过 纽结几何网格 一次，只穿过一次这种，对应的屏幕像素 的模板值就是 1 或者 -1

init方法中调用了