Dspbr-pt NPM | npm.io

Enterprise PBR Sample Renderer (Demo | Validation Report)

A WebGL2 path-tracer implementing the Enterprise PBR Shading Model (DSPBR).

Overview

Browser-based, unbiased* GPU path-tracing
Three.js compatibility
- The renderer loads the three.js scene group format
- The interface is similar to WebGLRenderer
When fed with glTF via three.js GLTFLoader it supports most of the new glTF PBR Next material extensions and wip extension proposals (marked as PR below). All of the mentioned extensions are implemented in terms of the Enterprise PBR specification. If you're interested in equations head over to the spec repo and check our latest specification document. If you're looking for code, dspbr.glsl should give you most of the relevant pieces.

Validated against the official Dassault Systèmes Stellar renderer for the available set of validation scenes. Currently, this only covers a subset of the material features.

Caveats
The renderer serves as a fancy wrapper for the Enterprise PBR Shading Model code sample, performance is not a priority. Some major limiting factors are
Naive single-level BVH acceleration structure which is slow and prohibits dynamic scenes.
Plain WebGL2 for accessibility reasons. Implied API limits and required overhead in shader complexity to make "arbitrary" scenes with texturable PBR materials work for path-tracing is insane and a major performance drag.
No light importance sampling. Expect a significant amount of slow-converging noise for high frequency lighting scenarios and rough materials.

Installation

npm install dspbr-pt

Example

import { PathtracingRenderer, PerspectiveCamera, Loader} from 'dspbr-pt';

let renderer = new PathtracingRenderer(canvas);
let camera = new PerspectiveCamera(45, canvas.width/canvas.height, 0.01, 1000);

const normalizeSceneDimension = true; 
const scenePromise = Loader.loadScene(scene_url, normalizeSceneDimension);
const iblPromise = Loader.loadIBL(ibl_url);

Promise.all([scenePromise, iblPromise]).then(([gltf, ibl]) => {
  renderer.setIBL(ibl);
  renderer.setScene(gltf.scene, gltf).then(() => {
    renderer.render(camera, -1, (frame) => {
      controls.update();
      console.log("Finished frame number:", frame);
    })
  });
});

For more details, please check the demo viewer and the renderer interface implementations.