three-gpu-pathtracer 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-gpu-pathtracer",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Path tracing renderer and utilities for three.js built on top of three-mesh-bvh.",
   "module": "src/index.js",
   "main": "build/index.umd.cjs",
@@ -32,6 +32,7 @@
     "three-mesh-bvh": "^0.5.19"
   },
   "devDependencies": {
+    "@lookingglass/webxr": "^0.3.1",
     "canvas-capture": "^2.0.5",
     "eslint": "^7.32.0",
     "eslint-config-mdcs": "^5.0.0",

package/src/core/PathTracingRenderer.js

@@ -1,8 +1,11 @@
-import { RGBAFormat, FloatType, Color, Vector2, WebGLRenderTarget, NoBlending, NormalBlending } from 'three';
+import { RGBAFormat, FloatType, Color, Vector2, WebGLRenderTarget, NoBlending, NormalBlending, Vector4 } from 'three';
 import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
-import { BlendMaterial } from '../materials/BlendMaterial.js';
+import { BlendMaterial } from '../materials/fullscreen/BlendMaterial.js';
 import { SobolNumberMapGenerator } from '../utils/SobolNumberMapGenerator.js';
 
+const _scissor = new Vector4();
+const _viewport = new Vector4();
+
 function* renderTask() {
 
 	const {
@@ -12,10 +15,13 @@ function* renderTask() {
 		_primaryTarget,
 		_blendTargets,
 		_sobolTarget,
+		_subframe,
 		alpha,
 		camera,
 		material,
 	} = this;
+	const _ogScissor = new Vector4();
+	const _ogViewport = new Vector4();
 
 	const blendMaterial = _blendQuad.material;
 	let [ blendTarget1, blendTarget2 ] = _blendTargets;
@@ -24,20 +30,22 @@ function* renderTask() {
 
 		if ( alpha ) {
 
-			blendMaterial.opacity = 1 / ( this.samples + 1 );
+			blendMaterial.opacity = this._opacityFactor / ( this._samples + 1 );
 			material.blending = NoBlending;
 			material.opacity = 1;
 
 		} else {
 
-			material.opacity = 1 / ( this.samples + 1 );
+			material.opacity = this._opacityFactor / ( this._samples + 1 );
 			material.blending = NormalBlending;
 
 		}
 
+		const [ subX, subY, subW, subH ] = _subframe;
+
 		const w = _primaryTarget.width;
 		const h = _primaryTarget.height;
-		material.resolution.set( w, h );
+		material.resolution.set( w * subW, h * subH );
 		material.sobolTexture = _sobolTarget.texture;
 		material.seed ++;
 
@@ -45,6 +53,7 @@ function* renderTask() {
 		const tilesY = this.tiles.y || 1;
 		const totalTiles = tilesX * tilesY;
 		const dprInv = ( 1 / _renderer.getPixelRatio() );
+
 		for ( let y = 0; y < tilesY; y ++ ) {
 
 			for ( let x = 0; x < tilesX; x ++ ) {
@@ -73,8 +82,12 @@ function* renderTask() {
 
 				material.setDefine( 'CAMERA_TYPE', cameraType );
 
+				// store og state
 				const ogRenderTarget = _renderer.getRenderTarget();
 				const ogAutoClear = _renderer.autoClear;
+				const ogScissorTest = _renderer.getScissorTest();
+				_renderer.getScissor( _ogScissor );
+				_renderer.getViewport( _ogViewport );
 
 				let tx = x;
 				let ty = y;
@@ -91,18 +104,48 @@ function* renderTask() {
 				// three.js renderer takes values relative to the current pixel ratio
 				_renderer.setRenderTarget( _primaryTarget );
 				_renderer.setScissorTest( true );
-				_renderer.setScissor(
-					dprInv * Math.ceil( tx * w / tilesX ),
-					dprInv * Math.ceil( ( tilesY - ty - 1 ) * h / tilesY ),
-					dprInv * Math.ceil( w / tilesX ),
-					dprInv * Math.ceil( h / tilesY ) );
+
+				// set the scissor window for a subtile
+				_scissor.x = tx * w / tilesX;
+				_scissor.y = ( tilesY - ty - 1 ) * h / tilesY;
+				_scissor.z = w / tilesX;
+				_scissor.w = h / tilesY;
+
+				// adjust for the subframe
+				_scissor.x = subX * w + subW * _scissor.x;
+				_scissor.y = subY * h + subH * _scissor.y;
+				_scissor.z = subW * _scissor.z;
+				_scissor.w = subH * _scissor.w;
+
+				// round for floating point cases
+				_scissor.x = _scissor.x;
+				_scissor.y = _scissor.y;
+				_scissor.z = _scissor.z;
+				_scissor.w = _scissor.w;
+
+				// multiply inverse of DPR in because threes multiplies it in
+				_scissor.multiplyScalar( dprInv ).ceil();
+
+				_viewport.x = subX * w;
+				_viewport.y = subY * h;
+				_viewport.z = subW * w;
+				_viewport.w = subH * h;
+				_viewport.multiplyScalar( dprInv ).ceil();
+
+				_renderer.setScissor( _scissor );
+				_renderer.setViewport( _viewport );
+
 				_renderer.autoClear = false;
 				_fsQuad.render( _renderer );
 
-				_renderer.setScissorTest( false );
+				// reset original renderer state
+				_renderer.setViewport( _ogViewport );
+				_renderer.setScissor( _ogScissor );
+				_renderer.setScissorTest( ogScissorTest );
 				_renderer.setRenderTarget( ogRenderTarget );
 				_renderer.autoClear = ogAutoClear;
 
+				// swap and blend alpha targets
 				if ( alpha ) {
 
 					blendMaterial.target1 = blendTarget1.texture;
@@ -114,7 +157,14 @@ function* renderTask() {
 
 				}
 
-				this.samples += ( 1 / totalTiles );
+				this._samples += ( 1 / totalTiles );
+
+				// round the samples value if we've finished the tiles
+				if ( x === tilesX - 1 && y === tilesY - 1 ) {
+
+					this._samples = Math.round( this._samples );
+
+				}
 
 				yield;
 
@@ -124,8 +174,6 @@ function* renderTask() {
 
 		[ blendTarget1, blendTarget2 ] = [ blendTarget2, blendTarget1 ];
 
-		this.samples = Math.round( this.samples );
-
 	}
 
 }
@@ -153,6 +201,12 @@ export class PathTracingRenderer {
 
 	set alpha( v ) {
 
+		if ( this._alpha === v ) {
+
+			return;
+
+		}
+
 		if ( ! v ) {
 
 			this._blendTargets[ 0 ].dispose();
@@ -171,15 +225,23 @@ export class PathTracingRenderer {
 
 	}
 
+	get samples() {
+
+		return this._samples;
+
+	}
+
 	constructor( renderer ) {
 
 		this.camera = null;
 		this.tiles = new Vector2( 1, 1 );
 
-		this.samples = 0;
 		this.stableNoise = false;
 		this.stableTiles = true;
 
+		this._samples = 0;
+		this._subframe = new Vector4( 0, 0, 1, 1 );
+		this._opacityFactor = 1.0;
 		this._renderer = renderer;
 		this._alpha = false;
 		this._fsQuad = new FullScreenQuad( null );
@@ -207,6 +269,15 @@ export class PathTracingRenderer {
 
 	setSize( w, h ) {
 
+		w = Math.ceil( w );
+		h = Math.ceil( h );
+
+		if ( this._primaryTarget.width === w && this._primaryTarget.height === h ) {
+
+			return;
+
+		}
+
 		this._primaryTarget.setSize( w, h );
 		this._blendTargets[ 0 ].setSize( w, h );
 		this._blendTargets[ 1 ].setSize( w, h );
@@ -249,7 +320,7 @@ export class PathTracingRenderer {
 		_renderer.setClearColor( ogClearColor, ogClearAlpha );
 		_renderer.setRenderTarget( ogRenderTarget );
 
-		this.samples = 0;
+		this._samples = 0;
 		this._task = null;
 
 		if ( this.stableNoise ) {

package/src/core/PathTracingSceneGenerator.js

@@ -33,7 +33,7 @@ export class PathTracingSceneGenerator {
 
 					meshes.push( c );
 
-				} else if ( c.isRectAreaLight || c.isSpotLight ) {
+				} else if ( c.isRectAreaLight || c.isSpotLight || c.isDirectionalLight || c.isPointLight ) {
 
 					lights.push( c );
 

package/src/core/QuiltPathTracingRenderer.js

@@ -0,0 +1,223 @@
+import { PerspectiveCamera, Vector3, MathUtils, Vector2, Matrix4, Vector4 } from 'three';
+import { PathTracingRenderer } from './PathTracingRenderer.js';
+
+function* _task( cb ) {
+
+	const {
+		viewCount,
+		_camera,
+		_quiltUtility,
+		_subframe,
+	} = this;
+
+	const quiltViewInfo = {
+		subframe: _subframe,
+		projectionMatrix: _camera.projectionMatrix,
+		offsetDirection: new Vector3(),
+	};
+
+	while ( true ) {
+
+		for ( let i = 0; i < viewCount; i ++ ) {
+
+			// get the camera info for the current view index
+			_quiltUtility.near = this.camera.near;
+			_quiltUtility.far = this.camera.far;
+			_quiltUtility.getCameraViewInfo( i, quiltViewInfo );
+
+			// transform offset into world frame from camera frame
+			quiltViewInfo.offsetDirection.transformDirection( this.camera.matrixWorld );
+
+			// adjust the render camera with the view offset
+			this.camera.matrixWorld.decompose(
+				_camera.position,
+				_camera.quaternion,
+				_camera.scale,
+			);
+			_camera.position.addScaledVector( quiltViewInfo.offsetDirection, quiltViewInfo.offset );
+			_camera.updateMatrixWorld();
+
+			// get the inverse projection
+			_camera.projectionMatrixInverse
+				.copy( _camera.projectionMatrix )
+				.invert();
+
+			this._opacityFactor = Math.floor( this._samples + 1 ) / Math.floor( this._quiltSamples + 1 );
+
+			do {
+
+				const ogCamera = this.camera;
+				this.camera = _camera;
+				cb();
+				this.camera = ogCamera;
+				yield;
+
+			} while ( this._samples % 1 !== 0 );
+
+			this._quiltSamples += 1 / viewCount;
+
+		}
+
+		this._quiltSamples = Math.round( this._quiltSamples );
+
+	}
+
+}
+
+// Helper for extracting the camera projection, offset, and quilt subframe needed
+// for rendering a quilt with the provided parameters.
+class QuiltViewUtility {
+
+	constructor() {
+
+		this.viewCount = 48;
+		this.quiltDimensions = new Vector2( 8, 6 );
+		this.viewCone = 35 * MathUtils.DEG2RAD;
+		this.viewFoV = 14 * MathUtils.DEG2RAD;
+		this.displayDistance = 1;
+		this.displayAspect = 0.75;
+		this.near = 0.01;
+		this.far = 10;
+
+	}
+
+	getCameraViewInfo( i, target = {} ) {
+
+		const {
+			quiltDimensions,
+			viewCone,
+			displayDistance,
+			viewCount,
+			viewFoV,
+			displayAspect,
+			near,
+			far,
+		} = this;
+
+		// initialize defaults
+		target.subframe = target.subframe || new Vector4();
+		target.offsetDirection = target.offsetDirection || new Vector3();
+		target.projectionMatrix	= target.projectionMatrix || new Matrix4();
+
+		// set camera offset
+		const halfWidth = Math.tan( 0.5 * viewCone ) * displayDistance;
+		const totalWidth = halfWidth * 2.0;
+		const stride = totalWidth / ( viewCount - 1 );
+		const offset = viewCount === 1 ? 0 : - halfWidth + stride * i;
+		target.offsetDirection.set( 1.0, 0, 0 );
+		target.offset = offset;
+
+		// set the projection matrix
+		const displayHalfHeight = Math.tan( viewFoV * 0.5 ) * displayDistance;
+		const displayHalfWidth = displayAspect * displayHalfHeight;
+		const nearScale = near / displayDistance;
+
+		target.projectionMatrix.makePerspective(
+			nearScale * ( - displayHalfWidth - offset ), nearScale * ( displayHalfWidth - offset ),
+			nearScale * displayHalfHeight, nearScale * - displayHalfHeight,
+			near, far,
+		);
+
+		// set the quilt subframe
+		const x = i % quiltDimensions.x;
+		const y = Math.floor( i / quiltDimensions.x );
+
+		const qw = 1 / quiltDimensions.x;
+		const qh = 1 / quiltDimensions.y;
+		target.subframe.set( x * qw, y * qh, qw, qh );
+
+		return target;
+
+	}
+
+	setFromDisplayView( viewerDistance, displayWidth, displayHeight ) {
+
+		this.displayAspect = displayWidth / displayHeight;
+		this.displayDistance = viewerDistance;
+		this.viewFoV = 2.0 * Math.atan( 0.5 * displayHeight / viewerDistance );
+
+	}
+
+}
+
+export class QuiltPathTracingRenderer extends PathTracingRenderer {
+
+	get samples() {
+
+		return this._samples / this.viewCount;
+
+	}
+
+	constructor( ...args ) {
+
+		super( ...args );
+
+		[
+			'quiltDimensions',
+			'viewCount',
+			'viewCone',
+			'viewFoV',
+			'displayDistance',
+			'displayAspect',
+		].forEach( member => {
+
+			Object.defineProperty( this, member, {
+
+				enumerable: true,
+
+				set: v => {
+
+					this._quiltUtility[ member ] = v;
+
+				},
+
+				get: () => {
+
+					return this._quiltUtility[ member ];
+
+				}
+
+			} );
+
+		} );
+
+
+		this._quiltUtility = new QuiltViewUtility();
+		this._quiltSamples = 0;
+		this._camera = new PerspectiveCamera();
+		this._quiltTask = null;
+
+	}
+
+	setFromDisplayView( ...args ) {
+
+		this._quiltUtility.setFromDisplayView( ...args );
+
+	}
+
+	update() {
+
+		this.alpha = false;
+		if ( ! this._quiltTask ) {
+
+			this._quiltTask = _task.call( this, () => {
+
+				super.update();
+
+			} );
+
+		}
+
+		this._quiltTask.next();
+
+	}
+
+	reset() {
+
+		super.reset();
+		this._quiltTask = null;
+		this._quiltSamples = 0;
+
+	}
+
+}

package/src/index.js

@@ -1,5 +1,6 @@
 // core
 export * from './core/PathTracingRenderer.js';
+export * from './core/QuiltPathTracingRenderer.js';
 export * from './core/PathTracingSceneGenerator.js';
 export * from './core/DynamicPathTracingSceneGenerator.js';
 export * from './core/MaterialReducer.js';
@@ -28,12 +29,8 @@ export * from './utils/BlurredEnvMapGenerator.js';
 export * from './utils/IESLoader.js';
 
 // materials
-export * from './materials/DenoiseMaterial.js';
-export * from './materials/GraphMaterial.js';
+export * from './materials/fullscreen/DenoiseMaterial.js';
+export * from './materials/debug/GraphMaterial.js';
 export * from './materials/MaterialBase.js';
-export * from './materials/PhysicalPathTracingMaterial.js';
-
-// shaders
-export * from './shader/shaderMaterialSampling.js';
-export * from './shader/shaderUtils.js';
-export * from './shader/shaderStructs.js';
+export * from './materials/pathtracing/PhysicalPathTracingMaterial.js';
+export * from './materials/surface/FogVolumeMaterial.js';

package/src/materials/{GraphMaterial.js → debug/GraphMaterial.js}

@@ -1,5 +1,5 @@
 import { NoBlending, Color, Vector2, Vector4 } from 'three';
-import { MaterialBase } from './MaterialBase.js';
+import { MaterialBase } from '../MaterialBase.js';
 
 export class GraphMaterial extends MaterialBase {
 

package/src/materials/{AlphaDisplayMaterial.js → fullscreen/AlphaDisplayMaterial.js}

@@ -1,5 +1,5 @@
 import { NoBlending } from 'three';
-import { MaterialBase } from './MaterialBase.js';
+import { MaterialBase } from '../MaterialBase.js';
 
 export class AlphaDisplayMaterial extends MaterialBase {
 

package/src/materials/{BlendMaterial.js → fullscreen/BlendMaterial.js}

@@ -1,5 +1,5 @@
 import { NoBlending } from 'three';
-import { MaterialBase } from './MaterialBase.js';
+import { MaterialBase } from '../MaterialBase.js';
 
 export class BlendMaterial extends MaterialBase {
 

package/src/materials/{DenoiseMaterial.js → fullscreen/DenoiseMaterial.js}

@@ -1,5 +1,5 @@
 import { NoBlending } from 'three';
-import { MaterialBase } from './MaterialBase.js';
+import { MaterialBase } from '../MaterialBase.js';
 
 export class DenoiseMaterial extends MaterialBase {
 

package/src/materials/{LambertPathTracingMaterial.js → pathtracing/LambertPathTracingMaterial.js}

@@ -1,13 +1,17 @@
 import { Matrix4, Color } from 'three';
-import { MaterialBase } from './MaterialBase.js';
+import { MaterialBase } from '../MaterialBase.js';
 import {
 	MeshBVHUniformStruct, FloatVertexAttributeTexture, UIntVertexAttributeTexture,
 	shaderStructs, shaderIntersectFunction,
 } from 'three-mesh-bvh';
-import { shaderMaterialStructs } from '../shader/shaderStructs.js';
-import { shaderUtils } from '../shader/shaderUtils.js';
+
+// uniforms
 import { MaterialStructArrayUniform } from '../uniforms/MaterialStructArrayUniform.js';
-import { RenderTarget2DArray } from '../uniforms/RenderTarget2DArray.js';
+import { RenderTarget2DArray } from '../../uniforms/RenderTarget2DArray.js';
+
+import { materialStructGLSL } from '../../shader/structs/materialStruct.glsl.js';
+import { shapeSamplingGLSL } from '../../shader/sampling/shapeSampling.glsl.js';
+import { pcgGLSL } from '../../shader/rand/pcg.glsl.js';
 
 export class LambertPathTracingMaterial extends MaterialBase {
 
@@ -83,8 +87,15 @@ export class LambertPathTracingMaterial extends MaterialBase {
 
 				${ shaderStructs }
 				${ shaderIntersectFunction }
-				${ shaderMaterialStructs }
-				${ shaderUtils }
+
+				// uniform structs
+				${ materialStructGLSL }
+
+				// rand
+				${ pcgGLSL }
+
+				// common
+				${ shapeSamplingGLSL }
 
 				#ifdef USE_ENVMAP
 
@@ -258,7 +269,7 @@ export class LambertPathTracingMaterial extends MaterialBase {
 						vec3 absPoint = abs( point );
 						float maxPoint = max( absPoint.x, max( absPoint.y, absPoint.z ) );
 						rayOrigin = point + faceNormal * ( maxPoint + 1.0 ) * RAY_OFFSET;
-						rayDirection = getHemisphereSample( normal, rand2() );
+						rayDirection = sampleHemisphere( normal, rand2() );
 
 						// if the surface normal is skewed such that the outgoing vector can wind up underneath
 						// the triangle surface then just consider it absorbed.