Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebGLRenderer: Integrate PMREM. #22178

Merged
merged 2 commits into from
Jul 26, 2021
Merged

WebGLRenderer: Integrate PMREM. #22178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d3c0b0
WebGLRenderer: Integrate PMREM
Mugen87 Jul 24, 2021
b2e0f81
Examples: Update screenshot.
Mugen87 Jul 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/jsm/postprocessing/CubeTexturePass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down
Binary file modified examples/screenshots/webgl_loader_gltf_extensions.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 4 additions & 10 deletions examples/webgl_loader_gltf.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,14 @@
scene = new THREE.Scene();

new RGBELoader()
.setDataType( THREE.UnsignedByteType )
.setDataType( THREE.FloatType )
Mugen87 marked this conversation as resolved.
Show resolved Hide resolved
.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();

Expand Down Expand Up @@ -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;
Expand Down
11 changes: 4 additions & 7 deletions examples/webgl_loader_gltf_extensions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

//

Expand All @@ -175,9 +175,6 @@

} );

const pmremGenerator = new THREE.PMREMGenerator( renderer );
pmremGenerator.compileEquirectangularShader();

}

function initScene( sceneInfo ) {
Expand Down
14 changes: 4 additions & 10 deletions examples/webgl_loader_gltf_transmission.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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;
Expand Down
14 changes: 4 additions & 10 deletions examples/webgl_loader_gltf_variants.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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;
Expand Down
33 changes: 8 additions & 25 deletions examples/webgl_materials_envmaps_exr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
let container, stats;
let camera, scene, renderer, controls;
let torusMesh, planeMesh;
let pngCubeRenderTarget, exrCubeRenderTarget;
let pngBackground, exrBackground;

init();
Expand Down Expand Up @@ -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 );

Expand Down Expand Up @@ -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;

Expand Down
27 changes: 9 additions & 18 deletions examples/webgl_materials_physical_clearcoat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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

Expand Down Expand Up @@ -151,8 +147,8 @@

//

scene.background = hdrCubeRenderTarget.texture;
scene.environment = hdrCubeRenderTarget.texture;
scene.background = texture;
scene.environment = texture;

}

Expand Down Expand Up @@ -184,11 +180,6 @@

//

const pmremGenerator = new THREE.PMREMGenerator( renderer );
pmremGenerator.compileEquirectangularShader();

//

stats = new Stats();
container.appendChild( stats.dom );

Expand Down
15 changes: 4 additions & 11 deletions examples/webgl_materials_physical_reflectivity.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
};
let camera, scene, renderer;
let gemBackMaterial, gemFrontMaterial;
let hdrCubeRenderTarget;

const objects = [];

Expand Down Expand Up @@ -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 ) );
Expand Down
14 changes: 5 additions & 9 deletions examples/webgl_materials_physical_transmission.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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;

//

Expand All @@ -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,
Expand Down
Loading