replaced sheen with sheenColor, and removed IBL sheen (for now)

examples/webgl_materials_sheen.html

@@ -27,23 +27,16 @@
 
 			import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
-			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
-			import { EquirectangularToCubeGenerator } from './jsm/loaders/EquirectangularToCubeGenerator.js';
-			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
-			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
-
 			// Graphics variables
 			var camera, controls, scene, renderer, mesh, stats;
-			var envMap, directionalLight, ambientLight;
+			var directionalLight;
 
 			var params = {
-				sheen: .8,
-				hue: 265,
+				color: new THREE.Color( 255, 0, 127 ),
+				sheenBRDF: true,
+				sheenColor: new THREE.Color( 10, 10, 10 ), // corresponds to .04 reflectance
 				roughness: .9,
 				exposure: 2,
-				envMap: true,
-				directionalLight: false,
-				ambientLight: false
 			};
 
 			// model
@@ -83,41 +76,11 @@
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				renderer.dfgLut = new THREE.TextureLoader().load( 'textures/dfg.png' );
-				renderer.dfgLut.generateMipmaps = false;
-				renderer.dfgLut.magFilter = THREE.LinearFilter;
-				renderer.dfgLut.minFilter = THREE.LinearFilter;
-
-				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
-
-				new THREE.CubeTextureLoader()
-					.setPath( 'textures/cube/Park3Med/' )
-					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ], function ( ldrCubeMap ) {
-
-						envMap = ldrCubeMap;
-
-						var pmremGenerator = new PMREMGenerator( envMap, 128 );
-						pmremGenerator.update( renderer );
-
-						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
-						pmremCubeUVPacker.update( renderer );
-
-						mesh.material.envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
-						mesh.material.needsUpdate = true;
-
-						pmremGenerator.dispose();
-						pmremCubeUVPacker.dispose();
-
-					} );
-
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 2, 0 );
 				controls.update();
 
