如何快速升级 Cocos Shader 版本,以简易水shader为例

白玉无冰

共 4694字,需浏览 10分钟

 · 2023-01-16

背景

讲述如何 将一份 3.0.0 版本的水shader 升级至 Cocos Creator 3.6 。希望对大家有所帮助。

dc3b2594fbc03670a65293d530fdde01.webp

环境

Cocos Creator 3.6.2

效果

9908e5e3ef0a674f76dff85b92f819f5.webp

此处是鱼🐟,介绍如何使用

在资源管理器中新建着色器(Effect)

b21a229fb82b7334e9e11f23ee84073f.webp

复制 文末的 mywater.effect 代码至当前文件

a08fb9596e07be39fdef6d708ee9c4a8.webp

在资源管理器中新建材质

25ab85a2092bcb8fe9d36d3acb40930c.webp

选择材质的着色器

e5ead85ac1ef00bf3dceb8a9c1ad6a36.webp

在场景中创建平面

f8303dbd8176de2335eb22126fba88a3.webp

让平面使用水的材质

63c7f3d2b04129839952681044b8a508.webp

为材质上贴图

7d45d5f04a996b563c8b8893030db010.webp

调整材质参数

可以根据预览效果调整参数
df9d29ff6f76d8b802d3936fbb200657.webp

此处是渔,介绍如何快速升级

https://www.bilibili.com/video/BV1WY4y1f7mS

前置准备

参考前面的步骤准备以下几个点:

1. 新建着色器(Effect), mywater.effect

2. 新建材质 mywater.mtl ,并使用 mywater.effect 材质

e5ead85ac1ef00bf3dceb8a9c1ad6a36.webp

3. 在场景中创建平面,并使用mywater.mtl材质

b86842f49ad41a9c10e8ce6a9047a7dd.webp

4.将参考的水放在工程中

5e36d7e89ba0629372f112ffdfa68faf.webp

确定入口

打开两份着色器代码,片元着色器的入口在 frag 变量下

e209184a6dced70bea5e7e1cb6fbc253.webp

入口在 water-fs:frag

efb331b5633224a704542c689d1ece1d.webp

从后往前抄

返回颜色

9eb828a03934558a942c186462d265fb.webp

将每个变量都移植过来
fd8e5c49a6d8a008031b224cf07b1f47.webp

全局变量

拷贝 属性检查器 面板参数 properties

a2380d0ba25c9a86ef8fd81aa8f4b797.webp

拷贝UBO。引擎不支持离散声明的 uniform 变量,必须使用 UBO 并保持内存对齐,以避免 implicit padding。

b41eb680f69e263dd0125369aa424c6c.webp

拷贝引用UBO

38c1a5a0a7c2db572d933f02038413bb.webp

函数

拷贝颜色计算的部分

9dbdae5821bfb09ba86ff721ca64de74.webp

拷贝相关的全局变量

1a290c7d8d27462c24ffe8bfc82d56cf.webp

拷贝UBO

cf72b1ed11e16017582ac2684d07b0f3.webp

拷贝纹理声明 causticTexture

79a5e64df97c59ebbda88c79f279e5db.webp

拷贝函数

6bbceedebad36ef7341d7ab589e3b1cb.webp

材质参数

在参考材质中搜索对应的纹理,找到使用的纹理文件

bdea08129cb4a4944918358ca280fd55.webp

拖入贴图

050c95c689464a055bc5e23c1c114b05.webp

为材质上贴图

7d45d5f04a996b563c8b8893030db010.webp

其他参数的拷贝

cc7d6ce97c9be3f5637ca9b705749ab1.webp

效果

9908e5e3ef0a674f76dff85b92f819f5.webp

此处是相关资源资料

贴图 Caustics

6a93f9a49683fd87e97d419e64b738d1.webp

mywater.effect

    // Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html

CCEffect %{
techniques:
- name: opaque
passes:
- vert: legacy/main-functions/general-vs:vert # builtin header
frag: unlit-fs:frag
properties: &props
shallowColor: { value: [0.07843, 0.6667, 1, 1], editor: { type: color } }
causticStrength: { value: 0.2, target: causticParams1.x, editor: { parent: USE_CAUSTIC } }
causticScale: { value: 2.33, target: causticParams1.y, editor: { parent: USE_CAUSTIC } }
causticSpeed: { value: 0.1, target: causticParams1.z, editor: { parent: USE_CAUSTIC } }
causticRGBSplit: { value: 0.35, target: causticParams1.w, editor: { parent: USE_CAUSTIC } }
causticDepth: { value: 1, target: causticParams2.x, editor: { parent: USE_CAUSTIC } }
causticColor: { value: [0.01176, 0.4, 0.47451], target: causticParams2.yzw, editor: { parent: USE_CAUSTIC, type: color } }
causticTexture: { value: white, editor: { parent: USE_CAUSTIC } }
- 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
}%

CCProgram shared-ubos %{
#define pi 3.14

uniform Water {
vec4 shallowColor;
vec4 causticParams1;
vec4 causticParams2;
};
}%

CCProgram unlit-fs %{
precision highp float;
#include <shared-ubos>
#include <legacy/output>
#include <legacy/fog-fs>

#if USE_CAUSTIC
uniform sampler2D causticTexture;
#endif

in vec2 v_uv;
in vec3 v_position;

#if USE_CAUSTIC
vec2 panner(vec2 uv, float direction, float speed, vec2 offset, float tiling)
{
direction = direction * 2. - 1.;
vec2 dir = normalize(vec2(cos(pi * direction), sin(pi * direction)));
return (dir * cc_time.x * speed) + offset + (uv * tiling);
}

vec3 rgbSplit(float split, sampler2D tex, vec2 uv)
{
vec2 UVR = uv + vec2(split, split);
vec2 UVG = uv + vec2(split, -split);
vec2 UVB = uv + vec2(-split, -split);

float r = texture(tex, UVR).r;
float g = texture(tex, UVG).g;
float b = texture(tex, UVB).b;

return vec3(r,g,b);
}

vec3 caustic()
{
vec2 uv = v_position.xz;

float strength = causticParams1.x;
float split = causticParams1.w * 0.01;
float speed = causticParams1.z;
float scale = causticParams1.y;

vec3 texture1 = rgbSplit(split, causticTexture, panner(uv, 1., speed, vec2(0., 0.), 1./scale));
vec3 texture2 = rgbSplit(split, causticTexture, panner(uv, 1., speed, vec2(0., 0.), -1./scale));
vec3 textureCombined = min(texture1, texture2);

return strength * 10. * textureCombined;
}
#endif

vec4 frag () {
vec4 waterColor = shallowColor;
vec4 finalFoamColor = vec4(0.);
// caustic
vec4 finalCausticColor = vec4(0.);
#if USE_CAUSTIC
float causticDepth = causticParams2.x;
vec3 causticColor = causticParams2.yzw;
finalCausticColor.rgb = caustic() * causticColor;
#endif

vec4 finalColor = waterColor + finalFoamColor + finalCausticColor;
CC_APPLY_FOG(finalColor, v_position);
return CCFragOutput(finalColor);
}
}%

// 欢迎关注【白玉无冰】 https://mp.weixin.qq.com/s/4WwCjWBtZNnONh8hZ7JVDA

工程

https://forum.cocos.org/uploads/short-url/5ytjWtYU1A4xNheA6nYxtBCs8h4.zip

mywater.zip (391.1 KB)

其他

整理了一份往期的游戏开发资料合集 👉 游戏开发资料合集,2022年版

阅读原文下载相关素材

https://forum.cocos.org/t/topic/144800

👇👇👇

浏览 47
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报