Nuclear Throne Tunnel

I’m a huge Nuclear Throne fan. Ever since I first played the game, I’ve always wondered how they created the level transition effect. It’s this crazy spinning vortex thing that looks like 2D pixel-art but simultaneously looks 3D (and has what appears to be some faked version of 3D lighting). Here’s a video of the effect:

I still don’t know how the Vlambeer devs did that effect, but I decided to try to recreate it in Shadertoy. At first I tried doing it in 2D by coding a spiral and shading the center. This turned out to be pretty cool but wasn’t really what I was going for.

vortex.PNG

Here’s the code for that, in case you were curious. The end effect is pretty different from the one I was going for, but I’m pretty pleased with the technique I came up with for drawing the spiral.

I decided to see if anyone else had attempted the same effect and ended up stumbling upon a shader by a user named AntonOTI that attempted the effect using raymarching (which I had only just learned about at that time). Although his attempt wasn’t exactly what I was looking for either, I could tell it was a step in the right direction:

antonoti.PNG

Although the texturing and the lighting are not correct in the above attempt, he was definitely not too far off. It took me a single look at that shader to realize that the effect would be far easier to achieve in 3D and that a raymarched solution was the way to go.

Anyway, I ended up rewriting my shader from scratch and essentially performed raymarching through a winding tunnel. I then borrowed some of the spiraling logic from my 2D attempt to do the texturing and did some naive darkening based on the distance from camera. The shader as a whole was pretty complicated and I’ll probably write a more in-depth blog entry at some point going over the math, but for now, you can see the final animated result here.

nt_tunnel.PNG

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s