-				ambientLight = new THREE.AmbientLight( 0x404040 );
-				scene.add( ambientLight );
-
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				directionalLight = new THREE.DirectionalLight( 0xffffff, .5 );
 				directionalLight.position.set( 0, 10, 0 );
 				directionalLight.castShadow = true;
 				directionalLight.add(
@@ -138,13 +101,11 @@
 
 				var gui = new GUI();
 
-				gui.add( params, 'sheen', 0, 1 );
-				gui.add( params, 'hue', 0, 360 );
+				gui.addColor( params, 'color' );
+				gui.add( params, 'sheenBRDF' );
+				gui.addColor( params, 'sheenColor' );
 				gui.add( params, 'roughness', 0, 1 );
 				gui.add( params, 'exposure', 0, 3 );
-				gui.add( params, 'envMap' );
-				gui.add( params, 'directionalLight' );
-				gui.add( params, 'ambientLight' );
 				gui.open();
 
 				animate();
@@ -171,14 +132,14 @@
 
 			function render() {
 
-				mesh.material.sheen = params.sheen;
-				mesh.material.color = new THREE.Color().setHSL(params.hue / 360, 1, .5);
+				mesh.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;
-				scene.background = params.envMap && envMap || null;
-				mesh.material.envMapIntensity = params.envMap ? 1 : 0;
-				directionalLight.visible = params.directionalLight;
-				ambientLight.visible = params.ambientLight;
+				mesh.material.needsUpdate = true;
 
 				renderer.render( scene, camera );
 

src/materials/MeshPhysicalMaterial.d.ts

@@ -4,13 +4,15 @@ import {
 	MeshStandardMaterialParameters,
 	MeshStandardMaterial,
 } from './MeshStandardMaterial';
+import { Color } from './../math/Color';
 
 export interface MeshPhysicalMaterialParameters
 	extends MeshStandardMaterialParameters {
 	reflectivity?: number;
 	clearCoat?: number;
 	clearCoatRoughness?: number;
-	sheen?: number;
+
+	sheenColor?: Color;
 
 	clearCoatNormalScale?: Vector2;
 	clearCoatNormalMap?: Texture;
@@ -24,7 +26,8 @@ export class MeshPhysicalMaterial extends MeshStandardMaterial {
 	reflectivity: number;
 	clearCoat: number;
 	clearCoatRoughness: number;
-	sheen: number;
+
+	sheenColor: Color | null;
 
 	clearCoatNormalScale: Vector2;
 	clearCoatNormalMap: Texture | null;

src/materials/MeshPhysicalMaterial.js

@@ -1,5 +1,6 @@
 import { Vector2 } from '../math/Vector2.js';
 import { MeshStandardMaterial } from './MeshStandardMaterial.js';
+import { Color } from '../math/Color.js';
 
 /**
  * @author WestLangley / http://github.com/WestLangley
@@ -9,6 +10,8 @@ import { MeshStandardMaterial } from './MeshStandardMaterial.js';
  *  clearCoat: <float>
  *  clearCoatRoughness: <float>
  *
+ *  sheen: <Color>
+ *
  *  clearCoatNormalScale: <Vector2>,
  *  clearCoatNormalMap: new THREE.Texture( <Image> ),
  * }
@@ -27,7 +30,8 @@ function MeshPhysicalMaterial( parameters ) {
 	this.clearCoat = 0.0;
 	this.clearCoatRoughness = 0.0;
 
-	this.sheen = 0.0;
+	this.sheenColor = null; // null will disable sheen bsdf
+
 	this.clearCoatNormalScale = new Vector2( 1, 1 );
 	this.clearCoatNormalMap = null;
 
@@ -51,7 +55,9 @@ MeshPhysicalMaterial.prototype.copy = function ( source ) {
 	this.clearCoat = source.clearCoat;
 	this.clearCoatRoughness = source.clearCoatRoughness;
 
-	this.sheen = source.sheen;
+	if( source.sheenColor ) this.sheenColor = ( this.sheenColor || new Color() ).copy( source.sheenColor );
+	else this.sheenColor = null;
+
 	this.clearCoatNormalMap = source.clearCoatNormalMap;
 	this.clearCoatNormalScale.copy( source.clearCoatNormalScale );
 

src/renderers/WebGLRenderer.js

@@ -2272,8 +2272,7 @@ function WebGLRenderer( parameters ) {
 
 		uniforms.clearCoat.value = material.clearCoat;
 		uniforms.clearCoatRoughness.value = material.clearCoatRoughness;
-		uniforms.sheen.value = material.sheen;
-		uniforms.dfgLut.value = _this.dfgLut || null;
+		if( material.sheenColor ) uniforms.sheenColor.value.copy( material.sheenColor );
 
 		if ( material.clearCoatNormalMap ) {
 

src/renderers/shaders/ShaderChunk/bsdfs.glsl.js

@@ -337,6 +337,8 @@ float BlinnExponentToGGXRoughness( const in float blinnExponent ) {
 	return sqrt( 2.0 / ( blinnExponent + 2.0 ) );
 }
 
+#if defined( USE_SHEEN )
+
 // https://github.com/google/filament/blob/master/shaders/src/brdf.fs#L94
 float D_Charlie(float roughness, float NoH) {
 	// Estevez and Kulla 2017, "Production Friendly Microfacet Sheen BRDF"
@@ -364,8 +366,5 @@ vec3 BRDF_Specular_Sheen( const in float roughness, const in vec3 L, const in Ge
 
 }
 
-vec3 BRDF_Specular_Sheen_Environment( const in GeometricContext geometry, const in vec3 specularColor, const in float roughness ) {
-	float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) );
-	return specularColor * texture2D(dfgLut, vec2(dotNV, roughness)).b;
-}
+#endif
 `;

src/renderers/shaders/ShaderChunk/lights_physical_fragment.glsl.js

@@ -8,6 +8,8 @@ material.specularRoughness = clamp( roughnessFactor, 0.04, 1.0 );
 	material.specularColor = mix( vec3( MAXIMUM_SPECULAR_COEFFICIENT * pow2( reflectivity ) ), diffuseColor.rgb, metalnessFactor );
 	material.clearCoat = saturate( clearCoat ); // Burley clearcoat model
 	material.clearCoatRoughness = clamp( clearCoatRoughness, 0.04, 1.0 );
-	material.sheen = sheen;
+#endif
+#ifdef USE_SHEEN
+	material.sheenColor = sheenColor;
 #endif
 `;

src/renderers/shaders/ShaderChunk/lights_physical_pars_fragment.glsl.js

@@ -8,7 +8,10 @@ struct PhysicalMaterial {
 	#ifndef STANDARD
 		float clearCoat;
 		float clearCoatRoughness;
-		float sheen;
+	#endif
+
+	#ifdef USE_SHEEN
+		vec3 sheenColor;
 	#endif
 
 };
@@ -99,20 +102,18 @@ void RE_Direct_Physical( const in IncidentLight directLight, const in GeometricC
 
 	#endif
 
-	reflectedLight.directSpecular += ( 1.0 - clearCoatDHR ) * irradiance * (sheen > 0. ?
-		BRDF_Specular_Sheen(
+	#ifdef USE_SHEEN
+		reflectedLight.directSpecular += ( 1.0 - clearCoatDHR ) * irradiance * BRDF_Specular_Sheen(
 			material.specularRoughness,
 			directLight.direction,
 			geometry,
-			mix(
-				material.specularColor,
-				material.diffuseColor,
-				sheen
-			)
-		)
-		: BRDF_Specular_GGX( directLight, geometry.viewDir, geometry.normal, material.specularColor, material.specularRoughness)
-	);
-	reflectedLight.directDiffuse += ( 1. - sheen ) * ( 1.0 - clearCoatDHR ) * irradiance * BRDF_Diffuse_Lambert( material.diffuseColor );
+			sheenColor
+		);
+	#else
+		reflectedLight.directSpecular += ( 1.0 - clearCoatDHR ) * irradiance * BRDF_Specular_GGX( directLight, geometry.viewDir, geometry.normal, material.specularColor, material.specularRoughness);
+	#endif
+
+	reflectedLight.directDiffuse += ( 1.0 - clearCoatDHR ) * irradiance * BRDF_Diffuse_Lambert( material.diffuseColor );
 }
 
 void RE_IndirectDiffuse_Physical( const in vec3 irradiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) {
@@ -122,7 +123,7 @@ void RE_IndirectDiffuse_Physical( const in vec3 irradiance, const in GeometricCo
 
 void RE_IndirectSpecular_Physical( const in vec3 radiance, const in vec3 irradiance, const in vec3 clearCoatRadiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight) {
 
-	#ifndef STANDARD
+	#ifdef PHYSICAL
 
 		float ccDotNV = saturate( dot( geometry.clearCoatNormal, geometry.viewDir ) );
 
@@ -138,8 +139,6 @@ void RE_IndirectSpecular_Physical( const in vec3 radiance, const in vec3 irradia
 	#endif
 
 	float clearCoatInv = 1.0 - clearCoatDHR;
-	float sheen = material.sheen;
-	float sheenInv = 1. - sheen;
 
 	// Both indirect specular and diffuse light accumulate here
 	// if energy preservation enabled, and PMREM provided.
@@ -150,28 +149,12 @@ void RE_IndirectSpecular_Physical( const in vec3 radiance, const in vec3 irradia
 
 	BRDF_Specular_Multiscattering_Environment( geometry, material.specularColor, material.specularRoughness, singleScattering, multiScattering );
 
-	vec3 diffuse = material.diffuseColor * mix(
-		( 1.0 - ( singleScattering + multiScattering ) ),
-		vec3(0),
-		sheen
-	);
+	vec3 diffuse = material.diffuseColor * ( 1.0 - ( singleScattering + multiScattering ) );
 
-	reflectedLight.indirectSpecular += sheenInv * clearCoatInv * radiance * singleScattering;
-	reflectedLight.indirectDiffuse += sheenInv * multiScattering * cosineWeightedIrradiance;
+	reflectedLight.indirectSpecular += clearCoatInv * radiance * singleScattering;
+	reflectedLight.indirectDiffuse += multiScattering * cosineWeightedIrradiance;
 	reflectedLight.indirectDiffuse += diffuse * cosineWeightedIrradiance;
 
-	#ifndef STANDARD
-
-		reflectedLight.indirectSpecular += sheenInv * clearCoatInv * radiance * BRDF_Specular_GGX_Environment( geometry.viewDir, geometry.normal, material.specularColor, material.specularRoughness );
-
-	#endif
-
-	reflectedLight.indirectSpecular += sheen * cosineWeightedIrradiance * BRDF_Specular_Sheen_Environment(
-		geometry,
-		material.diffuseColor,
-		material.specularRoughness
-	);
-
 }
 
 #define RE_Direct				RE_Direct_Physical

src/renderers/shaders/ShaderLib.js

@@ -275,7 +275,7 @@ ShaderLib.physical = {
 		{
 			clearCoat: { value: 0 },
 			clearCoatRoughness: { value: 0 },
-			sheen: { value: 0 },
+			sheenColor: { value: new Color( 0x000000 ) },
 			dfgLut: { value: null },
 			clearCoatNormalScale: { value: new Vector2( 1, 1 ) },
 			clearCoatNormalMap: { value: null },

src/renderers/shaders/ShaderLib/meshphysical_frag.glsl.js

@@ -6,14 +6,16 @@ uniform vec3 emissive;
 uniform float roughness;
 uniform float metalness;
 uniform float opacity;
-uniform float sheen;
-uniform sampler2D dfgLut;
 
 #ifndef STANDARD
 	uniform float clearCoat;
 	uniform float clearCoatRoughness;
 #endif
 
+#ifdef USE_SHEEN
+	uniform vec3 sheenColor;
+#endif
+
 varying vec3 vViewPosition;
 
 #ifndef FLAT_SHADED

src/renderers/webgl/WebGLProgram.js

@@ -514,6 +514,8 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 			parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
 			parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
 
+			parameters.sheen ? '#define USE_SHEEN' : '',
+
 			parameters.vertexTangents ? '#define USE_TANGENT' : '',
 			parameters.vertexColors ? '#define USE_COLOR' : '',
 

src/renderers/webgl/WebGLPrograms.js

@@ -37,7 +37,8 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 		"maxMorphTargets", "maxMorphNormals", "premultipliedAlpha",
 		"numDirLights", "numPointLights", "numSpotLights", "numHemiLights", "numRectAreaLights",
 		"shadowMapEnabled", "shadowMapType", "toneMapping", 'physicallyCorrectLights',
-		"alphaTest", "doubleSided", "flipSided", "numClippingPlanes", "numClipIntersection", "depthPacking", "dithering"
+		"alphaTest", "doubleSided", "flipSided", "numClippingPlanes", "numClipIntersection", "depthPacking", "dithering",
+		"sheen"
 	];
 
 
@@ -162,6 +163,8 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 			gradientMap: !! material.gradientMap,
 
+			sheen: !!material.sheenColor,
+
 			combine: material.combine,
 
 			vertexTangents: ( material.normalMap && material.vertexTangents ),