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 
  #include   #include 
  #include   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中的属性就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。