three-gpu-pathtracer 0.0.1

package/src/uniforms/MaterialStructUniform.js

@@ -0,0 +1,94 @@
+import { Color, Vector2 } from 'three';
+export class MaterialStructUniform {
+
+	constructor() {
+
+		this.init();
+
+	}
+
+	init() {
+
+		this.color = new Color( 0xffffff );
+		this.map = - 1;
+
+		this.metalness = 1.0;
+		this.metalnessMap = - 1;
+
+		this.roughness = 1.0;
+		this.roughnessMap = - 1;
+
+		this.ior = 1.0;
+		this.transmission = 0.0;
+		this.transmissionMap = - 1;
+
+		this.emissive = new Color( 0 );
+		this.emissiveIntensity = 1.0;
+		this.emissiveMap = - 1;
+
+		this.normalMap = - 1;
+		this.normalScale = new Vector2( 1, 1 );
+
+		this.opacity = 1.0;
+		this.alphaTest = 0.0;
+
+		// TODO: Clearcoat
+
+		// TODO: Sheen
+
+	}
+
+	updateFrom( material, textures = [] ) {
+
+		this.init();
+
+		// color
+		if ( 'color' in material ) this.color.copy( material.color );
+		else material.color.set( 0xffffff );
+
+		this.map = textures.indexOf( material.map );
+
+		// metalness
+		if ( 'metalness' in material ) this.metalness = material.metalness;
+		else this.metalness = 1.0;
+
+		this.metalnessMap = textures.indexOf( material.metalnessMap );
+
+		// roughness
+		if ( 'roughness' in material ) this.roughness = material.roughness;
+		else this.roughness = 1.0;
+
+		this.roughnessMap = textures.indexOf( material.roughnessMap );
+
+		// transmission
+		if ( 'ior' in material ) this.ior = material.ior;
+		else this.ior = 1.0;
+
+		if ( 'transmission' in material ) this.transmission = material.transmission;
+		else this.transmission = 0.0;
+
+		if ( 'transmissionMap' in material ) this.transmissionMap = textures.indexOf( material.transmissionMap );
+
+		// emission
+		if ( 'emissive' in material ) this.emissive.copy( material.emissive );
+		else this.emissive.set( 0 );
+
+		if ( 'emissiveIntensity' in material ) this.emissiveIntensity = material.emissiveIntensity;
+		else this.emissiveIntensity = 1.0;
+
+		this.emissiveMap = textures.indexOf( material.emissiveMap );
+
+		// normals
+		this.normalMap = textures.indexOf( material.normalMap );
+		if ( 'normalScale' in material ) this.normalScale.copy( material.normalScale );
+		else this.normalScale.set( 1, 1 );
+
+		// opacity
+		this.opacity = material.opacity;
+
+		// alpha test
+		this.alphaTest = material.alphaTest;
+
+	}
+
+}

package/src/uniforms/RenderTarget2DArray.js

@@ -0,0 +1,80 @@
+import {
+	WebGLArrayRenderTarget,
+	RGBAFormat,
+	UnsignedByteType,
+	MeshBasicMaterial,
+	Color,
+	RepeatWrapping,
+	LinearFilter,
+	NoToneMapping,
+} from 'three';
+import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
+
+const prevColor = new Color();
+export class RenderTarget2DArray extends WebGLArrayRenderTarget {
+
+	constructor( ...args ) {
+
+		super( ...args );
+
+		const tex = this.texture;
+		tex.format = RGBAFormat;
+		tex.type = UnsignedByteType;
+		tex.minFilter = LinearFilter;
+		tex.magFilter = LinearFilter;
+		tex.wrapS = RepeatWrapping;
+		tex.wrapT = RepeatWrapping;
+		tex.setTextures = ( ...args ) => {
+
+			this.setTextures( ...args );
+
+		};
+
+		const fsQuad = new FullScreenQuad( new MeshBasicMaterial() );
+		this.fsQuad = fsQuad;
+
+	}
+
+	setTextures( renderer, width, height, textures ) {
+
+		// save previous renderer state
+		const prevRenderTarget = renderer.getRenderTarget();
+		const prevToneMapping = renderer.toneMapping;
+		const prevAlpha = renderer.getClearAlpha();
+		renderer.getClearColor( prevColor );
+
+		// resize the render target
+		const depth = textures.length;
+		this.setSize( width, height, depth );
+		renderer.setClearColor( 0, 0 );
+		renderer.toneMapping = NoToneMapping;
+
+		// render each texture into each layer of the target
+		const fsQuad = this.fsQuad;
+		for ( let i = 0, l = depth; i < l; i ++ ) {
+
+			const texture = textures[ i ];
+			fsQuad.material.map = texture;
+			fsQuad.material.transparent = true;
+
+			renderer.setRenderTarget( this, i );
+			fsQuad.render( renderer );
+
+		}
+
+		// reset the renderer
+		fsQuad.material.map = null;
+		renderer.setClearColor( prevColor, prevAlpha );
+		renderer.setRenderTarget( prevRenderTarget );
+		renderer.toneMapping = prevToneMapping;
+
+	}
+
+	dispose() {
+
+		super.dispose();
+		this.fsQuad.dispose();
+
+	}
+
+}

