Merge pull request #18769 from donmccurdy/feat-clearcoat-textures

MeshPhysicalMaterial: Add clearcoatMap and clearcoatRoughnessMap.

src/loaders/MaterialLoader.js

@@ -256,6 +256,8 @@ MaterialLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 
 		if ( json.gradientMap !== undefined ) material.gradientMap = getTexture( json.gradientMap );
 
+		if ( json.clearcoatMap !== undefined ) material.clearcoatMap = getTexture( json.clearcoatMap );
+		if ( json.clearcoatRoughnessMap !== undefined ) material.clearcoatRoughnessMap = getTexture( json.clearcoatRoughnessMap );
 		if ( json.clearcoatNormalMap !== undefined ) material.clearcoatNormalMap = getTexture( json.clearcoatNormalMap );
 		if ( json.clearcoatNormalScale !== undefined ) material.clearcoatNormalScale = new Vector2().fromArray( json.clearcoatNormalScale );
 

src/materials/Material.js

@@ -177,6 +177,18 @@ Material.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 		if ( this.clearcoat !== undefined ) data.clearcoat = this.clearcoat;
 		if ( this.clearcoatRoughness !== undefined ) data.clearcoatRoughness = this.clearcoatRoughness;
 
+		if ( this.clearcoatMap && this.clearcoatMap.isTexture ) {
+
+			data.clearcoatMap = this.clearcoatMap.toJSON( meta ).uuid;
+
+		}
+
+		if ( this.clearcoatRoughnessMap && this.clearcoatRoughnessMap.isTexture ) {
+
+			data.clearcoatRoughnessMap = this.clearcoatRoughnessMap.toJSON( meta ).uuid;
+
+		}
+
 		if ( this.clearcoatNormalMap && this.clearcoatNormalMap.isTexture ) {
 
 			data.clearcoatNormalMap = this.clearcoatNormalMap.toJSON( meta ).uuid;

src/materials/MeshPhysicalMaterial.d.ts

@@ -22,13 +22,17 @@ export class MeshPhysicalMaterial extends MeshStandardMaterial {
 
 	constructor( parameters: MeshPhysicalMaterialParameters );
 
-	reflectivity: number;
 	clearcoat: number;
+	clearcoatMap: Texture | null;
 	clearcoatRoughness: number;
+	clearcoatRoughnessMap: Texture | null;
+	clearcoatNormalScale: Vector2;
+	clearcoatNormalMap: Texture | null;
+
+	reflectivity: number;
 
 	sheen: Color | null;
 
-	clearcoatNormalScale: Vector2;
-	clearcoatNormalMap: Texture | null;
+	transparency: number;
 
 }

src/materials/MeshPhysicalMaterial.js

@@ -6,14 +6,18 @@ import { Color } from '../math/Color.js';
  * @author WestLangley / http://github.com/WestLangley
  *
  * parameters = {
- *  reflectivity: <float>
- *  clearcoat: <float>
- *  clearcoatRoughness: <float>
- *
- *  sheen: <Color>
- *
+ *  clearcoat: <float>,
+ *  clearcoatMap: new THREE.Texture( <Image> ),
+ *  clearcoatRoughness: <float>,
+ *  clearcoatRoughnessMap: new THREE.Texture( <Image> ),
  *  clearcoatNormalScale: <Vector2>,
  *  clearcoatNormalMap: new THREE.Texture( <Image> ),
+ *
+ *  reflectivity: <float>,
+ *
+ *  sheen: <Color>,
+ *
+ *  transparency: <float>
  * }
  */
 
@@ -30,16 +34,17 @@ function MeshPhysicalMaterial( parameters ) {
 
 	this.type = 'MeshPhysicalMaterial';
 
-	this.reflectivity = 0.5; // maps to F0 = 0.04
-
 	this.clearcoat = 0.0;
+	this.clearcoatMap = null;
 	this.clearcoatRoughness = 0.0;
-
-	this.sheen = null; // null will disable sheen bsdf
-
+	this.clearcoatRoughnessMap = null;
 	this.clearcoatNormalScale = new Vector2( 1, 1 );
 	this.clearcoatNormalMap = null;
 
+	this.reflectivity = 0.5; // maps to F0 = 0.04
+
+	this.sheen = null; // null will disable sheen bsdf
+
 	this.transparency = 0.0;
 
 	this.setValues( parameters );
@@ -62,17 +67,25 @@ MeshPhysicalMaterial.prototype.copy = function ( source ) {
 
 	};
 
-	this.reflectivity = source.reflectivity;
-
 	this.clearcoat = source.clearcoat;
+	this.clearcoatMap = source.clearcoatMap;
 	this.clearcoatRoughness = source.clearcoatRoughness;
-
-	if ( source.sheen ) this.sheen = ( this.sheen || new Color() ).copy( source.sheen );
-	else this.sheen = null;
-
+	this.clearcoatRoughnessMap = source.clearcoatRoughnessMap;
 	this.clearcoatNormalMap = source.clearcoatNormalMap;
 	this.clearcoatNormalScale.copy( source.clearcoatNormalScale );
 
+	this.reflectivity = source.reflectivity;
+
+	if ( source.sheen ) {
+
+		this.sheen = ( this.sheen || new Color() ).copy( source.sheen );
+
+	} else {
+
+		this.sheen = null;
+
+	}
+
 	this.transparency = source.transparency;
 
 	return this;

src/renderers/WebGLRenderer.js

@@ -2429,6 +2429,18 @@ function WebGLRenderer( parameters ) {
 		uniforms.clearcoatRoughness.value = material.clearcoatRoughness;
 		if ( material.sheen ) uniforms.sheen.value.copy( material.sheen );
 
+		if ( material.clearcoatMap ) {
+
+			uniforms.clearcoatMap.value = material.clearcoatMap;
+
+		}
+
+		if ( material.clearcoatRoughnessMap ) {
+
+			uniforms.clearcoatRoughnessMap.value = material.clearcoatRoughnessMap;
+
+		}
+
 		if ( material.clearcoatNormalMap ) {
 
 			uniforms.clearcoatNormalScale.value.copy( material.clearcoatNormalScale );

src/renderers/shaders/ShaderChunk.d.ts

@@ -87,7 +87,7 @@ export let ShaderChunk: {
 	normalmap_pars_fragment: string;
 	clearcoat_normal_fragment_begin: string;
 	clearcoat_normal_fragment_maps: string;
-	clearcoat_normalmap_pars_fragment: string;
+	clearcoat_pars_fragment: string;
 	packing: string;
 	points_frag: string;
 	points_vert: string;

src/renderers/shaders/ShaderChunk.js

@@ -66,7 +66,7 @@ import normal_fragment_maps from './ShaderChunk/normal_fragment_maps.glsl.js';
 import normalmap_pars_fragment from './ShaderChunk/normalmap_pars_fragment.glsl.js';
 import clearcoat_normal_fragment_begin from './ShaderChunk/clearcoat_normal_fragment_begin.glsl.js';
 import clearcoat_normal_fragment_maps from './ShaderChunk/clearcoat_normal_fragment_maps.glsl.js';
-import clearcoat_normalmap_pars_fragment from './ShaderChunk/clearcoat_normalmap_pars_fragment.glsl.js';
+import clearcoat_pars_fragment from './ShaderChunk/clearcoat_pars_fragment.glsl.js';
 import packing from './ShaderChunk/packing.glsl.js';
 import premultiplied_alpha_fragment from './ShaderChunk/premultiplied_alpha_fragment.glsl.js';
 import project_vertex from './ShaderChunk/project_vertex.glsl.js';
@@ -196,7 +196,7 @@ export var ShaderChunk = {
 	normalmap_pars_fragment: normalmap_pars_fragment,
 	clearcoat_normal_fragment_begin: clearcoat_normal_fragment_begin,
 	clearcoat_normal_fragment_maps: clearcoat_normal_fragment_maps,
-	clearcoat_normalmap_pars_fragment: clearcoat_normalmap_pars_fragment,
+	clearcoat_pars_fragment: clearcoat_pars_fragment,
 	packing: packing,
 	premultiplied_alpha_fragment: premultiplied_alpha_fragment,
 	project_vertex: project_vertex,

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

@@ -1,8 +0,0 @@
-export default /* glsl */`
-#ifdef USE_CLEARCOAT_NORMALMAP
-
-	uniform sampler2D clearcoatNormalMap;
-	uniform vec2 clearcoatNormalScale;
-
-#endif
-`;

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

@@ -0,0 +1,21 @@
+export default /* glsl */`
+
+#ifdef USE_CLEARCOATMAP
+
+	uniform sampler2D clearcoatMap;
+
+#endif
+
+#ifdef USE_CLEARCOAT_ROUGHNESSMAP
+
+	uniform sampler2D clearcoatRoughnessMap;
+
+#endif
+
+#ifdef USE_CLEARCOAT_NORMALMAP
+
+	uniform sampler2D clearcoatNormalMap;
+	uniform vec2 clearcoatNormalScale;
+
+#endif
+`;

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

@@ -21,12 +21,28 @@ material.specularRoughness = min( material.specularRoughness, 1.0 );
 
 #ifdef CLEARCOAT
 
-	material.clearcoat = saturate( clearcoat ); // Burley clearcoat model
-	material.clearcoatRoughness = max( clearcoatRoughness, 0.0525 );
+	material.clearcoat = clearcoat;
+	material.clearcoatRoughness = clearcoatRoughness;
+
+	#ifdef USE_CLEARCOATMAP
+
+		material.clearcoat *= texture2D( clearcoatMap, vUv ).x;
+
+	#endif
+
+	#ifdef USE_CLEARCOAT_ROUGHNESSMAP
+
+		material.clearcoatRoughness *= texture2D( clearcoatRoughnessMap, vUv ).y;
+
+	#endif
+
+	material.clearcoat = saturate( material.clearcoat ); // Burley clearcoat model
+	material.clearcoatRoughness = max( material.clearcoatRoughness, 0.0525 );
 	material.clearcoatRoughness += geometryRoughness;
 	material.clearcoatRoughness = min( material.clearcoatRoughness, 1.0 );
 
 #endif
+
 #ifdef USE_SHEEN
 
 	material.sheenColor = sheen;

src/renderers/shaders/ShaderLib.js

@@ -299,12 +299,14 @@ ShaderLib.physical = {
 	uniforms: mergeUniforms( [
 		ShaderLib.standard.uniforms,
 		{
-			transparency: { value: 0 },
 			clearcoat: { value: 0 },
+			clearcoatMap: { value: null },
 			clearcoatRoughness: { value: 0 },
-			sheen: { value: new Color( 0x000000 ) },
+			clearcoatRoughnessMap: { value: null },
 			clearcoatNormalScale: { value: new Vector2( 1, 1 ) },
 			clearcoatNormalMap: { value: null },
+			sheen: { value: new Color( 0x000000 ) },
+			transparency: { value: 0 },
 		}
 	] ),
 

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

@@ -66,7 +66,7 @@ varying vec3 vViewPosition;
 #include <shadowmap_pars_fragment>
 #include <bumpmap_pars_fragment>
 #include <normalmap_pars_fragment>
-#include <clearcoat_normalmap_pars_fragment>
+#include <clearcoat_pars_fragment>
 #include <roughnessmap_pars_fragment>
 #include <metalnessmap_pars_fragment>
 #include <logdepthbuf_pars_fragment>

src/renderers/webgl/WebGLProgram.js

@@ -456,6 +456,8 @@ function WebGLProgram( renderer, cacheKey, parameters ) {
 			( parameters.normalMap && parameters.objectSpaceNormalMap ) ? '#define OBJECTSPACE_NORMALMAP' : '',
 			( parameters.normalMap && parameters.tangentSpaceNormalMap ) ? '#define TANGENTSPACE_NORMALMAP' : '',
 
+			parameters.clearcoatMap ? '#define USE_CLEARCOATMAP' : '',
+			parameters.clearcoatRoughnessMap ? '#define USE_CLEARCOAT_ROUGHNESSMAP' : '',
 			parameters.clearcoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',
 			parameters.displacementMap && parameters.supportsVertexTextures ? '#define USE_DISPLACEMENTMAP' : '',
 			parameters.specularMap ? '#define USE_SPECULARMAP' : '',
@@ -582,6 +584,8 @@ function WebGLProgram( renderer, cacheKey, parameters ) {
 			parameters.normalMap ? '#define USE_NORMALMAP' : '',
 			( parameters.normalMap && parameters.objectSpaceNormalMap ) ? '#define OBJECTSPACE_NORMALMAP' : '',
 			( parameters.normalMap && parameters.tangentSpaceNormalMap ) ? '#define TANGENTSPACE_NORMALMAP' : '',
+			parameters.clearcoatMap ? '#define USE_CLEARCOATMAP' : '',
+			parameters.clearcoatRoughnessMap ? '#define USE_CLEARCOAT_ROUGHNESSMAP' : '',
 			parameters.clearcoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',
 			parameters.specularMap ? '#define USE_SPECULARMAP' : '',
 			parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',

src/renderers/webgl/WebGLPrograms.js

@@ -39,7 +39,7 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 	var parameterNames = [
 		"precision", "isWebGL2", "supportsVertexTextures", "outputEncoding", "instancing",
 		"map", "mapEncoding", "matcap", "matcapEncoding", "envMap", "envMapMode", "envMapEncoding", "envMapCubeUV",
-		"lightMap", "lightMapEncoding", "aoMap", "emissiveMap", "emissiveMapEncoding", "bumpMap", "normalMap", "objectSpaceNormalMap", "tangentSpaceNormalMap", "clearcoatNormalMap", "displacementMap", "specularMap",
+		"lightMap", "lightMapEncoding", "aoMap", "emissiveMap", "emissiveMapEncoding", "bumpMap", "normalMap", "objectSpaceNormalMap", "tangentSpaceNormalMap", "clearcoatMap", "clearcoatRoughnessMap", "clearcoatNormalMap", "displacementMap", "specularMap",
 		"roughnessMap", "metalnessMap", "gradientMap",
 		"alphaMap", "combine", "vertexColors", "vertexTangents", "vertexUvs", "uvsVertexOnly", "fog", "useFog", "fogExp2",
 		"flatShading", "sizeAttenuation", "logarithmicDepthBuffer", "skinning",
@@ -210,6 +210,8 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 			normalMap: !! material.normalMap,
 			objectSpaceNormalMap: material.normalMapType === ObjectSpaceNormalMap,
 			tangentSpaceNormalMap: material.normalMapType === TangentSpaceNormalMap,
+			clearcoatMap: !! material.clearcoatMap,
+			clearcoatRoughnessMap: !! material.clearcoatRoughnessMap,
 			clearcoatNormalMap: !! material.clearcoatNormalMap,
 			displacementMap: !! material.displacementMap,
 			roughnessMap: !! material.roughnessMap,
@@ -225,7 +227,7 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 			vertexTangents: ( material.normalMap && material.vertexTangents ),
 			vertexColors: material.vertexColors,
-			vertexUvs: !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatNormalMap || !! material.displacementMap,
+			vertexUvs: !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatMap || !! material.clearcoatRoughnessMap || !! material.clearcoatNormalMap || !! material.displacementMap,
 			uvsVertexOnly: ! ( !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatNormalMap ) && !! material.displacementMap,
 
 			fog: !! fog,