Written by Luke, Christian and Jacob.
This project is a WebGL application that renders a scene with volumetric clouds, a realistic atmosphere, and interactive water in real-time. The project was an attempt to explore the techniques and compromises required to render realistic scenes in real-time.
- Install a recent version of Node.js
- Run
npm installfrom the project root to install dependencies. - Run
npm run devto start the development server. - Open
http://localhost:5173in your browser.
- Use WASD to move around the scene.
- Use IJKL to change your view angle.
- Use Q and E to fly up and down
- Click the surface of the water to create a ripple.
- Scroll the page to change the sun’s position in the sky
The wave equations for the water were (very loosely) based on an implementation by Amanda Ghassaei.
The atmosphere raytracing is adapted from code published in Precomputed Atmospheric Scattering: a New Implementation by Eric Bruneton, which is based on an earlier paper, Precomputed Atmospheric Scattering, by Eric Bruneton and Fabrice Neyret. We refactored the reference implementation to run as a reusble color function for an arbitrary world-space ray, but much of the core implementation remains unchanged.
Our approach to cloud raytracing is based on a 2015 SIGGRAPH presentation by Guerrilla Games. We additionally referenced this approach, which applies blue noise in order to disrupt the banding artifacts that are caused by course raymarching through the cloud volume. Finally, we credit the implementations of the noise functions we use in our clouds to Inigo Quilez and Dave Hoskins.
The birdbath model that appears in the scene is adapted from a model by Arthur Nicaise on Sketchfab.
The grass texture is from Minecraft.
Finally, we use two runtime JavaScript libraries in our code:
gl-matrixfor linear algebra and matrix operations.@gltf-transform/corefor parsing geometry and texture data from.glbfiles.