mrdoob · sunag · Aug 7, 2024 · Aug 6, 2024 · Mugen87 · Aug 6, 2024
diff --git a/examples/files.json b/examples/files.json
@@ -347,6 +347,7 @@
 		"webgpu_materials",
 		"webgpu_materials_basic",
 		"webgpu_materials_displacementmap",
+		"webgpu_materials_envmaps",
 		"webgpu_materials_lightmap",
 		"webgpu_materials_matcap",
 		"webgpu_materials_sss",

diff --git a/examples/screenshots/webgpu_materials_envmaps.jpg b/examples/screenshots/webgpu_materials_envmaps.jpg
diff --git a/examples/webgpu_materials_envmaps.html b/examples/webgpu_materials_envmaps.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - materials - environment maps</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgpu environment mapping example<br/>
+			Equirectangular Map by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">J&oacute;n Ragnarsson</a>.
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+			let controls, camera, scene, renderer;
+			let textureEquirec, textureCube;
+			let sphereMesh, sphereMaterial, params;
+
+			init();
+
+			function init() {
+
+				// CAMERAS
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 0, 0, 2.5 );
+
+				// SCENE
+
+				scene = new THREE.Scene();
+
+				// Textures
+
+				const loader = new THREE.CubeTextureLoader();
+				loader.setPath( 'textures/cube/Bridge2/' );
+
+				textureCube = loader.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
+
+				const textureLoader = new THREE.TextureLoader();
+
+				textureEquirec = textureLoader.load( 'textures/2294472375_24a3b8ef46_o.jpg' );
+				textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
+				textureEquirec.colorSpace = THREE.SRGBColorSpace;
+
+				scene.background = textureCube;
+
+				//
+
+				const geometry = new THREE.IcosahedronGeometry( 1, 15 );
+				sphereMaterial = new THREE.MeshBasicMaterial( { envMap: textureCube } );
+				sphereMesh = new THREE.Mesh( geometry, sphereMaterial );
+				scene.add( sphereMesh );
+
+				//
+
+				renderer = new THREE.WebGPURenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 1.5;
+				controls.maxDistance = 6;
+
+				//
+
+				params = {
+					Cube: function () {
+
+						scene.background = textureCube;
+
+						sphereMaterial.envMap = textureCube;
+						sphereMaterial.needsUpdate = true;
+
+					},
+					Equirectangular: function () {
+
+						scene.background = textureEquirec;
+
+						sphereMaterial.envMap = textureEquirec;
+						sphereMaterial.needsUpdate = true;
+
+					},
+					Refraction: false
+				};
+
+				const gui = new GUI( { width: 300 } );
+				gui.add( params, 'Cube' );
+				gui.add( params, 'Equirectangular' );
+				gui.add( params, 'Refraction' ).onChange( function ( value ) {
+
+					if ( value ) {
+
+						textureEquirec.mapping = THREE.EquirectangularRefractionMapping;
+						textureCube.mapping = THREE.CubeRefractionMapping;
+
+					} else {
+
+						textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
+						textureCube.mapping = THREE.CubeReflectionMapping;
+
+					}
+
+					sphereMaterial.needsUpdate = true;
+
+				} );
+				gui.open();
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function animate() {
+
+				camera.lookAt( scene.position );
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/src/nodes/lighting/BasicEnvironmentNode.js b/src/nodes/lighting/BasicEnvironmentNode.js
@@ -1,5 +1,6 @@
 import LightingNode from './LightingNode.js';
 import { addNodeClass } from '../core/Node.js';
+import { cubeMapNode } from '../utils/CubeMapNode.js';
 
 class BasicEnvironmentNode extends LightingNode {
 
@@ -15,7 +16,7 @@ class BasicEnvironmentNode extends LightingNode {
 
 		// environment property is used in the finish() method of BasicLightingModel
 
-		builder.context.environment = this.envNode;
+		builder.context.environment = cubeMapNode( this.envNode );
 
 	}
 

diff --git a/src/nodes/utils/CubeMapNode.js b/src/nodes/utils/CubeMapNode.js
@@ -0,0 +1,157 @@
+import TempNode from '../core/TempNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { nodeProxy } from '../shadernode/ShaderNode.js';
+import { CubeTexture } from '../../textures/CubeTexture.js';
+import { cubeTexture } from '../accessors/CubeTextureNode.js';
+import CubeRenderTarget from '../../renderers/common/CubeRenderTarget.js';
+import { CubeReflectionMapping, CubeRefractionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from '../../constants';
+
+const _cache = new WeakMap();
+
+class CubeMapNode extends TempNode {
+
+	constructor( envNode ) {
+
+		super( 'vec3' );
+
+		this.envNode = envNode;
+
+		this._cubeTexture = null;
+		this._cubeTextureNode = cubeTexture();
+
+		const defaultTexture = new CubeTexture();
+		defaultTexture.isRenderTargetTexture = true;
+
+		this._defaultTexture = defaultTexture;
+
+		this.updateBeforeType = NodeUpdateType.RENDER;
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer, material } = frame;
+
+		const envNode = this.envNode;
+
+		if ( envNode.isTextureNode || envNode.isMaterialReferenceNode ) {
+
+			const texture = ( envNode.isTextureNode ) ? envNode.value : material[ envNode.property ];
+
+			if ( texture && texture.isTexture ) {
+
+				const mapping = texture.mapping;
+
+				if ( mapping === EquirectangularReflectionMapping || mapping === EquirectangularRefractionMapping ) {
+
+					// check for converted cubemap map
+
+					if ( _cache.has( texture ) ) {
+
+						const cubeMap = _cache.get( texture );
+
+						mapTextureMapping( cubeMap, texture.mapping );
+						this._cubeTexture = cubeMap;
+
+					} else {
+
+						// create cube map from equirectangular map
+
+						const image = texture.image;
+
+						if ( isEquirectangularMapReady( image ) ) {
+
+							const renderTarget = new CubeRenderTarget( image.height );
+							renderTarget.fromEquirectangularTexture( renderer, texture );
+
+							mapTextureMapping( renderTarget.texture, texture.mapping );
+							this._cubeTexture = renderTarget.texture;
+
+							_cache.set( texture, renderTarget.texture );
+
+							texture.addEventListener( 'dispose', onTextureDispose );
+
+						} else {
+
+							// default cube texture as fallback when equirectangular texture is not yet loaded
+
+							this._cubeTexture = this._defaultTexture;
+
+						}
+
+					}
+
+					//
+
+					this._cubeTextureNode.value = this._cubeTexture;
+
+				} else {
+
+					// envNode already refers to a cube map
+
+					this._cubeTextureNode = this.envNode;
+
+				}
+
+			}
+
+		}
+
+	}
+
+	setup( builder ) {
+
+		this.updateBefore( builder );
+
+		return this._cubeTextureNode;
+
+	}
+
+}
+
+function isEquirectangularMapReady( image ) {
+
+	if ( image === null || image === undefined ) return false;
+
+	return image.height > 0;
+
+}
+
+function onTextureDispose( event ) {
+
+	const texture = event.target;
+
+	texture.removeEventListener( 'dispose', onTextureDispose );
+
+	const renderTarget = _cache.get( texture );
+
+	if ( renderTarget !== undefined ) {
+
+		_cache.delete( texture );
+
+		renderTarget.dispose();
+
+	}
+
+}
+
+function mapTextureMapping( texture, mapping ) {
+
+	if ( mapping === EquirectangularReflectionMapping ) {
+
+		texture.mapping = CubeReflectionMapping;
+
+	} else if ( mapping === EquirectangularRefractionMapping ) {
+
+		texture.mapping = CubeRefractionMapping;
+
+	}
+
+}
+
+export const cubeMapNode = nodeProxy( CubeMapNode );
+
+addNodeClass( 'CubeMapNode', CubeMapNode );
+
+export default CubeMapNode;