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 文件，可以看到一行：

- vert: general-vs:vert # builtin header

根据后面的注释可知，这里使用了默认的 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：

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

CCEffect %{

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 块：

CCProgram unlit-fs %{

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。

uniform sampler2D mainTexture;

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。

uniform sampler2D mainTexture;

#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）。

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;

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。

vec4 vert () {

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 c0 = vec4(1.0, 0.0, 0.0, 1.0);

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：

CCEffect %{

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 声明定义块：

uniform MyVec4 {

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

文/安康
来源：COCOS
原文：https://mp.weixin.qq.com/s/bzfFXRzoT5_LmuhDxofGMQ