manyworlds 🌌✨🪐👽

A scifi-inspired 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 various noise fields, to manipulate and distort these views. This project is named after the Many-worlds interpretation in quantum physics. Nerdy inspirations include science fiction book covers and visualisations.

See experiment: manyworlds.neef.co

Sharing and saving

Manyworlds uses a seeded random number generator. Clicking the share button on the site will give you a link that includes the seed for the current "world", allowing it to be revisited. Some of my favourites can be visited with the below seeds.

• aedc2b2763d21576c3e58334
• b8f7732621222ffe4ee61b4
• c9ab3868a581992c1e6d8610
• 27d5b2aa7e5ad81ee87a9912
• 4d61edfd31b4a14772b2c44

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. 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

This will set up the dev server, and you should be good to go.

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 sdShapes in 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.