This is a continuation from previous posts.

Part 0 (Ideation)

Part 1 (Modelling, texturing)

Part 2 (Sand simulations)

Part 3 (VFX)

Part 4 (Volumetric Lighting)

This is Part 5 and the post will cover Polishing – the final touches to achieve a quality finished render.

We also did something cool with our scene to allow it to do this:

Above is me changing the aspect ratio, and the camera just changes instantly. All this is happening while our video is rendering.  At the end, we’ll mention how we made use of the game engine’s features to make our scene aspect ratio independent, which means it is compatible with dynamic resolutions that easily allows us to render for MAN (8:1 aspect) and Elphi (4:1), and any aspect ratio in between, and have artistic changes applied to both renders!

Elphi Wall Panels

I would like to applaud Ayesha for doing a fantastic job with the modelling of the Elphi Panels which were added to the scene. These have replaced the old walls and we hope this adds to the architectural component of the composition.

We have also added the official compass 3D asset into the scene from Ayesha.

Detail Masks for compass

To polish the textures further, we sat down to discuss on how to push the texture. We applied a detail map to it which applies an additional layer of albedo (color), smoothness (reflectivity) and normals (microsurface imperfections), controllable with sliders in real-time during our render to achieve the target look. Here is a compass fully lit with BEFORE and AFTER detail masks for comparison.

Fixing shadows

We also had issue with the shadow cast by our compass needle as seen below on the left. The shape of the shadow is very distracting. The reason for this is because our light source is casting the shadow on an irregular surface.

The compass surface is bumpy, and the shadow on the left is actually the physically accurate shadow. But it is not visually nice. To fix that, we could make the needle not cast shadow. But this makes the compass lose depth, and appear flat.

Therefore, we fake the shadow using something called Decals.

Thanks to this project, I learnt how to use decals to fake and fix a lot of visual errors, as well as use them for cool stuff I will show below.

Decals layer a texture onto a surface, and its strengths is that it deals with uneven surfaces extremely well, as shown in this video.

I opened Photoshop, pasted a screenshot of the compass needle and traced over it with the shape tool, producing a fake shadow that will be used as a texture.

This texture is fed into a decal that projects the shadow onto the compass’ surface. Here’s a cool video to illustrate the amazing amount of control we have over the compass shadow.

We can even use fadeFactor to control the shadow opacity and even adjust shadow colour. Decals are crazy cool and powerful and below you will see how I push its use further for the symbols!

Volumetric Lit Dust Particles

We have also added dust particles that linger in the air. You can see that on the left beside the compass above.

Our particles react naturally to light. It is very easy to do that with the Lit shader. Applying that onto our particles makes the dust more visible under a light source.

Above is a GIF showing how particles fade away the further they get from the light source. There isn’t even a need to give it a texture because from the camera, nobody can tell that they’re just square pixels and prioritize my time on other aspects. On one hand, you could call me lazy too. 🙂

Now for the cool part. Compass symbols!!

Animated Symbols

This was so much fun to do, but also the most tedious part due to the scripting involved to make it animate automatically and how to get decals to work with emission (giving out light). They are all animated by scripts as it is faster to use a script than to hand-animate each symbol one by one, and then have to adjust the timing when we change things like fadeIn time, fadeOut time, intervals, etc.

You can’t really tell from the front view, but the symbols are imprinted onto the surface in 3D space, not just 2D textures pretending to be on the compass. They are also movable in real-time and adapt to the compass model should it be needed to be changed.

We hope this makes it look just slightly more natural in the final composition.

Fine tuning reflections

Finally, we use a technique to add and simulate reflections where there is none. To really show off the reflectiveness of our metallic compass, we set up reflection probes to match our compass’ space. These reflections are all rendering in real-time. No ray traced magic here!

The above shows reflection probes ON/OFF, to highlight the difference of having captured scene reflections projected onto our metallic objects. As you can see, it makes a HUGE difference to quality of the final render and really shows off the textures created by Ayesha!

Symbols also appear to light up the compass. This is achieved not with light sources, but again with reflection probes. It is a very simple cheat that reduces the need to manually animate a light for every single symbol. I use it here more for speed of implementation, rather than accuracy as everything just works out of the box without the need to click anything or add animations/scripts.

Above is a spherical reflection probe placed in the scene, matching the shape of the compass for most accuracy in the projection, to get high detail reflection on the compass. We can even make the reflections project onto other objects behind the compass, as seen by the exaggerated effect in the GIF above. But of course we don’t do that as it looks unrealistic. Not to mention it makes the whole scene look illuminated by gold light.

Finally, I drew this, as inspired by our reference compass concept all the way back in week 2.

This was again layered over the compass surface. We added an animation to the glow effect. I thought it ended up looking pretty cool.

I wanted to push it further by making the lines streak across the surface instead of having the whole thing be one image, but it is a complex effect that requires a deeper understanding of shaders. Thus, that is something for another time.

Finally it was time for the most fun part!

Rendering the final output

Rendering is normally a painful, long and tedious process of lots of waiting and then fixing mistakes, then more re-rendering and waiting.

However, since we moved our pipeline to a game engine, we do not have to worry so much as rendering is done in real-time, which means it renders “instantly”, in minutes instead of hours. Many of the changes made were done just today at the last minute, and we can still make changes without worrying about rendering times.

This also allows us to render both videos at full resolution for Media Art Nexus and Elphi in less than 30 minutes! Amazingly fast, isn’t it?

For the final output, I render out to an image sequence and tested with two formats:

PNG 8 bit

EXR 32 bit

Unfortunately, the EXR 32 bit format (left) had strangely lower saturation levels. It was had less orange and brighter than our intended composition, so we have to stick with PNG sequence for now.

A total combination of 9 GBs of images sit on my computer now.

I learnt a shortcut in Premiere, and that is you can import image sequence easily with one click by using Ctrl+I and then Ctrl+A to select all images. Previously I used a painful process of manually dragging 1000 images at once which lagged the software.

With rendering done, we could finally take a breather.

Here are some still frames from the render:

I think it is really cool to see how far the project has come and how ambitious I feel we were to try out so many various concepts:

Sand simulation

Realistic worn-down metal rendering

Volumetric Lighting

Architectural panels

Decals & Reflections for higher quality finish

Animated glowing symbols & VFX

Aspect Ratio Independent Rendering: Achieving Dynamic resolution in real-time

Lastly, one of the cool things of having real-time dynamic resolution is being able to do this:

Above, you can see me previewing the composition in real-time as it is playing and rendering, all while I am cycling through the different aspect ratios, and the render doesn’t break. The GIF above is a single video capture. I did not edit the video above other than to add the texts at the bottom. This is insanely cool if you ask me.

Any time in my workspace, I am able to switch to any of the aspect ratios for our rendering needs:

• Media Art Nexus, 8:1
• Changi, 11:2
• Elphi, 4:1
• HD, 16:9

How this was done was pretty simple:

I first made sure i supported the widest aspect ratio for MAN, scaling up the lights. Since I used scripts to animate the lights, and I predicted this would happen many weeks ago during the final render, it was not an issue to just increase the number of horizontal lights in the scene. The script takes care of animation.

The camera is also tricky – the wider the aspect ratio, the larger the field of view captured that it can distort the ends of the captured render due to perspective. However, this did not turn out to be a big issue, so I did not spend time to address this.

With just a few clicks and object duplication in the scene, we now have a single scene that is compatible with multiple aspect ratio. Any time we change an animation, move an asset, it updates for the MAN and Elphi and Changi scene outputs when we render them. And at anytime, we can preview ANY of the resolutions while we are working, to check and see if the scene breaks anywhere.