如何快速升級 Cocos Shader 版本,以簡易水shader為例

白

背景

講述如何 將一份 3.0.0 版本的水shader 升級至 Cocos Creator 3.6 。希望對大家有所幫助。

環(huán)境

Cocos Creator 3.6.2

效果

玉

此處是魚??，介紹如何使用

在資源管理器中新建著色器(Effect)

復(fù)制 文末的?mywater.effect?代碼至當前文件

在資源管理器中新建材質(zhì)

選擇材質(zhì)的著色器

在場景中創(chuàng)建平面

讓平面使用水的材質(zhì)

為材質(zhì)上貼圖

調(diào)整材質(zhì)參數(shù)

可以根據(jù)預(yù)覽效果調(diào)整參數(shù)

無

此處是漁，介紹如何快速升級

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

前置準備

參考前面的步驟準備以下幾個點：

1. 新建著色器(Effect)，?mywater.effect

2. 新建材質(zhì)?mywater.mtl?，并使用?mywater.effect?材質(zhì)

3. 在場景中創(chuàng)建平面，并使用mywater.mtl材質(zhì)

4.將參考的水放在工程中

確定入口

打開兩份著色器代碼，片元著色器的入口在 frag 變量下

入口在?water-fs:frag

從后往前抄

返回顏色

將每個變量都移植過來

全局變量

拷貝?屬性檢查器?面板參數(shù)?properties

拷貝UBO。引擎不支持離散聲明的?uniform?變量，必須使用 UBO 并保持內(nèi)存對齊，以避免 implicit padding。

拷貝引用UBO

函數(shù)

拷貝顏色計算的部分

拷貝相關(guān)的全局變量

拷貝UBO

拷貝紋理聲明?causticTexture

拷貝函數(shù)

材質(zhì)參數(shù)

在參考材質(zhì)中搜索對應(yīng)的紋理，找到使用的紋理文件

拖入貼圖

為材質(zhì)上貼圖

其他參數(shù)的拷貝

效果

冰

此處是相關(guān)資源資料

貼圖 Caustics

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);
  }
}%

// 歡迎關(guān)注【白玉無冰】 https://mp.weixin.qq.com/s/4WwCjWBtZNnONh8hZ7JVDA


  

工程

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

mywater.zip?(391.1 KB)

其他

整理了一份往期的游戲開發(fā)資料合集 ???游戲開發(fā)資料合集，2022年版

閱讀原文下載相關(guān)素材

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

??????