Experiment with Silent Hill 3 like texture effects
I recently played through Silent Hill 3 and enjoyed it a lot. The story itself ended up taking the passengers seat as I was mostly soaking up the environments and atmosphere, in which I think the game really excelled in.
The environments and visual style felt very atmospheric and unique and I hadn’t seen anything quite like it before. To me it wasn’t really the monsters that I was spooked by but the places themselves. The creepiest moments were usually ones with no monsters around. Listening to the soundscape.
I grew up in the countryside and one of my favorite memories is running around with friends exploring old dilapidated buildings and farming facilities. Vividly imagining what sinister things might be taking place in those dark, cramped and dusty places. As I was playing SH3 that same familiar feeling came back.
Some of my favorites were Hilltop Center, alternate Brookhaven Hospital and the church at the end.
Brookhaven and the church especially had some really memorable texture effects that made the environment come alive and inspired me to further study them for fun. :)
In the below image from SH3 you can see what I’m calling the boiling skin effect transitioning into a bloody blob effect.
Unfortunately there is very little info about the techniques behind these effects anywhere. The SH3 making of documentary does however have a brief bit with the game running and a debug view visible:
Lots of good information here! We can see some blue blobs moving about on the lower right and what appears to be a mask texture on the left (we’ll come back to that later). With the blue blob texture and an observation from the first image that the pattern on the wall appears to be repeating, we can make a guess that they could be rendering animated blobs to a texture and tiling that across surfaces.
That’s what I decided to try first. I animate blobs by generating a random target point for each blob and then moving towards that. Target points are chosen so that the blobs don’t wander off too far from the visible area. After experimentation I ended up generating Bézier control points for the movement as I liked how that looked but there are many ways of animating the blob movement.
Next step is to render the blobs to a texture. For each blob, I render a quad of varying size with a airbrush like texture stretched across it to a offscreen render target. I used a texture because I was planning on experimenting with other shapes but the basic round shape ended up working well enough. The result is a black and white texture like this:
Looks pretty boring. But if we don’t do a full clear each time we begin to render the texture we get a trailing effect like so:
Much better already! The partial clear is achieved by rendering a semi-transparent white quad over the whole texture. By controlling the opacity of the clear we can make the result more blobby or smeary.
As you can see, the blobs wander in and out of the visible area. This was the next thing that needed addressing. Because we want the texture to tile seamlessly, we need to wrap the blobs around as they approach the edge of the visible area.
I did this in the most straight forward way possible and just render multiple blob quads for each blob that needs to be wrapped and let the graphics hardware clip them to the visible area:
In the third case one blob will generate 3 more blobs due to wrapping.
Tiling this texture across objects looks like this:
Now, to make it look like blood, we need to color this. The reason I don’t render into the blob texture with color right away is to have greater control over how the shape and colors change when a blob fades away. It also simplifies the process when blob shape and coloring are separated into two different steps.
Coloring is done with the hand painted gradient below. Black blobs get a red color while their fading trails go through the gradient eventually fading out. I really like using color gradients like this because it’s a very fast and intuitive way to tweak colors.
With coloring, the effect now looks like this:
That’s blood! A cool but unintentional feature are the drip trails seen on the lower part of the image. Those are due to small blobs moving so fast that they jump across their path instead of smoothly moving.
This is where I initially left off but a couple of days ago came back to it as I wanted to try out the last part of the effect. SH3 uses a blur effect a lot and I really liked how it looked. Without spoiling anything too much, sometimes in the alternate otherworld versions of environments everything is smeared in this animating hazy substance. The blur effect especially looked very interesting and gave a very surreal feel to things. Because it’s hard to discern any details it gives room for your imagination. It’s a very unique effect.
This comes back to the second image up top with the debug view visible. The texture on lower left is most likely a mask texture used to perform a fullscreen blur pass over the final image, giving a hazy appearance to areas specified in the mask.
The task is then pretty straight forward; First I render a mask texture for the fullscreen blur:
This is almost like what we had before coloring the blobs. Light areas receive more blur than dark.
Then the scene is copied to a texture, downscaled a couple of times and a Gaussian blur is performed on it. This gives us something like the following:
I then blend this blurred texture over the original crisp scene using the mask texture and that leaves us with the following effect:
Overall I’m pretty happy how it turned out. Although visually not exactly like what is in SH3, it’s close enough and with some additional tweaks could be made similar.
It’s performance friendly too, around 0.2ms on my machine with over a half of that going into performing the gaussian blur. Due to it being just a single tiling texture the performance is also mostly independent of the complexity of the rest of the scene. One downside is that the tiling is sometimes very apparent depending on how the blobs are positioned. But this is the case in SH3 too and can be remedied by tweaking texture size and tiling factor.
Thanks for reading! :)