Fix depth of field demo

Author: gkjohnson

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,

src/materials/PhysicalPathTracingMaterial.js

@@ -113,7 +113,7 @@ export class PhysicalPathTracingMaterial extends MaterialBase {
 
 				#if FEATURE_BACKGROUND_MAP
 
-				uniform vec3 backgroundMap;
+				uniform sampler2D backgroundMap;
 
 				#endif
 

src/textures/GradientEquirectTexture.js

@@ -15,7 +15,7 @@ export class GradientEquirectTexture extends ProceduralEquirectTexture {
 			_direction.setFromSpherical( polar );
 
 			const t = _direction.y * 0.5 + 0.5;
-			color.lerpColors( this.bottomColor, this.topColor, t * t );
+			color.lerpColors( this.bottomColor, this.topColor, t );
 
 		};