diff --git a/examples/jsm/postprocessing/CubeTexturePass.js b/examples/jsm/postprocessing/CubeTexturePass.js index 08273a4f7e089be913e9a02d5f30b7ba44bb1b8a..3897ce58cf3b86ef3be2dbb7a2b3fe68fe395ec3 100644 --- a/examples/jsm/postprocessing/CubeTexturePass.js +++ b/examples/jsm/postprocessing/CubeTexturePass.js @@ -61,7 +61,7 @@ class CubeTexturePass extends Pass { this.cubeCamera.quaternion.setFromRotationMatrix( this.camera.matrixWorld ); this.cubeMesh.material.uniforms.envMap.value = this.envMap; - this.cubeMesh.material.uniforms.flipEnvMap.value = ( this.envMap.isCubeTexture && this.envMap._needsFlipEnvMap ) ? - 1 : 1; + this.cubeMesh.material.uniforms.flipEnvMap.value = ( this.envMap.isCubeTexture && this.envMap.isRenderTargetTexture === false ) ? - 1 : 1; this.cubeMesh.material.uniforms.opacity.value = this.opacity; this.cubeMesh.material.transparent = ( this.opacity < 1.0 ); diff --git a/examples/screenshots/webgl_loader_gltf_extensions.jpg b/examples/screenshots/webgl_loader_gltf_extensions.jpg index dea6d16c6fecb3b48e4c9db8515ae2bb508d3bd1..4781365fc5596ffbf6a9e7b486b980d1e189fbea 100644 Binary files a/examples/screenshots/webgl_loader_gltf_extensions.jpg and b/examples/screenshots/webgl_loader_gltf_extensions.jpg differ diff --git a/examples/webgl_loader_gltf.html b/examples/webgl_loader_gltf.html index 03c041f9d7bcb4371ea4d2ea4ce02ebff6d8289f..9453cee6e1e282eeb67b0ca7369168b091455aa8 100644 --- a/examples/webgl_loader_gltf.html +++ b/examples/webgl_loader_gltf.html @@ -40,17 +40,14 @@ scene = new THREE.Scene(); new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ) .load( 'royal_esplanade_1k.hdr', function ( texture ) { - const envMap = pmremGenerator.fromEquirectangular( texture ).texture; + texture.mapping = THREE.EquirectangularReflectionMapping; - scene.background = envMap; - scene.environment = envMap; - - texture.dispose(); - pmremGenerator.dispose(); + scene.background = texture; + scene.environment = texture; render(); @@ -90,9 +87,6 @@ renderer.outputEncoding = THREE.sRGBEncoding; container.appendChild( renderer.domElement ); - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - const controls = new OrbitControls( camera, renderer.domElement ); controls.addEventListener( 'change', render ); // use if there is no animation loop controls.minDistance = 2; diff --git a/examples/webgl_loader_gltf_extensions.html b/examples/webgl_loader_gltf_extensions.html index a3be495d8f0be10bf01f45af3b64fa2c6ce44c60..37bb78c356a4fa60592af29a91f8c28e8b6d90d7 100644 --- a/examples/webgl_loader_gltf_extensions.html +++ b/examples/webgl_loader_gltf_extensions.html @@ -158,14 +158,14 @@ // Load background and generate envMap new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ) .load( 'venice_sunset_1k.hdr', function ( texture ) { - envMap = pmremGenerator.fromEquirectangular( texture ).texture; - pmremGenerator.dispose(); + texture.mapping = THREE.EquirectangularReflectionMapping; - background = envMap; + envMap = texture; + background = texture; // @@ -175,9 +175,6 @@ } ); - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - } function initScene( sceneInfo ) { diff --git a/examples/webgl_loader_gltf_transmission.html b/examples/webgl_loader_gltf_transmission.html index 2e93073985df21bb3b631105eb89cae0781c38a5..091af59febe43f155c7cd97ce4d8761c343c867e 100644 --- a/examples/webgl_loader_gltf_transmission.html +++ b/examples/webgl_loader_gltf_transmission.html @@ -40,17 +40,14 @@ scene = new THREE.Scene(); new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ) .load( 'quarry_01_1k.hdr', function ( texture ) { - const envMap = pmremGenerator.fromEquirectangular( texture ).texture; + texture.mapping = THREE.EquirectangularReflectionMapping; - scene.background = envMap; - scene.environment = envMap; - - texture.dispose(); - pmremGenerator.dispose(); + scene.background = texture; + scene.environment = texture; // model @@ -73,9 +70,6 @@ renderer.outputEncoding = THREE.sRGBEncoding; container.appendChild( renderer.domElement ); - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - const controls = new OrbitControls( camera, renderer.domElement ); controls.minDistance = 0.5; controls.maxDistance = 10; diff --git a/examples/webgl_loader_gltf_variants.html b/examples/webgl_loader_gltf_variants.html index 39280a3ab33ee599d369bcd222322e636afb57b6..b558a909db3e51fb41af09dc4b88cbdbeeec6b01 100644 --- a/examples/webgl_loader_gltf_variants.html +++ b/examples/webgl_loader_gltf_variants.html @@ -43,17 +43,14 @@ scene = new THREE.Scene(); new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ) .load( 'quarry_01_1k.hdr', function ( texture ) { - const envMap = pmremGenerator.fromEquirectangular( texture ).texture; + texture.mapping = THREE.EquirectangularReflectionMapping; - scene.background = envMap; - scene.environment = envMap; - - texture.dispose(); - pmremGenerator.dispose(); + scene.background = texture; + scene.environment = texture; render(); @@ -94,9 +91,6 @@ renderer.outputEncoding = THREE.sRGBEncoding; container.appendChild( renderer.domElement ); - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - const controls = new OrbitControls( camera, renderer.domElement ); controls.addEventListener( 'change', render ); // use if there is no animation loop controls.minDistance = 2; diff --git a/examples/webgl_materials_envmaps_exr.html b/examples/webgl_materials_envmaps_exr.html index 7a20ac05bff8fe9064cc50134dc4501cf7b12cd7..02adfd5c28aa1f27b6d8c9a04bd870fe4646ed10 100644 --- a/examples/webgl_materials_envmaps_exr.html +++ b/examples/webgl_materials_envmaps_exr.html @@ -32,7 +32,6 @@ let container, stats; let camera, scene, renderer, controls; let torusMesh, planeMesh; - let pngCubeRenderTarget, exrCubeRenderTarget; let pngBackground, exrBackground; init(); @@ -70,38 +69,22 @@ planeMesh.rotation.x = - Math.PI * 0.5; scene.add( planeMesh ); - THREE.DefaultLoadingManager.onLoad = function ( ) { + new EXRLoader().load( 'textures/piz_compressed.exr', function ( texture ) { - pmremGenerator.dispose(); + texture.mapping = THREE.EquirectangularReflectionMapping; + exrBackground = texture; - }; - - new EXRLoader() - .setDataType( THREE.UnsignedByteType ) - .load( 'textures/piz_compressed.exr', function ( texture ) { - - exrCubeRenderTarget = pmremGenerator.fromEquirectangular( texture ); - exrBackground = exrCubeRenderTarget.texture; - - texture.dispose(); - - } ); + } ); new THREE.TextureLoader().load( 'textures/equirectangular.png', function ( texture ) { + texture.mapping = THREE.EquirectangularReflectionMapping; texture.encoding = THREE.sRGBEncoding; - pngCubeRenderTarget = pmremGenerator.fromEquirectangular( texture ); - - pngBackground = pngCubeRenderTarget.texture; - - texture.dispose(); + pngBackground = texture; } ); - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); @@ -163,11 +146,11 @@ switch ( params.envMap ) { case 'EXR': - newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null; + newEnvMap = exrBackground; background = exrBackground; break; case 'PNG': - newEnvMap = pngCubeRenderTarget ? pngCubeRenderTarget.texture : null; + newEnvMap = pngBackground; background = pngBackground; break; diff --git a/examples/webgl_materials_physical_clearcoat.html b/examples/webgl_materials_physical_clearcoat.html index 2561910560c48efe76970c7e9c38e43d1d0d0e32..0b68d964491f0723740ff09b46f6cfef2a3a1b50 100644 --- a/examples/webgl_materials_physical_clearcoat.html +++ b/examples/webgl_materials_physical_clearcoat.html @@ -46,31 +46,27 @@ scene.add( group ); new HDRCubeTextureLoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/cube/pisaHDR/' ) .load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ], - function ( hdrCubeMap ) { - - const hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap ); - hdrCubeMap.dispose(); - pmremGenerator.dispose(); + function ( texture ) { const geometry = new THREE.SphereGeometry( 80, 64, 32 ); const textureLoader = new THREE.TextureLoader(); - const diffuse = textureLoader.load( "textures/carbon/Carbon.png" ); + const diffuse = textureLoader.load( 'textures/carbon/Carbon.png' ); diffuse.encoding = THREE.sRGBEncoding; diffuse.wrapS = THREE.RepeatWrapping; diffuse.wrapT = THREE.RepeatWrapping; diffuse.repeat.x = 10; diffuse.repeat.y = 10; - const normalMap = textureLoader.load( "textures/carbon/Carbon_Normal.png" ); + const normalMap = textureLoader.load( 'textures/carbon/Carbon_Normal.png' ); normalMap.wrapS = THREE.RepeatWrapping; normalMap.wrapT = THREE.RepeatWrapping; - const normalMap2 = textureLoader.load( "textures/water/Water_1_M_Normal.jpg" ); + const normalMap2 = textureLoader.load( 'textures/water/Water_1_M_Normal.jpg' ); const normalMap3 = new THREE.CanvasTexture( new FlakesTexture() ); normalMap3.wrapS = THREE.RepeatWrapping; @@ -79,9 +75,9 @@ normalMap3.repeat.y = 6; normalMap3.anisotropy = 16; - const normalMap4 = textureLoader.load( "textures/golfball.jpg" ); + const normalMap4 = textureLoader.load( 'textures/golfball.jpg' ); - const clearcoatNormaMap = textureLoader.load( "textures/pbr/Scratched_gold/Scratched_gold_01_1K_Normal.png" ); + const clearcoatNormaMap = textureLoader.load( 'textures/pbr/Scratched_gold/Scratched_gold_01_1K_Normal.png' ); // car paint @@ -151,8 +147,8 @@ // - scene.background = hdrCubeRenderTarget.texture; - scene.environment = hdrCubeRenderTarget.texture; + scene.background = texture; + scene.environment = texture; } @@ -184,11 +180,6 @@ // - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - - // - stats = new Stats(); container.appendChild( stats.dom ); diff --git a/examples/webgl_materials_physical_reflectivity.html b/examples/webgl_materials_physical_reflectivity.html index dae983721a55da6ba00070194d6c964060e14efa..a18ad9a2257fabb141cd4fee9526a895d9dfbb7c 100644 --- a/examples/webgl_materials_physical_reflectivity.html +++ b/examples/webgl_materials_physical_reflectivity.html @@ -36,7 +36,6 @@ }; let camera, scene, renderer; let gemBackMaterial, gemFrontMaterial; - let hdrCubeRenderTarget; const objects = []; @@ -114,23 +113,17 @@ } ); new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ) - .load( 'royal_esplanade_1k.hdr', function ( hdrEquirect ) { + .load( 'royal_esplanade_1k.hdr', function ( texture ) { - hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect ); - pmremGenerator.dispose(); + texture.mapping = THREE.EquirectangularReflectionMapping; - gemFrontMaterial.envMap = gemBackMaterial.envMap = hdrCubeRenderTarget.texture; + gemFrontMaterial.envMap = gemBackMaterial.envMap = texture; gemFrontMaterial.needsUpdate = gemBackMaterial.needsUpdate = true; - hdrEquirect.dispose(); - } ); - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - // Lights scene.add( new THREE.AmbientLight( 0x222222 ) ); diff --git a/examples/webgl_materials_physical_transmission.html b/examples/webgl_materials_physical_transmission.html index 95f40960b191e3fce9be67eda617260d4342a77f..a1b4458a1e7b2358e87817182876a9a0d6103461 100644 --- a/examples/webgl_materials_physical_transmission.html +++ b/examples/webgl_materials_physical_transmission.html @@ -34,14 +34,15 @@ let camera, scene, renderer; - let hdrCubeRenderTarget; let mesh; const hdrEquirect = new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ) .load( 'royal_esplanade_1k.hdr', function () { + hdrEquirect.mapping = THREE.EquirectangularReflectionMapping; + init(); render(); @@ -67,12 +68,7 @@ // - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect ); - hdrEquirect.dispose(); - pmremGenerator.dispose(); - - scene.background = hdrCubeRenderTarget.texture; + scene.background = hdrEquirect; // @@ -90,7 +86,7 @@ roughness: params.roughness, reflectivity: params.reflectivity, alphaMap: texture, - envMap: hdrCubeRenderTarget.texture, + envMap: hdrEquirect, envMapIntensity: params.envMapIntensity, transmission: params.transmission, // use material.transmission for glass materials opacity: params.opacity, diff --git a/examples/webgl_materials_standard.html b/examples/webgl_materials_standard.html index b261cce56bdea56611cca44ca74c8a81e55cc529..7ac629d338c72ddf8a09118df844ddb3a667d413 100644 --- a/examples/webgl_materials_standard.html +++ b/examples/webgl_materials_standard.html @@ -109,7 +109,7 @@ }; - function loadEnvironment(name) { + function loadEnvironment( name ) { if ( environments[ name ].texture !== undefined ) { @@ -121,18 +121,17 @@ const filename = environments[ name ].filename; new RGBELoader() - .setDataType( THREE.UnsignedByteType ) - .setPath( 'textures/equirectangular/' ) - .load( filename, function ( hdrEquirect ) { + .setDataType( THREE.FloatType ) + .setPath( 'textures/equirectangular/' ) + .load( filename, function ( hdrEquirect ) { - const hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect ); - hdrEquirect.dispose(); + hdrEquirect.mapping = THREE.EquirectangularReflectionMapping; - scene.background = hdrCubeRenderTarget.texture; - scene.environment = hdrCubeRenderTarget.texture; - environments[ name ].texture = hdrCubeRenderTarget.texture; + scene.background = hdrEquirect; + scene.environment = hdrEquirect; + environments[ name ].texture = hdrEquirect; - } ); + } ); } @@ -144,16 +143,13 @@ loadEnvironment( params.environment ); const gui = new GUI(); - gui.add( params, 'environment', Object.keys( environments ) ).onChange( function( value ) { + gui.add( params, 'environment', Object.keys( environments ) ).onChange( function ( value ) { - loadEnvironment(value); + loadEnvironment( value ); } ); gui.open(); - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - // if ( statsEnabled ) { diff --git a/examples/webgl_materials_variations_physical.html b/examples/webgl_materials_variations_physical.html index c88c2bfbbed46ea2c1f2fa2ae9cbcbbd67d98e4f..569b3c0635bd955a63e24f68e7477acd7729a16a 100644 --- a/examples/webgl_materials_variations_physical.html +++ b/examples/webgl_materials_variations_physical.html @@ -46,16 +46,12 @@ scene = new THREE.Scene(); - let hdrCubeRenderTarget = null; - new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ) - .load( 'pedestrian_overpass_1k.hdr', function ( hdrEquirect ) { + .load( 'pedestrian_overpass_1k.hdr', function ( texture ) { - hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect ); - hdrEquirect.dispose(); - pmremGenerator.dispose(); + texture.mapping = THREE.EquirectangularReflectionMapping; // Materials @@ -83,7 +79,7 @@ clearcoat: 1.0 - alpha, clearcoatRoughness: 1.0 - beta, reflectivity: 1.0 - gamma, - envMap: ( index % 2 ) == 1 ? hdrCubeRenderTarget.texture : null + envMap: ( index % 2 ) == 1 ? texture : null } ); index ++; @@ -106,7 +102,7 @@ } - scene.background = hdrCubeRenderTarget.texture; + scene.background = texture; } ); @@ -129,14 +125,14 @@ } - addLabel( "+clearcoat", new THREE.Vector3( - 350, 0, 0 ) ); - addLabel( "-clearcoat", new THREE.Vector3( 350, 0, 0 ) ); + addLabel( '+clearcoat', new THREE.Vector3( - 350, 0, 0 ) ); + addLabel( '-clearcoat', new THREE.Vector3( 350, 0, 0 ) ); - addLabel( "+clearcoatRoughness", new THREE.Vector3( 0, - 300, 0 ) ); - addLabel( "-clearcoatRoughness", new THREE.Vector3( 0, 300, 0 ) ); + addLabel( '+clearcoatRoughness', new THREE.Vector3( 0, - 300, 0 ) ); + addLabel( '-clearcoatRoughness', new THREE.Vector3( 0, 300, 0 ) ); - addLabel( "+reflectivity", new THREE.Vector3( 0, 0, - 300 ) ); - addLabel( "-reflectivity", new THREE.Vector3( 0, 0, 300 ) ); + addLabel( '+reflectivity', new THREE.Vector3( 0, 0, - 300 ) ); + addLabel( '-reflectivity', new THREE.Vector3( 0, 0, 300 ) ); particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) ); scene.add( particleLight ); @@ -165,11 +161,6 @@ // - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - - // - stats = new Stats(); container.appendChild( stats.dom ); diff --git a/examples/webgl_materials_variations_standard.html b/examples/webgl_materials_variations_standard.html index 6e68ebae8bfee67731cdab33dfeef7919b11c6f1..40f6cb6b17bc0ff43d9a6b43dca89f9d4d4bf282 100644 --- a/examples/webgl_materials_variations_standard.html +++ b/examples/webgl_materials_variations_standard.html @@ -44,23 +44,19 @@ scene = new THREE.Scene(); - let hdrCubeRenderTarget = null; - // Materials - let imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" ); + let imgTexture = new THREE.TextureLoader().load( 'textures/planets/moon_1024.jpg' ); imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping; imgTexture.anisotropy = 16; imgTexture = null; new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ) - .load( 'pedestrian_overpass_1k.hdr', function ( hdrEquirect ) { + .load( 'pedestrian_overpass_1k.hdr', function ( texture ) { - hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect ); - hdrEquirect.dispose(); - pmremGenerator.dispose(); + texture.mapping = THREE.EquirectangularReflectionMapping; const bumpScale = 1; const cubeWidth = 400; @@ -88,7 +84,7 @@ color: diffuseColor, metalness: beta, roughness: 1.0 - alpha, - envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture + envMap: index % 2 === 0 ? null : texture } ); index ++; @@ -109,7 +105,7 @@ } - scene.background = hdrCubeRenderTarget.texture; + scene.background = texture; } ); @@ -132,14 +128,14 @@ } - addLabel( "+roughness", new THREE.Vector3( - 350, 0, 0 ) ); - addLabel( "-roughness", new THREE.Vector3( 350, 0, 0 ) ); + addLabel( '+roughness', new THREE.Vector3( - 350, 0, 0 ) ); + addLabel( '-roughness', new THREE.Vector3( 350, 0, 0 ) ); - addLabel( "-metalness", new THREE.Vector3( 0, - 300, 0 ) ); - addLabel( "+metalness", new THREE.Vector3( 0, 300, 0 ) ); + addLabel( '-metalness', new THREE.Vector3( 0, - 300, 0 ) ); + addLabel( '+metalness', new THREE.Vector3( 0, 300, 0 ) ); - addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) ); - addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) ); + addLabel( '-diffuse', new THREE.Vector3( 0, 0, - 300 ) ); + addLabel( '+diffuse', new THREE.Vector3( 0, 0, 300 ) ); particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) ); scene.add( particleLight ); @@ -168,11 +164,6 @@ // - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - - // - stats = new Stats(); container.appendChild( stats.dom ); diff --git a/examples/webgl_postprocessing_3dlut.html b/examples/webgl_postprocessing_3dlut.html index 7da3e58d759582260c96bbe384e2a750e4268f1f..4ac766815cb20c712a9444a4cda04a90331e3b5c 100644 --- a/examples/webgl_postprocessing_3dlut.html +++ b/examples/webgl_postprocessing_3dlut.html @@ -63,17 +63,14 @@ scene = new THREE.Scene(); new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ) .load( 'royal_esplanade_1k.hdr', function ( texture ) { - const envMap = pmremGenerator.fromEquirectangular( texture ).texture; + texture.mapping = THREE.EquirectangularReflectionMapping; - scene.background = envMap; - scene.environment = envMap; - - texture.dispose(); - pmremGenerator.dispose(); + scene.background = texture; + scene.environment = texture; // model @@ -120,9 +117,6 @@ lutPass = new LUTPass(); composer.addPass( lutPass ); - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - const controls = new OrbitControls( camera, renderer.domElement ); controls.minDistance = 2; controls.maxDistance = 10; diff --git a/examples/webgl_tonemapping.html b/examples/webgl_tonemapping.html index 700134960ff0e375d491d7d4dea33374459d009b..1dbddc0a32ff1f05006f81fbaa5872226fcd583c 100644 --- a/examples/webgl_tonemapping.html +++ b/examples/webgl_tonemapping.html @@ -84,11 +84,8 @@ controls.target.set( 0, 0, - 0.2 ); controls.update(); - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - const rgbeLoader = new RGBELoader() - .setDataType( THREE.UnsignedByteType ) + .setDataType( THREE.FloatType ) .setPath( 'textures/equirectangular/' ); const gltfLoader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' ); @@ -100,13 +97,10 @@ // environment - const envMap = pmremGenerator.fromEquirectangular( texture ).texture; - - scene.background = envMap; - scene.environment = envMap; + texture.mapping = THREE.EquirectangularReflectionMapping; - texture.dispose(); - pmremGenerator.dispose(); + scene.background = texture; + scene.environment = texture; // model diff --git a/examples/webxr_ar_lighting.html b/examples/webxr_ar_lighting.html index ccc1c6a6397ed5f647951f8e060a1fc311ddfa1c..b94ad298908f6a0e971283d51d8e310a88a7425b 100644 --- a/examples/webxr_ar_lighting.html +++ b/examples/webxr_ar_lighting.html @@ -83,20 +83,16 @@ // - const pmremGenerator = new THREE.PMREMGenerator( renderer ); - pmremGenerator.compileEquirectangularShader(); - new RGBELoader() .setDataType( THREE.UnsignedByteType ) .setPath( 'textures/equirectangular/' ) .load( 'royal_esplanade_1k.hdr', function ( texture ) { - defaultEnvironment = pmremGenerator.fromEquirectangular( texture ).texture; + texture.mapping = THREE.EquirectangularReflectionMapping; - scene.environment = defaultEnvironment; + defaultEnvironment = texture; - texture.dispose(); - pmremGenerator.dispose(); + scene.environment = defaultEnvironment; } ); diff --git a/src/renderers/WebGLCubeRenderTarget.js b/src/renderers/WebGLCubeRenderTarget.js index 3a88f08950796be7370744a24b579d23919f509f..f97a505f818da6f15e8312ea6c6012697be47f08 100644 --- a/src/renderers/WebGLCubeRenderTarget.js +++ b/src/renderers/WebGLCubeRenderTarget.js @@ -23,7 +23,16 @@ class WebGLCubeRenderTarget extends WebGLRenderTarget { options = options || {}; + // By convention -- likely based on the RenderMan spec from the 1990's -- cube maps are specified by WebGL (and three.js) + // in a coordinate system in which positive-x is to the right when looking up the positive-z axis -- in other words, + // in a left-handed coordinate system. By continuing this convention, preexisting cube maps continued to render correctly. + + // three.js uses a right-handed coordinate system. So environment maps used in three.js appear to have px and nx swapped + // and the flag isRenderTargetTexture controls this conversion. The flip is not required when using WebGLCubeRenderTarget.texture + // as a cube texture (this is detected when isRenderTargetTexture is set to true for cube textures). + this.texture = new CubeTexture( undefined, options.mapping, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.encoding ); + this.texture.isRenderTargetTexture = true; this.texture.generateMipmaps = options.generateMipmaps !== undefined ? options.generateMipmaps : false; this.texture.minFilter = options.minFilter !== undefined ? options.minFilter : LinearFilter; diff --git a/src/renderers/WebGLRenderTarget.js b/src/renderers/WebGLRenderTarget.js index a97b0de88baf7d7c09bf4ed8322cf7933eb2e15d..fd82eafd7b20c70a969a350c55b968501b4241b4 100644 --- a/src/renderers/WebGLRenderTarget.js +++ b/src/renderers/WebGLRenderTarget.js @@ -24,6 +24,7 @@ class WebGLRenderTarget extends EventDispatcher { this.viewport = new Vector4( 0, 0, width, height ); this.texture = new Texture( undefined, options.mapping, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.encoding ); + this.texture.isRenderTargetTexture = true; this.texture.image = { width: width, height: height, depth: 1 }; diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js index ec2aaa5deb875775304a5b7daf14e53cb7e32dfe..a3a8510990d991eae5cb821e0d426b234bc2b9f8 100644 --- a/src/renderers/WebGLRenderer.js +++ b/src/renderers/WebGLRenderer.js @@ -24,6 +24,7 @@ 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 { WebGLCubeUVMaps } from './webgl/WebGLCubeUVMaps.js'; import { WebGLExtensions } from './webgl/WebGLExtensions.js'; import { WebGLGeometries } from './webgl/WebGLGeometries.js'; import { WebGLIndexedBufferRenderer } from './webgl/WebGLIndexedBufferRenderer.js'; @@ -266,7 +267,7 @@ function WebGLRenderer( parameters = {} ) { } let extensions, capabilities, state, info; - let properties, textures, cubemaps, attributes, geometries, objects; + let properties, textures, cubemaps, cubeuvmaps, attributes, geometries, objects; let programCache, materials, renderLists, renderStates, clipping, shadowMap; let background, morphtargets, bufferRenderer, indexedBufferRenderer; @@ -291,13 +292,14 @@ function WebGLRenderer( parameters = {} ) { properties = new WebGLProperties(); textures = new WebGLTextures( _gl, extensions, state, properties, capabilities, utils, info ); cubemaps = new WebGLCubeMaps( _this ); + cubeuvmaps = new WebGLCubeUVMaps( _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 ); clipping = new WebGLClipping( properties ); - programCache = new WebGLPrograms( _this, cubemaps, extensions, capabilities, bindingStates, clipping ); + programCache = new WebGLPrograms( _this, cubemaps, cubeuvmaps, extensions, capabilities, bindingStates, clipping ); materials = new WebGLMaterials( properties ); renderLists = new WebGLRenderLists( properties ); renderStates = new WebGLRenderStates( extensions, capabilities ); @@ -564,6 +566,7 @@ function WebGLRenderer( parameters = {} ) { renderStates.dispose(); properties.dispose(); cubemaps.dispose(); + cubeuvmaps.dispose(); objects.dispose(); bindingStates.dispose(); @@ -1388,7 +1391,7 @@ function WebGLRenderer( parameters = {} ) { materialProperties.environment = material.isMeshStandardMaterial ? scene.environment : null; materialProperties.fog = scene.fog; - materialProperties.envMap = cubemaps.get( material.envMap || materialProperties.environment ); + materialProperties.envMap = ( material.isMeshStandardMaterial ? cubeuvmaps : cubemaps ).get( material.envMap || materialProperties.environment ); if ( programs === undefined ) { @@ -1506,7 +1509,7 @@ function WebGLRenderer( parameters = {} ) { const fog = scene.fog; const environment = material.isMeshStandardMaterial ? scene.environment : null; const encoding = ( _currentRenderTarget === null ) ? _this.outputEncoding : _currentRenderTarget.texture.encoding; - const envMap = cubemaps.get( material.envMap || environment ); + const envMap = ( material.isMeshStandardMaterial ? cubeuvmaps : cubemaps ).get( material.envMap || environment ); const vertexAlphas = material.vertexColors === true && object.geometry && object.geometry.attributes.color && object.geometry.attributes.color.itemSize === 4; const morphTargets = object.geometry && object.geometry.morphAttributes.position; const morphNormals = object.geometry && object.geometry.morphAttributes.normal; diff --git a/src/renderers/webgl/WebGLBackground.js b/src/renderers/webgl/WebGLBackground.js index a451946885d0fbdcd145ff58e3536203aa452ce2..74c2c5d34067cb6123cb0c88d69d173c7e9b9aa9 100644 --- a/src/renderers/webgl/WebGLBackground.js +++ b/src/renderers/webgl/WebGLBackground.js @@ -102,7 +102,7 @@ function WebGLBackground( renderer, cubemaps, state, objects, premultipliedAlpha } boxMesh.material.uniforms.envMap.value = background; - boxMesh.material.uniforms.flipEnvMap.value = ( background.isCubeTexture && background._needsFlipEnvMap ) ? - 1 : 1; + boxMesh.material.uniforms.flipEnvMap.value = ( background.isCubeTexture && background.isRenderTargetTexture === false ) ? - 1 : 1; if ( currentBackground !== background || currentBackgroundVersion !== background.version || diff --git a/src/renderers/webgl/WebGLCubeMaps.js b/src/renderers/webgl/WebGLCubeMaps.js index ae764eb65bec3fed5f91a70d5488f10b0e64df6c..f59b36940367bbc745756fb5b1e7f8cd061c1e26 100644 --- a/src/renderers/webgl/WebGLCubeMaps.js +++ b/src/renderers/webgl/WebGLCubeMaps.js @@ -23,7 +23,7 @@ function WebGLCubeMaps( renderer ) { function get( texture ) { - if ( texture && texture.isTexture ) { + if ( texture && texture.isTexture && texture.isRenderTargetTexture === false ) { const mapping = texture.mapping; diff --git a/src/renderers/webgl/WebGLCubeUVMaps.js b/src/renderers/webgl/WebGLCubeUVMaps.js new file mode 100644 index 0000000000000000000000000000000000000000..cfcf356cf6c58c1b82619596d8e9e106d0d6b09d --- /dev/null +++ b/src/renderers/webgl/WebGLCubeUVMaps.js @@ -0,0 +1,117 @@ +import { CubeReflectionMapping, CubeRefractionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from '../../constants.js'; +import { PMREMGenerator } from '../../extras/PMREMGenerator.js'; + +function WebGLCubeUVMaps( renderer ) { + + let cubeUVmaps = new WeakMap(); + + let pmremGenerator = null; + + function get( texture ) { + + if ( texture && texture.isTexture && texture.isRenderTargetTexture === false ) { + + const mapping = texture.mapping; + + const isEquirectMap = ( mapping === EquirectangularReflectionMapping || mapping === EquirectangularRefractionMapping ); + const isCubeMap = ( mapping === CubeReflectionMapping || mapping === CubeRefractionMapping ); + + if ( isEquirectMap || isCubeMap ) { + + // equirect/cube map to cubeUV conversion + + if ( cubeUVmaps.has( texture ) ) { + + return cubeUVmaps.get( texture ).texture; + + } else { + + const image = texture.image; + + if ( ( isEquirectMap && image && image.height > 0 ) || ( isCubeMap && image && isCubeTextureComplete( image ) ) ) { + + const currentRenderTarget = renderer.getRenderTarget(); + + if ( pmremGenerator === null ) pmremGenerator = new PMREMGenerator( renderer ); + + const renderTarget = isEquirectMap ? pmremGenerator.fromEquirectangular( texture ) : pmremGenerator.fromCubemap( texture ); + cubeUVmaps.set( texture, renderTarget ); + + renderer.setRenderTarget( currentRenderTarget ); + + texture.addEventListener( 'dispose', onTextureDispose ); + + return renderTarget.texture; + + } else { + + // image not yet ready. try the conversion next frame + + return null; + + } + + } + + } + + } + + return texture; + + } + + function isCubeTextureComplete( image ) { + + let count = 0; + const length = 6; + + for ( let i = 0; i < length; i ++ ) { + + if ( image[ i ] !== undefined ) count ++; + + } + + return count === length; + + + } + + function onTextureDispose( event ) { + + const texture = event.target; + + texture.removeEventListener( 'dispose', onTextureDispose ); + + const cubemapUV = cubeUVmaps.get( texture ); + + if ( cubemapUV !== undefined ) { + + cubemapUV.delete( texture ); + cubemapUV.dispose(); + + } + + } + + function dispose() { + + cubeUVmaps = new WeakMap(); + + if ( pmremGenerator !== null ) { + + pmremGenerator.dispose(); + pmremGenerator = null; + + } + + } + + return { + get: get, + dispose: dispose + }; + +} + +export { WebGLCubeUVMaps }; diff --git a/src/renderers/webgl/WebGLMaterials.js b/src/renderers/webgl/WebGLMaterials.js index fcd19d158092fd14996fe62775b9a80b022cf3a6..bc90fdd4366fe97e660052f28357a32aff0da0ec 100644 --- a/src/renderers/webgl/WebGLMaterials.js +++ b/src/renderers/webgl/WebGLMaterials.js @@ -145,7 +145,7 @@ function WebGLMaterials( properties ) { uniforms.envMap.value = envMap; - uniforms.flipEnvMap.value = ( envMap.isCubeTexture && envMap._needsFlipEnvMap ) ? - 1 : 1; + uniforms.flipEnvMap.value = ( envMap.isCubeTexture && envMap.isRenderTargetTexture === false ) ? - 1 : 1; uniforms.reflectivity.value = material.reflectivity; uniforms.refractionRatio.value = material.refractionRatio; diff --git a/src/renderers/webgl/WebGLPrograms.js b/src/renderers/webgl/WebGLPrograms.js index 6653bff5ea327925ff6893e30413edda1a3c5936..e54fe67a72e2e7b745cd93f5eea371cf5da51916 100644 --- a/src/renderers/webgl/WebGLPrograms.js +++ b/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, cubemaps, extensions, capabilities, bindingStates, clipping ) { +function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities, bindingStates, clipping ) { const programs = []; @@ -112,7 +112,7 @@ function WebGLPrograms( renderer, cubemaps, extensions, capabilities, bindingSta const fog = scene.fog; const environment = material.isMeshStandardMaterial ? scene.environment : null; - const envMap = cubemaps.get( material.envMap || environment ); + const envMap = ( material.isMeshStandardMaterial ? cubeuvmaps : cubemaps ).get( material.envMap || environment ); const shaderID = shaderIDs[ material.type ]; diff --git a/src/textures/CubeTexture.js b/src/textures/CubeTexture.js index f214911d437316959fd5cfceedc1bddc8aee0d91..8cb64a1692fdbb4857190aebceb3563f2fe9fbbb 100644 --- a/src/textures/CubeTexture.js +++ b/src/textures/CubeTexture.js @@ -11,18 +11,6 @@ class CubeTexture extends Texture { super( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ); - // Why CubeTexture._needsFlipEnvMap is necessary: - // - // By convention -- likely based on the RenderMan spec from the 1990's -- cube maps are specified by WebGL (and three.js) - // in a coordinate system in which positive-x is to the right when looking up the positive-z axis -- in other words, - // in a left-handed coordinate system. By continuing this convention, preexisting cube maps continued to render correctly. - - // three.js uses a right-handed coordinate system. So environment maps used in three.js appear to have px and nx swapped - // and the flag _needsFlipEnvMap controls this conversion. The flip is not required (and thus _needsFlipEnvMap is set to false) - // when using WebGLCubeRenderTarget.texture as a cube texture. - - this._needsFlipEnvMap = true; - this.flipY = false; } diff --git a/src/textures/Texture.js b/src/textures/Texture.js index e6946bf1cedf037593ed2d41ed44cc558515a6f0..423c7856e06ce0ddc52cf96da63c5891d4908f9d 100644 --- a/src/textures/Texture.js +++ b/src/textures/Texture.js @@ -68,6 +68,8 @@ class Texture extends EventDispatcher { this.version = 0; this.onUpdate = null; + this.isRenderTargetTexture = false; + } updateMatrix() {