Magic Beams VFX using Blender and GIMP

This is the first part of the multi-part series on Creating Real-Time Magic Beams Visual Effects. You can find part 2 here.

Creating Real-time Visual Effects (VFX) requires both technical and artistic skills. These skills include 3D modeling, texturing, lighting, shader creation, animation, simulation, particle systems, etc.

To follow along with this blog post, you need to be familiar with 3D modeling, texture creation, shader creation, a game engine of your choice, and the particle system of that game engine.

I will explain the steps and techniques to my greatest extent, but if you have the above skills, it will be easier to follow. As for the software used, I will be using Blender, GIMP, and Unity.

Modeling and UV Unwrap

Start by adding a plane, duplicate it twice, and rotate each by 60 degrees.

Create a BezierCurve and adjust its shape as needed. Add an array and curve modifier to the mesh created earlier. The plane's length before the array modifier determines how accurately it will follow the curve.

This initial mesh will be used for testing out the effect. Once satisfied with the initial shape, apply the modifiers.

For the UV map, we need to rectify it and constrain the UV within the texture bound. This will make the texture behave more predictably. Also, make sure all the UVs of individual planes are overlapping perfectly.

To rectify the UV, select all looping faces and click UV > Follow Active Quads.
To constrain the UV, under the UV editor window click UV > Constraint to Image Bound.

We also need to paint the end vertices of the mesh. This will be useful to fade in and fade out the texture scrolling later on.

Texture Creation

Let's make a simple texture for the magic beam. We will create a grayscale texture. Colour will be given later using either the shader or the particle system. The black part of the texture will act transparent.

I painted some lines with a smooth brush and used the smudge tool to distort the lines. To remove the seam, use Shift + Ctrl + O in GIMP to offset the image and paint over the seams.

Texture can easily be swapped as the effect desires, even after the effect is done. So, let's just use a simple one for now and tweak it later on as needed.

Shader Creation

The shader will use the image texture created earlier and scroll it along the mesh UV. We will also give some smoothness to the end and beginning of the effect and give it a colour and some glow.

Scrolling is done by animating the y-axis of the magic beam texture. The vertex colour is used to smooth out the effect along the edge of the mesh.

A gradient texture is mapped along the mesh, and the scrolling of this texture is done by using a driver that references the y-axis animation of the magic beam image texture. This will remove harsh lines from both ends of the scrolling texture image.

We can replace the mask made using vertex colour with another gradient texture that won't scroll. However, using vertex colour as a mask gives us more flexibility on parts of the mesh we want to make more or less visible.