LogInHarry Alisavakis did a detailed breakdown of his Anime Laser Beam effect, talking about the creation of the beam, dust circles, charging sphere, and the use of particles.
Harry Alisavakis did a detailed breakdown of his Anime Laser Beam effect, talking about the creation of the beam, dust circles, charging sphere, and the use of particles.
Introduction
Hello, my name is Harry Alisavakis. I’m a game developer from Greece working at a creative agency called Another Circus and focusing more on matters concerning technical art. I graduated from university in 2018 with a BSc in Computer Science, specializing in software development, though my passion has always lain in video game development. During my years as a student, I taught myself how to make video games (mostly in Unity) and participated in as many game jams as I could, which is something I still haven’t stopped doing.
Besides programming though, I was always fascinated by the world of 3D graphics and even started learning Blender and other 3D modeling software. I was always keen on exploring both the technical and the artistic sides of games, and I hit that sweet spot when I started learning about shaders. Due to the notoriety of their learning curve, I wanted to share my knowledge as I was learning about shaders and created my blog with beginner-friendly shader tutorials to help others.
Joining VFX Community
Fast-forwarding to these past few months, I got fascinated by all the cool VFX shared by Yoeri Vleer every Friday and was inspired to try joining the intriguing world of VFX myself, as I was confident that my background in programming and shader coding would make the transition fairly easy. Inspired by amazing VFX creators like Maxime Catel (aka Spyro) and Vlad Horobets’ (aka ErbGameArt) I started experimenting with at least one VFX concept every week to have something to show for #VFXFriday. One of those effects is the anime laser beam, which I’ll talk about in this article. For context, the effect I posted looks like this:
Laser Beam: Approach to the Effect
The main inspiration for the effect came from the extravagant laser beams I saw on accounts like ErbGameArt and Piao_3DEffect. Erb has done a very similar effect in the past:
However, while the color scheme is fairly similar, my approach was completely different.
The main way I approached this effect and most of my other effects is by layering meshes that have a custom shader applied to them. Since I tend towards stylized effects, the shader I use is unlit and contains effects like dissolving and vertex displacement based on a grayscale noise texture. This shader is my “VFX Master Shader”, and I’ve been using it in other effects as well.
As I noticed that the main elements of the beam had three distinct colors (black, bright blue, and bright orange), I went with layering three meshes (each had a different material), so that I could have more depth and variety in their movement to get the feeling of a more complex motion.
Besides the obvious inspirations, I didn’t have any other clear references. Just like with my other effects, I just made it up as I went.
Key Elements of the Effect
There are three key elements of the effect:
- The actual laser beam including the swirly effect and the particle system at the base as well as the swirly beams around the beam
- The charging sphere at the base of the laser beam
- The dust rings around the casting sphere
Dust Circles
The dust circles around the actor are made fairly simply. I used a simple cone-like mesh and applied a material with the master shader to it – this takes a spiky texture and pans it across the X-axis. Without the texture, the effect looks like this:
The texture I used looks like this:
It was quickly thrown together in Substance Designer:
Having one mesh inside the other gave a more complex-looking effect than it actually is, and the spiky texture really gives off that anime vibe. The animation on the dust circles was quite simple, just a scaling at the start, plus at the end, I increase the cutoff value of the material to 1 to let the effect fade away gradually.
At this point, it’s worth mentioning that all the animations of the effects are not done via Unity’s animation system, but through a custom animating tool I made called “BNA Animator”. The tool takes care of simple animations like translation, scaling, rotation and more by using easing functions. It also gives me the control I need to execute the animations for specific durations, combine animations together and call events at the start or end of the animation. An important function of the tool is that it also allows me to animate material properties (floats and colors), so I can easily adjust the alpha cutoff of my materials to fade them in or out.
Beam Sphere
When I start an effect, I usually began with the most impactful element, and in this case, it was the laser beam. After I worked a bit on it, I had to make a source for the beam which would be something needed to build anticipation for the effect. That’s where I made the sphere at the base. It was made with the exact same technique as the beam: 3 sphere meshes one inside the other, each with a different material. And since I like to reuse materials, I actually used the exact same materials utilized for the laser beam. That also helped with the consistency of the effect. The disassembled sphere looks like this:
Using the BNA Animator I made an animation sequence for it: it first grows slowly to 120% of its normal scale, quickly scales to 0 and then back to 100% when the beam starts. To give more of the feeling that it’s charging, while it’s scaling up I added particles that move with negative speed towards the center of the sphere. When the source scales back up for the laser explosion, I have another particle system bursting some particles with trails and noise to give a small localized impact when it grows back up.
The biggest challenge for that effect was getting the scaling timing right, but the animation tool helped since I knew the exact durations and delays of the other effects.
Slashes & Particles
As part of the explosion impact for the laser, I also added two slashes growing from the center of the source sphere. These slashes look like this in their normal form:
I tend to use them a lot in different effects for a more stylized impact effect. The meshes are actually cylinders without their top sides that have been squashed and rotated. I have applied materials with the same VFX master shader to them. When the impact occurs, I scale them up while also increasing the cutoff value for them to dissolve. They also have a grayscale noise texture applied to them.
The particles at the base of the laser come from a quite simple particle system. That was intended to give off a look like they’re violent sparks. The particles have a quite high moving speed along with some noise in their movement. I added some short trails behind them to follow the movement fluctuations for a more smooth look. It was kind of challenging to give the particles the violent movement while keeping the trails smooth. Initially, the particles were either too floaty and slow or weren’t noticeable enough without the trails.
Together with the particle system, there’s also a point light casting a shadow on the sphere. I initially added it as a test, but I liked how it gave that feeling of a huge bright thing in front of the caster and the shadow falling behind it. The intensity of the light also fluctuates with the size of the laser beam as it grows larger and smaller during the effect.
Beam
The beam is the first thing I started making and it was initially done as a small proof of concept to see if what I had in mind would work for such an effect. It’s, once again, composed of three simple meshes, specifically three elongated cylinders without their top faces (the same mesh was used for the impact rings). The disassembled beam looks like this:
They all are quite simple and use a material that stems from the VFX master shader. I don’t use any gradient maps for colors or any other fancy features, I just pan the noise textures, dissolve the mesh based on them and apply a little bit of displacement to the texture and the vertices.
The noise textures I use for these materials are quite generic, and I usually stretch them out or tile them to get different results. The noise textures I use for these materials (which are the same as for the sphere meshes) are the following:
- For the torn black texture:
- For the inner elements:
- For the displacement:
The energy swirls are made with another shader I have specifically for this case. They’re actually simple mesh strips with a few subdivisions, and the shader offsets their vertices turning them into a spiraling effect. Through the shader, I can easily adjust the frequency of the spiraling, modify the colors and give it a swirling motion. For this effect specifically, I also added a “fill” property to the shader so that I could gradually make the strips appear and disappear along their length.
Here’s a demo of how the swirly strips shader works:
It’s quite difficult to show, but the vertex displacement is happening in 3D, it doesn’t just offset in the Y-axis.
At the start of the beam, there’s also a quad that uses, once again, the VFX master shader. To make it swirl, I sample the noise texture using polar coordinates. Panning the texture makes it both swirl around and also move inwards, making a cool portal-like effect. Here I also used a gradient map to add some colors to the effect as well as some other tricks from the master shader including:
- Color banding / posterization
- A circle mask so that the effect doesn’t get cut off by the bounds of the quad
- Soft blending with opaque geometries
You can see some of these effects when you look at the quad on its own:
After I crafted the beam, I made the swirling quad to give the laser some kind of context as to where it comes from. However, I didn’t really bother with doing something similar at the end of the beam, as it wasn’t really necessary for the presentation.
To give the sense of a throbbing motion to the beam, I use BNA animator to make it scale up and down and seem much more alive. The vertex displacement on the material also helps, as it adds a small varying volume to the meshes.
Feedback
In the end, I think that the most interesting parts of the experiment weren’t the pure visual elements but the animation, timing, and accompanying effects. When I was making the elements of the effect separately and I had the beam shooting out of the sphere I thought it was cool, but I was kind of unimpressed. It wasn’t until I added the screen shake, the point light and the radial blur (also made using a custom shader, for which there’s a tutorial here) when I saw the whole thing coming together and actually felt the impact of the beam. It was a very good sign that when I saw it for the first time my reaction, as well as my co-worker’s reaction, was something along the lines of “woah”. I believe that there was a weight to the effect communicated to the viewer, and that was my main goal.
It’s worth noting that, in some cases, something impactful and interesting doesn’t necessarily have to be complex or heavy. Without any optimization in mind, the overdraw of the effect looks like this at the moment of impact:
And I’d say that despite its simplicity, it’s a neat-looking effect, at least in a GIF format.
Overall, I’m still figuring VFX out as I go, and I’d still consider myself a beginner in the field. I have a ton of stuff to learn and more workflows to experiment with, but it’s exciting to have all this freedom to create something practical and cool-looking that can have a huge impact on the viewer/player.
So far I still struggle to find an efficient streamlined workflow to combine all the visual and animation aspects using the tools at my disposal. However, this is also part of the fun!
P.S.: For anyone interested, I have started a shader tutorial on the VFX master shader used in this effect. Check it out here!