three-gpu-pathtracer 0.0.2 → 0.0.5

package/src/uniforms/EquirectHdrInfoUniform.js

@@ -0,0 +1,263 @@
+import { DataTexture, FloatType, RedFormat, LinearFilter, DataUtils, HalfFloatType, Source, RepeatWrapping } from 'three';
+
+function binarySearchFindClosestIndexOf( array, targetValue, offset = 0, count = array.length ) {
+
+	let lower = 0;
+	let upper = count;
+	while ( lower < upper ) {
+
+		const mid = ~ ~ ( 0.5 * upper + 0.5 * lower );
+
+
+		// check if the middle array value is above or below the target and shift
+		// which half of the array we're looking at
+		if ( array[ offset + mid ] < targetValue ) {
+
+			lower = mid + 1;
+
+		} else {
+
+			upper = mid;
+
+		}
+
+	}
+
+	return lower;
+
+}
+
+function colorToLuminance( r, g, b ) {
+
+	// https://en.wikipedia.org/wiki/Relative_luminance
+	return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+}
+
+// ensures the data is all floating point values and flipY is false
+function preprocessEnvMap( envMap ) {
+
+	const map = envMap.clone();
+	map.source = new Source( { ...map.image } );
+	const { width, height, data } = map.image;
+
+	// TODO: is there a simple way to avoid cloning and adjusting the env map data here?
+	// convert the data from half float uint 16 arrays to float arrays for cdf computation
+	let newData = data;
+	if ( map.type === HalfFloatType ) {
+
+		newData = new Float32Array( data.length );
+		for ( const i in data ) {
+
+			newData[ i ] = DataUtils.fromHalfFloat( data[ i ] );
+
+		}
+
+		map.image.data = newData;
+		map.type = FloatType;
+
+	}
+
+	// remove any y flipping for cdf computation
+	if ( map.flipY ) {
+
+		const ogData = newData;
+		newData = newData.slice();
+		for ( let y = 0; y < height; y ++ ) {
+
+			for ( let x = 0; x < width; x ++ ) {
+
+				const newY = height - y - 1;
+				const ogIndex = 4 * ( y * width + x );
+				const newIndex = 4 * ( newY * width + x );
+
+				newData[ newIndex + 0 ] = ogData[ ogIndex + 0 ];
+				newData[ newIndex + 1 ] = ogData[ ogIndex + 1 ];
+				newData[ newIndex + 2 ] = ogData[ ogIndex + 2 ];
+				newData[ newIndex + 3 ] = ogData[ ogIndex + 3 ];
+
+			}
+
+		}
+
+		map.flipY = false;
+		map.image.data = newData;
+
+	}
+
+	return map;
+
+}
+
+export class EquirectHdrInfoUniform {
+
+	constructor() {
+
+		// Stores a map of [0, 1] value -> cumulative importance row & pdf
+		// used to sampling a random value to a relevant row to sample from
+		const marginalWeights = new DataTexture();
+		marginalWeights.type = FloatType;
+		marginalWeights.format = RedFormat;
+		marginalWeights.minFilter = LinearFilter;
+		marginalWeights.magFilter = LinearFilter;
+		marginalWeights.generateMipmaps = false;
+
+		// Stores a map of [0, 1] value -> cumulative importance column & pdf
+		// used to sampling a random value to a relevant pixel to sample from
+		const conditionalWeights = new DataTexture();
+		conditionalWeights.type = FloatType;
+		conditionalWeights.format = RedFormat;
+		conditionalWeights.minFilter = LinearFilter;
+		conditionalWeights.magFilter = LinearFilter;
+		conditionalWeights.generateMipmaps = false;
+
+		// store the total sum in a 1x1 tex since some android mobile devices have issues
+		// storing large values in structs.
+		const totalSumTex = new DataTexture();
+		totalSumTex.type = FloatType;
+		totalSumTex.format = RedFormat;
+		totalSumTex.minFilter = LinearFilter;
+		totalSumTex.magFilter = LinearFilter;
+		totalSumTex.generateMipmaps = false;
+
+		this.marginalWeights = marginalWeights;
+		this.conditionalWeights = conditionalWeights;
+		this.totalSum = totalSumTex;
+		this.map = null;
+
+	}
+
+	dispose() {
+
+		this.marginalWeights.dispose();
+		this.conditionalWeights.dispose();
+		this.totalSum.dispose();
+		if ( this.map ) this.map.dispose();
+
+	}
+
+	updateFrom( hdr ) {
+
+		// https://github.com/knightcrawler25/GLSL-PathTracer/blob/3c6fd9b6b3da47cd50c527eeb45845eef06c55c3/src/loaders/hdrloader.cpp
+		// https://pbr-book.org/3ed-2018/Light_Transport_I_Surface_Reflection/Sampling_Light_Sources#InfiniteAreaLights
+		const map = preprocessEnvMap( hdr );
+		map.wrapS = RepeatWrapping;
+		map.wrapT = RepeatWrapping;
+
+		const { width, height, data } = map.image;
+
+		// "conditional" = "pixel relative to row pixels sum"
+		// "marginal" = "row relative to row sum"
+
+		// track the importance of any given pixel in the image by tracking its weight relative to other pixels in the image
+		const pdfConditional = new Float32Array( width * height );
+		const cdfConditional = new Float32Array( width * height );
+
+		const pdfMarginal = new Float32Array( height );
+		const cdfMarginal = new Float32Array( height );
+
+		let totalSumValue = 0.0;
+		let cumulativeWeightMarginal = 0.0;
+		for ( let y = 0; y < height; y ++ ) {
+
+			let cumulativeRowWeight = 0.0;
+			for ( let x = 0; x < width; x ++ ) {
+
+				const i = y * width + x;
+				const r = data[ 4 * i + 0 ];
+				const g = data[ 4 * i + 1 ];
+				const b = data[ 4 * i + 2 ];
+
+				// the probability of the pixel being selected in this row is the
+				// scale of the luminance relative to the rest of the pixels.
+				// TODO: this should also account for the solid angle of the pixel when sampling
+				const weight = colorToLuminance( r, g, b );
+				cumulativeRowWeight += weight;
+				totalSumValue += weight;
+
+				pdfConditional[ i ] = weight;
+				cdfConditional[ i ] = cumulativeRowWeight;
+
+			}
+
+			// can happen if the row is all black
+			if ( cumulativeRowWeight !== 0 ) {
+
+				// scale the pdf and cdf to [0.0, 1.0]
+				for ( let i = y * width, l = y * width + width; i < l; i ++ ) {
+
+					pdfConditional[ i ] /= cumulativeRowWeight;
+					cdfConditional[ i ] /= cumulativeRowWeight;
+
+				}
+
+			}
+
+			cumulativeWeightMarginal += cumulativeRowWeight;
+
+			// compute the marginal pdf and cdf along the height of the map.
+			pdfMarginal[ y ] = cumulativeRowWeight;
+			cdfMarginal[ y ] = cumulativeWeightMarginal;
+
+		}
+
+		// can happen if the texture is all black
+		if ( cumulativeWeightMarginal !== 0 ) {
+
+			// scale the marginal pdf and cdf to [0.0, 1.0]
+			for ( let i = 0, l = pdfMarginal.length; i < l; i ++ ) {
+
+				pdfMarginal[ i ] /= cumulativeWeightMarginal;
+				cdfMarginal[ i ] /= cumulativeWeightMarginal;
+
+			}
+
+		}
+
+		// compute a sorted index of distributions and the probabilities along them for both
+		// the marginal and conditional data. These will be used to sample with a random number
+		// to retrieve a uv value to sample in the environment map.
+		// These values continually increase so it's okay to interpolate between them.
+		const marginalDataArray = new Float32Array( height );
+		const conditionalDataArray = new Float32Array( width * height );
+
+		for ( let i = 0; i < height; i ++ ) {
+
+			const dist = ( i + 1 ) / height;
+			const row = binarySearchFindClosestIndexOf( cdfMarginal, dist );
+
+			marginalDataArray[ i ] = row / height;
+
+		}
+
+		for ( let y = 0; y < height; y ++ ) {
+
+			for ( let x = 0; x < width; x ++ ) {
+
+				const i = y * width + x;
+				const dist = ( x + 1 ) / width;
+				const col = binarySearchFindClosestIndexOf( cdfConditional, dist, y * width, width );
+
+				conditionalDataArray[ i ] = col / width;
+
+			}
+
+		}
+
+		this.dispose();
+
+		const { marginalWeights, conditionalWeights, totalSum } = this;
+		marginalWeights.image = { width: height, height: 1, data: marginalDataArray };
+		marginalWeights.needsUpdate = true;
+
+		conditionalWeights.image = { width, height, data: conditionalDataArray };
+		conditionalWeights.needsUpdate = true;
+
+		totalSum.image = { width: 1, height: 1, data: new Float32Array( [ totalSumValue ] ) };
+		totalSum.needsUpdate = true;
+
+		this.map = map;
+
+	}
+
+}

