My interest towards Godot engine grew quite a bit lately. I thought about trying to use it to recreate something I already done somewhere else.
So, I though about giving these nice cubes a try!
The 3D model
The model is essentially the same one used for the Unreal implementation, but it has been exported from Blender as a *.escn file, a format used for Godot scenes. I used this godot-blender-exporter, which was easy to setup and to use.
The nice thing about this exporter is that you can directly export the mesh inside your project, and start using it right away!
Setting up assets in Godot
The first thing we need in Godot is a scene with our mesh. Let’s create it by right clicking on the freshly exported *.escn file, and then selecting the New Inherited Scene option:
Now we have a new scene, which we can save right away. What we are missing now is a shader and a material. The shader will contain the actual code to colour and move the mesh. The material is what will be actually applied to the mesh, and will be using our shader. So, as expected, we will be having a setup like this: SHADER > MATERIAL > MESH.
Since I wanted to try the visual shader editor integrated with Godot, I created a new visual shader, from the New Resource menu:
Then, let’s create the material, and set it to use our newly created shader.
Now that our material is using our shader, we should also tell our mesh to use the material:
Designing the shader
In Godot’s visual shader editor, fragment and vertex shader are separated. This is a really nice approach, closer to what happens down in the code compared, for example, to Unreal Engine material editor.
Let’s start with the fragment shader. I decided to give a different color to the top face of the cubes. In order to do so, we can use the vertex color we setup in Blender. We grab just one of its channels with a VectorDecompose node, and give it as an input for a Step function. Our threshold is 0.999, so that we basically have 0 or 1 as output. Then we use this value as a weight to tell the fragment shader which color to use. 1 will be the top, 0 will be the rest of the cube. That’s it! Note how BodyColor and TopColor are ColorUniform variables. This will also make them appear in Godot’s editor window, for easy setup.
Now, let’s take care of the vertex shader. This one is a bit more complex, but really not that much! In the picture below we can see a top part and a bottom part of the graph. The bottom part is essentially using a noise texture and panning it. Panning speed is given by a ScalarUniform which I named texture_speed.
The bottom part is multiplying a channel from the moving texture by a channel from the Vertex Color. This ensures the bottom vertices, which are black, don’t move (black = 0, right?). Then, the resulting value is multiplied by the Up vector, Y in Godot, so that the cubes move vertically. We further multiply all this by another uniform, called in my case OffsetPower, which we can use to tweak the power of the displacement effect. Finally, we add the result to the original Vertex position. Done!
You can now tweak the values of the material directly from the editor, under the Shader Param option, and see the changes in real time:
