From b98a2f51aa20b2b3d84215f285616f10657934b0 Mon Sep 17 00:00:00 2001 From: Ben Houston Date: Thu, 6 Apr 2017 09:56:01 -0400 Subject: [PATCH] add IBL maps to the physical and standard variations to better catch bugs with IBL. --- .../webgl_materials_variations_physical.html | 101 +++++++++++------ .../webgl_materials_variations_standard.html | 106 ++++++++++++------ 2 files changed, 139 insertions(+), 68 deletions(-) diff --git a/examples/webgl_materials_variations_physical.html b/examples/webgl_materials_variations_physical.html index 768fb63043..5528616868 100644 --- a/examples/webgl_materials_variations_physical.html +++ b/examples/webgl_materials_variations_physical.html @@ -26,13 +26,20 @@
-
three.js - Physical Material Variations by Ben Houston.
+
three.js - Physical Material Variations by Ben Houston.

+ Note: Every second sphere has an IBL environment map on it.
+ + + + + + + + + + + @@ -60,14 +66,23 @@ camera.position.set( 0.0, 400, 400 * 3.5 ); // - - var reflectionCube = new THREE.CubeTextureLoader() - .setPath( 'textures/cube/SwedishRoyalCastle/' ) - .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] ); - reflectionCube.format = THREE.RGBFormat; + var genCubeUrls = function( prefix, postfix ) { + return [ + prefix + 'px' + postfix, prefix + 'nx' + postfix, + prefix + 'py' + postfix, prefix + 'ny' + postfix, + prefix + 'pz' + postfix, prefix + 'nz' + postfix + ]; + }; + + var textureCube = new THREE.CubeTextureLoader() + .setPath( 'textures/cube/pisa/' ) + .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] ); scene = new THREE.Scene(); - scene.background = reflectionCube; + scene.background = textureCube; + + var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' ); + var hdrCubeRenderTarget = null; // Materials @@ -76,50 +91,67 @@ imgTexture.anisotropy = 16; imgTexture = null; - var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading; + new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) { + + var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap ); + pmremGenerator.update( renderer ); + + var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods ); + pmremCubeUVPacker.update( renderer ); + + hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget; - var materials = []; + var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading; - var cubeWidth = 400; - var numberOfSphersPerSide = 5; - var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5; - var stepSize = 1.0 / numberOfSphersPerSide; + var materials = []; - var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 ); + var cubeWidth = 400; + var numberOfSphersPerSide = 5; + var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5; + var stepSize = 1.0 / numberOfSphersPerSide; + + var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 ); - for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) { + var index = 0; - for ( var beta = 0; beta <= 1.0; beta += stepSize ) { + for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) { - for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) { + for ( var beta = 0; beta <= 1.0; beta += stepSize ) { - // basic monochromatic energy preservation - var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 ); + for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) { - var material = new THREE.MeshStandardMaterial( { - map: imgTexture, - bumpMap: imgTexture, - bumpScale: bumpScale, - color: diffuseColor, - metalness: beta, - roughness: 1.0 - alpha, - shading: THREE.SmoothShading, - envMap: alphaIndex % 2 === 0 ? null : reflectionCube - } ); + // basic monochromatic energy preservation + var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 ); - var mesh = new THREE.Mesh( geometry, material ); + var material = new THREE.MeshStandardMaterial( { + map: imgTexture, + bumpMap: imgTexture, + bumpScale: bumpScale, + color: diffuseColor, + metalness: beta, + roughness: 1.0 - alpha, + shading: THREE.SmoothShading, + envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture + } ); - mesh.position.x = alpha * 400 - 200; - mesh.position.y = beta * 400 - 200; - mesh.position.z = gamma * 400 - 200; + index ++; - scene.add( mesh ); + var mesh = new THREE.Mesh( geometry, material ); + mesh.position.x = alpha * 400 - 200; + mesh.position.y = beta * 400 - 200; + mesh.position.z = gamma * 400 - 200; + + scene.add( mesh ); + + } + } + + index ++; } - - } + }); function addLabel( name, location ) { @@ -172,6 +204,8 @@ renderer.gammaInput = true; renderer.gammaOutput = true; + renderer.toneMapping = THREE.Uncharted2ToneMapping; + renderer.toneMappingExposure = 0.75; // -- GitLab