The first thing you need to to is adding an entity to apply the shader on. Let’s use a built-in box.
Click Create Entity in the top menu
Step 2: Add a minimal custom shader script
To add a shader to the cube, we need to create a custom script and add it to the cube.
Select the box
Click “Add component” in the inspector
Click Script and then select Custom Script
Click the edit button on the new script, to open the Script editor
Copy the script below into the editor
If you now press Play in the editor, the custom shader material will replace the current material on the box. Right now the custom shader isn’t very exciting, it’s just plain white.
Step 3: Update the shader to a plasma shader
Now let’s make it more interesting. Replace the vertexShader, fragmentShader and the shaderDefinition with the following.
In the vertex shader source we want to add the UV coordinates from the mesh as an attribute, and pass it on to the fragment shader via a varying.
In the fragment shader we replace almost everything that we had in the previous shader, and add some magic formulas to get the plasma effect. We add a couple of uniformstime and k. Also note that we assume a define called PI.
What we have to do now is to declare our new define, attributes and uniforms in the shader definition.
All left to do now is to make the time value update. It is always zero right now. What you have to do is pass the updated uniform value via the material into the shader. The material.uniforms overrides the values set on the shader.
Step 4: Press Play
When you press the Play button in Create, the setup() function will be run, and the shader will be added to the cube. Try it!
Step 5: Done!
You’ve now made a custom shader. Congrats! What will you use this knowledge for next?