Creator3D中shader5_代碼是如何控制effect中的屬性

這篇文章將為大家詳細講解有關Creator3D中shader5_代碼是如何控制effect中的屬性，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

前言

之前做了一個球形的波浪水球，當時提到一句有點像加載進度條，那么下去我就實現了一下這個功能，游戲的加載進度用它來顯示。

效果展示

正文

1.概述

在上邊的效果顯示中，大家可以看見，球形的波浪高度，隨著游戲加載的進度逐漸變高，游戲加載到100%的時候，球也正好被填充滿。那么大家就會想到，波浪小球的shader實現效果是在effec文件中，而游戲的加載進度是在游戲代碼中，應該怎樣在代碼中去設置effect中的屬性。

2.實現

Effect代碼：

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: general-vs:vert # builtin header
      frag: unlit-fs:frag
      properties: &props
        mainTexture:    { value: white }
        mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }
        mScale:         { value: [1, 1, 1,1] }
        mPos:           { value: [1, 1, 1,1] }
        mHeight:           { value: 0 }
  - 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 unlit-fs %{
  precision highp float;
  #include <output>
  #include <cc-global>
  #include <output>
  #include <cc-local-batch>

  in vec3 v_position;
  in vec2 v_uv;
  uniform sampler2D mainTexture;

  uniform Constant {
    vec4 mainColor;
    vec4 mScale;
    vec4 mPos;
    float mHeight;
  };

  vec4 frag () {
    //頂點坐標，法線坐標都是基于世界坐標系的
    vec4 color=mainColor;
    if(v_position.y+sin((v_position.x+cc_time.x)*7.0)/40.0>mPos.y-mScale.y/2.0+mHeight){
        color = vec4(1.0,1.1,1.0,0.1);
    }
    return CCFragOutput(color * texture(mainTexture, v_uv));
  }
}%

新建一個effect文件,我們需要下面3個地方的改動

• 1.添加可編輯的屬性，mScale,mPos,mHieght 是我們需要添加的。

 properties: &props
        mainTexture:    { value: white }
        mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }
        mScale:         { value: [1, 1, 1,1] }
        mPos:           { value: [1, 1, 1,1] }
        mHeight:           { value: 0 }

• 2.聲明添加屬性的類型

  uniform Constant {
    vec4 mainColor;
    vec4 mScale;
    vec4 mPos;
    float mHeight;
  };

• 
  

3. 實現波浪效果

vec4 frag () {
//頂點坐標，法線坐標都是基于世界坐標系的
//mPos  小球的坐標
//mScale 小球的大小
//mHeight  波浪在小球中的高度
    vec4 color=mainColor;
    if(v_position.y+sin((v_position.x+cc_time.x)*7.0)/40.0>mPos.y-mScale.y/2.0+mHeight){
        color = vec4(1.0,1.1,1.0,0.1);
    }
    return CCFragOutput(color * texture(mainTexture, v_uv));
  }

游戲腳本中的代碼

//獲取小球的材質
this.loadSphereCm = this.loadSphere.getComponent(ModelComponent);
let material: Material = this.loadSphereCm.material;
//設置材質中mainColor屬性值
material.setProperty("mainColor", new Vec4(0.0, 0.7, 0.8, 1.0));
let pos: Vec3 = this.loadSphere.position;
let scale: Vec3 = this.loadSphere.scale;
//設置材質中mPos屬性值
material.setProperty("mPos", new Vec4(pos.x, pos.y, pos.z, 0.0));
//設置材質中mScale屬性值
material.setProperty("mScale", new Vec4(scale.x, scale.y, scale.z, 0.0));
this.mProgress = 0;
this.schedule(() => {
this.mProgress += 1;
  if (this.mProgress > 100) {
    this.mProgress = 100;
  }
  //根據加載進度設置mHeight的值
  material.setProperty("mHeight", scale.y * (this.mProgress / 100));
  this.labelLoad.getComponent(LabelComponent).string = "資源初始化進度" + this.mProgress + "%";
}, 0.07);

關于Creator3D中shader5_代碼是如何控制effect中的屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。