|
|
@@ -0,0 +1,313 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>threejs webgl - materials - hdr environment mapping</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ color: #fff;
|
|
|
+ font-family:Monospace;
|
|
|
+ font-size:13px;
|
|
|
+ text-align:center;
|
|
|
+
|
|
|
+ background-color: #000;
|
|
|
+
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ a { color: #00f }
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px; width: 100%;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+
|
|
|
+ <div id="container"></div>
|
|
|
+ <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - High dynamic range (RGBE) Image-based Lighting (IBL)<br />using run-time generated pre-filtered roughness mipmaps (PMREM)<br/>
|
|
|
+ Created by Prashant Sharma and <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>
|
|
|
+
|
|
|
+ <script src="../build/three.js"></script>
|
|
|
+ <script src="js/controls/OrbitControls.js"></script>
|
|
|
+
|
|
|
+ <script src="js/loaders/RGBELoader.js"></script>
|
|
|
+ <script src="js/loaders/HDRCubeTextureLoader.js"></script>
|
|
|
+
|
|
|
+ <script src="js/WebGL.js"></script>
|
|
|
+ <script src="js/libs/stats.min.js"></script>
|
|
|
+
|
|
|
+ <script src="js/pmrem/PMREMGenerator.js"></script>
|
|
|
+ <script src="js/pmrem/PMREMCubeUVPacker.js"></script>
|
|
|
+ <script src="js/libs/dat.gui.min.js"></script>
|
|
|
+
|
|
|
+ <script type="module">
|
|
|
+ /*
|
|
|
+ * COPIED FROM webgl_materials_envmaps_hdr.html
|
|
|
+ *
|
|
|
+ *
|
|
|
+ *
|
|
|
+ */
|
|
|
+ import './js/nodes/THREE.Nodes.js';
|
|
|
+
|
|
|
+ if ( WEBGL.isWebGLAvailable() === false ) {
|
|
|
+
|
|
|
+ document.body.appendChild( WEBGL.getWebGLErrorMessage() );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ var params = {
|
|
|
+ envMap: 'HDR',
|
|
|
+ roughness: 0.0,
|
|
|
+ metalness: 0.0,
|
|
|
+ exposure: 1.0,
|
|
|
+ debug: false,
|
|
|
+ };
|
|
|
+
|
|
|
+ var container, stats;
|
|
|
+ var camera, scene, renderer, controls;
|
|
|
+ var torusMesh, planeMesh;
|
|
|
+ var nodeMaterial;
|
|
|
+ var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
|
|
|
+ var ldrCubeMap, hdrCubeMap, rgbmCubeMap;
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ container = document.createElement( 'div' );
|
|
|
+ document.body.appendChild( container );
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
+ camera.position.set( 0, 0, 120 );
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+ scene.background = new THREE.Color( 0x000000 );
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer.toneMapping = THREE.LinearToneMapping;
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
|
|
|
+ //geometry = new THREE.SphereBufferGeometry(20, 100, 100);
|
|
|
+ var material = new THREE.MeshStandardMaterial( {
|
|
|
+ color: 0xffffff,
|
|
|
+ metalness: params.metalness,
|
|
|
+ roughness: params.roughness
|
|
|
+ } );
|
|
|
+
|
|
|
+ torusMesh = new THREE.Mesh( geometry, material );
|
|
|
+ torusMesh.position.y = 35;
|
|
|
+ scene.add( torusMesh );
|
|
|
+
|
|
|
+ nodeMaterial = new THREE.StandardNodeMaterial();
|
|
|
+ nodeMaterial.color = new THREE.ColorNode(new THREE.Color(1, 1, 1))
|
|
|
+ nodeMaterial.roughness = new THREE.FloatNode(params.metalness);
|
|
|
+ nodeMaterial.metalness = new THREE.FloatNode(params.roguhness);
|
|
|
+
|
|
|
+ var torusMeshNode = new THREE.Mesh( geometry, nodeMaterial );
|
|
|
+ torusMeshNode.position.y = -35;
|
|
|
+ scene.add( torusMeshNode );
|
|
|
+
|
|
|
+
|
|
|
+ var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
|
|
|
+ var material = new THREE.MeshBasicMaterial();
|
|
|
+
|
|
|
+ planeMesh = new THREE.Mesh( geometry, material );
|
|
|
+ planeMesh.position.y = - 50;
|
|
|
+ planeMesh.rotation.x = - Math.PI * 0.5;
|
|
|
+ scene.add( planeMesh );
|
|
|
+
|
|
|
+ var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
|
|
|
+ hdrCubeMap = new THREE.HDRCubeTextureLoader()
|
|
|
+ .setPath( './textures/cube/pisaHDR/' )
|
|
|
+ .load( THREE.UnsignedByteType, hdrUrls, function () {
|
|
|
+
|
|
|
+ var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
|
|
|
+ pmremGenerator.update( renderer );
|
|
|
+
|
|
|
+ var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
|
|
|
+ pmremCubeUVPacker.update( renderer );
|
|
|
+
|
|
|
+ hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
|
|
|
+
|
|
|
+ hdrCubeMap.magFilter = THREE.LinearFilter;
|
|
|
+ hdrCubeMap.needsUpdate = true;
|
|
|
+
|
|
|
+ pmremGenerator.dispose();
|
|
|
+ pmremCubeUVPacker.dispose();
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ var ldrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
|
|
|
+ ldrCubeMap = new THREE.CubeTextureLoader()
|
|
|
+ .setPath( './textures/cube/pisa/' )
|
|
|
+ .load( ldrUrls, function () {
|
|
|
+
|
|
|
+ ldrCubeMap.encoding = THREE.GammaEncoding;
|
|
|
+
|
|
|
+ var pmremGenerator = new THREE.PMREMGenerator( ldrCubeMap );
|
|
|
+ pmremGenerator.update( renderer );
|
|
|
+
|
|
|
+ var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
|
|
|
+ pmremCubeUVPacker.update( renderer );
|
|
|
+
|
|
|
+ ldrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
|
|
|
+
|
|
|
+ pmremGenerator.dispose();
|
|
|
+ pmremCubeUVPacker.dispose();
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+
|
|
|
+ var rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
|
|
|
+ rgbmCubeMap = new THREE.CubeTextureLoader()
|
|
|
+ .setPath( './textures/cube/pisaRGBM16/' )
|
|
|
+ .load( rgbmUrls, function () {
|
|
|
+
|
|
|
+ rgbmCubeMap.encoding = THREE.RGBM16Encoding;
|
|
|
+ rgbmCubeMap.format = THREE.RGBAFormat;
|
|
|
+
|
|
|
+ var pmremGenerator = new THREE.PMREMGenerator( rgbmCubeMap );
|
|
|
+ pmremGenerator.update( renderer );
|
|
|
+
|
|
|
+ var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
|
|
|
+ pmremCubeUVPacker.update( renderer );
|
|
|
+
|
|
|
+ rgbmCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
|
|
|
+
|
|
|
+ rgbmCubeMap.magFilter = THREE.LinearFilter;
|
|
|
+ rgbmCubeMap.needsUpdate = true;
|
|
|
+
|
|
|
+ pmremGenerator.dispose();
|
|
|
+ pmremCubeUVPacker.dispose();
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ //renderer.toneMapping = THREE.ReinhardToneMapping;
|
|
|
+ renderer.gammaInput = true; // ???
|
|
|
+ renderer.gammaOutput = true;
|
|
|
+
|
|
|
+ stats = new Stats();
|
|
|
+ container.appendChild( stats.dom );
|
|
|
+
|
|
|
+ controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
+ controls.minDistance = 50;
|
|
|
+ controls.maxDistance = 300;
|
|
|
+
|
|
|
+ window.addEventListener( 'resize', onWindowResize, false );
|
|
|
+
|
|
|
+ var gui = new dat.GUI();
|
|
|
+
|
|
|
+ gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
|
|
|
+ gui.add( params, 'roughness', 0, 1, 0.01 );
|
|
|
+ gui.add( params, 'metalness', 0, 1, 0.01 );
|
|
|
+ gui.add( params, 'exposure', 0, 2, 0.01 );
|
|
|
+ gui.add( params, 'debug', false );
|
|
|
+ gui.open();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onWindowResize() {
|
|
|
+
|
|
|
+ var width = window.innerWidth;
|
|
|
+ var height = window.innerHeight;
|
|
|
+
|
|
|
+ camera.aspect = width / height;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+
|
|
|
+ renderer.setSize( width, height );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function animate() {
|
|
|
+
|
|
|
+ requestAnimationFrame( animate );
|
|
|
+
|
|
|
+ stats.begin();
|
|
|
+ render();
|
|
|
+ stats.end();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function render() {
|
|
|
+
|
|
|
+ torusMesh.material.roughness = params.roughness;
|
|
|
+ torusMesh.material.metalness = params.metalness;
|
|
|
+
|
|
|
+ nodeMaterial.roughness.value = params.roughness;
|
|
|
+ nodeMaterial.metalness.value = params.metalness;
|
|
|
+
|
|
|
+ var renderTarget, cubeMap;
|
|
|
+
|
|
|
+ switch ( params.envMap ) {
|
|
|
+
|
|
|
+ case 'LDR':
|
|
|
+ renderTarget = ldrCubeRenderTarget;
|
|
|
+ cubeMap = ldrCubeMap;
|
|
|
+ break;
|
|
|
+ case 'HDR':
|
|
|
+ renderTarget = hdrCubeRenderTarget;
|
|
|
+ cubeMap = hdrCubeMap;
|
|
|
+ break;
|
|
|
+ case 'RGBM16':
|
|
|
+ renderTarget = rgbmCubeRenderTarget;
|
|
|
+ cubeMap = rgbmCubeMap;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ var newEnvMap = renderTarget ? renderTarget.texture : null;
|
|
|
+
|
|
|
+ if ( newEnvMap && newEnvMap !== torusMesh.material.envMap ) {
|
|
|
+
|
|
|
+ torusMesh.material.envMap = newEnvMap;
|
|
|
+ torusMesh.material.needsUpdate = true;
|
|
|
+
|
|
|
+ planeMesh.material.map = newEnvMap;
|
|
|
+ planeMesh.material.needsUpdate = true;
|
|
|
+
|
|
|
+ var textureNode = new THREE.TextureNode(newEnvMap);
|
|
|
+ textureNode.encodingOverride = newEnvMap.encoding;
|
|
|
+
|
|
|
+ nodeMaterial.environment = new THREE.TextureCubeNode(
|
|
|
+ textureNode
|
|
|
+ );
|
|
|
+ nodeMaterial.environment.uv.blinnExponentToRoughness = nodeMaterial.roughness;
|
|
|
+
|
|
|
+ nodeMaterial.ambient = new THREE.TextureCubeNode(
|
|
|
+ textureNode
|
|
|
+ );
|
|
|
+ nodeMaterial.ambient.uv.blinnExponentToRoughness = new THREE.FloatNode(1);
|
|
|
+ nodeMaterial.ambient.uv.uv = new THREE.NormalNode(THREE.NormalNode.WORLD);
|
|
|
+ nodeMaterial.ambient = new THREE.OperatorNode(
|
|
|
+ nodeMaterial.ambient,
|
|
|
+ new THREE.FloatNode(Math.PI),
|
|
|
+ THREE.OperatorNode.MUL);
|
|
|
+
|
|
|
+ nodeMaterial.needsUpdate = true;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //torusMesh.rotation.y += 0.005;
|
|
|
+ planeMesh.visible = params.debug;
|
|
|
+
|
|
|
+ scene.background = cubeMap;
|
|
|
+ renderer.toneMappingExposure = params.exposure;
|
|
|
+
|
|
|
+ renderer.render( scene, camera );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
Daniel Sturk