itch.io is community of indie game creators and players

Devlogs

Post Mortem

Shader-based procedural terrain
A browser project made in HTML5

Initially I started by actually modifying the vertices the mesh, but it was super slow even though I had only implemented the "base" noise layer. (~90fps)  I decided to re-implement it to shader graph and got a significant performance improvement (~130fps with all 3 noise channels, colours, and post processing!). 

The terrain is actually just a flat plane with a bunch of subdivisions. The displacement and coloring is all achieved via Unity shader graph:

The heightmap for the terrain is made up of 3 channels of fractal noise, dubbed the "base", "mountains", and "valleys" in the interactible version. 

The base terrain is just 5 octaves of perlin noise stacked on each other, whereas the mountains and valleys just uses 2 octaves and uses 2 × |0.5 - noise| to make a cusp.

Each noise channel is finally raised to a power to exaggerate the steepness (steeper areas get even steeper, flat areas get flatter).


The colours are blended based on world space y coordinates & the steepness (grass, snow, and sand can only appear in flat areas).

The water shader uses camera depth for the colors and simple noise for the ripples. I didn't do caustics and distortion because the camera isn't going to be close up anyway.


Resources:

https://github.com/sergiobd/FractalNoise

https://www.gamedev.net/forums/topic/646350-perlin-noise-for-rivers/

https://www.redblobgames.com/maps/terrain-from-noise/

Download Shader-based procedural terrain
Leave a comment