Shader 之顶点着色器能做什么？Cocos Creator 实现模拟云海
今天将基于 Cocos Creator 3.3.1，通过一个模拟云海效果的 Demo，一步步编写顶点着色器，实现修改模型的形状，来一起了解一下 Mesh 模型、顶点着色器、片元着色器、噪声之间的作用。
本文着重于分享顶点着色器「能做的事情」，并不是真的想模拟一个真正的云海，毕竟对比 RAYMarching 体积云之类的效果来说还是有一定差距。
选用这个来作为开篇的理由很简单：
图源网络
这里用到的 Mesh 的形状是矩形。显卡只能绘制三角形，那么绘制一个矩形至少要两个三角形拼接起来。如果有非常多的小矩形，组成一个大矩形，其实就相当于有很多的小三角形，组成一个大矩形。
顶点着色器只修改了模型的 Y 轴，没有做过多的改变。顶点着色器的变化只是从噪声贴图中获取该怎么变，没有使用复杂的公式计算，所以也很容易想象。
片元着色器更简单，只是返回了顶点着色器输出的 v_color，顶点着色器输出的值会根据重心坐标进行差值。
噪声是一个只有黑白灰的图片，所以也很容易理解。
效果预览
结合我们已知的知识整理一下思路：
GPU 渲染的是一个一个的三角形。
一个面只要顶点够多，就能生成一个平滑的曲面——因此，在低端机可以让三角形【顶点】少一些。
动态生成一个 Mesh，是一个平面，并且三角形足够的多。
通过一张外部图片【噪声】的信息，来存储云的凹凸信息——可以想到，一张图只有黑白灰，越白的地方，让三角形的高度越高，反之亦然。
让这张贴图运动【滚动】起来，随着时间的变化，修改获取 UV 的位置信息——这样三角形就可以变化了。
通过读取多张噪声，或者读取同一张噪声不同位置的地方，叠加起来，就可以获得翻涌的感觉。
接下来进入正题，上手实操！
限于篇幅，本文仅展示部分核心代码，完整代码及 Demo 工程请移步论坛讨论帖查看、下载：
https://forum.cocos.org/t/topic/128595
1、准备
首先创建默认的场景、材质和 effect 文件。
2、编辑 effect 文件
双击打开 effect，获得默认的 Cocos 的 Shader 文件，可以看到一行：
根据后面的注释可知，这里使用了默认的 builtin 的顶点着色器，可参考 Cocos 官方文档。
Effect Syntax · Cocos Creator
https://docs.cocos.com/creator/3.3/manual/zh/material-system/effect-syntax.html
所以这个文件里面缺少了要编写的顶点着色器，因此需要手动补充一个。
找到自带的 chunks 里面的 general-vs，将内容复制出来。
回到 effect 文件中，补充一个 CCProgram 块 my-vs：
precision highp float;
#include <input-standard>
#include <cc-global>
#include <cc-local-batch>
#include <input-standard>
#include <cc-fog-vs>
#include <cc-shadow-map-vs>
in vec4 a_color;
#if HAS_SECOND_UV
in vec2 a_texCoord1;
#endif
out vec3 v_position;
out vec3 v_normal;
out vec3 v_tangent;
out vec3 v_bitangent;
out vec2 v_uv;
out vec2 v_uv1;
out vec4 v_color;
vec4 vert () {
StandardVertInput In;
CCVertInput(In);
mat4 matWorld, matWorldIT;
CCGetWorldMatrixFull(matWorld, matWorldIT);
vec4 pos = matWorld * In.position;
v_position = pos.xyz;
v_normal = normalize((matWorldIT * vec4(In.normal, 0.0)).xyz);
v_tangent = normalize((matWorld * vec4(In.tangent.xyz, 0.0)).xyz);
v_bitangent = cross(v_normal, v_tangent) * In.tangent.w; // note the cross order
v_uv = a_texCoord;
#if HAS_SECOND_UV
v_uv1 = a_texCoord1;
#endif
v_color = a_color;
CC_TRANSFER_FOG(pos);
CC_TRANSFER_SHADOW(pos);
return cc_matProj * (cc_matView * matWorld) * In.position;
}
}%
并且将最上面的 CCEffect 的 vert 部分定义修改成：my-vs:vert
techniques:
- name: opaque
passes:
- vert: my-vs:vert # builtin header
frag: unlit-fs:frag
properties: &props
mainTexture: { value: white }
mainColor: { value: [1, 1, 1, 1], editor: { type: color } }
- name: transparent
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
blendSrcAlpha: src_alpha
blendDstAlpha: one_minus_src_alpha
properties: *props
}%
3、绑定 effect 到材质上
选中材质，选择 Effect，选中刚刚新建的 effect 文件，最后不要忘记点击右上角的箭头，保存一下。正确的话会预览出一个纯白的方块。
4、创建 Plane 并应用材质
场景中创建 3D 对象，Plane。
选中 Plane 节点，将 material 拖拽覆盖原本的 default-material 材质，最终可以得到一个纯白的 Plane。
5、准备噪声贴图
这里有两张噪声，他们看上去好像并没有区别，但是如果让 UV 偏移0.5的话就会发生奇怪的问题。现在我们来测试一下。
先简单修改下片元着色器，也就是 frag 块：
precision highp float;
#include <output>
#include <cc-fog-fs>
in vec2 v_uv;
uniform sampler2D mainTexture;
uniform Constant {
vec4 mainColor;
};
vec4 frag () {
vec4 col = mainColor * texture(mainTexture, v_uv + 0.5);
CC_APPLY_FOG(col);
return CCFragOutput(col);
}
}%
注意：这里修改了 UV 的取值，将 v_uv 增加了0.5。
回到 Cocos Creator，将两张噪声分别放进材质里，看看会发生什么。
可以很明显地发现噪声在偏移之后，中间并不平滑。所以这里使用的噪声贴图有一个条件：无缝噪声。
测试完记得把 +0.5 删掉！！
6、修改顶点着色器
定义 mainTexture。
定义 p = In.position，并且用 p 代替后续代码中的 In.position。
将噪声图映射在矩形上面，矩形上各个三角形对应的顶点，判断颜色是更黑还是更白，根据颜色值的深浅来决定这个顶点在 y 值上的高低。在着色器中，颜色的取值范围是 0~1，所以现在每个顶点的 y 有了高度信息，即取值范围 0~1。
并且，由于是黑白灰的噪声，所以 r=g=b，直接将 r 的颜色赋值给 p.y。
vec4 vert () {
StandardVertInput In;
CCVertInput(In);
mat4 matWorld, matWorldIT;
CCGetWorldMatrixFull(matWorld, matWorldIT);
vec4 p = In.position;
float y = texture(mainTexture, a_texCoord).x;
p.y = y;
vec4 pos = matWorld * p;
v_position = pos.xyz;
v_normal = normalize((matWorldIT * vec4(In.normal, 0.0)).xyz);
v_tangent = normalize((matWorld * vec4(In.tangent.xyz, 0.0)).xyz);
v_bitangent = cross(v_normal, v_tangent) * In.tangent.w; // note the cross order
v_uv = a_texCoord;
#if HAS_SECOND_UV
v_uv1 = a_texCoord1;
#endif
v_color = a_color;
CC_TRANSFER_FOG(pos);
CC_TRANSFER_SHADOW(pos);
return cc_matProj * (cc_matView * matWorld) * p;
}
回到 Cocos Creator 就可以发现 Plane 变得凹凸不平，并且越黑的地方越低，越白的地方越高。
7、平滑
默认的 Plane 面数比较少，所以会变得比较不平滑。
创建一个脚本，叫 my-mesh，用来替换 plane 的默认 mesh：
import { _decorator, Component, utils, primitives, MeshRenderer } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('MyMesh')
export class MyMesh extends Component {
start () {
const renderer = this.node.getComponent(MeshRenderer);
if(!renderer){
return;
}
const plane: primitives.IGeometry = primitives.plane({
width: 10,
length: 10
widthSegments: 100,
lengthSegments: 100,
});
renderer.mesh = utils.createMesh(plane);
}
}
回到 Cocos Creator，将脚本和 Node 绑定起来，并且运行。可以看到，相对编辑器中的已经平滑了许多，并且很容易的区分出高低的颜色。
8、运动
引入时间戳（单位：s），根据时间的不同，获取不同位置的 UV 信息，就可以让画面滚动起来。
引入 #incloud cc-global。
修改 UV 的获取，a_texCoord 值加上 cc_time.x 并且 *一个速度系数0.1。
#include <cc-global>
vec4 vert () {
StandardVertInput In;
CCVertInput(In);
mat4 matWorld, matWorldIT;
CCGetWorldMatrixFull(matWorld, matWorldIT);
vec4 p = In.position;
float y = texture(mainTexture, a_texCoord + cc_time.x * 0.1).x;
p.y = y;
vec4 pos = matWorld * p;
v_position = pos.xyz;
v_normal = normalize((matWorldIT * vec4(In.normal, 0.0)).xyz);
v_tangent = normalize((matWorld * vec4(In.tangent.xyz, 0.0)).xyz);
v_bitangent = cross(v_normal, v_tangent) * In.tangent.w; // note the cross order
v_uv = a_texCoord;
#if HAS_SECOND_UV
v_uv1 = a_texCoord1;
#endif
v_color = a_color;
CC_TRANSFER_FOG(pos);
CC_TRANSFER_SHADOW(pos);
return cc_matProj * (cc_matView * matWorld) * p;
}
}%
9、颜色
形状改变了，但是颜色好像并没有重新发生变化。
修改顶点着色器，将 texture 函数获取到的颜色直接丢给 v_color。
修改片元着色器，直接将 v_color 颜色返回（记得先声明 in vec4 v_color）。
precision highp float;
#include <input-standard>
#include <cc-global>
#include <cc-local-batch>
#include <input-standard>
#include <cc-fog-vs>
#include <cc-shadow-map-vs>
in vec4 a_color;
#if HAS_SECOND_UV
in vec2 a_texCoord1;
#endif
out vec3 v_position;
out vec3 v_normal;
out vec3 v_tangent;
out vec3 v_bitangent;
out vec2 v_uv;
out vec2 v_uv1;
out vec4 v_color;
uniform sampler2D mainTexture;
#include <cc-global>
vec4 vert () {
StandardVertInput In;
CCVertInput(In);
mat4 matWorld, matWorldIT;
CCGetWorldMatrixFull(matWorld, matWorldIT);
vec4 p = In.position;
vec4 baseColor0 = texture(mainTexture, a_texCoord + cc_time.x * 0.1);
p.y = baseColor0.x;
vec4 pos = matWorld * p;
v_position = pos.xyz;
v_normal = normalize((matWorldIT * vec4(In.normal, 0.0)).xyz);
v_tangent = normalize((matWorld * vec4(In.tangent.xyz, 0.0)).xyz);
v_bitangent = cross(v_normal, v_tangent) * In.tangent.w; // note the cross order
v_uv = a_texCoord;
#if HAS_SECOND_UV
v_uv1 = a_texCoord1;
#endif
v_color = baseColor0;
CC_TRANSFER_FOG(pos);
CC_TRANSFER_SHADOW(pos);
return cc_matProj * (cc_matView * matWorld) * p;
}
}%
CCProgram unlit-fs %{
precision highp float;
#include <output>
#include <cc-fog-fs>
in vec2 v_uv;
in vec4 v_color;
uniform sampler2D mainTexture;
uniform Constant {
vec4 mainColor;
};
vec4 frag () {
return v_color;
}
}%
可以发现没有刚刚的问题了，回到越白的地方越高，越黑的地方越暗了。
10、噪声叠加-翻涌
噪声可以用多张，也可以读取多次，只要读取的位置不一样，并且叠加起来，那么就可以得到翻涌的感觉了。
定义了 tiling0 和 tiling1，其中，xy 用来控制 UV 的倍率，zw 用来控制 UV 移动的方向。
texture 采样两次，分别为 baseColor0 和 baseColor1，并且两个颜色的红色加起来 *0.5，赋值给 p.y。
p.y 最后还 -0.5，是因为 y 的值原本在 0~1 之间，希望最后在 -0.5~0.5 之间分布，所以整体 -0.5。
将 v_color = baseColor0 改成 v_color = (baseColor0 + baseColor1)* 0.5。
StandardVertInput In;
CCVertInput(In);
mat4 matWorld, matWorldIT;
CCGetWorldMatrixFull(matWorld, matWorldIT);
vec4 p = In.position;
vec4 tiling0 = vec4(1.0, 1.0, 0.1, 0.1);
vec4 tiling1 = vec4(1.0, 1.0, 0.07, 0.07);
vec4 baseColor0 = texture(mainTexture, a_texCoord * tiling0.xy + cc_time.x * tiling0.zw);
vec4 baseColor1 = texture(mainTexture, a_texCoord * tiling1.xy + cc_time.x * tiling1.zw);
p.y = (baseColor0.x + baseColor1.x) * 0.5 - 0.5;
vec4 pos = matWorld * p;
v_position = pos.xyz;
v_normal = normalize((matWorldIT * vec4(In.normal, 0.0)).xyz);
v_tangent = normalize((matWorld * vec4(In.tangent.xyz, 0.0)).xyz);
v_bitangent = cross(v_normal, v_tangent) * In.tangent.w; // note the cross order
v_uv = a_texCoord;
#if HAS_SECOND_UV
v_uv1 = a_texCoord1;
#endif
v_color = (baseColor0 + baseColor1)* 0.5;
CC_TRANSFER_FOG(pos);
CC_TRANSFER_SHADOW(pos);
return cc_matProj * (cc_matView * matWorld) * p;
}
可以发现运动不再和上面一样只是单一运动，而是带上了起伏的感觉。
11、颜色过渡
黑白灰毕竟不好看，所以我们自定义两个颜色（c0 和 c1）来重新定义高低。
vec4 c1 = vec4(0.0, 1.0, 0.0, 1.0);
v_color = (p.y + 0.5) * (c0 - c1) + c1;
c0 表示最高处的颜色；
c1 表示最低处的颜色；
c0 - c1 = 两个颜色的差距；
p.y + 0.5 得到一个 0~1 之间的值，用来表示当前 y 的高度；
(p.y + 0.5) * (c0 - c1) 得到一个 y 高度变化中的过渡值；
过渡值 +c1，表示过渡值 + 基础值 = 最终的颜色；
c0 - c1 等于两个颜色分量的差，用差 *（y + 0.5）得到变化值，最后再加上 c1。
这样就得到了一个自定义颜色的 Shader。
12、将定义的数据暴露给材质面板
目前位置，这里定义了两个 tiling，两个颜色 c0 和 c1：
techniques:
- name: opaque
passes:
- vert: my-vs:vert # builtin header
frag: unlit-fs:frag
properties: &props
mainTexture: { value: white }
mainColor: { value: [1, 1, 1, 1], editor: { type: color } }
c0: { value: [1, 0, 0, 1], editor: { type: color } }
c1: { value: [0, 1, 0, 1], editor: { type: color } }
tiling0: { value: [1.0, 1.0, 0.1, 0.1] }
tiling1: { value: [1.0, 1.0, 0.07, 0.07] }
- name: transparent
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
blendSrcAlpha: src_alpha
blendDstAlpha: one_minus_src_alpha
properties: *props
}%
将 c0，c1，tiling0，tiling1 定义到 properties 里面，原来的参数这里先不做任何删改，保留处理。
给顶点着色器和片元着色器都加上 uniform 声明定义块：
vec4 c0;
vec4 c1;
vec4 tiling0;
vec4 tiling1;
};
然后移除原本代码里面定义的 c0，c1，tiling0 和tiling1，用 uniform 来代替。
完成后回到 Cocos Creator 中，查看材质。
13、成品与 Demo
最后调整一下摄像机、材质的参数，即得到成品：
最终完整的 effect 文件内容这里不再赘述，大家可以点击文末【阅读原文】移步论坛专贴查看完整内容、下载 Demo 工程，欢迎一起讨论交流！
Demo 工程&论坛讨论帖：
https://forum.cocos.org/t/topic/128595