Shulou(Shulou.com)06/01 Report--

This article will explain in detail how the shader5_ code in Creator3D controls the attributes in effect. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Preface

I made a spherical wave water polo before, and it was mentioned at that time that it was a bit like loading a progress bar, so I realized this function and used it to show the loading progress of the game.

Effect display

Text 1. Overview

In the above effect display, you can see that the spherical wave height gradually increases with the progress of the game loading, and the ball is filled when the game is loaded to 100%. Then you will think that the shader implementation effect of the wave ball is in the effec file, and the loading progress of the game is in the game code, how to set the properties in effect in the code.

two。 Realize

Effect Code:

CCEffect% {techniques:-name: opaque passes:-vert: general-vs:vert # builtin header frag: unlit-fs:frag properties: & props mainTexture: {value: white} mainColor: {value: [1je 1,1], editor: {type: color} mScale: {value: [1je 1,1]} mPos: {value: [1 one, 1 value 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 in vec3 vault position; in vec2 vault; uniform sampler2D mainTexture; uniform Constant {vec4 mainColor; vec4 mScale; vec4 mPos; float mHeight;}; vec4 frag () {/ / Vertex coordinates, normal coordinates are all vec4 color=mainColor based on the world coordinate system If (v_position.y+sin ((v_position.x+cc_time.x) * 7.0,40.0 > mPos.y-mScale.y/2.0+mHeight) {color = vec4;} return CCFragOutput (color * texture (mainTexture, v_uv));}}%

To create a new effect file, we need to make changes in the following three places

1. Add editable attributes, mScale,mPos,mHieght is what we need to add.

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

two。 Declare the type to which the attribute is added

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

Achieve the wave effect

Vec4 frag () {/ / Vertex coordinates and normal coordinates are all based on the coordinates of the world coordinate system / / mPos sphere / / mScale ball size / / mHeight wave height in the ball 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.0Col 1.1) } return CCFragOutput (color * texture (mainTexture, v_uv);}

Code in a game script

/ / get the material this.loadSphereCm = this.loadSphere.getComponent (ModelComponent) of the ball; let material: Material = this.loadSphereCm.material;// sets the mainColor attribute value material.setProperty ("mainColor", new Vec4 (0.0,0.7,0.8,1.0) in the material; let pos: Vec3 = this.loadSphere.position;let scale: Vec3 = this.loadSphere.scale / / set the mPos attribute value material.setProperty ("mPos", new Vec4 (pos.x, pos.y, pos.z, 0.0)) in the material; / / set the mScale attribute value material.setProperty ("mScale", new Vec4 (scale.x, scale.y, scale.z, 0.0) in the material; this.mProgress = 0ten this.schedule () = > {this.mProgress + = 1; if (this.mProgress > 100) {this.mProgress = 100 } / / set the value of mHeight according to the loading progress material.setProperty ("mHeight", scale.y * (this.mProgress / 100)); this.labelLoad.getComponent (LabelComponent). String = "Resource initialization progress" + this.mProgress + "%";}, 0.07); on how the shader5_ code in Creator3D controls the attributes in effect, so much for sharing here. I hope the above can be helpful and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.