Trail effect with Babylon.js

In my last demo, I exploited a technique to do light trails behind each ship. As I got few questions about it, I believed it deserved its own blog post. The trick itself is very simple and can be derived for various effects like smoke trails, weapon trails, missile smoke…

Let’s dive in!

The playground for this experiment is accessible here!

How does it work ?

CPU side

Create a tesselate ground mesh and an array to hold the positions.

Then, for each frame, a new position is pushed in the array, previous position is removed (using typed array shift function). The texture data is updated each frame, ready for the GPU to render.

Create or update the float texture the positions array.

GPU side

But as you can see in NME graph, there is another texture sampling. For that sampling, the V component is offset a little (-0.001) in order to get a position a little behind in the curve described in the texture. The position difference of the 2 sample is the direction of the curve at that point. This derivative vector is then normalized.

Image for post
Image for post
The output of Normalize is the normalized world direction of the trail.

With the curve direction in world coordinates and the eye position, it then become possible to compute the bitangent with the direction from eye to the position. The bitangent is the perpendicular to the direction and the eye vector. As a consequence, this vector is perpendicular to the view. We now have a solution to orient the curve so it always faces the camera. Just like a billboard but per vertex.

Image for post
Image for post
The cross product of (world position — camera.position) and previously computed direction vector gives the perpendicular right vector.

For the color, a sine is computed on the width, depending only on U so it’s bright in the middle and dark on the side. And another sine is used on the length of the mesh so it’s bright at the start and dark at the end.

Image for post
Image for post
A sine along width and another along length. Multiplied together and you get the alpha for the texel.

The complete NME graph for this effect is accessible here : Babylon.js Node Material Editor

PG demo + PG infos

Image for post
Image for post
Relaxing trails around a PBR sphere

This PG follows what’s described before. With 3 trails and a parametric function for the position. The position is function of time and nothing else. At init, the trail texture data is filled with positions computed back in time instead of random or (0,0,0). A light and a mesh are attached and their position set at the same point as the trail end.

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store