Make equirectangular reflections / refractions backwards compatible. (#19911)

* Remove Equirect Reflection/Refraction Mapping

* Reverted EquirectangularReflectionMapping and EquirectangularRefractionMapping removals.

* Added EquirectangularTexture and EquirectangularTextureLoader.

* WebGLCubeRenderTarget: Avoid using renderer.render() in fromEquirectangularTexture().

* WebGLBackground: Support EquirectangularTextures as background.

* Examples: Simplified webgl_materials_envmaps example.

* Fixed EquirectangularTextureLoader.d.ts

* Removed EquirectangularTextureLoader

* WebGLBackground: Fixed breaking when using Color as background.

* Examples: Fixed FBXLoader and LWOLoader.

* WebGLTextures: Moved cubeTexture code to its own class.

* WebGLCubeMaps: Handle CubeUVReflectionMapping and CubeUVRefractionMapping.

* WebGLCubeRenderTarget: Renamed isWebGLCubeTexture hack to isWebGLCubeRenderTargetTexture.

* Removed EquirectangularTexture

* WebGLCubeMaps: Simplified and fixed some breakage.

* Reverted more removals.

* WebGLRenderer: Check object.geometry before updating attributes.

* WebGLRenderer: Added getRenderList and setRenderList.

* WebGLBackground: Added WebGLCubeRenderTarget support back.

* Reverted comment removal.

* WebGLCubeRenderTarget: Avoid using mipmaps in fromEquirectangularTexture.

* WebGLCubeRenderTarget: Reverted generateMipmaps/migFilter/magFilter removal.

* WebGLCubeMaps: Added DataTexture support.

* Examples: Added more detail to sphere in webgl_materials_envmap.

* WebGLCubeRenderTarget: Improved LinearMipmapLinearFilter handling.

* WebGLCubeMaps: Added support for CompressedTextures.

Co-authored-by: WestLangley <[email protected]>

docs/api/zh/materials/MeshBasicMaterial.html

@@ -94,6 +94,8 @@
 		<h3>[property:Float refractionRatio]</h3>
 		<p> 空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式[page:Textures THREE.CubeRefractionMapping]
 			和[page:Textures THREE.EquirectangularRefractionMapping]一起使用。
+			The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material.
+			It is used with environment mapping mode [page:Textures THREE.CubeRefractionMapping].
 			折射率不应超过1。默认值为*0.98*。
 		</p>
 

docs/api/zh/materials/MeshLambertMaterial.html

@@ -115,6 +115,8 @@
 		<h3>[property:Float refractionRatio]</h3>
 		<p>空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式[page:Textures THREE.CubeRefractionMapping]
 			和[page:Textures THREE.EquirectangularRefractionMapping]一起使用。
+			The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material.
+			It is used with environment mapping mode [page:Textures THREE.CubeRefractionMapping].
 			折射率不应超过1。默认值为*0.98*。
 		</p>
 

docs/api/zh/materials/MeshPhongMaterial.html

@@ -151,6 +151,8 @@
 		<h3>[property:Float refractionRatio]</h3>
 		<p> 空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式[page:Textures THREE.CubeRefractionMapping]
 			和[page:Textures THREE.EquirectangularRefractionMapping]一起使用。
+			The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material.
+			It is used with environment mapping mode [page:Textures THREE.CubeRefractionMapping].
 			折射率不应超过1。默认值为*0.98*。
 		</p>
 

docs/api/zh/materials/MeshStandardMaterial.html

@@ -188,6 +188,8 @@
 		<h3>[property:Float refractionRatio]</h3>
 		<p> 空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式[page:Textures THREE.CubeRefractionMapping]
 			和[page:Textures THREE.EquirectangularRefractionMapping]一起使用。
+			The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material.
+			It is used with environment mapping mode [page:Textures THREE.CubeRefractionMapping].
 			折射率不应超过1。默认值为*0.98*。
 		</p>
 

examples/webgl_materials_envmaps.html

@@ -22,10 +22,8 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var controls, camera, scene, renderer;
-			var cameraCube, sceneCube;
 			var textureEquirec, textureCube;
-			var cubeMesh, sphereMesh;
-			var sphereMaterial;
+			var sphereMesh, sphereMaterial;
 
 			init();
 			animate();
@@ -36,12 +34,10 @@
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.set( 0, 0, 1000 );
-				cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				// SCENE
 
 				scene = new THREE.Scene();
-				sceneCube = new THREE.Scene();
 
 				// Lights
 
@@ -50,12 +46,10 @@
 
 				// Textures
 
-				var r = 'textures/cube/Bridge2/';
-				var urls = [ r + 'posx.jpg', r + 'negx.jpg',
-							 r + 'posy.jpg', r + 'negy.jpg',
-							 r + 'posz.jpg', r + 'negz.jpg' ];
+				var loader = new THREE.CubeTextureLoader();
+				loader.setPath( 'textures/cube/Bridge2/' );
 
-				textureCube = new THREE.CubeTextureLoader().load( urls );
+				textureCube = loader.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
 				textureCube.encoding = THREE.sRGBEncoding;
 
 				var textureLoader = new THREE.TextureLoader();
@@ -64,65 +58,22 @@
 				textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
 				textureEquirec.encoding = THREE.sRGBEncoding;
 
-				// Materials
-
-				var equirectShader = THREE.ShaderLib[ 'equirect' ];
-
-				var equirectMaterial = new THREE.ShaderMaterial( {
-					uniforms: THREE.UniformsUtils.clone( equirectShader.uniforms ),
-					fragmentShader: equirectShader.fragmentShader,
-					vertexShader: equirectShader.vertexShader,
-					depthWrite: false,
-					side: THREE.BackSide
-				} );
-
-				equirectMaterial.uniforms[ 'tEquirect' ].value = textureEquirec;
-
-				// enable code injection for non-built-in material
-				Object.defineProperty( equirectMaterial, 'map', {
-
-					get: function () {
-
-						return this.uniforms.tEquirect.value;
-
-					}
-
-				} );
-
-				var cubeShader = THREE.ShaderLib[ 'cube' ];
-
-				var cubeMaterial = new THREE.ShaderMaterial( {
-					uniforms: THREE.UniformsUtils.clone( cubeShader.uniforms ),
-					fragmentShader: cubeShader.fragmentShader,
-					vertexShader: cubeShader.vertexShader,
-					depthWrite: false,
-					side: THREE.BackSide
-				} );
-
-				cubeMaterial.envMap = textureCube;
-
-				// Skybox
-
-				cubeMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), cubeMaterial );
-				sceneCube.add( cubeMesh );
+				scene.background = textureCube;
 
 				//
 
