Browse Source

fixed StandardNodeMaterial's sheen

Daniel Sturk 6 năm trước cách đây
mục cha
commit
22fce3b128

+ 1 - 1
examples/jsm/nodes/materials/StandardNodeMaterial.js

@@ -36,7 +36,7 @@ NodeUtils.addShortcuts( StandardNodeMaterial.prototype, 'fragment', [
 	'environment',
 	'mask',
 	'position',
-	'sheen'
+	'sheenColor'
 ] );
 
 export { StandardNodeMaterial };

+ 9 - 9
examples/jsm/nodes/materials/nodes/StandardNode.js

@@ -32,7 +32,7 @@ StandardNode.prototype.build = function ( builder ) {
 
 	var code;
 
-	builder.define( this.clearCoat || this.clearCoatRoughness || this.sheen ? 'PHYSICAL' : 'STANDARD' );
+	builder.define( this.clearCoat || this.clearCoatRoughness ? 'PHYSICAL' : 'STANDARD' );
 
 	if ( this.energyPreservation ) builder.define( 'ENERGY_PRESERVATION' );
 
@@ -162,17 +162,17 @@ StandardNode.prototype.build = function ( builder ) {
 			// isolate environment from others inputs ( see TextureNode, CubeTextureNode )
 			// environment.analyze will detect if there is a need of calculate irradiance
 
-			this.environment.analyze( builder, { cache: 'radiance', context: contextEnvironment, slot: 'radiance' } ); 
+			this.environment.analyze( builder, { cache: 'radiance', context: contextEnvironment, slot: 'radiance' } );
 
 			if ( builder.requires.irradiance ) {
 
-				this.environment.analyze( builder, { cache: 'irradiance', context: contextEnvironment, slot: 'irradiance' } ); 
+				this.environment.analyze( builder, { cache: 'irradiance', context: contextEnvironment, slot: 'irradiance' } );
 
 			}
 
 		}
 
-		if ( this.sheen ) this.sheen.analyze( builder );
+		if ( this.sheenColor ) this.sheenColor.analyze( builder );
 
 		// build code
 
@@ -216,7 +216,7 @@ StandardNode.prototype.build = function ( builder ) {
 
 		var clearCoatEnv = useClearCoat && environment ? this.environment.flow( builder, 'c', { cache: 'clearCoat', context: contextEnvironment, slot: 'environment' } ) : undefined;
 
-		var sheen = ! builder.isDefined( 'STANDARD' ) && this.sheen ? this.sheen.flow( builder, 'f' ) : undefined;
+		var sheenColor = this.sheenColor ? this.sheenColor.flow( builder, 'c' ) : undefined;
 
 		builder.requires.transparent = alpha !== undefined;
 
@@ -328,9 +328,9 @@ StandardNode.prototype.build = function ( builder ) {
 
 		}
 
-		if ( sheen ) {
+		if ( sheenColor ) {
 
-			output.push( 'material.sheen = ' + sheen.result + ';' );
+			output.push( 'material.sheenColor = ' + sheenColor.result + ';' );
 
 		}
 
@@ -506,7 +506,7 @@ StandardNode.prototype.copy = function ( source ) {
 
 	if ( source.environment ) this.environment = source.environment;
 
-	if ( source.sheen ) this.sheen = source.sheen;
+	if ( source.sheenColor ) this.sheenColor = source.sheenColor;
 
 	return this;
 
@@ -551,7 +551,7 @@ StandardNode.prototype.toJSON = function ( meta ) {
 
 		if ( this.environment ) data.environment = this.environment.toJSON( meta ).uuid;
 
-		if ( this.sheen ) data.sheen = this.sheen.toJSON( meta ).uuid;
+		if ( this.sheenColor ) data.sheenColor = this.sheenColor.toJSON( meta ).uuid;
 
 	}
 

+ 0 - 10
examples/webgl_materials_nodes.html

@@ -800,8 +800,6 @@
 							Nodes.OperatorNode.MUL
 						);
 
-						var sheen = new Nodes.FloatNode(.5);
-
 						mtl.color = new Nodes.ColorNode( 0xEEEEEE );
 						mtl.roughness = roughness;
 						mtl.metalness = metalness;
@@ -812,8 +810,6 @@
 						mtl.normal = new Nodes.NormalMapNode( new Nodes.TextureNode( getTexture( "grassNormal" ) ) );
 						mtl.normal.scale = normalMask;
 
-						mtl.sheen = sheen;
-
 						// GUI
 
 						addGui( 'color', mtl.color.value.getHex(), function ( val ) {
@@ -870,12 +866,6 @@
 
 						}, false, 0, 1 );
 
-						addGui( 'sheen', sheen.value, function ( val ) {
-
-							sheen.value = val;
-
-						}, false, 0, 1 );
-
 						break;
 
 					case 'wave':

+ 50 - 11
examples/webgl_materials_sheen.html

@@ -20,6 +20,8 @@
 
 			import * as THREE from '../build/three.module.js';
 
+			import * as Nodes from './jsm/nodes/Nodes.js';
+
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
@@ -28,10 +30,12 @@
 			import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
 			// Graphics variables
-			var camera, controls, scene, renderer, mesh, stats;
+			var camera, controls, scene, renderer, stats;
 			var directionalLight;
+			var mesh, sphere, material, nodeMaterial;
 
 			var params = {
+				nodeMaterial: true,
 				color: new THREE.Color( 255, 0, 127 ),
 				sheenBRDF: true,
 				sheenColor: new THREE.Color( 10, 10, 10 ), // corresponds to .04 reflectance
@@ -55,15 +59,28 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
-				mesh.material = new THREE.MeshPhysicalMaterial();
-				mesh.material.side = THREE.DoubleSide;
-				mesh.material.metalness = 0;
 				mesh.scale.multiplyScalar( .5 );
 				scene.add( mesh );
 
-				var sphere = new THREE.Mesh(
+				//
+
+				material = new THREE.MeshPhysicalMaterial();
+				material.side = THREE.DoubleSide;
+				material.metalness = 0;
+
+				//
+
+				nodeMaterial = new Nodes.StandardNodeMaterial();
+				nodeMaterial.side = THREE.DoubleSide;
+				nodeMaterial.metalness = new Nodes.FloatNode( 0 );
+				nodeMaterial.roughness = new Nodes.FloatNode();
+				nodeMaterial.color = new Nodes.ColorNode( params.color.clone() );
+
+				//
+
+				sphere = new THREE.Mesh(
 					new THREE.SphereBufferGeometry( 1, 100, 100 ),
-					mesh.material
+					material
 				);
 				scene.add(sphere);
 
@@ -101,6 +118,7 @@
 
 				var gui = new GUI();
 
+				gui.add( params, 'nodeMaterial' );
 				gui.addColor( params, 'color' );
 				gui.add( params, 'sheenBRDF' );
 				gui.addColor( params, 'sheenColor' );
@@ -132,15 +150,36 @@
 
 			function render() {
 
-				mesh.material.sheenColor = params.sheenBRDF
+				mesh.material = sphere.material = params.nodeMaterial
+					? nodeMaterial
+					: material;
+
+				//
+
+				material.sheenColor = params.sheenBRDF
 					? new THREE.Color().copy( params.sheenColor ).multiplyScalar( 1 / 255 )
 					: null;
 
-				mesh.material.color.copy(params.color).multiplyScalar( 1 / 255 );
-				mesh.material.roughness = params.roughness;
-				renderer.toneMappingExposure = params.exposure;
-				mesh.material.needsUpdate = true;
+				material.color.copy( params.color ).multiplyScalar( 1 / 255 );
+				material.roughness = params.roughness;
 
+				material.needsUpdate = true;
+
+				//
+
+				nodeMaterial.sheenColor = params.sheenBRDF
+					? new Nodes.ColorNode( material.sheenColor )
+					: undefined;
+
+				nodeMaterial.color.value.copy( material.color );
+
+				nodeMaterial.roughness.value = params.roughness;
+
+				nodeMaterial.needsCompile = true;
+
+				//
+
+				renderer.toneMappingExposure = params.exposure;
 				renderer.render( scene, camera );
 
 			}

+ 1 - 1
src/renderers/shaders/ShaderChunk/lights_physical_pars_fragment.glsl.js

@@ -107,7 +107,7 @@ void RE_Direct_Physical( const in IncidentLight directLight, const in GeometricC
 			material.specularRoughness,
 			directLight.direction,
 			geometry,
-			sheenColor
+			material.sheenColor
 		);
 	#else
 		reflectedLight.directSpecular += ( 1.0 - clearCoatDHR ) * irradiance * BRDF_Specular_GGX( directLight, geometry.viewDir, geometry.normal, material.specularColor, material.specularRoughness);