Show/Hide Mobile Menu

Procedural Terrain

27.02.2023

This is a web experience that allows you to place a procedural terrain on a surface. Tapping somewhere on the terrain immerses you in the terrain and you can look around as if it was VR. A new terrain can be generated with a tap of a button and the water level can be raised or lowered. You can also add clouds which float over the terrain.

The terrain geometry is created procedurally. The terrain texture is also procedurally generated depending on the level or slope of the terrain. It extends the shader code of an existing Three.js material. The clouds consist of a volume that is rendered using volume raycasting and a simple shading model.

The experience is cross platform and works on phones, VR headsets and desktops.

Technologies Used
Three.js, GLSL, WebXR
AR version on an Android phone
VR version on a Quest 2