-				var geometry = new THREE.SphereBufferGeometry( 400.0, 48, 24 );
+				var geometry = new THREE.IcosahedronBufferGeometry( 400, 4 );
 				sphereMaterial = new THREE.MeshLambertMaterial( { envMap: textureCube } );
 				sphereMesh = new THREE.Mesh( geometry, sphereMaterial );
-
 				scene.add( sphereMesh );
 
 				//
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				document.body.appendChild( renderer.domElement );
-
 				renderer.outputEncoding = THREE.sRGBEncoding;
+				document.body.appendChild( renderer.domElement );
 
 				//
 
@@ -135,16 +86,16 @@
 				var params = {
 					Cube: function () {
 
-						cubeMesh.material = cubeMaterial;
-						cubeMesh.visible = true;
+						scene.background = textureCube;
+
 						sphereMaterial.envMap = textureCube;
 						sphereMaterial.needsUpdate = true;
 
 					},
 					Equirectangular: function () {
 
-						cubeMesh.material = equirectMaterial;
-						cubeMesh.visible = true;
+						scene.background = textureEquirec;
+
 						sphereMaterial.envMap = textureEquirec;
 						sphereMaterial.needsUpdate = true;
 
@@ -183,9 +134,6 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				cameraCube.aspect = window.innerWidth / window.innerHeight;
-				cameraCube.updateProjectionMatrix();
-
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
@@ -203,9 +151,6 @@
 			function render() {
 
 				camera.lookAt( scene.position );
-				cameraCube.rotation.copy( camera.rotation );
-
-				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_envmaps_parallax.html

@@ -173,22 +173,6 @@
 
 						vec4 envMapColor = textureCubeUV( envMap, reflectVec, roughness );
 
-					#elif defined( ENVMAP_TYPE_EQUIREC )
-
-						vec2 sampleUV = equirectUv( reflectVec );
-
-						#ifdef TEXTURE_LOD_EXT
-
-							vec4 envMapColor = texture2DLodEXT( envMap, sampleUV, specularMIPLevel );
-
-						#else
-
-							vec4 envMapColor = texture2D( envMap, sampleUV, specularMIPLevel );
-
-						#endif
-
-						envMapColor.rgb = envMapTexelToLinear( envMapColor ).rgb;
-
 					#endif
 
 					return envMapColor.rgb * envMapIntensity;

src/Three.js

@@ -38,8 +38,8 @@ export * from './geometries/Geometries.js';
 export * from './materials/Materials.js';
 export { AnimationLoader } from './loaders/AnimationLoader.js';
 export { CompressedTextureLoader } from './loaders/CompressedTextureLoader.js';
-export { DataTextureLoader } from './loaders/DataTextureLoader.js';
 export { CubeTextureLoader } from './loaders/CubeTextureLoader.js';
+export { DataTextureLoader } from './loaders/DataTextureLoader.js';
 export { TextureLoader } from './loaders/TextureLoader.js';
 export { ObjectLoader } from './loaders/ObjectLoader.js';
 export { MaterialLoader } from './loaders/MaterialLoader.js';

src/renderers/WebGLCubeRenderTarget.js

@@ -1,5 +1,4 @@
-import { BackSide, NoBlending, RGBAFormat } from '../constants.js';
-import { Scene } from '../scenes/Scene.js';
+import { BackSide, LinearFilter, LinearMipmapLinearFilter, NoBlending, RGBAFormat } from '../constants.js';
 import { Mesh } from '../objects/Mesh.js';
 import { BoxBufferGeometry } from '../geometries/BoxGeometry.js';
 import { ShaderMaterial } from '../materials/ShaderMaterial.js';
@@ -19,6 +18,8 @@ function WebGLCubeRenderTarget( size, options, dummy ) {
 
 	WebGLRenderTarget.call( this, size, size, options );
 
+	this.texture.isWebGLCubeRenderTargetTexture = true; // HACK Why is texture not a CubeTexture?
+
 }
 
 WebGLCubeRenderTarget.prototype = Object.create( WebGLRenderTarget.prototype );
@@ -36,8 +37,6 @@ WebGLCubeRenderTarget.prototype.fromEquirectangularTexture = function ( renderer
 	this.texture.minFilter = texture.minFilter;
 	this.texture.magFilter = texture.magFilter;
 
-	const scene = new Scene();
-
 	const shader = {
 
 		uniforms: {
@@ -84,6 +83,8 @@ WebGLCubeRenderTarget.prototype.fromEquirectangularTexture = function ( renderer
 		`
 	};
 
+	const geometry = new BoxBufferGeometry( 5, 5, 5 );
+
 	const material = new ShaderMaterial( {
 
 		name: 'CubemapFromEquirect',
@@ -98,12 +99,22 @@ WebGLCubeRenderTarget.prototype.fromEquirectangularTexture = function ( renderer
 
 	material.uniforms.tEquirect.value = texture;
 
-	const mesh = new Mesh( new BoxBufferGeometry( 5, 5, 5 ), material );
+	const mesh = new Mesh( geometry, material );
 
-	scene.add( mesh );
+	const currentMinFilter = texture.minFilter;
+	const currentRenderList = renderer.getRenderList();
+	const currentRenderTarget = renderer.getRenderTarget();
+
+	// Avoid blurred poles
+	if ( texture.minFilter === LinearMipmapLinearFilter ) texture.minFilter = LinearFilter;
 
 	const camera = new CubeCamera( 1, 10, this );
-	camera.update( renderer, scene );
+	camera.update( renderer, mesh );
+
+	texture.minFilter = currentMinFilter;
+
+	renderer.setRenderTarget( currentRenderTarget );
+	renderer.setRenderList( currentRenderList );
 
 	mesh.geometry.dispose();
 	mesh.material.dispose();

src/renderers/WebGLRenderer.js

@@ -21,6 +21,7 @@ import { WebGLBindingStates } from './webgl/WebGLBindingStates.js';
 import { WebGLBufferRenderer } from './webgl/WebGLBufferRenderer.js';
 import { WebGLCapabilities } from './webgl/WebGLCapabilities.js';
 import { WebGLClipping } from './webgl/WebGLClipping.js';
+import { WebGLCubeMaps } from './webgl/WebGLCubeMaps.js';
 import { WebGLExtensions } from './webgl/WebGLExtensions.js';
 import { WebGLGeometries } from './webgl/WebGLGeometries.js';
 import { WebGLIndexedBufferRenderer } from './webgl/WebGLIndexedBufferRenderer.js';
@@ -251,7 +252,7 @@ function WebGLRenderer( parameters ) {
 	}
 
 	let extensions, capabilities, state, info;
-	let properties, textures, attributes, geometries, objects;
+	let properties, textures, cubemaps, attributes, geometries, objects;
 	let programCache, materials, renderLists, renderStates;
 
 	let background, morphtargets, bufferRenderer, indexedBufferRenderer;
@@ -288,17 +289,18 @@ function WebGLRenderer( parameters ) {
 		info = new WebGLInfo( _gl );
 		properties = new WebGLProperties();
 		textures = new WebGLTextures( _gl, extensions, state, properties, capabilities, utils, info );
+		cubemaps = new WebGLCubeMaps( _this );
 		attributes = new WebGLAttributes( _gl, capabilities );
 		bindingStates = new WebGLBindingStates( _gl, extensions, attributes, capabilities );
 		geometries = new WebGLGeometries( _gl, attributes, info, bindingStates );
 		objects = new WebGLObjects( _gl, geometries, attributes, info );
 		morphtargets = new WebGLMorphtargets( _gl );
-		programCache = new WebGLPrograms( _this, extensions, capabilities, bindingStates );
-		materials = new WebGLMaterials( properties );
+		programCache = new WebGLPrograms( _this, cubemaps, extensions, capabilities, bindingStates );
+		materials = new WebGLMaterials( properties, cubemaps );
 		renderLists = new WebGLRenderLists( properties );
 		renderStates = new WebGLRenderStates();
 
-		background = new WebGLBackground( _this, state, objects, _premultipliedAlpha );
+		background = new WebGLBackground( _this, cubemaps, state, objects, _premultipliedAlpha );
 
 		bufferRenderer = new WebGLBufferRenderer( _gl, extensions, info, capabilities );
 		indexedBufferRenderer = new WebGLIndexedBufferRenderer( _gl, extensions, info, capabilities );
@@ -588,6 +590,7 @@ function WebGLRenderer( parameters ) {
 		renderLists.dispose();
 		renderStates.dispose();
 		properties.dispose();
+		cubemaps.dispose();
 		objects.dispose();
 		bindingStates.dispose();
 
@@ -1773,6 +1776,18 @@ function WebGLRenderer( parameters ) {
 
 	};
 
+	this.getRenderList = function () {
+
+		return currentRenderList;
+
+	};
+
+	this.setRenderList = function ( renderList ) {
+
+		currentRenderList = renderList;
+
+	};
+
 	this.getRenderTarget = function () {
 
 		return _currentRenderTarget;

src/renderers/shaders/ShaderChunk/envmap_fragment.glsl.js

@@ -42,14 +42,6 @@ export default /* glsl */`
 
 		vec4 envColor = textureCubeUV( envMap, reflectVec, 0.0 );
 
-	#elif defined( ENVMAP_TYPE_EQUIREC )
-
-		reflectVec = normalize( reflectVec );
-
-		vec2 sampleUV = equirectUv( reflectVec );
-
-		vec4 envColor = texture2D( envMap, sampleUV );
-
 	#else
 
 		vec4 envColor = vec4( 0.0 );

src/renderers/shaders/ShaderChunk/envmap_physical_pars_fragment.glsl.js

@@ -95,22 +95,6 @@ export default /* glsl */`
 
 			vec4 envMapColor = textureCubeUV( envMap, reflectVec, roughness );
 
-		#elif defined( ENVMAP_TYPE_EQUIREC )
-
-			vec2 sampleUV = equirectUv( reflectVec );
-
-			#ifdef TEXTURE_LOD_EXT
-
-				vec4 envMapColor = texture2DLodEXT( envMap, sampleUV, specularMIPLevel );
-
-			#else
-
-				vec4 envMapColor = texture2D( envMap, sampleUV, specularMIPLevel );
-
-			#endif
-
-			envMapColor.rgb = envMapTexelToLinear( envMapColor ).rgb;
-
 		#endif
 
 		return envMapColor.rgb * envMapIntensity;

src/renderers/webgl/WebGLBackground.js

@@ -7,7 +7,7 @@ import { Mesh } from '../../objects/Mesh.js';
 import { ShaderLib } from '../shaders/ShaderLib.js';
 import { cloneUniforms } from '../shaders/UniformsUtils.js';
 
-function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
+function WebGLBackground( renderer, cubemaps, state, objects, premultipliedAlpha ) {
 
 	const clearColor = new Color( 0x000000 );
 	let clearAlpha = 0;
@@ -23,6 +23,12 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
 
 		let background = scene.isScene === true ? scene.background : null;
 
+		if ( background && background.isTexture ) {
+
+			background = cubemaps.get( background );
+
+		}
+
 		// Ignore background in AR
 		// TODO: Reconsider this.
 
@@ -52,7 +58,7 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
 
 		}
 
-		if ( background && ( background.isCubeTexture || background.isWebGLCubeRenderTarget || background.mapping === CubeUVReflectionMapping ) ) {
+		if ( background && ( background.isCubeTexture || background.isWebGLCubeRenderTarget || background.isWebGLCubeRenderTargetTexture || background.mapping === CubeUVReflectionMapping ) ) {
 
 			if ( boxMesh === undefined ) {
 
@@ -94,19 +100,25 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
 
 			}
 
-			const texture = background.isWebGLCubeRenderTarget ? background.texture : background;
+			if ( background.isWebGLCubeRenderTarget ) {
+
+				// TODO Deprecate
 
-			boxMesh.material.uniforms.envMap.value = texture;
-			boxMesh.material.uniforms.flipEnvMap.value = texture.isCubeTexture ? - 1 : 1;
+				background = background.texture;
+
+			}
+
+			boxMesh.material.uniforms.envMap.value = background;
+			boxMesh.material.uniforms.flipEnvMap.value = background.isCubeTexture ? - 1 : 1;
 
 			if ( currentBackground !== background ||
-				currentBackgroundVersion !== texture.version ||
+				currentBackgroundVersion !== background.version ||
 				currentTonemapping !== renderer.toneMapping ) {
 
 				boxMesh.material.needsUpdate = true;
 
 				currentBackground = background;
-				currentBackgroundVersion = texture.version;
+				currentBackgroundVersion = background.version;
 				currentTonemapping = renderer.toneMapping;
 
 			}

src/renderers/webgl/WebGLCubeMaps.js

@@ -0,0 +1,78 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+import { CubeReflectionMapping, CubeRefractionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from '../../constants.js';
+import { WebGLCubeRenderTarget } from "../WebGLCubeRenderTarget.js";
+
+function WebGLCubeMaps( renderer ) {
+
+	let cubemaps = new WeakMap();
+
+	function mapTextureMapping( texture, mapping ) {
+
+		if ( mapping === EquirectangularReflectionMapping ) {
+
+			texture.mapping = CubeReflectionMapping;
+
+		} else if ( mapping === EquirectangularRefractionMapping ) {
+
+			texture.mapping = CubeRefractionMapping;
+
+		}
+
+		return texture;
+
+	}
+
+	function get( texture ) {
+
+		if ( texture && texture.isTexture ) {
+
+			const mapping = texture.mapping;
+
+			if ( mapping === EquirectangularReflectionMapping || mapping === EquirectangularRefractionMapping ) {
+
+				if ( cubemaps.has( texture ) ) {
+
+					const cubemap = cubemaps.get( texture ).texture;
+					return mapTextureMapping( cubemap, texture.mapping );
+
+				} else {
+
+					const image = texture.image;
+
+					if ( image.height > 0 ) {
+
+						const renderTarget = new WebGLCubeRenderTarget( image.height / 2 );
+						renderTarget.fromEquirectangularTexture( renderer, texture );
+						cubemaps.set( texture, renderTarget );
+
+						return mapTextureMapping( renderTarget.texture, texture.mapping );
+
+					}
+
+				}
+
+			}
+
+		}
+
+		return texture;
+
+	}
+
+	function dispose() {
+
+		cubemaps = new WeakMap();
+
+	}
+
+	return {
+		get: get,
+		dispose: dispose
+	};
+
+}
+
+export { WebGLCubeMaps };

src/renderers/webgl/WebGLMaterials.js

@@ -1,6 +1,6 @@
 import { BackSide } from "../../constants.js";
 
-function WebGLMaterials( properties ) {
+function WebGLMaterials( properties, cubemaps ) {
 
 	function refreshFogUniforms( uniforms, fog ) {
 
@@ -139,7 +139,7 @@ function WebGLMaterials( properties ) {
 
 		}
 
-		const envMap = material.envMap || environment;
+		const envMap = cubemaps.get( material.envMap || environment );
 
 		if ( envMap ) {
 
@@ -150,7 +150,7 @@ function WebGLMaterials( properties ) {
 			uniforms.reflectivity.value = material.reflectivity;
 			uniforms.refractionRatio.value = material.refractionRatio;
 
-			var maxMipLevel = properties.get( envMap ).__maxMipLevel;
+			const maxMipLevel = properties.get( envMap ).__maxMipLevel;
 
 			if ( maxMipLevel !== undefined ) {
 

src/renderers/webgl/WebGLProgram.js

@@ -1,7 +1,7 @@
 import { WebGLUniforms } from './WebGLUniforms.js';
 import { WebGLShader } from './WebGLShader.js';
 import { ShaderChunk } from '../shaders/ShaderChunk.js';
-import { NoToneMapping, AddOperation, MixOperation, MultiplyOperation, EquirectangularRefractionMapping, CubeRefractionMapping, EquirectangularReflectionMapping, CubeUVRefractionMapping, CubeUVReflectionMapping, CubeReflectionMapping, PCFSoftShadowMap, PCFShadowMap, VSMShadowMap, ACESFilmicToneMapping, CineonToneMapping, CustomToneMapping, ReinhardToneMapping, LinearToneMapping, GammaEncoding, RGBDEncoding, RGBM16Encoding, RGBM7Encoding, RGBEEncoding, sRGBEncoding, LinearEncoding, LogLuvEncoding } from '../../constants.js';
+import { NoToneMapping, AddOperation, MixOperation, MultiplyOperation, CubeRefractionMapping, CubeUVRefractionMapping, CubeUVReflectionMapping, CubeReflectionMapping, PCFSoftShadowMap, PCFShadowMap, VSMShadowMap, ACESFilmicToneMapping, CineonToneMapping, CustomToneMapping, ReinhardToneMapping, LinearToneMapping, GammaEncoding, RGBDEncoding, RGBM16Encoding, RGBM7Encoding, RGBEEncoding, sRGBEncoding, LinearEncoding, LogLuvEncoding } from '../../constants.js';
 
 let programIdCount = 0;
 
@@ -317,11 +317,6 @@ function generateEnvMapTypeDefine( parameters ) {
 				envMapTypeDefine = 'ENVMAP_TYPE_CUBE_UV';
 				break;
 
-			case EquirectangularReflectionMapping:
-			case EquirectangularRefractionMapping:
-				envMapTypeDefine = 'ENVMAP_TYPE_EQUIREC';
-				break;
-
 		}
 
 	}
@@ -339,7 +334,6 @@ function generateEnvMapModeDefine( parameters ) {
 		switch ( parameters.envMapMode ) {
 
 			case CubeRefractionMapping:
-			case EquirectangularRefractionMapping:
 			case CubeUVRefractionMapping:
 
 				envMapModeDefine = 'ENVMAP_MODE_REFRACTION';

src/renderers/webgl/WebGLPrograms.js

@@ -3,7 +3,7 @@ import { WebGLProgram } from './WebGLProgram.js';
 import { ShaderLib } from '../shaders/ShaderLib.js';
 import { UniformsUtils } from '../shaders/UniformsUtils.js';
 
-function WebGLPrograms( renderer, extensions, capabilities, bindingStates ) {
+function WebGLPrograms( renderer, cubemaps, extensions, capabilities, bindingStates ) {
 
 	const programs = [];
 
@@ -113,7 +113,7 @@ function WebGLPrograms( renderer, extensions, capabilities, bindingStates ) {
 		const fog = scene.fog;
 		const environment = material.isMeshStandardMaterial ? scene.environment : null;
 
-		const envMap = material.envMap || environment;
+		const envMap = cubemaps.get( material.envMap || environment );
 
 		const shaderID = shaderIDs[ material.type ];