paranlee/dspbr-pt

A WebGL2 Enterprise PBR sample renderer

Enterprise PBR Sample Renderer

A WebGL2 based drag & drop glTF path-tracer which implements the Enterprise PBR material model.

Demo

Quickstart

# Installs all dependencies necessary to run and develop the renderer and viewer app  
npm install --production

# Launches the viewer in a browser with attached file watcher for auto refresh on file edits.
npm run dev

Material Model

The renderer supports the glTF 2.0 metallic/roughness model. The additional Enterprise PBR material features are supported as custom glTF material extensions glTF extension proposals

⚠️ transparency, transmission and volume not yet supported

Most of our extension proposals are already covered by pull request to the offical glTF spec

• Specular Extensions
• IoR Extension
• Sheen Extension
• Clearcoat Extension
• Transmission Extension

Summary of the extensions and change proposal to the original core spec

KhronosGroup/glTF#1738

NOTE
When disabling path-tracing, the three.js native rasterizer is used as fallback. In rasterizer mode the extensions mentioned above will be ignored.
Please have a look at this overview for comparison renderings between the two renderers for several material configurations.

Enterprise PBR - Sample Implementation

This renderer serves as a sample implementation for Dassault Systèmes Enterprise PBR material model. Please have a look at dspbr.glsl for the full material implementation.

Building

# Builds a distributable package of the viewer to ./dist
npm run build

CLI Renderer

Command-line rendering is support via headless electron

To install all required extension please run install without the --production flag

# Please note that this installs a full copy of electron with your node_modules (~+200MB)
npm install 

# Builds the cli renderer to ./dist
npm run build-headless 

# Renders an image via command-line
npm run render -- -- <scene_path> --ibl <hdr_path> --res <width> <height> --samples <num_samples>

For now, this writes the output image to ./output.png

Electron GUI

build Electron descktop GUI application

# Windows
npm install && npm run build-all && npm run package:windows

Renderer API Usage

import { PathtracingRenderer } from './lib/renderer.js';

let renderer = new PathtracingRenderer(canvas, false);
renderer.loadScene(<path_to_gltf>, function () {
      renderer.useIBL(<path_to_ibl>)
      renderer.render(-1, (frame) => {
          console.log("Finished frame number:", frame);
          stats.update();
      });
  });

Where the interface of the render function is defined as

 function render(num_samples, frameFinishedCB, renderingFinishedCB)

Please have a look at src/app.js and lib/renderer.js for more details.

Todo

Material

• Implement proper transparency and alpha mask (cutout) handling

General

• Move path-tracing renderer to plain WebGL
• Handle gltf scenes without scale normalization

Reference

• This project was inspired by Three.js glTF Viewer and the official Khronos glTF Sample Viewer.
• Env maps from HDRIHaven.