Star Wars: X-Wing from The Force Awakens

GLSL Shadertoy Shader

When I first watched The Force Awakens I saw the scene where a group of X-Wings flew down a river, kicking up water spray behind them. And now I’ve created a GLSL shader inspired by it!

Trying to get the correct scale modelling the X-Wing was initially quite tricky, but then I found the Lego X-Wing build instructions – MUCH better than any schematic! Counting the Lego ‘studs’ gives a very easy to follow guide on the size of each dimension!
I’m definitely going to be using this trick again in the future…

The water surface is simply a flat plane with some ‘bump’ added to the material (Just displacing the X/Z components of the normal). This in itself is quite effective, but adding the reflection of the sky (including atmosphere and clouds) really adds a level of realism.

Note: It would be just as easy to displace the water surface in the SDF function, but that would take longer for the marched ray to converge on the surface, incurring a slight FPS hit.

The mountains in the distance are modelled as a infinite cylinder with a FBM displacement applied to it. I usually model these things as a flat plane with a displacement, but that introduces many rendering artefacts that require shortening the ray marching step size to remove. Modelling as a cylinder reduces these artefacts, and helps keep the performance as high as possible.

…And of course, I couldn’t miss out BB-8!

The scene uses depth of field, fish eye lens, and chromatic aberration to add some subtle finishing details.

The GLSL shader source can be found here and here.

But Can It Run Crysis?

GLSL Shadertoy Shader

For years now I’ve loved the Crysis games, and so I’ve finally created a small tribute.

The recently release ‘Remastered’ version introduced ray tracing, which really added some impressive detail, especially in reflections. My GLSL version also implements reflections, and is completely procedural – Both the texture and models are generated using math.

These scene uses depth of field, fish eye lens, and chromatic aberration to add some subtle finishing details.

The GLSL shader source can be found here and here.

Aliens (Scanner scene)

GLSL Shadertoy Shader

Another Aliens-themed shader, motivated by me watching this clip from the movie.

I try to add add something new each time I make a shader, and this time it was the ‘frost’ effect on the cryo pod and the noise in the ‘laser’.

The reflective helmet glass and laser effect were calculated using ray-sphere ray-plane intersections, allowing me to keep the ray-marching loop simple and fast.

The GLSL shader source can be found here.

The Exorcist (1973)

GLSL Shadertoy Shader

This is my first black and white shader, and also the first time I’ve mixed 2D and 3D content.

As ever, in an attempt to keep the code small and frame rate fast I make heavy use of domain repetition. For example, there’s actually only one window pane, and that makes all the windows on both walls!

The man is defined using 2D functions, and has a subtle animation to add some realism.

The GLSL shader source can be found here.

Happy New Year!

Innerspace (1989)

GLSL Shadertoy Shader

I challenge anyone to not like the Innerspace movie!

There’s a lot of new (to me) lighting effects in this shader. The headlights of the ‘pod’ are light cones with analytically solved ray start/end points, used to calculate the amount of ‘glow’ to apply.

I also make heavy use of domain repetition (where you use math to ‘duplicate’ regions of space) to make a whole stream of blood cells using only three modelled originals.

This is one of my longer shaders, running in at just under a minute.

The GLSL shader source can be found here.

The Alien

GLSL Shadertoy Shader

Another shader based on Alien, this one was an exercise in modelling and animation.

I started off with the dome of the head and the texture on it. It’s actually a simple gyroid pattern with a few colors mixed into it, but quite effective!

My awesome cousin (Check out his art here) gave me some tips for the animation – I added some ‘anticipation’ before the alien strikes. This means the head pulls back before striking forward, showing a build up of ‘energy’ and really improving the effect.

The GLSL shader source can be found here.

The Abyss (1989)

GLSL Shadertoy Shader

Continuing the trend of making GLSL Shadertoy shaders from my favourite films, the next on my list was The Abyss (1989).

I was stretching myself a bit with this one, practising my reflection/refraction/caustics skills whilst (as always) trying to keep a decent frame rate.

I would have loved to make the ‘face’ as good as the one in the movie, but alas the effort needed to model out far outweighed my GPU.

The GLSL shader source can be found here, and a 360° VR view here.

Dune (Sand Worm)

GLSL Shadertoy Shader

There’s a new Dune movie coming out soon, so I thought I’d make a ‘Dune’ shader (based on the 1984 version).

Nothing too complex in this scene. It’s the first time I’ve used polar coordinates in an SDF (for the teeth and mouth segments), but the landscape is just a simple FBM noise. Ripples are added outside of the SDF to keep the frame rate higher.

The GLSL shader source can be found here, and a 360° VR view here.

Silence of the Lambs

GLSL Shadertoy Shader

For this shader I wanted to write something that used textured stone walls, as I hadn’t really tried writing that effect before. The cell scene Silence of the Lambs movie seemed to lend itself as inspiration, as it would also allow me to add some cool reflections from the cell glass.

The stone pattern was made using a voronoi pattern with a couple of layers of noise on the material to add roughness. All the walls are completely flat, but when applying the material I tweak the normal vector to add dynamic highlights and shadows as the camera moves.

I’m quite pleased with the outcome, although it would have been good to add some pencil-drawn artwork onto the cell walls. Technically doable, but the scene was making my GPU groan, and I like to keep the frame rate reasonable for the majority of people.

The GLSL shader source can be found here, and a 360° VR view here.