|
@@ -0,0 +1,232 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="en">
|
|
|
|
|
+ <head>
|
|
|
|
|
+ <title>threejs webgl - node material - custom size 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 = {
|
|
|
|
|
+ textureSize: 1024,
|
|
|
|
|
+ roughness: 0.0,
|
|
|
|
|
+ metalness: 0.0,
|
|
|
|
|
+ exposure: 1.0,
|
|
|
|
|
+ animate: true,
|
|
|
|
|
+ debug: false
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ var container, stats;
|
|
|
|
|
+ var camera, scene, renderer, controls;
|
|
|
|
|
+ var nodeMaterial, nodeTexture, nodeTextureSize, torusMesh, planeMesh;
|
|
|
|
|
+ var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
|
|
|
|
|
+ var ldrCubeMap, hdrCubeMap, rgbmCubeMap;
|
|
|
|
|
+
|
|
|
|
|
+ init();
|
|
|
|
|
+ animate();
|
|
|
|
|
+
|
|
|
|
|
+ function generate( textureSize ) {
|
|
|
|
|
+
|
|
|
|
|
+ nodeTextureSize.value = textureSize;
|
|
|
|
|
+
|
|
|
|
|
+ var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap, undefined, textureSize / 4 );
|
|
|
|
|
+ pmremGenerator.update( renderer );
|
|
|
|
|
+
|
|
|
|
|
+ var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
|
|
|
|
|
+ pmremCubeUVPacker.update( renderer );
|
|
|
|
|
+
|
|
|
|
|
+ hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
|
|
|
|
|
+ nodeTexture.value = hdrCubeRenderTarget.texture;
|
|
|
|
|
+
|
|
|
|
|
+ hdrCubeMap.magFilter = THREE.LinearFilter;
|
|
|
|
|
+ hdrCubeMap.needsUpdate = true;
|
|
|
|
|
+
|
|
|
|
|
+ planeMesh.material.map = hdrCubeRenderTarget.texture;
|
|
|
|
|
+ planeMesh.material.needsUpdate = true;
|
|
|
|
|
+
|
|
|
|
|
+ pmremGenerator.dispose();
|
|
|
|
|
+ pmremCubeUVPacker.dispose();
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ 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 );
|
|
|
|
|
+
|
|
|
|
|
+ nodeMaterial = new THREE.StandardNodeMaterial();
|
|
|
|
|
+ nodeMaterial.color.value = new THREE.Color( 0xffffff );
|
|
|
|
|
+ nodeMaterial.roughness.value = params.metalness;
|
|
|
|
|
+ nodeMaterial.metalness.value = params.roguhness;
|
|
|
|
|
+ nodeMaterial.visible = false;
|
|
|
|
|
+
|
|
|
|
|
+ nodeTexture = new THREE.TextureNode();
|
|
|
|
|
+ nodeTextureSize = new THREE.FloatNode( 1024 );
|
|
|
|
|
+
|
|
|
|
|
+ nodeMaterial.environment = new THREE.TextureCubeNode( nodeTexture, nodeTextureSize );
|
|
|
|
|
+
|
|
|
|
|
+ torusMesh = new THREE.Mesh( geometry, nodeMaterial );
|
|
|
|
|
+ scene.add( torusMesh );
|
|
|
|
|
+
|
|
|
|
|
+ planeMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200, 200 ), new THREE.MeshBasicMaterial() );
|
|
|
|
|
+ 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 () {
|
|
|
|
|
+
|
|
|
|
|
+ generate( params.textureSize );
|
|
|
|
|
+
|
|
|
|
|
+ nodeMaterial.visible = true;
|
|
|
|
|
+
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ 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, 'textureSize', [ 128, 256, 512, 1024, 2048, 4096 ] );
|
|
|
|
|
+ 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, 'animate', true );
|
|
|
|
|
+ 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.value = params.roughness;
|
|
|
|
|
+ torusMesh.material.metalness.value = params.metalness;
|
|
|
|
|
+
|
|
|
|
|
+ if ( nodeTextureSize.value !== params.textureSize ) {
|
|
|
|
|
+
|
|
|
|
|
+ generate( params.textureSize );
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if ( params.animate ) {
|
|
|
|
|
+
|
|
|
|
|
+ torusMesh.rotation.y += 0.005;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ planeMesh.visible = params.debug;
|
|
|
|
|
+
|
|
|
|
|
+ scene.background = hdrCubeMap;
|
|
|
|
|
+ renderer.toneMappingExposure = params.exposure;
|
|
|
|
|
+
|
|
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ </script>
|
|
|
|
|
+
|
|
|
|
|
+ </body>
|
|
|
|
|
+</html>
|
sunag