Godot Engine

Godot Engine

Not enough ratings
Magic/swirling wind effect
By Felton The Squirrel
A simple, computationally-cheap means of rendering either cartoonish swirling winds, magic, ghosts, etc. in 3D.
   
Award
Favorite
Favorited
Unfavorite
Part 1: preparing the mesh
  1. In Blender, create a plane and enter Edit Mode.
  2. Using the loop cut tool, cut up the plane as shown in Figure 1.
  3. Enter Vertex Paint Mode, and paint the plane like so:
  4. Enter Object Mode and create a new bezier curve object.
  5. Enter Edit Mode and adjust the curve as desired:
  6. Re-enter Object Mode and add a Curve modifier to the plane.
  7. In the modifier settings, choose the curve created in Step 4.
  8. Enable the view-while-editing option for the modifier from the previous step.
  9. Re-enter Edit Mode on the plane and change the transform pivot point to 'cursor.'
  10. Center the cursor along world coordinates.
  11. Scale the plane's points along the X axis as shown:
  12. Using the loop cut tool, cut across the newly-deformed plane, using enough subdivisions so that the curve smoothens out:
  13. When satisfied, apply the plane's Curve modifier, save the file, and export the plane as a GLTF to the desired location in your Godot project directory.
Part 2: preparing the texture
  1. In the raster image editor of your choice, create a new 256x32 greyscale image.
  2. Fill the image with black.
  3. Scribble into the image with a lighter colour as desired and blur it horizontally.
  4. Create a second greyscale image with the same dimensions and add noise to it.
  5. Apply a tileable blur to the second image.
  6. Next, copy the contents of the second image to the first and stack them vertically.
  7. Finally, expand the canvas to fit both images and export the result as a PNG into your project directory.

The result should look something like so:
Part 3: creating the Godot shader:
  1. In Godot, create a new ShaderMaterial.
  2. In the material from step one, create a shader layout like so:
  3. Finally, apply the material to the imported mesh:


How the shader works:
We use
Time
as an input, and add that to the
u
coordinate whilst dividing the
v
by 2 to effectively turn our texture into an atlas (thereby avoiding texture switching, which can degrade performance on some GPUs). Finally, we multiply the two sub-textures by each other, and route the result to
Emissive
.
As time advances, the two sub-textures scroll across the mesh at different speeds, producing an interference effect that looks not unlike the wind effect in some older Zelda games or the swirling magic effect around respawn points in Craftopia.