manyworlds 🌌✨🪐👽
A visual study of signed distanced functions and noise fields in WebGL.
Signed Distance Functions are fun. With them, you can compute the distance to an object in a metric space, provided you have a function to describe that object's volume. When used alongside Ray Marching techniques, you can render views of these 3D objects as seen through a 2D plane. This project is an experiment in combining this method with noise fields, through which these views can be manipulated and distorted.
See experiment: manyworlds.neef.co
(The site is quite GPU intensive. Try running it in a smaller window if the framerate is low)
Project setup
This project is a simple single-page app built with TypeScript & Preact, and bundled with Snowpack & esbuild. The WebGL scene is rendered by a custom renderer component that uses React/Preact hooks to create and manage a WebGL context. The renderer can accept shader uniforms, a fragment shader as a glsl string, and an onFrame callback used to update the uniforms and other attributes of the sketch. If you pass it all of these things you've made yourself a WebGL scene! The interfaces for the renderer and callback props can be found in the component's file.
Tools
- Preact — Teeny React-like library
- Snowpack — ESM-first build tool
- esbuild — Blazing fast bundler
- glslify — Enables importing inside glsl
Getting Started
To get started on your device, fork this repo and run npm install && npm run start to set up the (lightning fast, thanks to Snowpack) dev server.
Fast refresh dev server workaround
As a workaround for an issue that causes builds to fail, I've disabled Fast Refresh (via prefresh) by commenting out the appropriate lines in snowpack.config.js and .babelrc.
Resources
The resources that I've found valuable regarding shaders, Ray Marching, SDFs are:
- The Book of Shaders
- WebGL Fundamentals
- Inigo Quilez's website (where the functions for the 3d
sdShapesin this repo come from) - Jamie Wong's Ray Marching and SDF blog post
- Yuri Artyukh's Ray Marching video tutorial
License
This repo is GNU Licensed.