Skip to content
Retrace.gl is a physically based path tracer written in webgl2/glsl. It has a declarative scene api geared towards generative art.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/assets Update README. Add screens. Jun 10, 2019
src Update startup defaults & readme Jun 9, 2019
.editorconfig
.gitignore
README.md Update README. Add screens. Jun 10, 2019
index.html Add bbox for volume. Volumes now semi-functioning (inside volume boun… May 13, 2019
package-lock.json Add working 3d texture volume test + working fbm rendering May 28, 2019
package.json Clean up Jun 8, 2019
postcss.config.js Initial commit Jan 15, 2019
webpack.dev.js Add code editor for scene. Add dynamic scene parser and transpiler. A… May 11, 2019
webpack.prod.js

README.md

Retrace.gl

retrace

Live demo

Retrace.gl is a physically based path tracer written in webgl2/glsl. It has a declarative scene api geared towards generative art. It is currently in a pre-alpha stage (kinda).

This project started as a glsl implementation of the path tracer described by Peter Shirley in his book "Raytracing in one weekend" - many of the techniques used here are described in Shirley's book series on ray tracing.

As this project is mainly a means to teach myself computer graphics, much of the code can probably be heavily optimized. Got tips or pointers to resources? Please let me know!

Features

  • GPU implementation via webgl2
  • Renders triangles, spheres and volumes
  • Wavefront .obj model support (partial - no mtl support)
  • Smooth/flat shading of 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)
  • Isotropic (homogenous) & anisotropic (inhomogenous) 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

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.

retrace

Live demo

retrace

Live demo

Demo scenes

Materials

retrace

Live demo

Model smooth/flat shading

retrace

Live demo

Normal mapping

retrace

Live demo

Dynamic volumes

retrace

Live demo

Tiled 3d texture volume

retrace

Live demo

Todo/ideas

  • Scene api documentation
  • Better error handling/reporting
  • GLTF model support
  • Instancing (would allow BVH caching & other nice stuff)
  • Ping-pong feedback support for dynamic textures
  • Per pixel camera transforms & other crazy stuff :)
  • SDF/raymarching support?
  • Overhaul of materials

Building from source

For development release & webpack dev server:

$ npm install ; npm run start

For production release:

$ npm install ; npm run build
You can’t perform that action at this time.