Merge pull request #295 from gkjohnson/proc-equirect

Add Gradient Textures

Author: gkjohnson

README.md

@@ -110,9 +110,12 @@ const { bvh, textures, materials, lights } = generator.generate( scene );
 
 // update bvh and geometry attribute textures
 ptMaterial.bvh.updateFrom( bvh );
-ptMaterial.normalAttribute.updateFrom( geometry.attributes.normal );
-ptMaterial.tangentAttribute.updateFrom( geometry.attributes.tangent );
-ptMaterial.uvAttribute.updateFrom( geometry.attributes.uv );
+ptMaterial.attributesArray.updateFrom(
+	geometry.attributes.normal,
+	geometry.attributes.tangent,
+	geometry.attributes.uv,
+	geometry.attributes.color,
+);
 
 // update materials and texture arrays
 ptMaterial.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
@@ -501,6 +504,38 @@ dispose() : void
 
 Disposes of the temporary files and textures for generation.
 
+## GradientEquirectMap
+
+### .exponent
+
+```js
+exponent = 2 : Number
+```
+
+### .topColor
+
+```js
+topColor = 0xffffff : Color
+```
+
+### .bottomColor
+
+```js
+bottomColor = 0x000000 : Color
+```
+
+### constructor
+
+```js
+constructor( resolution = 512 : Number )
+```
+
+### .update
+
+```js
+update() : void
+```
+
 ## MaterialBase
 
 _extends THREE.ShaderMaterial_
@@ -531,9 +566,7 @@ _extends MaterialBase_
 
 	// Geometry and BVH information
 	bvh: MeshBVHUniformStruct,
-	normalAttribute: FloatVertexAttributeTexture,
-	tangentAttribute: FloatVertexAttributeTexture,
-	uvAttribute: FloatVertexAttributeTexture,
+	attributesArray: AttributesTextureArray,
 	materialIndexAttribute: UIntVertexAttributeTexture,
 	materials: MaterialsTexture,
 	textures: RenderTarget2DArray,
@@ -555,9 +588,8 @@ _extends MaterialBase_
 	// specular caustics.
 	filterGlossyFactor = 0: Number,
 
-	// The colors to use for the gradient background when enabled.
-	bgGradientTop: Color,
-	bgGradientBottom: Color,
+	// The equirectangular map to render as the background.
+	backgroundMap = null: Texture,
 
 	// The transparency to render the background with. Note that the "alpha" option
 	// must be set to true on PathTracingRenderer for this field to work properly.
@@ -573,9 +605,6 @@ _extends MaterialBase_
 	// Whether to use multiple importance sampling to help the image converge more quickly
 	FEATURE_MIS = 1 : Number,
 
-	// Whether to use the "bg" gradient fields to sample for the background
-	FEATURE_GRADIENT_BG = 0 : Number
-
 	// The number of transparent pixels to allow on top of existing bounces for object transparency.
 	TRANSPARENT_TRAVERSALS = 5 : Number,
 
@@ -622,7 +651,7 @@ setTextures(
 ) : void
 ```
 
-Takes the rendering context to updateh the target for, the target dimensions of the texture array, and the array of textures to render into the 2D texture array. Every texture is stretched to the dimensions of the texture array at the same index they are provided in.
+Takes the rendering context to update the target for, the target dimensions of the texture array, and the array of textures to render into the 2D texture array. Every texture is stretched to the dimensions of the texture array at the same index they are provided in.
 
 ## PhysicalCameraUniform
 
@@ -636,6 +665,47 @@ updateFrom( camera : PerspectiveCamera | PhysicalCamera ) : void
 
 Copies all fields from the passed PhysicalCamera if available otherwise the defaults are used.
 
+## AttributesTextureArray
+
+A combined texture array used to store normal, tangent, uv, and color attributes in the same texture sampler array rather than separate samplers. Necessary to save texture slots.
+
+Normals, tangents, uvs, and color attribute data are stored in the 1st, 2nd, 3rd, and 4th layers of the array respectively.
+
+### .updateNormalAttribute
+
+```js
+updateNormalAttribute( attr : BufferAttribute ) : void
+```
+
+### .updateTangentAttribute
+
+```js
+updateTangentAttribute( attr : BufferAttribute ) : void
+```
+
+### .updateUvAttribute
+
+```js
+updateUvAttribute( attr : BufferAttribute ) : void
+```
+
+### .updateColorAttribute
+
+```js
+updateColorAttribute( attr : BufferAttribute ) : void
+```
+
+### .updateFrom
+
+```js
+updateFrom(
+	normal : BufferAttribute,
+	tangent : BufferAttribute,
+	uv : BufferAttribute,
+	color : BufferAttribute
+) : void
+```
+
 ## MaterialsTexture
 
 _extends DataTexture_

example/areaLight.js

@@ -204,9 +204,12 @@ async function init() {
 		const material = ptRenderer.material;
 
 		material.bvh.updateFrom( bvh );
-		material.normalAttribute.updateFrom( geometry.attributes.normal );
-		material.tangentAttribute.updateFrom( geometry.attributes.tangent );
-		material.uvAttribute.updateFrom( geometry.attributes.uv );
+		material.attributesArray.updateFrom(
+			geometry.attributes.normal,
+			geometry.attributes.tangent,
+			geometry.attributes.uv,
+			geometry.attributes.color,
+		);
 		material.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
 		material.textures.setTextures( renderer, 2048, 2048, textures );
 		material.materials.updateFrom( materials, textures );

example/basic.js

@@ -90,9 +90,12 @@ async function init() {
 			const material = pathTracer.material;
 
 			material.bvh.updateFrom( bvh );
-			material.normalAttribute.updateFrom( geometry.attributes.normal );
-			material.tangentAttribute.updateFrom( geometry.attributes.tangent );
-			material.uvAttribute.updateFrom( geometry.attributes.uv );
+			material.attributesArray.updateFrom(
+				geometry.attributes.normal,
+				geometry.attributes.tangent,
+				geometry.attributes.uv,
+				geometry.attributes.color,
+			);
 			material.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
 			material.textures.setTextures( renderer, 2048, 2048, textures );
 			material.materials.updateFrom( materials, textures );

example/depthOfField.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-import { PathTracingRenderer, PhysicalPathTracingMaterial, PhysicalCamera, BlurredEnvMapGenerator } from '../src/index.js';
+import { PathTracingRenderer, PhysicalPathTracingMaterial, PhysicalCamera, BlurredEnvMapGenerator, GradientEquirectTexture } from '../src/index.js';
 import { PathTracingSceneWorker } from '../src/workers/PathTracingSceneWorker.js';
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
@@ -53,14 +53,17 @@ async function init() {
 
 	scene = new THREE.Scene();
 
+	const gradientMap = new GradientEquirectTexture();
+	gradientMap.topColor.set( 0x390f20 ).convertSRGBToLinear();
+	gradientMap.bottomColor.set( 0x151b1f ).convertSRGBToLinear();
+	gradientMap.update();
+
 	ptRenderer = new PathTracingRenderer( renderer );
 	ptRenderer.camera = camera;
 	ptRenderer.material = new PhysicalPathTracingMaterial();
 	ptRenderer.tiles.set( params.tiles, params.tiles );
-	ptRenderer.material.setDefine( 'FEATURE_GRADIENT_BG', 1 );
 	ptRenderer.material.setDefine( 'FEATURE_MIS', 0 );
-	ptRenderer.material.bgGradientTop.set( 0x390f20 ).convertSRGBToLinear();
-	ptRenderer.material.bgGradientBottom.set( 0x151b1f ).convertSRGBToLinear();
+	ptRenderer.material.backgroundMap = gradientMap;
 
 	fsQuad = new FullScreenQuad( new THREE.MeshBasicMaterial( {
 		map: ptRenderer.target.texture,
@@ -147,9 +150,12 @@ async function init() {
 			const material = ptRenderer.material;
 
 			material.bvh.updateFrom( bvh );
-			material.normalAttribute.updateFrom( geometry.attributes.normal );
-			material.tangentAttribute.updateFrom( geometry.attributes.tangent );
-			material.uvAttribute.updateFrom( geometry.attributes.uv );
+			material.attributesArray.updateFrom(
+				geometry.attributes.normal,
+				geometry.attributes.tangent,
+				geometry.attributes.uv,
+				geometry.attributes.color,
+			);
 			material.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
 			material.textures.setTextures( renderer, 2048, 2048, textures );
 			material.materials.updateFrom( materials, textures );

example/index.js

@@ -29,7 +29,7 @@ import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 import { generateRadialFloorTexture } from './utils/generateRadialFloorTexture.js';
 import { PathTracingSceneWorker } from '../src/workers/PathTracingSceneWorker.js';
-import { PhysicalPathTracingMaterial, PathTracingRenderer, MaterialReducer, BlurredEnvMapGenerator } from '../src/index.js';
+import { PhysicalPathTracingMaterial, PathTracingRenderer, MaterialReducer, BlurredEnvMapGenerator, GradientEquirectTexture } from '../src/index.js';
 import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
@@ -106,7 +106,7 @@ let creditEl, loadingEl, samplesEl;
 let floorPlane, gui, stats, sceneInfo;
 let renderer, orthoCamera, perspectiveCamera, activeCamera;
 let ptRenderer, fsQuad, controls, scene;
-let envMap, envMapGenerator;
+let envMap, envMapGenerator, backgroundMap;
 let loadingModel = false;
 let delaySamples = 0;
 
@@ -135,14 +135,17 @@ async function init() {
 	orthoCamera = new OrthographicCamera( orthoWidth / - 2, orthoWidth / 2, orthoHeight / 2, orthoHeight / - 2, 0, 100 );
 	orthoCamera.position.set( - 1, 0.25, 1 );
 
+	backgroundMap = new GradientEquirectTexture();
+	backgroundMap.topColor.set( params.bgGradientTop );
+	backgroundMap.bottomColor.set( params.bgGradientBottom );
+	backgroundMap.update();
+
 	ptRenderer = new PathTracingRenderer( renderer );
 	ptRenderer.alpha = true;
 	ptRenderer.material = new PhysicalPathTracingMaterial();
 	ptRenderer.tiles.set( params.tiles, params.tiles );
-	ptRenderer.material.setDefine( 'FEATURE_GRADIENT_BG', 1 );
 	ptRenderer.material.setDefine( 'FEATURE_MIS', Number( params.multipleImportanceSampling ) );
-	ptRenderer.material.bgGradientTop.set( params.bgGradientTop );
-	ptRenderer.material.bgGradientBottom.set( params.bgGradientBottom );
+	ptRenderer.material.backgroundMap = backgroundMap;
 
 	fsQuad = new FullScreenQuad( new MeshBasicMaterial( {
 		map: ptRenderer.target.texture,
@@ -204,8 +207,6 @@ function animate() {
 	floorPlane.material.roughness = params.floorRoughness;
 	floorPlane.material.metalness = params.floorMetalness;
 	floorPlane.material.opacity = params.floorOpacity;
-	ptRenderer.material.bgGradientTop.set( params.bgGradientTop );
-	ptRenderer.material.bgGradientBottom.set( params.bgGradientBottom );
 
 	if ( ptRenderer.samples < 1.0 || ! params.enable ) {
 
@@ -371,26 +372,33 @@ function buildGui() {
 	const backgroundFolder = gui.addFolder( 'background' );
 	backgroundFolder.add( params, 'backgroundType', [ 'Environment', 'Gradient' ] ).onChange( v => {
 
-		ptRenderer.material.setDefine( 'FEATURE_GRADIENT_BG', Number( v === 'Gradient' ) );
 		if ( v === 'Gradient' ) {
 
 			scene.background = new Color( 0x060606 );
+			ptRenderer.material.backgroundMap = backgroundMap;
 
 		} else {
 
 			scene.background = scene.environment;
+			ptRenderer.material.backgroundMap = null;
 
 		}
 
 		ptRenderer.reset();
 
 	} );
-	backgroundFolder.addColor( params, 'bgGradientTop' ).onChange( () => {
+	backgroundFolder.addColor( params, 'bgGradientTop' ).onChange( v => {
+
+		backgroundMap.topColor.set( v );
+		backgroundMap.update();
 
 		ptRenderer.reset();
 
 	} );
-	backgroundFolder.addColor( params, 'bgGradientBottom' ).onChange( () => {
+	backgroundFolder.addColor( params, 'bgGradientBottom' ).onChange( v => {
+
+		backgroundMap.bottomColor.set( v );
+		backgroundMap.update();
 
 		ptRenderer.reset();
 
@@ -685,11 +693,13 @@ async function updateModel() {
 		const material = ptRenderer.material;
 
 		material.bvh.updateFrom( bvh );
-		material.normalAttribute.updateFrom( geometry.attributes.normal );
-		material.tangentAttribute.updateFrom( geometry.attributes.tangent );
-		material.uvAttribute.updateFrom( geometry.attributes.uv );
+		material.attributesArray.updateFrom(
+			geometry.attributes.normal,
+			geometry.attributes.tangent,
+			geometry.attributes.uv,
+			geometry.attributes.color,
+		);
 		material.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
-		material.colorAttribute.updateFrom( geometry.attributes.color );
 		material.textures.setTextures( renderer, 2048, 2048, textures );
 		material.materials.updateFrom( materials, textures );
 
@@ -706,6 +716,10 @@ async function updateModel() {
 		params.bgGradientTop = modelInfo.gradientTop || '#111111';
 		params.bgGradientBottom = modelInfo.gradientBot || '#000000';
 
+		backgroundMap.topColor.set( params.bgGradientTop );
+		backgroundMap.bottomColor.set( params.bgGradientBottom );
+		backgroundMap.update();
+
 		buildGui();
 
 		loadingModel = false;

example/interior.js

@@ -149,9 +149,12 @@ async function init() {
 			const material = ptRenderer.material;
 
 			material.bvh.updateFrom( bvh );
-			material.normalAttribute.updateFrom( geometry.attributes.normal );
-			material.tangentAttribute.updateFrom( geometry.attributes.tangent );
-			material.uvAttribute.updateFrom( geometry.attributes.uv );
+			material.attributesArray.updateFrom(
+				geometry.attributes.normal,
+				geometry.attributes.tangent,
+				geometry.attributes.uv,
+				geometry.attributes.color,
+			);
 			material.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
 			material.textures.setTextures( renderer, 2048, 2048, textures );
 			material.materials.updateFrom( materials, textures );

example/materialBall.js

@@ -279,9 +279,12 @@ async function init() {
 			const material = ptRenderer.material;
 
 			material.bvh.updateFrom( bvh );
-			material.normalAttribute.updateFrom( geometry.attributes.normal );
-			material.tangentAttribute.updateFrom( geometry.attributes.tangent );
-			material.uvAttribute.updateFrom( geometry.attributes.uv );
+			material.attributesArray.updateFrom(
+				geometry.attributes.normal,
+				geometry.attributes.tangent,
+				geometry.attributes.uv,
+				geometry.attributes.color,
+			);
 			material.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
 			material.textures.setTextures( renderer, 2048, 2048, textures );
 			material.materials.updateFrom( materials, textures );

example/materialDatabase.js

@@ -164,9 +164,12 @@ async function init() {
 			const material = ptRenderer.material;
 
 			material.bvh.updateFrom( bvh );
-			material.normalAttribute.updateFrom( geometry.attributes.normal );
-			material.tangentAttribute.updateFrom( geometry.attributes.tangent );
-			material.uvAttribute.updateFrom( geometry.attributes.uv );
+			material.attributesArray.updateFrom(
+				geometry.attributes.normal,
+				geometry.attributes.tangent,
+				geometry.attributes.uv,
+				geometry.attributes.color,
+			);
 			material.materialIndexAttribute.updateFrom( geometry.attributes.materialIndex );
 			material.textures.setTextures( renderer, 2048, 2048, textures );
 			material.materials.updateFrom( materials, textures );