这篇文章将为大家详细讲解有关Creator3D中shader5_代码是如何控制effect中的属性,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
之前做了一个球形的波浪水球,当时提到一句有点像加载进度条,那么下去我就实现了一下这个功能,游戏的加载进度用它来显示。
在上边的效果显示中,大家可以看见,球形的波浪高度,随着游戏加载的进度逐渐变高,游戏加载到100%的时候,球也正好被填充满。那么大家就会想到,波浪小球的shader实现效果是在effec文件中,而游戏的加载进度是在游戏代码中,应该怎样在代码中去设置effect中的属性。
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;
};
实现波浪效果
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中的属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/u/4638761/blog/4543046