Make equirectangular reflections / refractions backwards compatible.

docs/api/zh/materials/MeshBasicMaterial.html

@@ -94,6 +94,8 @@ <h3>[property:Float reflectivity]</h3>
 		<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 reflectivity]</h3>
 		<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 reflectivity]</h3>
 		<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:Vector2 normalScale]</h3>
 		<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';
@@ -24,6 +23,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 );
@@ -41,8 +42,6 @@ WebGLCubeRenderTarget.prototype.fromEquirectangularTexture = function ( renderer
 	this.texture.minFilter = texture.minFilter;
 	this.texture.magFilter = texture.magFilter;
 
-	const scene = new Scene();
-
 	const shader = {
 
 		uniforms: {
@@ -89,6 +88,8 @@ WebGLCubeRenderTarget.prototype.fromEquirectangularTexture = function ( renderer
 		`
 	};
 
+	const geometry = new BoxBufferGeometry( 5, 5, 5 );
+
 	const material = new ShaderMaterial( {
 
 		name: 'CubemapFromEquirect',
@@ -103,12 +104,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

@@ -29,6 +29,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';
@@ -259,7 +260,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;
@@ -296,17 +297,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 );
@@ -596,6 +598,7 @@ function WebGLRenderer( parameters ) {
 		renderLists.dispose();
 		renderStates.dispose();
 		properties.dispose();
+		cubemaps.dispose();
 		objects.dispose();
 		bindingStates.dispose();
 
@@ -902,15 +905,15 @@ function WebGLRenderer( parameters ) {
 
 		scene.traverse( function ( object ) {
 
-			let material = object.material;
+			const material = object.material;
 
 			if ( material ) {
 
 				if ( Array.isArray( material ) ) {
 
 					for ( let i = 0; i < material.length; i ++ ) {
 
-						let material2 = material[ i ];
+						const material2 = material[ i ];
 
 						if ( compiled.has( material2 ) === false ) {
 
@@ -1781,6 +1784,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 );