About the Project

by Amy Retzerau

BlueSky


First of all, the shaders used in this scene were written by myself :D I'm pretty happy with the result and I even got mentioned in an article at the end. Thx alot to Simon Trümpler <3.

Below you can read what inspired me to do this project, how I did it and what resources I used for the effects. And of course what I learned.
The effects I'm going to describe are:

What was my motivation?

I love the idea of web-based games and services because everyone can try them out without any hassle and the barrier of downloading something is removed. Or is it removed?
But unfortunately, good-looking 3D experiences with envoirements are hard to implement. In my previous projects with my former employer, we still tried and used the light mapping approach to implement a demo VR shopping experience. Although this obviously solved the problem of realistic lighting, it had a huge side effect. Due to the size of the resources, the loading times were immense. So a big advantage of choosing the web as a platform was lost.
Nevertheless, I personally wanted to get closer to this dream, so I started to explore the possibilities of real-time lighting. That's how I ended up here, exploring ground-up shaders.

Lighting model

I'm using the good old phong lighting. On the hand, I started this project with the help of the book "GLSL Essentials" by Jacobo Rodríguez ,and he did a good job of introducing it. On the other hand, because I didn't have time to look deep enogh into it, to fully undestand the math and I'm not a fan of copying math functions.
I also added some fresnel for stylisation, one source was this article by David Lettier.

Normal Maps

Something that hit my by suprise and I didn't thought of as a problem. But it was, so I learned about tangent space. Again I appreciated the help of David Lettier.

Deferred lighting

One goal from the start was to be able to use a lot of lights, so that wouldn't be a problem in atmospheric scenes. This was the reason for looking into deferred lighting. I was very happy to find this handy tutorial by Joey de Vries.

"Volumetric" Fog

A volumetric fog would be nice for the ambience, but true volumetric fog with shadow cameras and depth testing isn't an option for webgl or so many lights. So I was quite happy when I found this simplified solution by Isaac Dykeman. Rendering at full resolution was still too expensive, so I did an extra pass at a lower resolution. I was also able to adjust the math to compensate for a height limit to keep the fog low.

Terrain

It's (obviously) a vertex shader, that displacing the vertices based on a heightmap with scrolling uvs. I blurred it a bit in the distance to reduce flickering and created normals based on the heightmap. The map is generated with a ractal Brownian Motion and turbulence. The last part I learned from the fantastic The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe.

Skinning

A scene without a cute, or whatever I can archive, character wouldn't be half as appealing, but a character needs animation. And since Three.js already has support for skinned animations with animation textures, I decided to go down that route with the help of this article.

Shadow mapping

The fox always looked somewhat floating, I thought about using a fake shadow, because setting up shadow cameras for every light wouldn't run at all. But than I thought about just using one orthographic camera for all the lights, and guess what, it works. Thanks to this tutorial, the only problem I had to work around, was my deferred lighting setup. I solved this by first applying the shadow camera's projection and view matrix to each fragment of the lighting pass. But I ended up adding another output to the model renderer before the lighting pass, containing the calculated frustum position.

Shell Texturing

At this point I started to take a step towards visual effects. To give the furr at least some depth, I used shell texturing. The inspiration for this effect came from a YouTube Video by Acerola.

Flames on the fox - triplanar mapping - noise fields

Because of my growing interest in vfx, I read a few articles on the subject, including The Divine Fire by Simon Trümpler. It covered the use of triplanar mapping to texture something for vfx without using a secound uv map. Now I knew how to map something, but had no texture to map. Luckily I read this article about noise fields and how to create generative art. So I got my inspiration for these flames. But rendering them in reatime was impossible, so rendering them into a flipbook was the solution.

Volumetric Flames - Stencilbuffer - uv distortion

Another VFX trick from Simon Trümpler! In his article Pokémon – Rapidash, he explains how to combine a simple volume with a stencil to create a neat flame. For the volume I used the flame texture of the fox, but I had no nice single flame shilloute. Guess what, this problem was solved by yet another article by Simon Trümpler. Specifically, his talk at the ADDON Conference, where he describes how to create a flame with some uv distortion based on noise. Combining the two, I created this lovely flame.