Programatically defined (generative) geometries with an API suited for generative art - in your browser! 🎉
Press regenerate scene to generate a new goemetry. Generated one you like, have you? Save the random seed value from the ui - return to your favorite and export it for 3d-printing! ⭐
Retrace.gl is an SDF sculptor software and physically based path tracer written in webgl2/glsl. It has a declarative scene API geared towards generative art, with support for dynamic composition of SDF CSG's (Constructive Solid Geometries composed of Signed Distance Functions), using a Javascript API.
You can also export your SDF composition as a regular mesh in STL-format, ready for 3d-printing:
I've long had the idea of creating complex geometry programatically and generatively - so I wrote this software :) I mostly use it to 3d-print "sculptures" and render goofy images. Have fun using it!
A "Constructive Solid Geometry" composed of "Signed Distance Functions" sounds a bit daunting, but is a "simple" way of representing more or less complex unions, intersections and differences of primitive geometries, suitable for ray marching.
If you haven't heard about this concept before I can recommend Jamie Wong's great article "Ray Marching and Signed Distance Functions" which explains SDF's and the composition of them in the context of ray marching using GLSL shaders.
The purpose of retrace.gl is to simplify the creation of these objects, by providing a declarative API suitable for generative work.
The scene API is fully documented here.
More info coming shortly.
The most important part to note about the editor is the random seed value which determines the outcome of the random family of functions in the API. This enables you to recreate a generated / random scene - just use the same seed value! See the SDF example in the header for more details.
- GPU implementation via webgl2
- Renders signed distance functions, triangles, spheres and volumes
- Signed distance function constructive solid geometry bool operations (unions, differences and intersections) declarative API
- Boolean SDF CSG operations (union, difference and intersection) implemented with all variations thereof from the hg_sdf library (stairs, columns, round, chamfer, etc.)
- Domain deformations for SDF's (repeat, twist, etc.)
- Deformation maps & functions for SDF's
- SDF rendering mode for performance
- Ray trace your SDF CSG creation
- Export your SDF creation as an STL mesh file
- Wavefront .obj model support (partial - no mtl support)
- Smooth/flat shading of .obj models
- Lambert, metal, dialectric, clearcoat & emissive materials
- Regular & dynamic textures
- Normal maps
- Bounding Volume Hierarchy (BVH) acceleration (many, many thanks to Erich Loftis for helping me out with this), including for SDF's
- Isotropic (homogenous) & anisotropic (inhomogeneous) volume support
- Realtime mode with a positionable turntable camera (moving the camera updates camera definition in scene description)
- Depth of field
- 3d texture support for volumes
- Syntactically sugared declarative API with an integrated source editor
- Scene description sources support the latest ES features (including pipes!) via Babel
- ...probably some other stuff I can't think of now :)
The scenes below demonstrate the capabilities of retrace.gl. Look below for scenes demoing single features for easy reference.
NOTE: Example scenes should manage ~10-15 fps in realtime mode on newer integrated GPU's (i.e. macbook pro 2017). Users of dedicated GPU's shouldn't need to worry.
You should primarily run this app on newer versions of Chrome. Newer versions of Firefox should do as well, but haven't been tested with all scenes. Mobile support is nonexistent.
WARNING! Some scene shaders will unfortunately take too long to compile on Windows environments due to the use of ANGLE instead of a native OpenGL implementation, especially if you're ray tracing SDF's. This will most likely crash your browser - beware!
Note: to ray trace this scene, change render mode in the app ui
Note: to ray trace this scene, change render mode in the app ui
Note: to ray trace this scene, change render mode in the app ui, but beware that this scene is particularly resource intensive and may crash your browser
Note: to ray trace this scene, change render mode in the app ui
Note: to ray trace this scene, change render mode in the app ui
Note: to ray trace this scene, change render mode in the app ui
Note: to ray trace this scene, change render mode in the app ui
Example exported .STL file from the above scene
Note: to ray trace this scene, change render mode in the app ui
Note: to ray trace this scene, change render mode in the app ui
Note: to ray trace this scene, change render mode in the app ui
Note: to ray trace this scene, change render mode in the app ui
NOTE: this scene may take up to 20s to load as the 3d texture is generated on the fly in the main thread.
- Fix syntax highlighting
- Automatic bounds calculation for SDF exports
- Rasterization rendering mode (export SDF content etc. as meshes automatically before rendering everything). Would allow for more complex SDF CSG's.
- Handle animations? Maybe a scene definition per frame or something.
- Better error handling/reporting
- GLTF model support
- Ping-pong feedback support for dynamic textures
- Per pixel camera transforms & other crazy stuff :)
- Overhaul of materials
For development release & a Webpack dev server @ http://localhost:8080/:
$ npm install ; npm run startFor production release:
$ npm install ; npm run buildThis app would not be possible without the efforts of the following people and groups, who have freely published their work in the domains of ray tracing and signed distance functions, many thanks!
-
Peter Shirley for his book series "Raytracing in one weekend", without which this app wouldn't exist.
-
Inigo Quilez, creator of Shadertoy and prolific computer graphics programmer & writer. Check out his articles on everything from SDF's, raymarching to ray tracing.
-
Demo scene group Mercury, who's hg_sdf library powers this engine's SDF CSG boolean operations. And Jeremy Cowles, for the WebGL port of the same library.
-
Thomas Hooper, for his glsl-marching-cubes implementation which this engine uses for exporting SDF CSG's.
-
Erich Loftis, for the BVH acceleration structure implementation that made this project possible in its infancy. Check out Erich's ThreeJS path tracer here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent