Shader 之顶点着色器能做什么?Cocos Creator 实现模拟云海

2022-2-3 20:34cgsd 74 0

今天将基于 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

鲜花

握手

雷人

路过

鸡蛋

最新评论

QQ|手机版|小黑屋|九艺游戏动画论坛 ( 津ICP备2022000452号-1 )

GMT+8, 2024-7-13 04:43 , Processed in 0.054909 second(s), 18 queries .

Powered by Discuz! X3.4  © 2001-2017 Discuz Team.