MonteRay - A Three.js pathtracing renderer

Written in 100% ES5 JavaScript using native Three.js classes and objects. This renderer has been created as an alternative to the default Three.js WebGL renderer, and will (at some future time) support most if not all Three.js scenes and materials.

Examples — API Reference

Tested on: Three.js: r112 r113 r120dev r123 r126 r128

Tested on Safari Technology Preview, Firefox Nightly, and Google Chrome Canary

NOTE: MeshBVH accelerated raycasting is only supported on Three.js r123 and later.

Features include:

• 100% ES5 Vanilla JavaScript
• Progressive rendering
• Physically accurate rendering using Monte Carlo methods
• Russian roulette path termination
• Soft shadows
• Global Illumination
• Lighting using emissive meshes instead of abstract lights
• Background environment lighting
• BVH Accelerated raycasting via gkjohnson's MeshBVHLib
• Explicit light sampling
• ... More features coming soon!

 

	Examples
Luxo Jr (single thread) Luxo Jr (4 threads)	Lighting McQueen (single thread) Lighting McQueen (4 threads)	Cornell Box (single thread) Cornell Box (4 threads)
Textures (single thread) Textures (4 threads)	Environments (single thread) Environments (4 threads)	Classic Cornell Box (single thread) Classic Cornell Box (4 threads)
Lego (single thread) Lego (4 threads !WARNING! High RAM usage!)	Light (single thread) Light (4 threads)	Renderman Look Development Studio (single thread) Renderman Look Development Studio (4 threads)

 

Usage

NOTE: MonteRay is in the beta development stage right now. Rendering quality will vary from version to version, and I will do my best to keep the API documentation up to date.

Installation

Make sure you include the following dependencies:

• three.js
• three.js MeshSurfaceSampler
• three-mesh-bvh *optional

Download the latest build of the MonteRay Client, the MonteRay Engine, and optionally the MonteRay Thread Client, and include them as an HTML script:

<script src="MonteRayEngine.js"></script>
<script src="MonteRay.js"></script>

And MonteRay is ready to use in your Three.js project:

var renderer = new MonteRay.PathtracingRenderer(options);

Or import as a module:

import { PathtracingRenderer } from "./MonteRay.module.js";

var renderer = new PathtracingRenderer(options);

Renderer options

see API Reference

 

NOTE: Make sure to include emissive materials in your scene as regular Three.js lights (AmbientLight, HemisphereLight, DirectionalLight, PointLight and SpotLight) don't work.

Supported material types

• Diffuse
• Mirror
• Refractive *experimental
• Glossy *experimental
• ... Other materials coming soon!

MonteRay.CustomMaterial (allowing for volumetric meshes like water, fog and clouds) coming soon!

NOTE: THREE.ShaderMaterial and THREE.RawShaderMaterial might not be implemented for the sake of not using WebGL.

 

Introduction

In early 2021, I was looking for a photorealistic renderer for Three.js (I decided to use Three.js because of the extensive work done to support many 3D model file formats). I came across many different options including erichlof's THREE.js-PathTracing-Renderer and hoverinc's Ray Tracing Renderer. Having no (real) experience in computer graphics, I decided to try to implement them in my projects. After reading through the code (and trying to understand as much as I could from GLSL) I realized that none of these were going to give me the compatibility and integration with Three.js I was looking for.

Needless to say, I decided to take it upon myself to create a fully-functional Three.js path-tracing renderer that uses:

1. Monte Carlo path tracing methods for most accurate results
2. Native Three.js Meshes
3. Emissive meshes as lights instead of default Three.js lights for soft shadows and projectors
4. Native Three.js raycasters to allow much easier BVH acceleration (and mainly to make it easier for myself since this is my first try at path tracing)
5. Native Three.js colors for automatic clamping and color equations

(basically as integrated with Three.js as possible)

I spent weeks learning path tracing and the best practices for path tracing, and finally–after no less than 467 failed test renders, reading through the source code of every path tracer and pdf I could find on the internet (including montelight-cpp by Smerity)–I came up with something acceptable to publish on github.

 

How it Works

In this project, I use a variety of methods to improve accuracy and speed of traditional Monte Carlo path tracing.

MonteRay divides the rendering process into two phases:

1. Pre-rendering
2. Rendering

Pre-rendering Phase

During the pre-rendering phase MonteRay analyzes the scene computing the BVH trees of all meshes and registering meshes with emissive materials for explicit lighting, then writes the depth data to the screen as a placeholder

and orders the pixels by depth to allow for closest-first rendering.

Rendering Phase

During the rendering phase MonteRay backward traces each path and averages the samples as a typical path tracer would, and displays the data to the screen after a specified interval of rendered pixels, and stops after a specified number of samples per pixel.

 

TODO

• Texture maps
  • Diffuse
  • Emissive
  • Roughness
  • Normal
    • Tangent Space
    • Object Space
  • Bump
  • Displacement
    • Per-vertex
    • Per-pixel
• Texture wrapping/repeat
  • THREE.RepeatWrapping
  • THREE.ClampToEdgeWrapping
  • THREE.MirroredRepeatWrapping
  • THREE.Texture.repeat
  • THREE.Texture.rotation
  • THREE.Texture.center
  • THREE.Texture.offset
• Texture filtering
  • THREE.NearestFilter
  • THREE.LinearFilter
• Environment maps
  • All standard images supported by browser (PNG/JPEG/etc.)
  • EXR
  • HDR
• WebGLRenderTarget/WebGLCubeRenderTarget support
• CubeTexture environment maps
• Background emissive maps and environment intensity (for non-EXR/HDR images)
• Per-material environment maps
• Standard materials
  • Diffuse
  • Specular (Mirror)
  • Clearcoat (Glossy) *experimental
  • Refractive *experimental
• Tonemapping
  • Linear *currently disabled as sRGB is the default
  • sRGB
  • Reinhard
  • Extended Reinhard
  • Extended Luminance Reinhard
  • ACES Filmic
  • Uncharted 2 Filmic
  • Cineon
• Fix double-sided surface normal calculation to avoid randomly inverted normals
• Support for raytraced primitives with a triangulated counterpart for visibility in WebGL
• Vertex colors support
• Antialiasing *background optional
• Noise reduction (through variance reduction or denoising)
• Possible support for native Three.js lights???
• Instancing support/testing (THREE.InstancedMesh)
• Skinned mesh support/testing (THREE.SkinnedMesh)
• Testing and support for:
  • THREE.OrthographicCamera
  • THREE.CinematicCamera
  • THREE.ArrayCamera
  • THREE.CubeCamera
  • THREE.StereoCamera
  • Possibly MonteRay.PanoramicCamera ???
• Global space partitioning system for accelerated raycasting across multiple meshes
• Multi-thread support via Web Worker API *Textures (except THREE.DataTexture) are not supported
  • Include support for SharedArrayBuffer to decrease redundant memory and increase performance
• Read directly from THREE.DataTexture to avoid redundant data
• Smooth shading
• Quadratic light decay/falloff
• Fog support
• Multi-material mesh support (geometry groups)
• Support for TypedArray (possibly interlaced) texture cache and output image internal storage format to save memory
• Multiple Importance Sampling for HDRIs and smarter explicit light sampling

 

License

MonteRay © 2021-2022 by Labrium is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International.