WebGPURenderer: CubeRenderTarget and CubeCamera

examples/files.json

@@ -309,6 +309,7 @@
 		"webgpu_backdrop",
 		"webgpu_compute",
 		"webgpu_cubemap_adjustments",
+		"webgpu_cubemap_dynamic",
 		"webgpu_cubemap_mix",
 		"webgpu_depth_texture",
 		"webgpu_equirectangular",

examples/jsm/nodes/display/ToneMappingNode.js

@@ -95,6 +95,15 @@ class ToneMappingNode extends TempNode {
 
 	}
 
+	getCacheKey() {
+
+		let cacheKey = super.getCacheKey();
+		cacheKey = '{toneMapping:' + this.toneMapping + ',nodes:' + cacheKey + '}';
+
+		return cacheKey;
+
+	}
+
 	construct( builder ) {
 
 		const colorNode = this.colorNode || builder.context.color;

examples/jsm/nodes/functions/PhysicalLightingModel.js

@@ -40,7 +40,9 @@ const RE_IndirectSpecular_Physical = new ShaderNode( ( inputs ) => {
 
 	computeMultiscattering( singleScattering, multiScattering );
 
-	const diffuse = diffuseColor.mul( singleScattering.add( multiScattering ).oneMinus() );
+	const totalScattering = singleScattering.add( multiScattering );
+
+	const diffuse = diffuseColor.mul( totalScattering.r.max( totalScattering.g ).max( totalScattering.b ).oneMinus() );
 
 	reflectedLight.indirectSpecular.addAssign( radiance.mul( singleScattering ) );
 	reflectedLight.indirectSpecular.addAssign( multiScattering.mul( cosineWeightedIrradiance ) );

examples/jsm/nodes/lighting/EnvironmentNode.js

@@ -9,6 +9,8 @@ import { transformedNormalView, transformedNormalWorld } from '../accessors/Norm
 import { positionViewDirection } from '../accessors/PositionNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { float, vec2 } from '../shadernode/ShaderNode.js';
+import { cubeTexture } from '../accessors/CubeTextureNode.js';
+import { reference } from '../accessors/ReferenceNode.js';
 
 class EnvironmentNode extends LightingNode {
 
@@ -22,9 +24,21 @@ class EnvironmentNode extends LightingNode {
 
 	construct( builder ) {
 
-		const envNode = this.envNode;
+		let envNode = this.envNode;
 		const properties = builder.getNodeProperties( this );
 
+		if ( envNode.isTextureNode && envNode.value.isCubeTexture !== true ) {
+
+			const texture = envNode.value;
+			const renderer = builder.renderer;
+
+			// @TODO: Add dispose logic here
+			const cubeRTT = builder.getCubeRenderTarget( 512 ).fromEquirectangularTexture( renderer, texture );
+
+			envNode = cubeTexture( cubeRTT.texture );
+
+		}
+
 		let reflectVec;
 		let radianceTextureUVNode;
 		let irradianceTextureUVNode;
@@ -120,9 +134,11 @@ class EnvironmentNode extends LightingNode {
 
 		//
 
-		builder.context.radiance.addAssign( isolateRadianceFlowContext );
+		const intensity = reference( 'envMapIntensity', 'float', builder.material );
+
+		builder.context.radiance.addAssign( isolateRadianceFlowContext.mul( intensity ) );
 
-		builder.context.iblIrradiance.addAssign( irradianceContext.mul( Math.PI ) );
+		builder.context.iblIrradiance.addAssign( irradianceContext.mul( Math.PI ).mul( intensity ) );
 
 		properties.radianceContext = isolateRadianceFlowContext;
 		properties.irradianceContext = irradianceContext;

examples/jsm/nodes/materials/NodeMaterial.js

@@ -1,4 +1,4 @@
-import { Material, ShaderMaterial } from 'three';
+import { Material, ShaderMaterial, NoColorSpace } from 'three';
 import { getNodeChildren, getCacheKey } from '../core/NodeUtils.js';
 import { attribute } from '../core/AttributeNode.js';
 import { diffuseColor } from '../core/PropertyNode.js';
@@ -10,6 +10,7 @@ import { instance } from '../accessors/InstanceNode.js';
 import { positionLocal } from '../accessors/PositionNode.js';
 import { skinning } from '../accessors/SkinningNode.js';
 import { texture } from '../accessors/TextureNode.js';
+import { cubeTexture } from '../accessors/CubeTextureNode.js';
 import { lightsWithoutWrap } from '../lighting/LightsNode.js';
 import { mix } from '../math/MathNode.js';
 import { float, vec3, vec4 } from '../shadernode/ShaderNode.js';
@@ -165,9 +166,33 @@ class NodeMaterial extends ShaderMaterial {
 
 	}
 
+	getEnvNode( builder ) {
+
+		let node = null;
+
+		if ( this.envNode ) {
+
+			node = this.envNode;
+
+		} else if ( this.envMap ) {
+
+			node = this.envMap.isCubeTexture ? cubeTexture( this.envMap ) : texture( this.envMap );
+
+		} else if ( builder.environmentNode ) {
+
+			node = builder.environmentNode;
+
+		}
+
+		return node;
+
+	}
+
 	constructLights( builder ) {
 
-		const envNode = this.envNode || builder.environmentNode;
+		const envNode = this.getEnvNode( builder );
+
+		//
 
 		const materialLightsNode = [];
 
@@ -257,7 +282,21 @@ class NodeMaterial extends ShaderMaterial {
 
 		// ENCODING
 
-		outputNode = outputNode.colorSpace( renderer.outputColorSpace );
+		const renderTarget = renderer.getRenderTarget();
+
+		let outputColorSpace;
+
+		if ( renderTarget !== null ) {
+
+			outputColorSpace = renderTarget.texture.colorSpace;
+
+		} else {
+
+			outputColorSpace = renderer.outputColorSpace;
+
+		}
+
+		if ( outputColorSpace !== NoColorSpace ) outputNode = outputNode.colorSpace( outputColorSpace );
 
 		// FOG
 

examples/jsm/renderers/common/CubeRenderTarget.js

@@ -0,0 +1,65 @@
+import { WebGLCubeRenderTarget, Scene, CubeCamera, BoxGeometry, Mesh, BackSide, NoBlending, LinearFilter, LinearMipmapLinearFilter } from 'three';
+import { equirectUV } from '../../nodes/utils/EquirectUVNode.js';
+import { texture as TSL_Texture } from '../../nodes/accessors/TextureNode.js';
+import { positionWorldDirection } from '../../nodes/accessors/PositionNode.js';
+import { createNodeMaterialFromType } from '../../nodes/materials/NodeMaterial.js';
+
+// @TODO: Consider rename WebGLCubeRenderTarget to just CubeRenderTarget
+
+class CubeRenderTarget extends WebGLCubeRenderTarget {
+
+	constructor( size = 1, options = {} ) {
+
+		super( size, options );
+
+		this.isCubeRenderTarget = true;
+
+	}
+
+	fromEquirectangularTexture( renderer, texture ) {
+
+		const currentMinFilter = texture.minFilter;
+		const currentGenerateMipmaps = texture.generateMipmaps;
+
+		texture.generateMipmaps = true;
+
+		this.texture.type = texture.type;
+		this.texture.colorSpace = texture.colorSpace;
+
+		this.texture.generateMipmaps = texture.generateMipmaps;
+		this.texture.minFilter = texture.minFilter;
+		this.texture.magFilter = texture.magFilter;
+
+		const geometry = new BoxGeometry( 5, 5, 5 );
+
+		const uvNode = equirectUV( positionWorldDirection );
+
+		const material = createNodeMaterialFromType( 'MeshBasicNodeMaterial' );
+		material.colorNode = TSL_Texture( texture, uvNode, 0 );
+		material.side = BackSide;
+		material.blending = NoBlending;
+
+		const mesh = new Mesh( geometry, material );
+
+		const scene = new Scene();
+		scene.add( mesh );
+
+		// Avoid blurred poles
+		if ( texture.minFilter === LinearMipmapLinearFilter ) texture.minFilter = LinearFilter;
+
+		const camera = new CubeCamera( 1, 10, this );
+		camera.update( renderer, scene );
+
+		texture.minFilter = currentMinFilter;
+		texture.currentGenerateMipmaps = currentGenerateMipmaps;
+
+		mesh.geometry.dispose();
+		mesh.material.dispose();
+
+		return this;
+
+	}
+
+}
+
+export default CubeRenderTarget;

examples/jsm/renderers/common/RenderContext.js

@@ -28,6 +28,7 @@ class RenderContext {
 
 		this.texture = null;
 		this.depthTexture = null;
+		this.activeCubeFace = 0;
 
 	}
 

examples/jsm/renderers/common/Renderer.js

@@ -79,6 +79,7 @@ class Renderer {
 		this._clearStencil = 0;
 
 		this._renderTarget = null;
+		this._currentActiveCubeFace = 0;
 
 		this._initialized = false;
 		this._initPromise = null;
@@ -90,6 +91,10 @@ class Renderer {
 			type: null
 		};
 
+		this.xr = {
+			enabled: false
+		};
+
 	}
 
 	async init() {
@@ -154,7 +159,7 @@ class Renderer {
 
 	}
 
-	async compile( scene, camera ) {
+	async compile( /*scene, camera*/ ) {
 
 		console.warn( 'THREE.Renderer: .compile() is not implemented yet.' );
 
@@ -175,6 +180,7 @@ class Renderer {
 
 		const renderContext = this._renderContexts.get( scene, camera );
 		const renderTarget = this._renderTarget;
+		const activeCubeFace = this._activeCubeFace;
 
 		this._currentRenderContext = renderContext;
 
@@ -269,6 +275,8 @@ class Renderer {
 
 		}
 
+		renderContext.activeCubeFace = activeCubeFace;
+
 		//
 
 		this._nodes.updateScene( scene );
@@ -560,9 +568,10 @@ class Renderer {
 
 	}
 
-	setRenderTarget( renderTarget ) {
+	setRenderTarget( renderTarget, activeCubeFace = 0 ) {
 
 		this._renderTarget = renderTarget;
+		this._activeCubeFace = activeCubeFace;
 
 	}
 

examples/jsm/renderers/common/SampledTexture.js

@@ -11,7 +11,7 @@ class SampledTexture extends Binding {
 		this.id = id ++;
 
 		this.texture = texture;
-		this.version = 0;
+		this.version = texture.version;
 
 		this.isSampledTexture = true;
 

examples/jsm/renderers/common/Sampler.js

@@ -7,7 +7,7 @@ class Sampler extends Binding {
 		super( name );
 
 		this.texture = texture;
-		this.version = 0;
+		this.version = texture.version;
 
 		this.isSampler = true;
 

examples/jsm/renderers/common/Textures.js

@@ -1,5 +1,7 @@
 import DataMap from './DataMap.js';
-import { DepthTexture, DepthStencilFormat, UnsignedInt248Type } from 'three';
+import { Vector2, DepthTexture, DepthStencilFormat, UnsignedInt248Type } from 'three';
+
+const _size = new Vector2();
 
 class Textures extends DataMap {
 
@@ -17,6 +19,7 @@ class Textures extends DataMap {
 		const renderTargetData = this.get( renderTarget );
 
 		const texture = renderTarget.texture;
+		const size = this.getSize( texture );
 
 		let depthTexture = renderTarget.depthTexture || renderTargetData.depthTexture;
 
@@ -25,23 +28,23 @@ class Textures extends DataMap {
 			depthTexture = new DepthTexture();
 			depthTexture.format = DepthStencilFormat;
 			depthTexture.type = UnsignedInt248Type;
-			depthTexture.image.width = texture.image.width;
-			depthTexture.image.height = texture.image.height;
+			depthTexture.image.width = size.width;
+			depthTexture.image.height = size.height;
 
 		}
 
-		if ( renderTargetData.width !== texture.image.width || texture.image.height !== renderTargetData.height ) {
+		if ( renderTargetData.width !== size.width || size.height !== renderTargetData.height ) {
 
 			texture.needsUpdate = true;
 			depthTexture.needsUpdate = true;
 
-			depthTexture.image.width = texture.image.width;
-			depthTexture.image.height = texture.image.height;
+			depthTexture.image.width = size.width;
+			depthTexture.image.height = size.height;
 
 		}
 
-		renderTargetData.width = texture.image.width;
-		renderTargetData.height = texture.image.height;
+		renderTargetData.width = size.width;
+		renderTargetData.height = size.height;
 		renderTargetData.texture = texture;
 		renderTargetData.depthTexture = depthTexture;
 
@@ -171,6 +174,24 @@ class Textures extends DataMap {
 
 	}
 
+	getSize( texture, target = _size ) {
+
+		if ( texture.isCubeTexture ) {
+
+			target.width = texture.image[ 0 ].width;
+			target.height = texture.image[ 0 ].height;
+
+		} else {
+
+			target.width = texture.image.width;
+			target.height = texture.image.height;
+
+		}
+
+		return target;
+
+	}
+
 	_destroyTexture( texture ) {
 
 		this.backend.destroySampler( texture );