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
新建一个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中的属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前文章:Creator3D中shader5_代码是如何控制effect中的属性
网页路径:http://scyanting.com/article/iesecd.html