Tutorial
Heading
Feb 27, 2020

Visual effects in Decentraland - A guide to create VFX without tools

Here, we are going to explain some of the VFX we developed

The mission

Decentraland is a paltform that aims to innovate and empower artists to create, own and control its designs inside the blockchain. However, some of its limitations have left us scratching our heads.

We took it as a challenge and developed a series of special effects to use in our scenes. Here, we are going to explain some of the VFX we developed.

Resources

  • MayaLT
  • Photoshop
  • Unity 2018.3.6f1
  • Decentraland SDK

#00 - Scratching the main concepts for VFX

This is one of the trickiest parts to create in Decentraland, as the engine doesn’t allow the use of particles or any kind of post-effect. To overcome this limitation, we had to break down the effects we wanted to create into their basic parts and then recronstruct them using the resources available to us.

At the end of the process, we compiled a list of effects that we could achieve by combining three main concepts: animation, transparency planes, and basic shapes. We discovered that by mixing these simple concepts, we could recreate a variety of effects that appeared difficult to achieve without the assistance of a particle system or effects.

For each effect, we implimented these concepts. For example, to create the fire effect, we used a gradient to generate a transparency map. Then, to achieve the flickering effect, we animated several planes using the animation tab in Unity. The animations themselves aren't too complex, just simple scale, rotation and position animations, yet they resulted in a surprising variety of effects.

In this article, I want to showcase some of them. Since the procces is quite similar for each, I won’t delve into the specifics of how we created them.

#01 Post-effects in Decentraland

Art Stations

Here we can see two ways to use transparency maps.

The first one is in the lighting effect. Here, we employ a gradient map to generate the light source and an emissive map to enhance the lighting on the model.

The second one is in the corner of the wall, where we placed a plane over the window and use ambient occlusion as a reference to darken the corners of the walls.

Tomb Chaser

Here, we used transpararency to create an aperture filled with light for the finishing room. This was done to evoke a victorious ending feeling upon exiting.

This is what I explained on the first part. To create the twinkle effect, we animate the plane with scaling, and the fire follows a similar approach.

It consists of three planes animated in a squash and stretch motion while rotating the plane.

Momus Collection

One of the main problems we encountered is that you can't animate textures in the Decentraland engine. So, to create this effect, we stacked several layers on top of each other.

On the top layer, we applied a transparent texture resembling the flow of a river. Finally, we animated the scale from 0 to 1 in a loop to create the illusion of a flowing river.

This process is similar to what was explained for the art stations with lights. However, in this case, we overlap several rays to create the effect of sunlight rays.

Animation of small spheres with an emissive material to create fireflies.

A plane with open red eyes drawing, animated in scale to create the winking effect.

Here, we created the opposite effect of the light by generating a dark gradient in a transparency map. This allows us to create a dark ambient effect on the exterior.

South Transit

Same concept as the lights explained before, but here we create a more complex mesh to represent the light of the elevator.

We animate it throught scaling to achieve the desired effect.

To create the trail effect on the train, we follow a similar approach to creating the lighting planes. However, this time we position the planes on the tracks to produce a gleaming effect.

Conclusion

These were some of the effects that we incorporated into the scenes we developed on Decentraland. We used principles that we knew worked on the platform and tweaked them to enhance our scenes, adding an extra touch. As they say, the devil is in the details.

Decentraland
Kourtin
Head of OPS

I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.

Tutorial
How to import Decentraland SkyboxEditor into Unity
Tutorial
Doing a MANA transaction in a Decentraland scene
Tutorial
Canvas (2D UI) Manager in Decentraland