Show/Hide Mobile Menu

Infinite Landscape

17.08.2025

I did this project to learn more about ray marching. It's a niche rendering method that's somewhere between rasterization - the standard way of rendering real-time graphics and ray tracing. A ray is "marched" out into the scene and at each step it queries a series of signed distance functions that return the nearest distance to the surface. So instead of working with meshes and textures you work with mathematical functions. You are limited to primitives because you have to find a mathematical function that describes the shape but you can also do landscapes using noise.

Technologies Used
GLSL fragment shader, Three.js
Infinite Landscape

The texture of the landscape depends on the slope and height. Water consists of a reflective surface using real reflections which are not that hard to do with ray marching. The clouds are a noise texture on a 2D plane. I felt that volumetric clouds would be too heavy on the GPU. The sun rises and falls frequently exaggerating the passage of time. The whole thing is written as a GLSL fragment shader.

It's quite heavy on the GPU so if you have a discreet GPU on Windows it's a good idea to force your browser to use it. You can do this by going to the Settings App > System > Display > Graphics, search for your browser under "Customised settings for applications" and set GPU preference to High Performance and restart your computer.