零基础也能懂！Cocos Shader 入门：平面、双面材质与自定义裁剪面-技术圈

麒麟子今天要用空间几何的方式，将难以理解的代数推导过程直观的解释清楚。目标是：零基础也能懂！！！！

你是否也曾好奇？

如果要渲染一片树叶，但树叶的两个面的外观通常是不同的，如何做到正反面效果不一样呢？

如果要渲染像下图中某个对象的一部分，又当如何做呢？

细节指引： 图中，处于虚空连接口背后的龙是看得见的，从虚空连接口钻出来的龙只能看到一部分身体。

3D 图形管线在进行背面裁剪的时候，是如何判断一个三角形是正对摄像机还是背对摄像机的呢？如下图所示：

麒麟小贴士： 背面裁剪是图形管线在 vs 之后和 fs 之前做的一次预剔除处理。
通过背面裁剪，图形管线可以在渲染模型的时候，剔除背对着我们的面，（比如一个正对着我们的人物模型，他的背面），以提升渲染性能。

看完本文后，你将掌握以下知识点：

点法式平面表示法
正背面判定
双面材质
自定义裁剪面

三维空间平面表示法

在 3D 游戏编程相关的数学书里，我们可以很容易找到上图中的内容。

它用代数的方式解释了为什么可以用 Ax + By + Cz + D = 0 来表示平面。

A,B,C 是平面的单位化法向量的 XYZ 值，它决定了平面的正方向，D 为坐标原点到平面的距离的相反数。

将一个点从原点朝向量（A,B,C）正方向移动 -D 的距离，可以得到平面上的一个点，因此这个表示法被称为：点法式。

麒麟小贴士： 许多教材中，对矩阵运算和相关公式都是做的代数推导，晦涩难懂。但数学是对事物规律的体现，代数推导不是唯一解。
对于 3D 图形学中的诸多运算，可以使用空间几何来推导。空间几何可以使我们理解起来更加简单直观。
像反射公式、镜像矩阵、坐标系转换、投影矩阵等与平面相关的原理，大家不妨试试用几何原理理解一次。

接下来，我们尝试着用空间几何的方式理解一次平面公式（可能需要一些空间想象力）：

1、在原点处，向任意方向（A,B,C）发射出一条射线，则这条射线的起点为记P0(0,0,0)，方向记为 Direction(A,B,C)。

2、我们发现，这条射线可以确定一个唯一的面：经过原点且垂直于条射线方向。那么 Direction(A,B,C) 恰好就是这个面的法向量。

3、将这个射线的起点沿 Direction(A,B,C) 正向或者负向移动，可以调节它在空间中的位置。假设我们移动到了点 P0(x0,y0,z0)，由投影原理可知，此时射线起点到原点的距离 d 的计算方式为：

d = dot(Direction,P0)
=> d = A * x0 + B * y0 + C * z0

此种情况下，我们依然可以得到一个经过点 P0 且与 Direction 垂直的唯一面。

4、由于Direction是空间中任意方向，P0 是射线上的任意点，我们可以得到一个结论： 一个向量和一个距离坐标系原点的值可以用来表示三维空间中的任意平面。

5、如果一个点 P(x,y,z) 在平面上，可知：

Ax + By + Cz = d
=> Ax + By + Cz - d = 0

6、不难看出 Ax + By + Cz 刚好是 Direction 与 P 的点乘，而在 3D 空间运算中，在参与矩阵运算时，点的表示法为 P(x,y,z,1)。因此，若将平面记作四维向量 Plane(A,B,C,D) 其中 (D = -d)，则恰好满足点乘运算规则，也完全符合代数推导结果：Ax + By + Cz + D = 0。

7、每个平面，都会将空间一分为二，我们将法线方向的空间视为平面的正面，法线反方向的空间视为平面的背面。