Descending invisible stairs

This is an article about the composition of the tutorial dream scene, especially of the last part of it.

Posted by on

Scene Composition

First, I want to explain the basic visuals of the scene, which consist of "normal" nontransparent geometry and the background. I wanted to have a giant eye as background that will follow your view direction.

The geometry of the level should also fade out towards a certain distance. This is especially important as you can fall off the parkour and will land on it again.

The whole fading is done in the shader of the eye, which is just a sphere with a radius of 1m that is following the camera. It rotates towards the view dir of the player with some delay

It is drawn above everything else and calculates the distance using the z-buffer. Then it adds some additional effect using a moving texture, so the fading is not simple linear at all places.

The Stairway

The tutorial ends with a scene in a cellar, that you enter by descending lots of stairs that fade in out of nowhere. The stairs and the cellar room are both normal scene geometry.

I had multiple approaches to make the cellar stairway fade in from nothingness here. The tutorial scene already has a weird setup, because of the eye background.
The stairway initially had its own shader to make it fade in. There have been several problems though as even with a near 0 opacity, you could still see a bit of the specular highlights. Fading out the smoothness of the shader as well changed the look of it too much, though.

In the end, I added the fading to the shader of the eye background sphere using additional conditions. Descreasing the opacity of the eye will fade in the cellar.
The opacity depends on the z position of the geometry and the player (camera). This finally seemed to work.

In the game, you will follow a ball down the stairs. It was supposed to be the only thing telling you that you can go in that direction in the first place.

While everything worked as expected, it didn't feel right. On one hand the "standing on air" feeling was nice. On the other hand, having nothing but a jumping ball and a rotating background as reference points was... disorienting a bit too much.

I wanted to have something on the floor that you could follow. So, I thought that some pulse effect would be nice.
It also revealed a bit more of the cellar on the inside, reducing its transparency.

It was a lot of work to get there. The pulse was added using a particle system on a separate camera and added as an input to the eye background shader. The outer ring had a different color than the inside to get the two different behaviours (opaque colored ring vs. opacity change of the cellar) in the shader.
I've also used a shader that kept the pixelization constant while the particle was resized in the system. I already had the shader as it was used in the pulse effect of the eye in the house, but I had to do some changes.

I finished the work on it, turned off the computer and soon afterwards I knew that I hated it. It didn't work. It neither had the desired effect of giving the player more reference points, nor did it look appealing to me.

On the next day, I made a video to remember it and deleted the effect from the scene.

In the first concept description of the ball, I had the point "leaves bloody prints on the floor". And I thought, that this could be something that could work. Leave something behind that stays. I... might have overdone it a bit with the blood, though.

The good thing is: I could reuse some of the changes in the eye background shader to make the blood and the ball to add some special fading and make it appear above everything else. Otherwise it would fade out like the other geometry of the level and I wanted the ball to be visible from a greater distance.

The blood rivulet has some pseudo shading as the initial version was so evenly colored that you could not recognize the steps.

I will not talk about how many ridiculous methods I tried to add the shading (including modifying the normals and then calculate new vertex colors using their z component) before I remembered that it already had its own shader and I could just add it to that. Pro tip: Sleeping is not a waste of time.

The shader has some texture scrolling that is pixelized, so it does not look too smooth. However, it also has some smoother movements as well to break it up a bit.

The "Final" Result

I have rarely worked on a part that was changed as many times as this one. I'm kinda satisfied with it now, though.

After all that shader stuff, I am looking forward to doing something completely different next: Animating a cutscene.