[WIP] Add CubeTexture blur

examples/webgpu_cubemap_adjustments.html

@@ -72,6 +72,12 @@
 				cube2Texture.generateMipmaps = true;
 				cube2Texture.minFilter = THREE.LinearMipmapLinearFilter;
 
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				await renderer.init();
+
+				const cube2Blur = new THREE.CubeRenderTarget(cube2Texture.source.data[0].width);
+				cube2Blur.fromCubeTexture(renderer, cube2Texture, 0.1);
+
 				// nodes and environment
 
 				const adjustments = {
@@ -95,7 +101,7 @@
 
 					const custom1UV = reflectNode.xyz.mul( uniform( rotateY1Matrix ) );
 					const custom2UV = reflectNode.xyz.mul( uniform( rotateY2Matrix ) );
-					const mixCubeMaps = mix( pmremTexture( cube1Texture, custom1UV ), pmremTexture( cube2Texture, custom2UV ), positionNode.y.add( mixNode ).clamp() );
+					const mixCubeMaps = mix( pmremTexture( cube1Texture, custom1UV ), pmremTexture( cube2Blur.texture, custom2UV ), positionNode.y.add( mixNode ).clamp() );
 
 					const proceduralEnv = mix( mixCubeMaps, normalWorld, proceduralNode );
 
@@ -133,7 +139,6 @@
 
 				// renderer and controls
 
-				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.LinearToneMapping;

src/Three.WebGPU.js

@@ -6,6 +6,7 @@ export { default as Lighting } from './renderers/common/Lighting.js';
 export { default as BundleGroup } from './renderers/common/BundleGroup.js';
 export { default as QuadMesh } from './renderers/common/QuadMesh.js';
 export { default as PMREMGenerator } from './renderers/common/extras/PMREMGenerator.js';
+export { default as CubeRenderTarget } from './renderers/common/CubeRenderTarget.js';
 export { default as PostProcessing } from './renderers/common/PostProcessing.js';
 import * as PostProcessingUtils from './renderers/common/PostProcessingUtils.js';
 export { PostProcessingUtils };

src/nodes/pmrem/PMREMUtils.js

@@ -214,7 +214,7 @@ export const textureCubeUV = /*@__PURE__*/ Fn( ( [ envMap, sampleDir_immutable,
 
 } );
 
-const bilinearCubeUV = /*@__PURE__*/ Fn( ( [ envMap, direction_immutable, mipInt_immutable, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP ] ) => {
+export const bilinearCubeUV = /*@__PURE__*/ Fn( ( [ envMap, direction_immutable, mipInt_immutable, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP ] ) => {
 
 	const mipInt = float( mipInt_immutable ).toVar();
 	const direction = vec3( direction_immutable );
@@ -241,7 +241,7 @@ const bilinearCubeUV = /*@__PURE__*/ Fn( ( [ envMap, direction_immutable, mipInt
 
 } );
 
-const getSample = /*@__PURE__*/ Fn( ( { envMap, mipInt, outputDirection, theta, axis, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) => {
+const getSample = /*@__PURE__*/ Fn( ( { outputDirection, theta, axis, sampler } ) => {
 
 	const cosTheta = cos( theta );
 
@@ -250,11 +250,11 @@ const getSample = /*@__PURE__*/ Fn( ( { envMap, mipInt, outputDirection, theta,
 		.add( axis.cross( outputDirection ).mul( sin( theta ) ) )
 		.add( axis.mul( axis.dot( outputDirection ).mul( cosTheta.oneMinus() ) ) );
 
-	return bilinearCubeUV( envMap, sampleDirection, mipInt, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP );
+	return sampler( sampleDirection );
 
 } );
 
-export const blur = /*@__PURE__*/ Fn( ( { n, latitudinal, poleAxis, outputDirection, weights, samples, dTheta, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) => {
+export const blur = /*@__PURE__*/ Fn( ( { n, latitudinal, poleAxis, outputDirection, weights, samples, dTheta, sampler } ) => {
 
 	const axis = vec3( select( latitudinal, poleAxis, cross( poleAxis, outputDirection ) ) ).toVar();
 
@@ -267,7 +267,7 @@ export const blur = /*@__PURE__*/ Fn( ( { n, latitudinal, poleAxis, outputDirect
 	axis.assign( normalize( axis ) );
 
 	const gl_FragColor = vec3().toVar();
-	gl_FragColor.addAssign( weights.element( int( 0 ) ).mul( getSample( { theta: 0.0, axis, outputDirection, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) ) );
+	gl_FragColor.addAssign( weights.element( int( 0 ) ).mul( getSample( { theta: 0.0, axis, outputDirection, sampler } ) ) );
 
 	Loop( { start: int( 1 ), end: n }, ( { i } ) => {
 
@@ -278,11 +278,59 @@ export const blur = /*@__PURE__*/ Fn( ( { n, latitudinal, poleAxis, outputDirect
 		} );
 
 		const theta = float( dTheta.mul( float( i ) ) ).toVar();
-		gl_FragColor.addAssign( weights.element( i ).mul( getSample( { theta: theta.mul( - 1.0 ), axis, outputDirection, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) ) );
-		gl_FragColor.addAssign( weights.element( i ).mul( getSample( { theta, axis, outputDirection, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) ) );
+		gl_FragColor.addAssign( weights.element( i ).mul( getSample( { theta: theta.mul( - 1.0 ), axis, outputDirection, sampler } ) ) );
+		gl_FragColor.addAssign( weights.element( i ).mul( getSample( { theta, axis, outputDirection, sampler } ) ) );
 
 	} );
 
 	return vec4( gl_FragColor, 1 );
 
 } );
+
+export const getBlurParams = ( sigmaRadians, cubeRes, maxSamples )=>{
+
+	// Number of standard deviations at which to cut off the discrete approximation.
+	const STANDARD_DEVIATIONS = 3;
+
+	const radiansPerPixel = Math.PI / ( 2 * cubeRes );
+	const sigmaPixels = sigmaRadians / radiansPerPixel;
+	const samples = 1 + Math.floor( STANDARD_DEVIATIONS * sigmaPixels );
+
+	if ( samples > maxSamples ) {
+
+		console.warn( `sigmaRadians, ${
+			sigmaRadians}, is too large and will clip, as it requested ${
+			samples} samples when the maximum is set to ${maxSamples}` );
+
+	}
+
+	const weights = new Array( maxSamples ).fill( 0 );
+	let sum = 0;
+
+	for ( let i = 0; i < samples; ++ i ) {
+
+		const x = i / sigmaPixels;
+		const weight = Math.exp( - x * x / 2 );
+		weights[ i ] = weight;
+
+		if ( i === 0 ) {
+
+			sum += weight;
+
+		} else {
+
+			sum += 2 * weight;
+
+		}
+
+	}
+
+	for ( let i = 0; i < weights.length; i ++ ) {
+
+		weights[ i ] = weights[ i ] / sum;
+
+	}
+
+	return { radiansPerPixel, samples, weights };
+
+};

src/renderers/common/CubeRenderTarget.js

@@ -2,13 +2,19 @@
 import { texture as TSL_Texture } from '../../nodes/accessors/TextureNode.js';
 import { positionWorldDirection } from '../../nodes/accessors/Position.js';
 import NodeMaterial from '../../materials/nodes/NodeMaterial.js';
+import { blur, getBlurParams } from '../../nodes/pmrem/PMREMUtils.js';
+import { uniform } from '../../nodes/core/UniformNode.js';
+import { uniformArray } from '../../nodes/accessors/UniformArrayNode.js';
+import { float, vec3, Fn } from '../../nodes/tsl/TSLBase.js';
 
 import { WebGLCubeRenderTarget } from '../../renderers/WebGLCubeRenderTarget.js';
 import { Scene } from '../../scenes/Scene.js';
 import { CubeCamera } from '../../cameras/CubeCamera.js';
 import { BoxGeometry } from '../../geometries/BoxGeometry.js';
 import { Mesh } from '../../objects/Mesh.js';
 import { BackSide, NoBlending, LinearFilter, LinearMipmapLinearFilter } from '../../constants.js';
+import { cubeTexture as TSL_CubeTexture } from '../../nodes/accessors/CubeTextureNode.js';
+import { Vector3 } from '../../math/Vector3.js';
 
 // @TODO: Consider rename WebGLCubeRenderTarget to just CubeRenderTarget
 
@@ -72,6 +78,91 @@
 
 	}
 
+	fromCubeTexture( renderer, cubeTex, sigmaRadians = 0, poleAxis = new Vector3( 0, 1, 0 ) ) {
+
+		const currentGenerateMipmaps = cubeTex.generateMipmaps;
+
+		cubeTex.generateMipmaps = true;
+
+		this.texture.type = cubeTex.type;
+		this.texture.colorSpace = cubeTex.colorSpace;
+
+		this.texture.generateMipmaps = cubeTex.generateMipmaps;
+		this.texture.minFilter = cubeTex.minFilter;
+		this.texture.magFilter = cubeTex.magFilter;
+
+		// The maximum length of the blur for loop. Smaller sigmas will use fewer
+		// samples and exit early, but not recompile the shader.
+		const MAX_SAMPLES = 20;
+
+		const blurMaterial = new NodeMaterial();
+		blurMaterial.side = BackSide;
+		blurMaterial.depthTest = false;
+		blurMaterial.depthWrite = false;
+		blurMaterial.blending = NoBlending;
+
+		const weights = uniformArray( new Array( MAX_SAMPLES ).fill( 0 ) );
+		const dTheta = uniform( 0 );
+		const n = float( MAX_SAMPLES );
+		const latitudinal = uniform( 0 ); // false, bool
+		const samples = uniform( 1 ); // int
+		const envMap = TSL_CubeTexture( null );
+
+		const cubeSampler = Fn( ( [ sampleDirection ] )=>{
+
+			return envMap.sample( sampleDirection );
+
+		} );
+		blurMaterial.fragmentNode = blur( { n, latitudinal: latitudinal.equal( 1 ), poleAxis: vec3( poleAxis ), outputDirection: positionWorldDirection, weights, samples, dTheta, sampler: cubeSampler } );
+
+		const geometry = new BoxGeometry( 5, 5, 5 );
+		const mesh = new Mesh( geometry, blurMaterial );
+
+		const scene = new Scene();
+		scene.add( mesh );
+
+		const camera = new CubeCamera( 1, 10, this );
+
+		const width = cubeTex.source.data[0].width;
+
+		envMap.value = cubeTex;
+		latitudinal.value = 1;
+		const blurParams1 = getBlurParams( sigmaRadians, width, MAX_SAMPLES );
+		weights.value = blurParams1.weights;
+		samples.value = blurParams1.samples;
+		dTheta.value = blurParams1.radiansPerPixel;
+
+		if ( sigmaRadians <= 0 ) {
+
+			camera.update( renderer, scene );
+
+		} else {
+
+			const blurTarget = new CubeRenderTarget( Math.min( this.width, width ) );
+			camera.renderTarget = blurTarget;
+
+			camera.update( renderer, scene );
+
+			camera.renderTarget = this;
+			envMap.value = blurTarget.texture;
+			latitudinal.value = 0;
+			const blurParams2 = getBlurParams( sigmaRadians, blurTarget.width, MAX_SAMPLES );
+			weights.value = blurParams2.weights;
+			samples.value = blurParams2.samples;
+			dTheta.value = blurParams2.radiansPerPixel;
+
+			camera.update( renderer, scene );
+
+			blurTarget.dispose();
+
+		}
+
+		cubeTex.currentGenerateMipmaps = currentGenerateMipmaps;
+		geometry.dispose();
+		blurMaterial.dispose();
+
+	}
+
 }
 
 export default CubeRenderTarget;