package/src/uniforms/LightsTexture.js

@@ -0,0 +1,83 @@
+import { DataTexture, RGBAFormat, ClampToEdgeWrapping, FloatType, Vector3, Quaternion } from 'three';
+
+const LIGHT_PIXELS = 4;
+
+export class LightsTexture extends DataTexture {
+
+	constructor() {
+
+		super( new Float32Array( 4 ), 1, 1 );
+
+		this.format = RGBAFormat;
+		this.type = FloatType;
+		this.wrapS = ClampToEdgeWrapping;
+		this.wrapT = ClampToEdgeWrapping;
+		this.generateMipmaps = false;
+
+	}
+
+	updateFrom( lights ) {
+
+		let index = 0;
+		const pixelCount = lights.length * LIGHT_PIXELS;
+		const dimension = Math.ceil( Math.sqrt( pixelCount ) );
+
+		if ( this.image.width !== dimension ) {
+
+			this.dispose();
+
+			this.image.data = new Float32Array( dimension * dimension * 4 );
+			this.image.width = dimension;
+			this.image.height = dimension;
+
+		}
+
+		const floatArray = this.image.data;
+
+		const u = new Vector3();
+		const v = new Vector3();
+		const worldQuaternion = new Quaternion();
+
+		for ( let i = 0, l = lights.length; i < l; i ++ ) {
+
+			const l = lights[ i ];
+
+			// position
+			l.getWorldPosition( v );
+			floatArray[ index ++ ] = v.x;
+			floatArray[ index ++ ] = v.y;
+			floatArray[ index ++ ] = v.z;
+			index ++;
+
+			// color
+			floatArray[ index ++ ] = l.color.r;
+			floatArray[ index ++ ] = l.color.g;
+			floatArray[ index ++ ] = l.color.b;
+
+			// intensity
+			floatArray[ index ++ ] = l.intensity;
+
+			// u vector
+			l.getWorldQuaternion( worldQuaternion );
+			u.set( l.width, 0, 0 ).applyQuaternion( worldQuaternion );
+			floatArray[ index ++ ] = u.x;
+			floatArray[ index ++ ] = u.y;
+			floatArray[ index ++ ] = u.z;
+			index ++;
+
+			// v vector
+			v.set( 0, l.height, 0 ).applyQuaternion( worldQuaternion );
+			floatArray[ index ++ ] = v.x;
+			floatArray[ index ++ ] = v.y;
+			floatArray[ index ++ ] = v.z;
+
+			// area
+			floatArray[ index ++ ] = u.cross( v ).length();
+
+		}
+
+		this.needsUpdate = true;
+
+	}
+
+}

