Skip to content

Create, ray trace & export programatically defined Signed Distance Function CSG geometries with an API suited for generative art - in your browser! πŸŽ‰

License

Notifications You must be signed in to change notification settings

stasilo/retrace.gl

Repository files navigation

retrace.gl - SDF sculpting & path tracing app

Programatically defined (generative) geometries with an API suited for generative art - in your browser! πŸŽ‰

retrace

Live demo

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:

Printed SDF mesh

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!

SDF CSG!?

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.

Scene API documentation

The scene API is fully documented here.

Editor/app documentation

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.

Features

  • 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 :)

Example scenes

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!

SDF feature example scene 1

retrace Note: to ray trace this scene, change render mode in the app ui

Live demo

Dynamic texture, mesh rendering, anisotropic volume example scene

retrace

Live demo

Wavefront .obj model & normal mapping example scene

retrace

Live demo

SDF feature example scene 2

retrace

Note: to ray trace this scene, change render mode in the app ui

Live demo

Scenes demonstrating features

Material show case (and a little depth of field)

retrace

Live demo

SDF geometries show case

retrace

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

Live demo

SDF union operators show case

retrace

Note: to ray trace this scene, change render mode in the app ui

Live demo

SDF difference / subtract operators show case

retrace

Note: to ray trace this scene, change render mode in the app ui

Live demo

SDF intersection operators show case

retrace

Note: to ray trace this scene, change render mode in the app ui

Live demo

SDF export mesh example

retrace

Note: to ray trace this scene, change render mode in the app ui

Live demo

Example exported .STL file from the above scene

SDF glsl displacement function example

retrace

Note: to ray trace this scene, change render mode in the app ui

Live demo

SDF displacement map example

retrace

Note: to ray trace this scene, change render mode in the app ui

Live demo

SDF domain op example

retrace

Note: to ray trace this scene, change render mode in the app ui

Live demo

SDF domain repetition show case

retrace

Note: to ray trace this scene, change render mode in the app ui

Live demo

Model smooth/flat shading

retrace

Live demo

Normal mapping

retrace

Live demo

Dynamic volumes

retrace

Live demo

Volume texture FBM

retrace

NOTE: this scene may take up to 20s to load as the 3d texture is generated on the fly in the main thread.

Live demo

Tiled 3d texture volume

retrace

Live demo

Todo/feature ideas

  • 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

Building from source

For development release & a Webpack dev server @ http://localhost:8080/:

$ npm install ; npm run start

For production release:

$ npm install ; npm run build

Credits

This 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!

About

Create, ray trace & export programatically defined Signed Distance Function CSG geometries with an API suited for generative art - in your browser! πŸŽ‰

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published