Taras Tereshchenko

My name is Taras.
I'm Lead VFX Artist in Vostok Games.
And today we'll speak about Procedural Vertex Animation.
I will show some VFX with use PVA and we will analyze each example.
These examples are certain sequence of actions with defined data, the result of which are instructions for vertex offset. These algorithms are universal, but these examples will be presented on Unreal Engine.

Let's start with definition of procedural vertex animation. It is not bones animation or animation of object transform. This is direct vertex animation. It is not import in engine. This is animation on vertex shader.

The vertex shader job is building geometry.
Connect vertices with edges and build faces between them.
If we move vertices then edges and faces will change automatically.

First example is creating muzzle flash effect for flash hider. Classic technique of creating shot effects- this is a set of billboards fixed in perpendicular planes. In our case, the problem is that the effect is not in front of the barrel. Effect is around flash hider.

A good solution here is billboard fixed along barrel axis with orientation and offset on camera. Additional billboard totally oriented on camera (dotted in the image) to simulate flash residues in front of the flash hider.

Engine provides a list of parameters which we can use.
In the first procedure we use Particle Position and Camera Position.
This is enough to calculate the direction for the shift.

"Stretching a billboard to simulate volume".
To understand this example, let's watch the video.
There we are trying to show a volumetric elongated sphere (simplified Muzzle Flash form).
- On left side three billboards fixed in perpendicular planes.
(We see intersections and uneven outline)
- In the middle one billboard fixed in the X Y plane and the second is twisted to the camera along the Z axis.
(We see intersections and uneven outline)
- On Right side one billboard oriented to the camera with stretching on Z axis.
It is the stretching that is the basis of this example.

Our procedure is applied to the billboard shown by the dotted line.
As we see billboard stretches depending on the angle between the barrel and camera. A second billboard oriented to the camera, provides high density at the base of the flash.

The dependence of the shift on the angle between the barrel and the camera.

Video demonstrates muzzle flash from an assault rifle M4A.
The five top rays and the center flash use stretch procedure.
With its help of this we simulate volume without using additional billboards and without visual defects inherent in this method.

In addition to the angle, shift is affected by the position of vertices relative to the barrel. The weight for deformation is a linear gradient along the shot axis. Calculation of this gradient is "Getting deformation mask" on the illustration. As result, a correct display is achieved regardless of the angle to the camera.

"Increasing detectability of enemy shots".
Besides tracers and hitmarks, it’s good when enemy can be discovered with big muzzle flash. But big muzzle flash creates problems for the shooter. So we decided to increase muzzle flash with increasing distance to the camera.

In "Angle factor" part we increase the flash when somebody shoot us, but do not increase when somebody shoot to other side.

"Increasing detectability of material hits".
At a big distance, material hits become so small that they are hard to see. You should see where the shots go and therefore we increase impact effect. The essence of this example is the same as previous- The distance affects the size. But in this case, the distance between bilbords are added to the size of billboards. The distance should be increased too.

"Billboard size limitation in pixel".
In this example were solving the problem of sparks flickering. In real time render small objects are culling on at a large distance. This was made for optimization. As a result of this optimization at a medium distance sparcks start flickering and on the big distance disappear completely. As with LODs, the calculation for culling occurs in scren space. Therefore it was logical to bind billboard size to pixel size. As a result regardless of distance sparks are always stable.

In shader we turn billboard size into screen space vector. After its done we project it onto the screen (Clip Space) and adjust to the screen resolution or viewport resolution. Finaly there is a continuous process comparing the result with the pixel equivalent and the corresponding size changes.

"Explosion in water".
To simulate uneven subsidence of water dust, shifting and stretching billboards is good solution. Its allow to avoid using large SubUV textures. The illustration shows that on the side billboards, lower pixels shift faster than upper. This is exactly how the effect uneven subsidence is achieved.

In the procedure, we see branching into instances, for central water column and side spray. With a central water column, everything is simple, only vertical stretching is used here. With side spray it's harder, we need to define the lower vertices to move them faster than the upper. Depending on which side of the center billboards are located lower and upper vertices are swapped. So, in the shader we follow this and modify the mask if necessary (Lower vertices detection).

In this effect we use one more procedure for side billboards. Those who create explosions knows about technique which will be discussed now.
The main idea of this technique is to orient billboards by velocity (image 3). Use random movement direction and very low speed. This way we get debris trail simulation. But there is a nuance. Low speed is not enough for stable billboards orientation and they start to tremble. To avoid this visual bug we increase speed and shift billboards in the direction opposite to their movement.