package/src/uniforms/MaterialsTexture.js

@@ -0,0 +1,319 @@
+import { DataTexture, RGBAFormat, ClampToEdgeWrapping, FloatType, FrontSide, BackSide, DoubleSide } from 'three';
+
+const MATERIAL_PIXELS = 26;
+const MATERIAL_STRIDE = MATERIAL_PIXELS * 4;
+
+const SIDE_OFFSET = 7 * 4 + 1;
+const MATTE_OFFSET = 7 * 4 + 2;
+const SHADOW_OFFSET = 7 * 4 + 3;
+
+export class MaterialsTexture extends DataTexture {
+
+	constructor() {
+
+		super( new Float32Array( 4 ), 1, 1 );
+
+		this.format = RGBAFormat;
+		this.type = FloatType;
+		this.wrapS = ClampToEdgeWrapping;
+		this.wrapT = ClampToEdgeWrapping;
+		this.generateMipmaps = false;
+		this.threeCompatibilityTransforms = false;
+
+	}
+
+	setCastShadow( materialIndex, cast ) {
+
+		// invert the shadow value so we default to "true" when initializing a material
+		const array = this.image.data;
+		const index = materialIndex * MATERIAL_STRIDE + SHADOW_OFFSET;
+		array[ index ] = ! cast ? 1 : 0;
+
+	}
+
+	getCastShadow( materialIndex ) {
+
+		const array = this.image.data;
+		const index = materialIndex * MATERIAL_STRIDE + SHADOW_OFFSET;
+		return ! Boolean( array[ index ] );
+
+	}
+
+	setSide( materialIndex, side ) {
+
+		const array = this.image.data;
+		const index = materialIndex * MATERIAL_STRIDE + SIDE_OFFSET;
+		switch ( side ) {
+
+		case FrontSide:
+			array[ index ] = 1;
+			break;
+		case BackSide:
+			array[ index ] = - 1;
+			break;
+		case DoubleSide:
+			array[ index ] = 0;
+			break;
+
+		}
+
+	}
+
+	getSide( materialIndex ) {
+
+		const array = this.image.data;
+		const index = materialIndex * MATERIAL_STRIDE + SIDE_OFFSET;
+		switch ( array[ index ] ) {
+
+		case 0:
+			return DoubleSide;
+		case 1:
+			return FrontSide;
+		case - 1:
+			return BackSide;
+
+		}
+
+		return 0;
+
+	}
+
+	setMatte( materialIndex, matte ) {
+
+		const array = this.image.data;
+		const index = materialIndex * MATERIAL_STRIDE + MATTE_OFFSET;
+		array[ index ] = matte ? 1 : 0;
+
+	}
+
+	getMatte( materialIndex ) {
+
+		const array = this.image.data;
+		const index = materialIndex * MATERIAL_STRIDE + MATTE_OFFSET;
+		return Boolean( array[ index ] );
+
+	}
+
+	updateFrom( materials, textures ) {
+
+		function getTexture( material, key, def = - 1 ) {
+
+			return key in material ? textures.indexOf( material[ key ] ) : def;
+
+		}
+
+		function getField( material, key, def ) {
+
+			return key in material ? material[ key ] : def;
+
+		}
+
+		function getUVTransformTexture( material ) {
+
+			// https://github.com/mrdoob/three.js/blob/f3a832e637c98a404c64dae8174625958455e038/src/renderers/webgl/WebGLMaterials.js#L204-L306
+			// https://threejs.org/docs/#api/en/textures/Texture.offset
+			// fallback order of textures to use as a common uv transform
+			return material.map ||
+				material.specularMap ||
+				material.displacementMap ||
+				material.normalMap ||
+				material.bumpMap ||
+				material.roughnessMap ||
+				material.metalnessMap ||
+				material.alphaMap ||
+				material.emissiveMap ||
+				material.clearcoatMap ||
+				material.clearcoatNormalMap ||
+				material.clearcoatRoughnessMap ||
+				material.iridescenceMap ||
+				material.iridescenceThicknessMap ||
+				material.specularIntensityMap ||
+				material.specularColorMap ||
+				material.transmissionMap ||
+				material.thicknessMap ||
+				material.sheenColorMap ||
+				material.sheenRoughnessMap ||
+				null;
+
+		}
+
+		function writeTextureMatrixToArray( material, textureKey, array, offset ) {
+
+			let texture;
+			if ( threeCompatibilityTransforms ) {
+
+				texture = getUVTransformTexture( material );
+
+			} else {
+
+				texture = material[ textureKey ] && material[ textureKey ].isTexture ? material[ textureKey ] : null;
+
+			}
+
+			// check if texture exists
+			if ( texture ) {
+
+				const elements = texture.matrix.elements;
+
+				let i = 0;
+
+				// first row
+				array[ offset + i ++ ] = elements[ 0 ];
+				array[ offset + i ++ ] = elements[ 3 ];
+				array[ offset + i ++ ] = elements[ 6 ];
+				i ++;
+
+				// second row
+				array[ offset + i ++ ] = elements[ 1 ];
+				array[ offset + i ++ ] = elements[ 4 ];
+				array[ offset + i ++ ] = elements[ 7 ];
+				i ++;
+
+			}
+
+			return 8;
+
+		}
+
+		let index = 0;
+		const pixelCount = materials.length * MATERIAL_PIXELS;
+		const dimension = Math.ceil( Math.sqrt( pixelCount ) );
+		const { threeCompatibilityTransforms, image } = this;
+
+		if ( image.width !== dimension ) {
+
+			this.dispose();
+
+			image.data = new Float32Array( dimension * dimension * 4 );
+			image.width = dimension;
+			image.height = dimension;
+
+		}
+
+		const floatArray = image.data;
+
+		// on some devices (Google Pixel 6) the "floatBitsToInt" function does not work correctly so we
+		// can't encode texture ids that way.
+		// const intArray = new Int32Array( floatArray.buffer );
+
+		for ( let i = 0, l = materials.length; i < l; i ++ ) {
+
+			const m = materials[ i ];
+
+			// color
+			floatArray[ index ++ ] = m.color.r;
+			floatArray[ index ++ ] = m.color.g;
+			floatArray[ index ++ ] = m.color.b;
+			floatArray[ index ++ ] = getTexture( m, 'map' );
+
+			// metalness & roughness
+			floatArray[ index ++ ] = getField( m, 'metalness', 0.0 );
+			floatArray[ index ++ ] = textures.indexOf( m.metalnessMap );
+			floatArray[ index ++ ] = getField( m, 'roughness', 0.0 );
+			floatArray[ index ++ ] = textures.indexOf( m.roughnessMap );
+
+			// transmission & emissiveIntensity
+			floatArray[ index ++ ] = getField( m, 'ior', 1.0 );
+			floatArray[ index ++ ] = getField( m, 'transmission', 0.0 );
+			floatArray[ index ++ ] = getTexture( m, 'transmissionMap' );
+			floatArray[ index ++ ] = getField( m, 'emissiveIntensity', 0.0 );
+
+			// emission
+			if ( 'emissive' in m ) {
+
+				floatArray[ index ++ ] = m.emissive.r;
+				floatArray[ index ++ ] = m.emissive.g;
+				floatArray[ index ++ ] = m.emissive.b;
+
+			} else {
+
+				floatArray[ index ++ ] = 0.0;
+				floatArray[ index ++ ] = 0.0;
+				floatArray[ index ++ ] = 0.0;
+
+			}
+
+			floatArray[ index ++ ] = getTexture( m, 'emissiveMap' );
+
+			// normals
+			floatArray[ index ++ ] = getTexture( m, 'normalMap' );
+			if ( 'normalScale' in m ) {
+
+				floatArray[ index ++ ] = m.normalScale.x;
+				floatArray[ index ++ ] = m.normalScale.y;
+
+ 			} else {
+
+ 				floatArray[ index ++ ] = 1;
+ 				floatArray[ index ++ ] = 1;
+
+ 			}
+
+			// clearcoat
+			floatArray[ index ++ ] = getField( m, 'clearcoat', 0.0 );
+			floatArray[ index ++ ] = getTexture( m, 'clearcoatMap' );
+
+			// clearcoatRoughness
+			floatArray[ index ++ ] = getField( m, 'clearcoatRoughness', 0.0 );
+			floatArray[ index ++ ] = getTexture( m, 'clearcoatRoughnessMap' );
+
+			// clearcoatNormal
+			floatArray[ index ++ ] = getTexture( m, 'clearcoatNormalMap' );
+
+			if ( 'clearcoatNormalScale' in m ) {
+
+				floatArray[ index ++ ] = m.clearcoatNormalScale.x;
+				floatArray[ index ++ ] = m.clearcoatNormalScale.y;
+
+			} else {
+
+				floatArray[ index ++ ] = 1;
+				floatArray[ index ++ ] = 1;
+
+			}
+
+			// alphaMap
+			floatArray[ index ++ ] = getTexture( m, 'alphaMap' );
+
+			// side & matte
+			floatArray[ index ++ ] = m.opacity;
+			floatArray[ index ++ ] = m.alphaTest;
+			index ++; // side
+			index ++; // matte
+
+			index ++; // shadow
+
+			// map transform
+			index += writeTextureMatrixToArray( m, 'map', floatArray, index );
+
+			// metalnessMap transform
+			index += writeTextureMatrixToArray( m, 'metalnessMap', floatArray, index );
+
+			// roughnessMap transform
+			index += writeTextureMatrixToArray( m, 'roughnessMap', floatArray, index );
+
+			// transmissionMap transform
+			index += writeTextureMatrixToArray( m, 'transmissionMap', floatArray, index );
+
+			// emissiveMap transform
+			index += writeTextureMatrixToArray( m, 'emissiveMap', floatArray, index );
+
+			// normalMap transform
+			index += writeTextureMatrixToArray( m, 'normalMap', floatArray, index );
+
+			// clearcoatMap transform
+			index += writeTextureMatrixToArray( m, 'clearcoatMap', floatArray, index );
+
+			// clearcoatNormalMap transform
+			index += writeTextureMatrixToArray( m, 'clearcoatNormalMap', floatArray, index );
+
+			// clearcoatRoughnessMap transform
+			index += writeTextureMatrixToArray( m, 'clearcoatRoughnessMap', floatArray, index );
+
+		}
+
+		this.needsUpdate = true;
+
+	}
+
+}