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.

Initial Mesh

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.

Mesh with Modifier Added

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.

UV Map Of Mesh

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.

Vertex Color Of Mesh

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.

Magic Beam Texture

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.

Shader Node Setup

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.

Driver Values For Gradient Texture UV

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.

Final Effect and its Differences

You can check the differences between different settings.

The version with edge masking:

Smooth End and Beginning

The version without any masking:

No Smoothness

The version with texture mode set to repeat:

Texture Mode Set To Repeat

The version with emission texture set to gradient:

Gradient Texture As Color

Feature Modifications

The base effect is now done. We can now easily modify the effect's shape, texture, speed, and colour to get interesting results.

Here is one such effect created using similar steps:

Curve And Texture Modified Version

This version was created by changing the effect's curve, texture, and colour.

Different Texture And Mesh Used For The Effect


Real-time VFX usually consists of anticipation, attack, and impact. We have created the attack part of the magic beam VFX.

In the next part, we will create the anticipation and impact effect. We will also export the effect to the Unity engine and set it up there.

Thank you for reading. To keep up with another section of this blog, subscribe using the buttons below.