package/src/utils/GeometryPreparationUtils.js

@@ -0,0 +1,172 @@
+import { BufferAttribute } from 'three';
+import { mergeBufferGeometries, mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+function getGroupMaterialIndicesAttribute( geometry, materials, allMaterials ) {
+
+	if ( ! Array.isArray( materials ) ) {
+
+		materials = [ materials ];
+
+	}
+
+	const vertCount = geometry.attributes.position.count;
+	const materialArray = new Uint8Array( vertCount );
+	let groups = geometry.groups;
+	if ( groups.length === 0 ) {
+
+		groups = [ { count: vertCount, start: 0, materialIndex: 0 } ];
+
+	}
+
+	for ( let i = 0; i < groups.length; i ++ ) {
+
+		const group = groups[ i ];
+		const { count, start } = group;
+		const endCount = Math.min( count, vertCount - start );
+		const mat = materials[ group.materialIndex ];
+		const materialIndex = allMaterials.indexOf( mat );
+
+		for ( let j = 0; j < endCount; j ++ ) {
+
+			materialArray[ start + j ] = materialIndex;
+
+		}
+
+	}
+
+	return new BufferAttribute( materialArray, 1, false );
+
+}
+
+export function mergeMeshes( meshes, options = {} ) {
+
+	options = { attributes: null, cloneGeometry: true, ...options };
+
+	const transformedGeometry = [];
+	const materialSet = new Set();
+	for ( let i = 0, l = meshes.length; i < l; i ++ ) {
+
+		// save any materials
+		const mesh = meshes[ i ];
+		if ( mesh.visible === false ) continue;
+
+		if ( Array.isArray( mesh.material ) ) {
+
+			mesh.material.forEach( m => materialSet.add( m ) );
+
+		} else {
+
+			materialSet.add( mesh.material );
+
+		}
+
+	}
+
+	const materials = Array.from( materialSet );
+	for ( let i = 0, l = meshes.length; i < l; i ++ ) {
+
+		// ensure the matrix world is up to date
+		const mesh = meshes[ i ];
+		if ( mesh.visible === false ) continue;
+
+		mesh.updateMatrixWorld();
+
+		// apply the matrix world to the geometry
+		const originalGeometry = meshes[ i ].geometry;
+		let geometry = options.cloneGeometry ? originalGeometry.clone() : originalGeometry;
+		geometry.applyMatrix4( mesh.matrixWorld );
+
+		const attrs = options.attributes;
+		if ( ! geometry.attributes.normal && ( attrs && attrs.includes( 'normal' ) ) ) {
+
+			geometry.computeVertexNormals();
+
+		}
+
+		if ( ! geometry.attributes.uv && ( attrs && attrs.includes( 'uv' ) ) ) {
+
+			const vertCount = geometry.attributes.position.count;
+			geometry.setAttribute( 'uv', new BufferAttribute( new Float32Array( vertCount * 2 ), 2, false ) );
+
+		}
+
+		if ( ! geometry.attributes.tangent && ( attrs && attrs.includes( 'tangent' ) ) ) {
+
+			if ( mesh.material.normalMap ) {
+
+				// computeTangents requires an index buffer
+				if ( geometry.index === null ) {
+
+					geometry = mergeVertices( geometry );
+
+				}
+
+				geometry.computeTangents();
+
+			} else {
+
+				const vertCount = geometry.attributes.position.count;
+				geometry.setAttribute( 'tangent', new BufferAttribute( new Float32Array( vertCount * 4 ), 4, false ) );
+
+			}
+
+		}
+
+		if ( ! geometry.index ) {
+
+			// TODO: compute a typed array
+			const indexCount = geometry.attributes.position.count;
+			const array = new Array( indexCount );
+			for ( let i = 0; i < indexCount; i ++ ) {
+
+				array[ i ] = i;
+
+			}
+
+			geometry.setIndex( array );
+
+		}
+
+		// trim any unneeded attributes
+		if ( options.attributes ) {
+
+			for ( const key in geometry.attributes ) {
+
+				if ( ! options.attributes.includes( key ) ) {
+
+					geometry.deleteAttribute( key );
+
+				}
+
+			}
+
+		}
+
+		// create the material index attribute
+		const materialIndexAttribute = getGroupMaterialIndicesAttribute( geometry, mesh.material, materials );
+		geometry.setAttribute( 'materialIndex', materialIndexAttribute );
+
+		transformedGeometry.push( geometry );
+
+	}
+
+	const textureSet = new Set();
+	materials.forEach( material => {
+
+		for ( const key in material ) {
+
+			const value = material[ key ];
+			if ( value && value.isTexture ) {
+
+				textureSet.add( value );
+
+			}
+
+		}
+
+	} );
+
+	const geometry = mergeBufferGeometries( transformedGeometry, false );
+	const textures = Array.from( textureSet );
+	return { geometry, materials, textures };
+
+}

package/src/utils/UVUnwrapper.js

@@ -0,0 +1,101 @@
+// https://github.com/mozilla/Spoke/commit/9701d647020e09d584885bd457eb225e9995c12f
+import XAtlas from 'xatlas-web';
+import { BufferGeometry, Float32BufferAttribute, Uint32BufferAttribute } from 'three';
+
+export class UVUnwrapper {
+
+	constructor() {
+
+		this._module = null;
+
+	}
+
+	async load() {
+
+		const wasmurl = new URL( '../../node_modules/xatlas-web/dist/xatlas-web.wasm', import.meta.url );
+		this._module = XAtlas( {
+
+			locateFile( path ) {
+
+				if ( path.endsWith( '.wasm' ) ) {
+
+					return wasmurl.toString();
+
+				}
+
+				return path;
+
+			}
+
+		} );
+		return this._module.ready;
+
+	}
+
+	generate( geometry ) {
+
+		const xatlas = this._module;
+		const originalVertexCount = geometry.attributes.position.count;
+		const originalIndexCount = geometry.index.count;
+
+		xatlas.createAtlas();
+
+		const meshInfo = xatlas.createMesh( originalVertexCount, originalIndexCount, true, true );
+		xatlas.HEAPU16.set( geometry.index.array, meshInfo.indexOffset / Uint16Array.BYTES_PER_ELEMENT );
+		xatlas.HEAPF32.set( geometry.attributes.position.array, meshInfo.positionOffset / Float32Array.BYTES_PER_ELEMENT );
+		xatlas.HEAPF32.set( geometry.attributes.normal.array, meshInfo.normalOffset / Float32Array.BYTES_PER_ELEMENT );
+		xatlas.HEAPF32.set( geometry.attributes.uv.array, meshInfo.uvOffset / Float32Array.BYTES_PER_ELEMENT );
+
+		const statusCode = xatlas.addMesh();
+		if ( statusCode !== AddMeshStatus.Success ) {
+
+			throw new Error( `UVUnwrapper: Error adding mesh. Status code ${ statusCode }` );
+
+		}
+
+		xatlas.generateAtlas();
+
+		const meshData = xatlas.getMeshData( meshInfo.meshId );
+		const oldPositionArray = geometry.attributes.position.array;
+		const oldNormalArray = geometry.attributes.normal.array;
+		const oldUvArray = geometry.attributes.uv.array;
+
+		const newPositionArray = new Float32Array( meshData.newVertexCount * 3 );
+		const newNormalArray = new Float32Array( meshData.newVertexCount * 3 );
+		const newUvArray = new Float32Array( meshData.newVertexCount * 2 );
+		const newUv2Array = new Float32Array( xatlas.HEAPF32.buffer, meshData.uvOffset, meshData.newVertexCount * 2 );
+		const newIndexArray = new Uint32Array( xatlas.HEAPU32.buffer, meshData.indexOffset, meshData.newIndexCount );
+		const originalIndexArray = new Uint32Array(
+			xatlas.HEAPU32.buffer,
+			meshData.originalIndexOffset,
+			meshData.newVertexCount
+		);
+
+		for ( let i = 0; i < meshData.newVertexCount; i ++ ) {
+
+			const originalIndex = originalIndexArray[ i ];
+			newPositionArray[ i * 3 ] = oldPositionArray[ originalIndex * 3 ];
+			newPositionArray[ i * 3 + 1 ] = oldPositionArray[ originalIndex * 3 + 1 ];
+			newPositionArray[ i * 3 + 2 ] = oldPositionArray[ originalIndex * 3 + 2 ];
+			newNormalArray[ i * 3 ] = oldNormalArray[ originalIndex * 3 ];
+			newNormalArray[ i * 3 + 1 ] = oldNormalArray[ originalIndex * 3 + 1 ];
+			newNormalArray[ i * 3 + 2 ] = oldNormalArray[ originalIndex * 3 + 2 ];
+			newUvArray[ i * 2 ] = oldUvArray[ originalIndex * 2 ];
+			newUvArray[ i * 2 + 1 ] = oldUvArray[ originalIndex * 2 + 1 ];
+
+		}
+
+		const newGeometry = new BufferGeometry();
+		newGeometry.addAttribute( 'position', new Float32BufferAttribute( newPositionArray, 3 ) );
+		newGeometry.addAttribute( 'normal', new Float32BufferAttribute( newNormalArray, 3 ) );
+		newGeometry.addAttribute( 'uv', new Float32BufferAttribute( newUvArray, 2 ) );
+		newGeometry.addAttribute( 'uv2', new Float32BufferAttribute( newUv2Array, 2 ) );
+		newGeometry.setIndex( new Uint32BufferAttribute( newIndexArray, 1 ) );
+
+		mesh.geometry = newGeometry;
+
+		xatlas.destroyAtlas();
+
+	}
+
+}

package/src/viewers/PathTracingViewer.js

@@ -0,0 +1,259 @@
+import { Scene, WebGLRenderer, MeshBasicMaterial, Vector2, Mesh, PerspectiveCamera, sRGBEncoding } from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
+import { SAH } from 'three-mesh-bvh';
+import { GenerateMeshBVHWorker } from 'three-mesh-bvh/src/workers/GenerateMeshBVHWorker.js';
+import { PathTracingRenderer } from '../core/PathTracingRenderer.js';
+import { mergeMeshes } from '../utils/GeometryPreparationUtils.js';
+import { PhysicalPathTracingMaterial } from '../materials/PhysicalPathTracingMaterial.js';
+import { MaterialReducer } from '../core/MaterialReducer.js';
+
+export class PathTracingViewer {
+
+	get domElement() {
+
+		return this._container;
+
+	}
+
+	constructor() {
+
+		this.scene = new Scene();
+		this.camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.025, 500 );
+		this.camera.position.set( - 1, 0.25, 1 );
+
+		this.renderer = new WebGLRenderer( { antialias: true } );
+		this.fsQuad = new FullScreenQuad( new MeshBasicMaterial( { transparent: true } ) );
+		this.ptRenderer = new PathTracingRenderer( this.renderer );
+		this.ptModel = null;
+		this.ptMaterials = null;
+		this.ptTextures = null;
+		this.model = null;
+		this.bvhGenerator = new GenerateMeshBVHWorker();
+		this.onRender = null;
+		this.enablePathTracing = true;
+		this.pausePathTracing = false;
+		this.samplesPerFrame = 1;
+		this._scale = 1;
+		this._nextObject = null;
+		this._needsSizeUpdate = false;
+		this._newSize = new Vector2();
+		this._resizeObserver = new ResizeObserver( entries => {
+
+			const { contentRect } = entries[ 0 ];
+			this._newSize.set( contentRect.width, contentRect.height );
+			this._needsSizeUpdate = true;
+
+		} );
+
+		const container = document.createElement( 'div' );
+		container.style.overflow = 'hidden';
+		container.appendChild( this.renderer.domElement );
+		this._container = container;
+
+		this.ptRenderer.camera = this.camera;
+		this.ptRenderer.material = new PhysicalPathTracingMaterial();
+		this.renderer.outputEncoding = sRGBEncoding;
+		this._resizeObserver.observe( container );
+
+	}
+
+	_updateSize() {
+
+		const dpr = window.devicePixelRatio;
+		const scale = this._scale;
+		const size = this._newSize;
+		this.renderer.setPixelRatio( dpr );
+
+		this.renderer.domElement.style.aspectRatio = `${ size.width } / ${ size.height }`;
+		this.renderer.domElement.style.width = `100%`;
+		this.renderer.setSize( scale * size.width, scale * size.height, false );
+		this.ptRenderer.target.setSize( size.width * scale * dpr, size.height * scale * dpr );
+		this.camera.aspect = size.width / size.height;
+		this.camera.updateProjectionMatrix();
+		this._needsSizeUpdate = false;
+
+	}
+
+	setScale( scale ) {
+
+		this._scale = scale;
+		this._needsSizeUpdate = true;
+
+	}
+
+	setModel( object, bvhOptions = {} ) {
+
+		if ( this.bvhGenerator.running ) {
+
+			this._nextObject = object;
+			return;
+
+		}
+
+		object.updateMatrixWorld( true );
+
+		const materialReducer = new MaterialReducer();
+		materialReducer.process( object );
+
+		const meshes = [];
+		object.traverse( c => {
+
+			if ( c.isMesh ) {
+
+				meshes.push( c );
+
+			}
+
+		} );
+
+		const { geometry, materials, textures } = mergeMeshes( meshes, { attributes: [ 'position', 'normal', 'tangent', 'uv' ] } );
+		return this
+			.bvhGenerator
+			.generate( geometry, { strategy: SAH, maxLeafTris: 1, ...bvhOptions } )
+			.then( bvh => {
+
+				if ( this._nextObject ) {
+
+					this.setModel( this._nextObject );
+					this._nextObject = null;
+					return;
+
+				}
+
+				if ( this.model ) {
+
+					this.scene.remove( this.model );
+					this.ptTextures.forEach( tex => tex.dispose() );
+					this.ptMaterials.forEach( mat => mat.dispose() );
+
+				}
+
+				const mesh = new Mesh( geometry );
+				this.scene.add( object );
+				this.ptModel = mesh;
+				this.ptMaterials = materials;
+				this.ptTextures = textures;
+				this.model = object;
+
+				const { ptRenderer } = this;
+				const { material } = ptRenderer;
+
+				// dispose of textures because they cannot be updated in later version of three.js
+				material.bvh.dispose();
+				material.normalAttribute.dispose();
+				material.tangentAttribute.dispose();
+				material.uvAttribute.dispose();
+				material.materialIndexAttribute.dispose();
+				material.textures.dispose();
+
+				material.bvh.updateFrom( bvh );
+				material.normalAttribute.updateFrom( geometry.attributes.normal );
+				material.tangentAttribute.updateFrom( geometry.attributes.tangent );
+				material.uvAttribute.updateFrom( geometry.attributes.uv );
+				material.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
+				material.textures.setTextures( this.renderer, 2048, 2048, textures );
+				material.materials.updateFrom( materials, textures );
+				material.setDefine( 'MATERIAL_LENGTH', materials.length );
+				ptRenderer.reset();
+
+			} );
+
+	}
+
+	setEnvironment( envMap ) {
+
+		this.scene.environment = envMap;
+
+	}
+
+	init() {
+
+		const { ptRenderer, renderer, fsQuad, camera } = this;
+
+		const controls = new OrbitControls( camera, renderer.domElement );
+		let delaySamples = 0;
+		controls.addEventListener( 'change', () => {
+
+			const tiles = this.ptRenderer.tiles;
+			if ( tiles.x * tiles.y !== 1 ) {
+
+				delaySamples = 1;
+
+			}
+
+			ptRenderer.reset();
+
+		} );
+
+		renderer.setAnimationLoop( () => {
+
+			if ( this.pausePathTracing ) {
+
+				return;
+
+			}
+
+			if ( this._needsSizeUpdate ) {
+
+				this._updateSize();
+				this.ptRenderer.reset();
+
+			}
+
+			if ( this.model ) {
+
+				// ensure materials are updated
+				const { ptRenderer, ptMaterials, ptTextures } = this;
+				ptRenderer.material.materials.updateFrom( ptMaterials, ptTextures );
+
+				if ( this.enablePathTracing && delaySamples === 0 ) {
+
+					camera.updateMatrixWorld();
+
+					for ( let i = 0, l = this.samplesPerFrame; i < l; i ++ ) {
+
+						ptRenderer.update();
+
+					}
+
+					if ( ptRenderer.samples < 1 ) {
+
+						renderer.render( this.scene, this.camera );
+
+					}
+
+					renderer.autoClear = false;
+					fsQuad.material.map = ptRenderer.target.texture;
+					fsQuad.render( renderer );
+					renderer.autoClear = true;
+
+				} else {
+
+					if ( delaySamples > 0 ) {
+
+						delaySamples --;
+
+					}
+
+					renderer.render( this.scene, this.camera );
+
+				}
+
+			} else {
+
+				renderer.clear();
+
+			}
+
+			if ( this.onRender ) {
+
+				this.onRender();
+
+			}
+
+		} );
+
+	}
+
+}