x-ray给你的模型拍个x光吧！

效果预览

前期准备

教程使用的ccc版本是3.4.2，首先把demo下下来我们可以看到一个可爱的卡通骑士，嗯，卡通并不是我们要教学的材质，因为卡通除了基础渲染，还有一个描边的渲染过程，so！新建一个材质球，effect使用buildin-unlit，你能得到以下的效果：

标准白模！勾选USE TEXTURE 就是上图红框的，再把士兵的贴图放进去。

可爱的卡通骑士就变成了不受光的骑士了，后续我的教程会围绕内建的buildin-unlit材质进行扩展。

如上图点开effects,你会发现builtin-unilit材质就在那里躺着等你，右键打开文件目录就能找到原生的unlit材质了，我们将unlit的代码拷贝出来放到新建的effect里开启我们的x光效果吧。

核心思路

跟卡通材质的描边pass一样，我们除了本体的渲染之外，需要额外增加pass去处理被遮挡部分模型，而在深度测试(depthFunc)时，默认使用的LESS模式，而x光的效果是被遮挡反而渲染，那使用GREATER模式可以让被遮挡的部分反而渲染出来。

对于x光的pass来说，顶点法线越垂直视角方向，那显示部分就越亮，反之越平行就越不显示，这样x光部分就能勾勒出模型大致的轮廓了。

实现过程

我们将原本的frag剔除掉，再新建一个pass，顶点着色器不变，片段着色器改成如下：

其中rayColor表示x光的颜色、rayPower为x光强度

不出意外你能得到这个效果：我就站在那里，没东西挡我你看不到我，有东西挡住我了，你反而能看到我了！

下面我们将法线的计算加进去。

当法线平行于视角方向，显示最弱，当法线垂直视角方向，显示最强。

  out vec3 v_normal;
  out vec3 v_viewDir;
  vec4 vert () {
    StandardVertInput In; //要获取法线信息得改一下 https://docs.cocos.com/creator/3.4/manual/zh/shader/effect-syntax.html?h=ccvertinput
    CCVertInput(In);

    vec4 position = In.position;
    mat4 matWorld, matWorldIT;
    CCGetWorldMatrixFull(matWorld, matWorldIT);

    v_normal = normalize((matWorldIT * vec4(In.normal, 0.0)).xyz); // 获取世界的法线坐标 归一化
    vec3 wPosition = (matWorld * position).xyz; // 获取世界的顶点坐标
    v_viewDir = normalize(cc_cameraPos.xyz - wPosition); // 摄像机减顶点坐标为视角朝向 归一化
  }

输入信息原本只有位置信息，如果需要法线等信息就需要用到StandardVertInput，详情可以查看官方文档，通过接口获取世界矩阵去计算出顶点的世界坐标和世界的法线，最后用相机坐标减去顶点坐标就能得到世界的视角方向。

我们知道向量点乘的方程是：

当a和b都为单位向量，那a和b的点乘结果就是 cos(角度)，而cos函数又是-1到1的回归函数。

我们的目标是：顶点法线越垂直视角方向，那显示部分就越亮，越平行就越不显示。那就有如下公式

    float ndv = max(0.001, dot(v_normal, v_viewDir));
    float rim = 1.0 - ndv;
    o.rgb *= rayPower * rim;

我们能得到如下的效果：

发现没有，绿色框的显示出现了异常，看着像是手臂部分，思考一下为什么会这样？因为身体把手臂挡住了，手臂因为greater的原因被遮挡反而要显示，导致展示出来了，这时候只需要将深度写入关掉就行了。

这时候我们将原本颜色剔除的代码去掉看一下效果吧。

运行效果：

最终代码

完整工程如下： git@gitee.com:onion92/cocos3d-shader-effect.git

小结

x光的算法有点类似边缘光，不过少乘了一个光照方向与视角方向的点乘结果，另外红色的x光有点难看了，个人还是喜欢白色的x光。

感谢各位的观看，希望在渲染的道路上与君共勉，相互成长！