Merge pull request #16878 from sunag/dev-fix-TextureCubeNode

NodeMaterial PMREM custom size

Merge pull request #16878 from sunag/dev-fix-TextureCubeNode
NodeMaterial PMREM custom size
cbd2f621 · Mr.doob · GitHub · 6a04e33c · a136ee0f · cbd2f621
隐藏空白更改
内联并排

Showing with 233 addition and 0 deletion

examples/files.js examples/files.js +1 -0

examples/webgl_materials_envmaps_pmrem_nodes.html examples/webgl_materials_envmaps_pmrem_nodes.html +232 -0

未找到文件。
--- a/examples/files.js
+++ b/examples/files.js
@@ -161,6 +161,7 @@ var files = {
 		"webgl_materials_envmaps_hdr",
 		"webgl_materials_envmaps_hdr_nodes",
 		"webgl_materials_envmaps_parallax",
+		"webgl_materials_envmaps_pmrem_nodes",
 		"webgl_materials_grass",
 		"webgl_materials_lightmap",
 		"webgl_materials_matcap",

--- a/examples/webgl_materials_envmaps_pmrem_nodes.html
+++ b/examples/webgl_materials_envmaps_pmrem_nodes.html
+<!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>