Browse Source

add bias example and update prem texture

sunag 6 years ago
parent
commit
cbf555d242
1 changed files with 113 additions and 55 deletions
  1. 113 55
      examples/webgl_materials_nodes.html

+ 113 - 55
examples/webgl_materials_nodes.html

@@ -71,63 +71,56 @@
 
 			}
 
-			var cubemap = function () {
+			var premTexture, pmremCube, pmremGenerator, pmremCubeUVPacker, premSize = 1024;
 
-				var path = "textures/cube/Park2/";
-				var format = '.jpg';
-				var urls = [
-					path + 'posx' + format, path + 'negx' + format,
-					path + 'posy' + format, path + 'negy' + format,
-					path + 'posz' + format, path + 'negz' + format
-				];
+			function updatePREM( textureCube ) {
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
-				textureCube.format = THREE.RGBFormat;
+				pmremCube = pmremCube || textureCube;
 
-				library[ textureCube.uuid ] = textureCube;
+				if ( ! pmremCube || ! renderer ) return;
 
-				return textureCube;
+				var minFilter = pmremCube.minFilter;
+				var magFilter = pmremCube.magFilter;
+				var generateMipmaps = pmremCube.generateMipmaps;
 
-			}();
+				pmremGenerator = new PMREMGenerator( pmremCube, undefined, premSize / 4 );
+				pmremGenerator.update( renderer );
 
-			function generatePREM( cubeMap, textureSize ) {
+				pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
+				pmremCubeUVPacker.update( renderer );
 
-				textureSize = textureSize || 1024;
+				pmremCube.minFilter = minFilter;
+				pmremCube.magFilter = magFilter;
+				pmremCube.generateMipmaps = pmremCube.generateMipmaps;
+				pmremCube.needsUpdate = true;
 
-				var pmremGenerator = new PMREMGenerator( cubeMap, undefined, textureSize / 4 );
-				pmremGenerator.update( renderer );
+				premTexture = pmremCubeUVPacker.CubeUVRenderTarget.texture
 
-				var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
-				pmremCubeUVPacker.update( renderer );
+				library[ premTexture.uuid ] = premTexture;
 
 				pmremGenerator.dispose();
 				pmremCubeUVPacker.dispose();
 
-				return pmremCubeUVPacker.CubeUVRenderTarget.texture;
-
 			}
 
-			var premTexture;
-
-			function getPREM( callback, textureSize ) {
-
-				if ( premTexture ) return callback( premTexture );
-
-				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
-				var hdrCubeMap = new HDRCubeTextureLoader()
-					.setPath( './textures/cube/pisaHDR/' )
-					.setDataType( THREE.UnsignedByteType )
-					.load( hdrUrls, function () {
+			var cubemap = function () {
 
-						premTexture = generatePREM( hdrCubeMap, textureSize );
+				var path = "textures/cube/Park2/";
+				var format = '.jpg';
+				var urls = [
+					path + 'posx' + format, path + 'negx' + format,
+					path + 'posy' + format, path + 'negy' + format,
+					path + 'posz' + format, path + 'negz' + format
+				];
 
-						library[ premTexture.uuid ] = premTexture;
+				var textureCube = new THREE.CubeTextureLoader().load( urls, updatePREM );
+				textureCube.format = THREE.RGBFormat;
 
-						callback( premTexture );
+				library[ textureCube.uuid ] = textureCube;
 
-					} );
+				return textureCube;
 
-			}
+			}();
 
 			window.addEventListener( 'load', init );
 
@@ -176,6 +169,8 @@
 				library[ camera.uuid ] = camera;
 				library[ mesh.uuid ] = mesh;
 
+				updatePREM();
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				updateMaterial();
@@ -226,6 +221,7 @@
 					'adv / expression': 'expression',
 					'adv / sss': 'sss',
 					'adv / translucent': 'translucent',
+					'adv / bias': 'bias',
 					'node / position': 'node-position',
 					'node / normal': 'node-normal',
 					'node / reflect': 'node-reflect',
@@ -504,14 +500,8 @@
 						mtl.normal = new Nodes.NormalMapNode( new Nodes.TextureNode( getTexture( "grassNormal" ) ) );
 						mtl.normal.scale = normalMask;
 
-						getPREM(function(texture) {
-
-							var envNode = new Nodes.TextureCubeNode( new Nodes.TextureNode( texture ) );
-
-							mtl.environment = new Nodes.OperatorNode( envNode, intensity, Nodes.OperatorNode.MUL );
-							mtl.needsUpdate = true;
-
-						});
+						var envNode = new Nodes.TextureCubeNode( new Nodes.TextureNode( premTexture ) );
+						mtl.environment = new Nodes.OperatorNode( envNode, intensity, Nodes.OperatorNode.MUL );
 
 						// GUI
 
@@ -587,18 +577,13 @@
 						mtl.normal = new Nodes.NormalMapNode( new Nodes.TextureNode( getTexture( "grassNormal" ) ) );
 						mtl.normal.scale = normalScale;
 
-						getPREM(function(texture) {
-
-							var envNode = new Nodes.TextureCubeNode( new Nodes.TextureNode( texture ) );
+						var envNode = new Nodes.TextureCubeNode( new Nodes.TextureNode( premTexture ) );
 
-							var subSlotNode = new Nodes.SubSlotNode();
-							subSlotNode.slots['radiance'] = new Nodes.OperatorNode( radiance, envNode, Nodes.OperatorNode.MUL );
-							subSlotNode.slots['irradiance'] = new Nodes.OperatorNode( irradiance, envNode, Nodes.OperatorNode.MUL );
+						var subSlotNode = new Nodes.SubSlotNode();
+						subSlotNode.slots['radiance'] = new Nodes.OperatorNode( radiance, envNode, Nodes.OperatorNode.MUL );
+						subSlotNode.slots['irradiance'] = new Nodes.OperatorNode( irradiance, envNode, Nodes.OperatorNode.MUL );
 
-							mtl.environment = subSlotNode;
-							mtl.needsUpdate = true;
-
-						});
+						mtl.environment = subSlotNode
 
 						// GUI
 
@@ -2483,6 +2468,79 @@
 
 						break;
 
+					case 'bias':
+
+						// PREREQUISITES
+
+						var image = cubemap.image[ 0 ];
+						var maxMIPLevel = image !== undefined ? Math.log( Math.max( image.width, image.height ) ) * Math.LOG2E : 0;
+
+						// MATERIAL
+
+						var bias = new Nodes.FloatNode( .5 );
+						var mipsBias = new Nodes.OperatorNode( bias, new Nodes.FloatNode( maxMIPLevel ), Nodes.OperatorNode.MUL );
+
+						mtl = new Nodes.PhongNodeMaterial();
+						mtl.color.value.setHex( 0xFFFFFF );
+
+						function biasMode( val ) {
+
+							switch( val ) {
+
+								case 'prem':
+
+									mtl.color = new Nodes.TextureCubeNode( new Nodes.TextureNode( premTexture ), undefined, undefined, bias );
+
+									break;
+
+								case 'lod':
+
+									var textureCubeFunction = new Nodes.FunctionNode( [
+										"vec4 textureCubeFunction( samplerCube texture, vec3 uv, float bias ) {",
+										"	return textureCubeLodEXT( texture, uv, bias );",
+										"}"
+									].join( "\n" ), undefined, { shaderTextureLOD: true } );
+
+									mtl.color = new Nodes.FunctionCallNode( textureCubeFunction, [ new Nodes.CubeTextureNode( cubemap ), new Nodes.ReflectNode(), mipsBias ] );
+
+									break;
+
+								case 'basic':
+
+									var textureCubeFunction = new Nodes.FunctionNode( [
+										"vec4 textureCubeFunction( samplerCube texture, vec3 uv, float bias ) {",
+										"	return textureCube( texture, uv, bias );",
+										"}"
+									].join( "\n" ) );
+
+									mtl.color = new Nodes.FunctionCallNode( textureCubeFunction, [ new Nodes.CubeTextureNode( cubemap ), new Nodes.ReflectNode(), mipsBias ] );
+
+									break;
+
+							}
+
+							mtl.needsUpdate = true;
+
+						}
+
+						biasMode( 'prem' );
+
+						// GUI
+
+						addGui( 'scope', {
+							PREM: 'prem',
+							LOD: 'lod',
+							BASIC: 'basic'
+						}, biasMode );
+
+						addGui( 'bias', bias.value, function ( val ) {
+
+							bias.value = val;
+
+						}, false, 0, 1 );
+
+						break;
+
 					case 'node-position':
 
 						// MATERIAL