6 jaren geleden · 1bb818e835
--- a/examples/files.js
+++ b/examples/files.js
@@ -147,6 +147,7 @@ var files = {
 
				 		"webgl_materials_bumpmap_skin",
			
 
				 		"webgl_materials_cars",
			
 
				 		"webgl_materials_channels",
			
 
				+		"webgl_materials_clearcoat_normalmap",
			
 
				 		"webgl_materials_compile",
			
 
				 		"webgl_materials_cubemap",
			
 
				 		"webgl_materials_cubemap_balls_reflection",
			
--- a/examples/textures/nvidia_tentacle/tentacle_object_space.png
+++ b/examples/textures/nvidia_tentacle/tentacle_object_space.png
--- a/examples/textures/nvidia_tentacle/tentacle_tangent_space.png
+++ b/examples/textures/nvidia_tentacle/tentacle_tangent_space.png
--- a/examples/webgl_materials_clearcoat_normalmap.html
+++ b/examples/webgl_materials_clearcoat_normalmap.html
@@ -0,0 +1,397 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+	<title>three.js webgl - materials - clearcoat normal</title>
			
 
				+	<meta charset="utf-8">
			
 
				+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
			
 
				+	<link type="text/css" rel="stylesheet" href="main.css">
			
 
				+	<style>
			
 
				+		#vt {
			
 
				+			display: none
			
 
				+		}
			
 
				+
			
 
				+		#vt,
			
 
				+		#vt a {
			
 
				+			color: orange;
			
 
				+		}
			
 
				+	</style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+	<div id="info">
			
 
				+		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - materials - clearcoat normal
			
 
				+		demo.<br />
			
 
				+	</div>
			
 
				+
			
 
				+	<script type="module">
			
 
				+
			
 
				+		import * as THREE from '../build/three.module.js';
			
 
				+
			
 
				+		import Stats from './jsm/libs/stats.module.js';
			
 
				+
			
 
				+		import { GUI } from './jsm/libs/dat.gui.module.js';
			
 
				+
			
 
				+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
			
 
				+		import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
			
 
				+		import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
			
 
				+		import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
			
 
				+
			
 
				+		var container, stats;
			
 
				+
			
 
				+		var camera, scene, renderer;
			
 
				+
			
 
				+		var guiParams = {
			
 
				+			metalness: 0.0,
			
 
				+			roughness: 1.0,
			
 
				+			clearCoat: 1.0,
			
 
				+			clearCoatRoughness: 0.0,
			
 
				+			reflectivity: 0.0,
			
 
				+		};
			
 
				+
			
 
				+		var guiNormalMapNames = [
			
 
				+			"face",
			
 
				+			"tentacle"
			
 
				+		];
			
 
				+
			
 
				+		var guiMatParams = {
			
 
				+			normalMap: "face",
			
 
				+			normalScale: 1.0,
			
 
				+			clearCoatNormalMap: "tentacle",
			
 
				+			clearCoatNormalScale: 1.0,
			
 
				+		};
			
 
				+
			
 
				+		var particleLight;
			
 
				+		var meshes = [];
			
 
				+		var mats = [];
			
 
				+		var normalMaps = {};
			
 
				+
			
 
				+		const sphereSize = 80;
			
 
				+		const sphereSpacing = 1.25 * sphereSize * 2;
			
 
				+
			
 
				+		const variationsX = [
			
 
				+			( mat, scale, map ) => { },
			
 
				+			( mat, scale, map ) => {
			
 
				+
			
 
				+				mat.clearCoatNormalScale = new THREE.Vector2( scale, scale );
			
 
				+				if ( mat.clearCoatNormalMap !== map ) {
			
 
				+
			
 
				+					mat.clearCoatNormalMap = map;
			
 
				+					mat.needsUpdate = true;
			
 
				+
			
 
				+				}
			
 
				+
			
 
				+			},
			
 
				+		];
			
 
				+
			
 
				+		const variationsY = [
			
 
				+			( mat, scale, map ) => { },
			
 
				+			( mat, scale, map ) => {
			
 
				+
			
 
				+				mat.normalScale = new THREE.Vector2( scale, scale );
			
 
				+				if ( mat.normalMap !== map ) {
			
 
				+
			
 
				+					mat.normalMap = map;
			
 
				+					mat.needsUpdate = true;
			
 
				+
			
 
				+				}
			
 
				+
			
 
				+			},
			
 
				+		];
			
 
				+
			
 
				+		const maxI = variationsX.length;
			
 
				+		const maxJ = variationsY.length;
			
 
				+
			
 
				+		new THREE.FontLoader()
			
 
				+			.load( 'fonts/gentilis_regular.typeface.json',
			
 
				+				function ( font ) {
			
 
				+
			
 
				+					init( font );
			
 
				+					animate();
			
 
				+
			
 
				+				}
			
 
				+			);
			
 
				+
			
 
				+
			
 
				+		function init( font ) {
			
 
				+
			
 
				+			container = document.createElement( 'div' );
			
 
				+			document.body.appendChild( container );
			
 
				+
			
 
				+			camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
			
 
				+			camera.position.z = 1500;
			
 
				+
			
 
				+			var genCubeUrls = function ( prefix, postfix ) {
			
 
				+
			
 
				+				return [
			
 
				+					prefix + 'px' + postfix, prefix + 'nx' + postfix,
			
 
				+					prefix + 'py' + postfix, prefix + 'ny' + postfix,
			
 
				+					prefix + 'pz' + postfix, prefix + 'nz' + postfix
			
 
				+				];
			
 
				+
			
 
				+			};
			
 
				+
			
 
				+			scene = new THREE.Scene();
			
 
				+
			
 
				+			var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
			
 
				+
			
 
				+			new HDRCubeTextureLoader()
			
 
				+				.setType( THREE.UnsignedByteType )
			
 
				+				.load( hdrUrls,
			
 
				+					function ( hdrCubeMap ) {
			
 
				+
			
 
				+						var pmremGenerator = new PMREMGenerator( hdrCubeMap );
			
 
				+						pmremGenerator.update( renderer );
			
 
				+
			
 
				+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
			
 
				+						pmremCubeUVPacker.update( renderer );
			
 
				+
			
 
				+						var hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
			
 
				+
			
 
				+						var geometry = new THREE.SphereBufferGeometry( 80, 64, 32 );
			
 
				+
			
 
				+						var textureLoader = new THREE.TextureLoader();
			
 
				+
			
 
				+						normalMaps.tentacle = textureLoader
			
 
				+							.load( "textures/nvidia_tentacle/tentacle_tangent_space.png" );
			
 
				+
			
 
				+						normalMaps.face = textureLoader
			
 
				+							.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
			
 
				+
			
 
				+
			
 
				+						var matParams = {
			
 
				+							envMap: hdrCubeRenderTarget.texture,
			
 
				+						};
			
 
				+
			
 
				+
			
 
				+						for ( var ii = 0; ii < maxI; ii ++ ) {
			
 
				+
			
 
				+							if ( ! mats[ ii ] ) {
			
 
				+
			
 
				+								mats[ ii ] = [];
			
 
				+
			
 
				+							}
			
 
				+
			
 
				+							for ( var jj = 0; jj < maxJ; jj ++ ) {
			
 
				+
			
 
				+								var mat = mats[ ii ][ jj ] = new THREE.MeshPhysicalMaterial( matParams );
			
 
				+
			
 
				+								variationsX[ ii ]( mat, 1, normalMaps.tentacle );
			
 
				+								variationsY[ jj ]( mat, 1, normalMaps.face );
			
 
				+								var mesh = new THREE.Mesh( geometry, mat );
			
 
				+								meshes.push( mesh );
			
 
				+								mesh.position.x = ( ii - ( maxI - 1 ) / 2 ) * sphereSpacing;
			
 
				+								mesh.position.y = ( jj - ( maxJ - 1 ) / 2 ) * sphereSpacing;
			
 
				+								scene.add( mesh );
			
 
				+
			
 
				+							}
			
 
				+
			
 
				+						}
			
 
				+
			
 
				+						hdrCubeMap.magFilter = THREE.LinearFilter;
			
 
				+						hdrCubeMap.needsUpdate = true;
			
 
				+						scene.background = hdrCubeMap;
			
 
				+
			
 
				+						pmremGenerator.dispose();
			
 
				+						pmremCubeUVPacker.dispose();
			
 
				+
			
 
				+					}
			
 
				+
			
 
				+				);
			
 
				+
			
 
				+			function addLabel( name, location, fontSize ) {
			
 
				+
			
 
				+				fontSize = fontSize | 20;
			
 
				+				var textGeo = new THREE.TextBufferGeometry( name,
			
 
				+					{
			
 
				+
			
 
				+						font: font,
			
 
				+						size: fontSize,
			
 
				+						height: 1,
			
 
				+						curveSegments: 1
			
 
				+
			
 
				+					}
			
 
				+				);
			
 
				+
			
 
				+				var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
			
 
				+				var textMesh = new THREE.Mesh( textGeo, textMaterial );
			
 
				+
			
 
				+				// Center the bounding box on the specified position w/ translation of -half diagonal
			
 
				+				textGeo.computeBoundingBox();
			
 
				+				var bb = textGeo.boundingBox.clone();
			
 
				+				var displace = bb.max.sub( bb.min ).divide( new THREE.Vector3( 2, 2, 2 ) );
			
 
				+
			
 
				+				textMesh.position.copy( location.sub( displace ) );
			
 
				+				scene.add( textMesh );
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+
			
 
				+			addLabel( "Normal Map", new THREE.Vector3( -350, 0, 0 ), 30 );
			
 
				+			addLabel( "None", new THREE.Vector3( -250, -100, 0 ) );
			
 
				+			addLabel( "Map", new THREE.Vector3( -300, 100, 0 ) );
			
 
				+
			
 
				+			addLabel( "Clearcoat Normal Map", new THREE.Vector3( 0, 260, 0 ), 30 );
			
 
				+			addLabel( "None", new THREE.Vector3( -100, 200, 0 ) );
			
 
				+			addLabel( "Map", new THREE.Vector3( 100, 200, 0 ) );
			
 
				+
			
 
				+			// LIGHTS
			
 
				+
			
 
				+			particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
			
 
				+			scene.add( particleLight );
			
 
				+
			
 
				+			{
			
 
				+
			
 
				+				var ambientLight = new THREE.AmbientLight( 0x444444 );
			
 
				+				scene.add( ambientLight );
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+			{
			
 
				+
			
 
				+				var pointLight = new THREE.PointLight( 0xffffff, 1.25, 1000 );
			
 
				+				particleLight.add( pointLight );
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+			{
			
 
				+
			
 
				+				var directionalLight = new THREE.DirectionalLight( 0xffffff );
			
 
				+				directionalLight.position.set( 1, - 0.5, - 1 );
			
 
				+				scene.add( directionalLight );
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+			renderer = new THREE.WebGLRenderer();
			
 
				+			renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				+			container.appendChild( renderer.domElement );
			
 
				+
			
 
				+			//
			
 
				+
			
 
				+			renderer.gammaInput = true;
			
 
				+			renderer.gammaOutput = true;
			
 
				+
			
 
				+			//
			
 
				+
			
 
				+			stats = new Stats();
			
 
				+			container.appendChild( stats.dom );
			
 
				+
			
 
				+			// EVENTS
			
 
				+
			
 
				+			var controls = new OrbitControls( camera, renderer.domElement );
			
 
				+
			
 
				+			window.addEventListener( 'resize', onWindowResize, false );
			
 
				+
			
 
				+			var gui = new GUI();
			
 
				+
			
 
				+			{
			
 
				+
			
 
				+				var materialGui = gui.addFolder( 'Physical Material' );
			
 
				+				materialGui.add( guiParams, 'metalness', 0, 1, 0.01 );
			
 
				+				materialGui.add( guiParams, 'roughness', 0, 1, 0.01 );
			
 
				+				materialGui.add( guiParams, 'reflectivity', 0, 1, 0.01 );
			
 
				+				materialGui.open();
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+			{
			
 
				+
			
 
				+				var clearCoatGui = gui.addFolder( 'ClearCoat' );
			
 
				+				clearCoatGui.add( guiParams, 'clearCoat', 0, 1, 0.01 );
			
 
				+				clearCoatGui.add( guiParams, 'clearCoatRoughness', 0, 1, 0.01 );
			
 
				+				clearCoatGui.open();
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+			{
			
 
				+
			
 
				+				var normalGui = gui.addFolder( 'Normal Maps' );
			
 
				+				normalGui.add( guiMatParams, 'normalMap', guiNormalMapNames );
			
 
				+				normalGui.add( guiMatParams, 'normalScale', 0, 1, 0.01 );
			
 
				+				normalGui.add( guiMatParams, 'clearCoatNormalMap', guiNormalMapNames );
			
 
				+				normalGui.add( guiMatParams, 'clearCoatNormalScale', 0, 1, 0.01 );
			
 
				+				normalGui.open();
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+			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 );
			
 
				+
			
 
				+			render();
			
 
				+
			
 
				+			stats.update();
			
 
				+
			
 
				+		}
			
 
				+
			
 
				+		function render() {
			
 
				+
			
 
				+			var matColor = new THREE.Color().setHSL( 0.0, 0.5, 0.25 );
			
 
				+
			
 
				+			for ( var ii = 0; ii < maxI; ii ++ ) {
			
 
				+
			
 
				+				if ( mats[ ii ] ) { // avoid exceptions on first render before materials are set. TODO: lauch animation only after setup
			
 
				+
			
 
				+					for ( var jj = 0; jj < maxJ; jj ++ ) {
			
 
				+
			
 
				+						var mat = mats[ ii ][ jj ];
			
 
				+						mat.color = matColor;
			
 
				+						for ( var matParam in guiParams ) {
			
 
				+
			
 
				+							mat[ matParam ] = guiParams[ matParam ];
			
 
				+
			
 
				+						}
			
 
				+
			
 
				+						var normalMap = normalMaps[ guiMatParams.normalMap ];
			
 
				+						var clearCoatNormalMap = normalMaps[ guiMatParams.clearCoatNormalMap ];
			
 
				+
			
 
				+						variationsX[ ii ]( mat, guiMatParams.clearCoatNormalScale, clearCoatNormalMap );
			
 
				+						variationsY[ jj ]( mat, guiMatParams.normalScale, normalMap );
			
 
				+
			
 
				+					}
			
 
				+
			
 
				+				}
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+			var timer = Date.now() * 0.00025;
			
 
				+			particleLight.position.x = Math.sin( timer * 7 ) * 300;
			
 
				+			particleLight.position.y = Math.cos( timer * 5 ) * 400;
			
 
				+			particleLight.position.z = Math.cos( timer * 3 ) * 300;
			
 
				+
			
 
				+
			
 
				+			for ( var mesh of meshes ) {
			
 
				+
			
 
				+				mesh.rotation.y += 0.01;
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+
			
 
				+			renderer.render( scene, camera );
			
 
				+
			
 
				+		}
			
 
				+
			
 
				+
			
 
				+	</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/examples/webgl_materials_envmaps_parallax.html
+++ b/examples/webgl_materials_envmaps_parallax.html
@@ -156,15 +156,15 @@
 
				 					return clamp( desiredMIPLevel, 0.0, maxMIPLevelScalar );
			
 
				 				}
			
 
				 
			
 
				-				vec3 getLightProbeIndirectRadiance( const in GeometricContext geometry, const in float blinnShininessExponent, const in int maxMIPLevel ) {
			
 
				+				vec3 getLightProbeIndirectRadiance( const in vec3 viewDir, const in vec3 normal, const in float blinnShininessExponent, const in int maxMIPLevel ) {
			
 
				 
			
 
				 					#ifdef ENVMAP_MODE_REFLECTION
			
 
				 
			
 
				-						vec3 reflectVec = reflect( -geometry.viewDir, geometry.normal );
			
 
				+						vec3 reflectVec = reflect( -viewDir, normal );
			
 
				 
			
 
				 					#else
			
 
				 
			
 
				-						vec3 reflectVec = refract( -geometry.viewDir, geometry.normal, refractionRatio );
			
 
				+						vec3 reflectVec = refract( -viewDir, normal, refractionRatio );
			
 
				 
			
 
				 					#endif
			
 
				 
			
--- a/src/materials/MeshPhysicalMaterial.d.ts
+++ b/src/materials/MeshPhysicalMaterial.d.ts
@@ -1,3 +1,5 @@
 
				+import { Texture } from './../textures/Texture';
			
 
				+import { Vector2 } from './../math/Vector2';
			
 
				 import {
			
 
				 	MeshStandardMaterialParameters,
			
 
				 	MeshStandardMaterial,
			
@@ -5,9 +7,14 @@ import {
 
				 
			
 
				 export interface MeshPhysicalMaterialParameters
			
 
				 	extends MeshStandardMaterialParameters {
			
 
				+
			
 
				 	reflectivity?: number;
			
 
				 	clearCoat?: number;
			
 
				 	clearCoatRoughness?: number;
			
 
				+
			
 
				+	clearCoatNormalScale?: Vector2;
			
 
				+	clearCoatNormalMap?: Texture;
			
 
				+
			
 
				 }
			
 
				 
			
 
				 export class MeshPhysicalMaterial extends MeshStandardMaterial {
			
@@ -19,4 +26,7 @@ export class MeshPhysicalMaterial extends MeshStandardMaterial {
 
				 	clearCoat: number;
			
 
				 	clearCoatRoughness: number;
			
 
				 
			
 
				+	clearCoatNormalScale: Vector2;
			
 
				+	clearCoatNormalMap: Texture | null;
			
 
				+
			
 
				 }
			
--- a/src/materials/MeshPhysicalMaterial.js
+++ b/src/materials/MeshPhysicalMaterial.js
@@ -1,3 +1,4 @@
 
				+import { Vector2 } from '../math/Vector2.js';
			
 
				 import { MeshStandardMaterial } from './MeshStandardMaterial.js';
			
 
				 
			
 
				 /**
			
@@ -7,6 +8,9 @@ import { MeshStandardMaterial } from './MeshStandardMaterial.js';
 
				  *  reflectivity: <float>
			
 
				  *  clearCoat: <float>
			
 
				  *  clearCoatRoughness: <float>
			
 
				+ *
			
 
				+ *  clearCoatNormalScale: <Vector2>,
			
 
				+ *  clearCoatNormalMap: new THREE.Texture( <Image> ),
			
 
				  * }
			
 
				  */
			
 
				 
			
@@ -23,6 +27,9 @@ function MeshPhysicalMaterial( parameters ) {
 
				 	this.clearCoat = 0.0;
			
 
				 	this.clearCoatRoughness = 0.0;
			
 
				 
			
 
				+	this.clearCoatNormalScale = new Vector2( 1, 1 );
			
 
				+	this.clearCoatNormalMap = null;
			
 
				+
			
 
				 	this.setValues( parameters );
			
 
				 
			
 
				 }
			
@@ -43,6 +50,9 @@ MeshPhysicalMaterial.prototype.copy = function ( source ) {
 
				 	this.clearCoat = source.clearCoat;
			
 
				 	this.clearCoatRoughness = source.clearCoatRoughness;
			
 
				 
			
 
				+	this.clearCoatNormalMap = source.clearCoatNormalMap;
			
 
				+	this.clearCoatNormalScale.copy( source.clearCoatNormalScale );
			
 
				+
			
 
				 	return this;
			
 
				 
			
 
				 };
			
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -2273,6 +2273,19 @@ function WebGLRenderer( parameters ) {
 
				 		uniforms.clearCoat.value = material.clearCoat;
			
 
				 		uniforms.clearCoatRoughness.value = material.clearCoatRoughness;
			
 
				 
			
 
				+		if ( material.clearCoatNormalMap ) {
			
 
				+
			
 
				+			uniforms.clearCoatNormalScale.value.copy( material.clearCoatNormalScale );
			
 
				+			uniforms.clearCoatNormalMap.value = material.clearCoatNormalMap;
			
 
				+
			
 
				+			if ( material.side === BackSide ) {
			
 
				+
			
 
				+				uniforms.clearCoatNormalScale.value.negate();
			
 
				+
			
 
				+			}
			
 
				+
			
 
				+		}
			
 
				+
			
 
				 	}
			
 
				 
			
 
				 	function refreshUniformsMatcap( uniforms, material ) {
			
--- a/src/renderers/shaders/ShaderChunk.d.ts
+++ b/src/renderers/shaders/ShaderChunk.d.ts
@@ -83,6 +83,9 @@ export let ShaderChunk: {
 
				 	normal_fragment_maps: string;
			
 
				 	normal_vert: string;
			
 
				 	normalmap_pars_fragment: string;
			
 
				+	clearcoat_normal_fragment_begin: string;
			
 
				+	clearcoat_normal_fragment_maps: string;
			
 
				+	clearcoat_normalmap_pars_fragment: string;
			
 
				 	packing: string;
			
 
				 	points_frag: string;
			
 
				 	points_vert: string;
			
--- a/src/renderers/shaders/ShaderChunk.js
+++ b/src/renderers/shaders/ShaderChunk.js
@@ -61,6 +61,9 @@ import morphtarget_vertex from './ShaderChunk/morphtarget_vertex.glsl.js';
 
				 import normal_fragment_begin from './ShaderChunk/normal_fragment_begin.glsl.js';
			
 
				 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 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';
			
@@ -183,6 +186,9 @@ export var ShaderChunk = {
 
				 	normal_fragment_begin: normal_fragment_begin,
			
 
				 	normal_fragment_maps: normal_fragment_maps,
			
 
				 	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,
			
 
				 	packing: packing,
			
 
				 	premultiplied_alpha_fragment: premultiplied_alpha_fragment,
			
 
				 	project_vertex: project_vertex,
			
--- a/src/renderers/shaders/ShaderChunk/bsdfs.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/bsdfs.glsl.js
@@ -125,15 +125,15 @@ float D_GGX( const in float alpha, const in float dotNH ) {
 
				 }
			
 
				 
			
 
				 // GGX Distribution, Schlick Fresnel, GGX-Smith Visibility
			
 
				-vec3 BRDF_Specular_GGX( const in IncidentLight incidentLight, const in GeometricContext geometry, const in vec3 specularColor, const in float roughness ) {
			
 
				+vec3 BRDF_Specular_GGX( const in IncidentLight incidentLight, const in vec3 viewDir, const in vec3 normal, const in vec3 specularColor, const in float roughness ) {
			
 
				 
			
 
				 	float alpha = pow2( roughness ); // UE4's roughness
			
 
				 
			
 
				-	vec3 halfDir = normalize( incidentLight.direction + geometry.viewDir );
			
 
				+	vec3 halfDir = normalize( incidentLight.direction + viewDir );
			
 
				 
			
 
				-	float dotNL = saturate( dot( geometry.normal, incidentLight.direction ) );
			
 
				-	float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) );
			
 
				-	float dotNH = saturate( dot( geometry.normal, halfDir ) );
			
 
				+	float dotNL = saturate( dot( normal, incidentLight.direction ) );
			
 
				+	float dotNV = saturate( dot( normal, viewDir ) );
			
 
				+	float dotNH = saturate( dot( normal, halfDir ) );
			
 
				 	float dotLH = saturate( dot( incidentLight.direction, halfDir ) );
			
 
				 
			
 
				 	vec3 F = F_Schlick( specularColor, dotLH );
			
@@ -264,9 +264,9 @@ vec3 LTC_Evaluate( const in vec3 N, const in vec3 V, const in vec3 P, const in m
 
				 // End Rect Area Light
			
 
				 
			
 
				 // ref: https://www.unrealengine.com/blog/physically-based-shading-on-mobile - environmentBRDF for GGX on mobile
			
 
				-vec3 BRDF_Specular_GGX_Environment( const in GeometricContext geometry, const in vec3 specularColor, const in float roughness ) {
			
 
				+vec3 BRDF_Specular_GGX_Environment( const in vec3 viewDir, const in vec3 normal, const in vec3 specularColor, const in float roughness ) {
			
 
				 
			
 
				-	float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) );
			
 
				+	float dotNV = saturate( dot( normal, viewDir ) );
			
 
				 
			
 
				 	vec2 brdf = integrateSpecularBRDF( dotNV, roughness );
			
 
				 
			
--- a/src/renderers/shaders/ShaderChunk/clearcoat_normal_fragment_begin.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/clearcoat_normal_fragment_begin.glsl.js
@@ -0,0 +1,7 @@
 
				+export default /* glsl */`
			
 
				+#ifdef USE_CLEARCOAT_NORMALMAP
			
 
				+
			
 
				+  vec3 clearCoatNormal = geometryNormal;
			
 
				+
			
 
				+#endif
			
 
				+`;
			
--- a/src/renderers/shaders/ShaderChunk/clearcoat_normal_fragment_maps.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/clearcoat_normal_fragment_maps.glsl.js
@@ -0,0 +1,18 @@
 
				+export default /* glsl */`
			
 
				+#ifdef USE_CLEARCOAT_NORMALMAP
			
 
				+
			
 
				+	#ifdef USE_TANGENT
			
 
				+
			
 
				+		mat3 vTBN = mat3( tangent, bitangent, clearCoatNormal );
			
 
				+		vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;
			
 
				+		mapN.xy = clearCoatNormalScale * mapN.xy;
			
 
				+		clearCoatNormal = normalize( vTBN * mapN );
			
 
				+
			
 
				+	#else
			
 
				+
			
 
				+		clearCoatNormal = perturbNormal2Arb( - vViewPosition, clearCoatNormal, clearCoatNormalScale, clearCoatNormalMap );
			
 
				+
			
 
				+	#endif
			
 
				+
			
 
				+#endif
			
 
				+`;
			
--- a/src/renderers/shaders/ShaderChunk/clearcoat_normalmap_pars_fragment.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/clearcoat_normalmap_pars_fragment.glsl.js
@@ -0,0 +1,8 @@
 
				+export default /* glsl */`
			
 
				+#ifdef USE_CLEARCOAT_NORMALMAP
			
 
				+
			
 
				+	uniform sampler2D clearCoatNormalMap;
			
 
				+	uniform vec2 clearCoatNormalScale;
			
 
				+
			
 
				+#endif
			
 
				+`;
			
--- a/src/renderers/shaders/ShaderChunk/common.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/common.glsl.js
@@ -39,6 +39,12 @@ struct GeometricContext {
 
				 	vec3 position;
			
 
				 	vec3 normal;
			
 
				 	vec3 viewDir;
			
 
				+
			
 
				+	#ifdef USE_CLEARCOAT_NORMALMAP
			
 
				+
			
 
				+		vec3 clearCoatNormal;
			
 
				+
			
 
				+	#endif
			
 
				 };
			
 
				 
			
 
				 vec3 transformDirection( in vec3 dir, in mat4 matrix ) {
			
--- a/src/renderers/shaders/ShaderChunk/envmap_fragment.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/envmap_fragment.glsl.js
@@ -1,7 +1,7 @@
 
				 export default /* glsl */`
			
 
				 #ifdef USE_ENVMAP
			
 
				 
			
 
				-	#if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG )
			
 
				+	#if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP ) || defined( PHONG )
			
 
				 
			
 
				 		vec3 cameraToVertex = normalize( vWorldPosition - cameraPosition );
			
 
				 
			
--- a/src/renderers/shaders/ShaderChunk/envmap_pars_fragment.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/envmap_pars_fragment.glsl.js
@@ -6,7 +6,7 @@ export default /* glsl */`
 
				 
			
 
				 #ifdef USE_ENVMAP
			
 
				 
			
 
				-	#if ! defined( PHYSICAL ) && ( defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG ) )
			
 
				+	#if ! defined( PHYSICAL ) && ( defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP ) || defined( PHONG ) )
			
 
				 		varying vec3 vWorldPosition;
			
 
				 	#endif
			
 
				 
			
@@ -18,7 +18,7 @@ export default /* glsl */`
 
				 	uniform float flipEnvMap;
			
 
				 	uniform int maxMipLevel;
			
 
				 
			
 
				-	#if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG ) || defined( PHYSICAL )
			
 
				+	#if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP ) || defined( PHONG ) || defined( PHYSICAL )
			
 
				 		uniform float refractionRatio;
			
 
				 	#else
			
 
				 		varying vec3 vReflect;
			
--- a/src/renderers/shaders/ShaderChunk/envmap_pars_vertex.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/envmap_pars_vertex.glsl.js
@@ -1,7 +1,7 @@
 
				 export default /* glsl */`
			
 
				 #ifdef USE_ENVMAP
			
 
				 
			
 
				-	#if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG )
			
 
				+	#if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP ) || defined( PHONG )
			
 
				 		varying vec3 vWorldPosition;
			
 
				 
			
 
				 	#else
			
--- a/src/renderers/shaders/ShaderChunk/envmap_physical_pars_fragment.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/envmap_physical_pars_fragment.glsl.js
@@ -54,15 +54,15 @@ export default /* glsl */`
 
				 
			
 
				 	}
			
 
				 
			
 
				-	vec3 getLightProbeIndirectRadiance( /*const in SpecularLightProbe specularLightProbe,*/ const in GeometricContext geometry, const in float blinnShininessExponent, const in int maxMIPLevel ) {
			
 
				+	vec3 getLightProbeIndirectRadiance( /*const in SpecularLightProbe specularLightProbe,*/ const in vec3 viewDir, const in vec3 normal, const in float blinnShininessExponent, const in int maxMIPLevel ) {
			
 
				 
			
 
				 		#ifdef ENVMAP_MODE_REFLECTION
			
 
				 
			
 
				-			vec3 reflectVec = reflect( -geometry.viewDir, geometry.normal );
			
 
				+		  vec3 reflectVec = reflect( -viewDir, normal );
			
 
				 
			
 
				 		#else
			
 
				 
			
 
				-			vec3 reflectVec = refract( -geometry.viewDir, geometry.normal, refractionRatio );
			
 
				+		  vec3 reflectVec = refract( -viewDir, normal, refractionRatio );
			
 
				 
			
 
				 		#endif
			
 
				 
			
--- a/src/renderers/shaders/ShaderChunk/envmap_vertex.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/envmap_vertex.glsl.js
@@ -1,7 +1,7 @@
 
				 export default /* glsl */`
			
 
				 #ifdef USE_ENVMAP
			
 
				 
			
 
				-	#if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG )
			
 
				+	#if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP ) || defined( PHONG )
			
 
				 
			
 
				 		vWorldPosition = worldPosition.xyz;
			
 
				 
			
--- a/src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl.js
@@ -20,6 +20,12 @@ geometry.position = - vViewPosition;
 
				 geometry.normal = normal;
			
 
				 geometry.viewDir = normalize( vViewPosition );
			
 
				 
			
 
				+#ifdef USE_CLEARCOAT_NORMALMAP
			
 
				+
			
 
				+	geometry.clearCoatNormal = clearCoatNormal;
			
 
				+
			
 
				+#endif
			
 
				+
			
 
				 IncidentLight directLight;
			
 
				 
			
 
				 #if ( NUM_POINT_LIGHTS > 0 ) && defined( RE_Direct )
			
--- a/src/renderers/shaders/ShaderChunk/lights_fragment_maps.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/lights_fragment_maps.glsl.js
@@ -25,10 +25,20 @@ export default /* glsl */`
 
				 
			
 
				 #if defined( USE_ENVMAP ) && defined( RE_IndirectSpecular )
			
 
				 
			
 
				-	radiance += getLightProbeIndirectRadiance( /*specularLightProbe,*/ geometry, Material_BlinnShininessExponent( material ), maxMipLevel );
			
 
				+  radiance += getLightProbeIndirectRadiance( /*specularLightProbe,*/ geometry.viewDir, geometry.normal, Material_BlinnShininessExponent( material ), maxMipLevel );
			
 
				 
			
 
				 	#ifndef STANDARD
			
 
				-		clearCoatRadiance += getLightProbeIndirectRadiance( /*specularLightProbe,*/ geometry, Material_ClearCoat_BlinnShininessExponent( material ), maxMipLevel );
			
 
				+
			
 
				+		#ifdef USE_CLEARCOAT_NORMALMAP
			
 
				+
			
 
				+			clearCoatRadiance += getLightProbeIndirectRadiance( /*specularLightProbe,*/ geometry.viewDir, geometry.clearCoatNormal, Material_ClearCoat_BlinnShininessExponent( material ), maxMipLevel );
			
 
				+
			
 
				+		#else
			
 
				+
			
 
				+			clearCoatRadiance += getLightProbeIndirectRadiance( /*specularLightProbe,*/ geometry.viewDir, geometry.normal, Material_ClearCoat_BlinnShininessExponent( material ), maxMipLevel );
			
 
				+
			
 
				+		#endif
			
 
				+
			
 
				 	#endif
			
 
				 
			
 
				 #endif
			
--- a/src/renderers/shaders/ShaderChunk/lights_physical_pars_fragment.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/lights_physical_pars_fragment.glsl.js
@@ -77,21 +77,41 @@ void RE_Direct_Physical( const in IncidentLight directLight, const in GeometricC
 
				 	#endif
			
 
				 
			
 
				 	#ifndef STANDARD
			
 
				-		float clearCoatDHR = material.clearCoat * clearCoatDHRApprox( material.clearCoatRoughness, dotNL );
			
 
				-	#else
			
 
				-		float clearCoatDHR = 0.0;
			
 
				-	#endif
			
 
				 
			
 
				-	reflectedLight.directSpecular += ( 1.0 - clearCoatDHR ) * irradiance * BRDF_Specular_GGX( directLight, geometry, material.specularColor, material.specularRoughness );
			
 
				+		#ifdef USE_CLEARCOAT_NORMALMAP
			
 
				 
			
 
				-	reflectedLight.directDiffuse += ( 1.0 - clearCoatDHR ) * irradiance * BRDF_Diffuse_Lambert( material.diffuseColor );
			
 
				+			float ccDotNL = saturate( dot( geometry.clearCoatNormal, directLight.direction ) );
			
 
				 
			
 
				-	#ifndef STANDARD
			
 
				+			vec3 ccIrradiance = ccDotNL * directLight.color;
			
 
				+
			
 
				+			#ifndef PHYSICALLY_CORRECT_LIGHTS
			
 
				+
			
 
				+				ccIrradiance *= PI; // punctual light
			
 
				+
			
 
				+			#endif
			
 
				+
			
 
				+			float clearCoatDHR = material.clearCoat * clearCoatDHRApprox( material.clearCoatRoughness, ccDotNL );
			
 
				 
			
 
				-		reflectedLight.directSpecular += irradiance * material.clearCoat * BRDF_Specular_GGX( directLight, geometry, vec3( DEFAULT_SPECULAR_COEFFICIENT ), material.clearCoatRoughness );
			
 
				+			reflectedLight.directSpecular += ccIrradiance * material.clearCoat * BRDF_Specular_GGX( directLight, geometry.viewDir, geometry.clearCoatNormal, vec3( DEFAULT_SPECULAR_COEFFICIENT ), material.clearCoatRoughness );
			
 
				+
			
 
				+		#else
			
 
				+
			
 
				+			float clearCoatDHR = material.clearCoat * clearCoatDHRApprox( material.clearCoatRoughness, dotNL );
			
 
				+
			
 
				+			reflectedLight.directSpecular += irradiance * material.clearCoat * BRDF_Specular_GGX( directLight, geometry.viewDir, geometry.normal, vec3( DEFAULT_SPECULAR_COEFFICIENT ), material.clearCoatRoughness );
			
 
				+
			
 
				+		#endif
			
 
				+
			
 
				+	#else
			
 
				+
			
 
				+		float clearCoatDHR = 0.0;
			
 
				 
			
 
				 	#endif
			
 
				 
			
 
				+	reflectedLight.directSpecular += ( 1.0 - clearCoatDHR ) * irradiance * BRDF_Specular_GGX( directLight, geometry.viewDir, geometry.normal, material.specularColor, material.specularRoughness );
			
 
				+
			
 
				+	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 ) {
			
@@ -109,11 +129,28 @@ 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
			
 
				-		float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) );
			
 
				-		float dotNL = dotNV;
			
 
				-		float clearCoatDHR = material.clearCoat * clearCoatDHRApprox( material.clearCoatRoughness, dotNL );
			
 
				+
			
 
				+		#ifdef USE_CLEARCOAT_NORMALMAP
			
 
				+
			
 
				+			float ccDotNV = saturate( dot( geometry.clearCoatNormal, geometry.viewDir ) );
			
 
				+
			
 
				+			reflectedLight.indirectSpecular += clearCoatRadiance * material.clearCoat * BRDF_Specular_GGX_Environment( geometry.viewDir, geometry.clearCoatNormal, vec3( DEFAULT_SPECULAR_COEFFICIENT ), material.clearCoatRoughness );
			
 
				+
			
 
				+		#else
			
 
				+
			
 
				+			float ccDotNV = saturate( dot( geometry.normal, geometry.viewDir ) );
			
 
				+
			
 
				+			reflectedLight.indirectSpecular += clearCoatRadiance * material.clearCoat * BRDF_Specular_GGX_Environment( geometry.viewDir, geometry.normal, vec3( DEFAULT_SPECULAR_COEFFICIENT ), material.clearCoatRoughness );
			
 
				+
			
 
				+		#endif
			
 
				+
			
 
				+		float ccDotNL = ccDotNV;
			
 
				+		float clearCoatDHR = material.clearCoat * clearCoatDHRApprox( material.clearCoatRoughness, ccDotNL );
			
 
				+
			
 
				 	#else
			
 
				+
			
 
				 		float clearCoatDHR = 0.0;
			
 
				+
			
 
				 	#endif
			
 
				 
			
 
				 	float clearCoatInv = 1.0 - clearCoatDHR;
			
@@ -136,15 +173,10 @@ void RE_IndirectSpecular_Physical( const in vec3 radiance, const in vec3 irradia
 
				 
			
 
				 	#else
			
 
				 
			
 
				-		reflectedLight.indirectSpecular += clearCoatInv * radiance * BRDF_Specular_GGX_Environment( geometry, material.specularColor, material.specularRoughness );
			
 
				+		reflectedLight.indirectSpecular += clearCoatInv * radiance * BRDF_Specular_GGX_Environment( geometry.viewDir, geometry.normal, material.specularColor, material.specularRoughness );
			
 
				 
			
 
				 	#endif
			
 
				 
			
 
				-	#ifndef STANDARD
			
 
				-
			
 
				-		reflectedLight.indirectSpecular += clearCoatRadiance * material.clearCoat * BRDF_Specular_GGX_Environment( geometry, vec3( DEFAULT_SPECULAR_COEFFICIENT ), material.clearCoatRoughness );
			
 
				-
			
 
				-	#endif
			
 
				 }
			
 
				 
			
 
				 #define RE_Direct				RE_Direct_Physical
			
--- a/src/renderers/shaders/ShaderChunk/normal_fragment_begin.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/normal_fragment_begin.glsl.js
@@ -31,5 +31,10 @@ export default /* glsl */`
 
				 
			
 
				 	#endif
			
 
				 
			
 
				+#endif
			
 
				+#ifdef USE_CLEARCOAT_NORMALMAP
			
 
				+
			
 
				+	vec3 geometryNormal = normal;
			
 
				+
			
 
				 #endif
			
 
				 `;
			
--- a/src/renderers/shaders/ShaderChunk/normal_fragment_maps.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/normal_fragment_maps.glsl.js
@@ -30,7 +30,7 @@ export default /* glsl */`
 
				 
			
 
				 		#else
			
 
				 
			
 
				-			normal = perturbNormal2Arb( -vViewPosition, normal );
			
 
				+			normal = perturbNormal2Arb( -vViewPosition, normal, normalScale, normalMap );
			
 
				 
			
 
				 		#endif
			
 
				 
			
--- a/src/renderers/shaders/ShaderChunk/normalmap_pars_fragment.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/normalmap_pars_fragment.glsl.js
@@ -8,37 +8,38 @@ export default /* glsl */`
 
				 
			
 
				 		uniform mat3 normalMatrix;
			
 
				 
			
 
				-	#else
			
 
				+	#endif
			
 
				+#endif
			
 
				 
			
 
				-		// Per-Pixel Tangent Space Normal Mapping
			
 
				-		// http://hacksoflife.blogspot.ch/2009/11/per-pixel-tangent-space-normal-mapping.html
			
 
				+#if ( defined ( USE_NORMALMAP ) && !defined ( OBJECTSPACE_NORMALMAP )) || defined ( USE_CLEARCOAT_NORMALMAP )
			
 
				 
			
 
				-		vec3 perturbNormal2Arb( vec3 eye_pos, vec3 surf_norm ) {
			
 
				+	// Per-Pixel Tangent Space Normal Mapping
			
 
				+	// http://hacksoflife.blogspot.ch/2009/11/per-pixel-tangent-space-normal-mapping.html
			
 
				 
			
 
				-			// Workaround for Adreno 3XX dFd*( vec3 ) bug. See #9988
			
 
				+	vec3 perturbNormal2Arb( vec3 eye_pos, vec3 surf_norm, vec2 normalScale, in sampler2D normalMap ) {
			
 
				 
			
 
				-			vec3 q0 = vec3( dFdx( eye_pos.x ), dFdx( eye_pos.y ), dFdx( eye_pos.z ) );
			
 
				-			vec3 q1 = vec3( dFdy( eye_pos.x ), dFdy( eye_pos.y ), dFdy( eye_pos.z ) );
			
 
				-			vec2 st0 = dFdx( vUv.st );
			
 
				-			vec2 st1 = dFdy( vUv.st );
			
 
				+		// Workaround for Adreno 3XX dFd*( vec3 ) bug. See #9988
			
 
				 
			
 
				-			float scale = sign( st1.t * st0.s - st0.t * st1.s ); // we do not care about the magnitude
			
 
				+		vec3 q0 = vec3( dFdx( eye_pos.x ), dFdx( eye_pos.y ), dFdx( eye_pos.z ) );
			
 
				+		vec3 q1 = vec3( dFdy( eye_pos.x ), dFdy( eye_pos.y ), dFdy( eye_pos.z ) );
			
 
				+		vec2 st0 = dFdx( vUv.st );
			
 
				+		vec2 st1 = dFdy( vUv.st );
			
 
				 
			
 
				-			vec3 S = normalize( ( q0 * st1.t - q1 * st0.t ) * scale );
			
 
				-			vec3 T = normalize( ( - q0 * st1.s + q1 * st0.s ) * scale );
			
 
				-			vec3 N = normalize( surf_norm );
			
 
				-			mat3 tsn = mat3( S, T, N );
			
 
				+		float scale = sign( st1.t * st0.s - st0.t * st1.s ); // we do not care about the magnitude
			
 
				 
			
 
				-			vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;
			
 
				+		vec3 S = normalize( ( q0 * st1.t - q1 * st0.t ) * scale );
			
 
				+		vec3 T = normalize( ( - q0 * st1.s + q1 * st0.s ) * scale );
			
 
				+		vec3 N = normalize( surf_norm );
			
 
				+		mat3 tsn = mat3( S, T, N );
			
 
				 
			
 
				-			mapN.xy *= normalScale;
			
 
				-			mapN.xy *= ( float( gl_FrontFacing ) * 2.0 - 1.0 );
			
 
				+		vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;
			
 
				 
			
 
				-			return normalize( tsn * mapN );
			
 
				+		mapN.xy *= normalScale;
			
 
				+		mapN.xy *= ( float( gl_FrontFacing ) * 2.0 - 1.0 );
			
 
				 
			
 
				-		}
			
 
				+		return normalize( tsn * mapN );
			
 
				 
			
 
				-	#endif
			
 
				+	}
			
 
				 
			
 
				 #endif
			
 
				 `;
			
--- a/src/renderers/shaders/ShaderChunk/uv_pars_fragment.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/uv_pars_fragment.glsl.js
@@ -1,5 +1,5 @@
 
				 export default /* glsl */`
			
 
				-#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) || defined( USE_EMISSIVEMAP ) || defined( USE_ROUGHNESSMAP ) || defined( USE_METALNESSMAP )
			
 
				+#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP ) || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) || defined( USE_EMISSIVEMAP ) || defined( USE_ROUGHNESSMAP ) || defined( USE_METALNESSMAP )
			
 
				 
			
 
				 	varying vec2 vUv;
			
 
				 
			
--- a/src/renderers/shaders/ShaderChunk/uv_pars_vertex.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/uv_pars_vertex.glsl.js
@@ -1,5 +1,5 @@
 
				 export default /* glsl */`
			
 
				-#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) || defined( USE_EMISSIVEMAP ) || defined( USE_ROUGHNESSMAP ) || defined( USE_METALNESSMAP )
			
 
				+#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP ) || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) || defined( USE_EMISSIVEMAP ) || defined( USE_ROUGHNESSMAP ) || defined( USE_METALNESSMAP )
			
 
				 
			
 
				 	varying vec2 vUv;
			
 
				 	uniform mat3 uvTransform;
			
--- a/src/renderers/shaders/ShaderChunk/uv_vertex.glsl.js
+++ b/src/renderers/shaders/ShaderChunk/uv_vertex.glsl.js
@@ -1,5 +1,5 @@
 
				 export default /* glsl */`
			
 
				-#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) || defined( USE_EMISSIVEMAP ) || defined( USE_ROUGHNESSMAP ) || defined( USE_METALNESSMAP )
			
 
				+#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP )  || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) || defined( USE_EMISSIVEMAP ) || defined( USE_ROUGHNESSMAP ) || defined( USE_METALNESSMAP )
			
 
				 
			
 
				 	vUv = ( uvTransform * vec3( uv, 1 ) ).xy;
			
 
				 
			
--- a/src/renderers/shaders/ShaderLib.js
+++ b/src/renderers/shaders/ShaderLib.js
@@ -1,5 +1,6 @@
 
				 import { ShaderChunk } from './ShaderChunk.js';
			
 
				 import { mergeUniforms } from './UniformsUtils.js';
			
 
				+import { Vector2 } from '../../math/Vector2.js';
			
 
				 import { Vector3 } from '../../math/Vector3.js';
			
 
				 import { UniformsLib } from './UniformsLib.js';
			
 
				 import { Color } from '../../math/Color.js';
			
@@ -273,7 +274,9 @@ ShaderLib.physical = {
 
				 		ShaderLib.standard.uniforms,
			
 
				 		{
			
 
				 			clearCoat: { value: 0 },
			
 
				-			clearCoatRoughness: { value: 0 }
			
 
				+			clearCoatRoughness: { value: 0 },
			
 
				+			clearCoatNormalScale: { value: new Vector2( 1, 1 ) },
			
 
				+			clearCoatNormalMap: { value: null },
			
 
				 		}
			
 
				 	] ),
			
 
				 
			
--- a/src/renderers/shaders/ShaderLib/meshphysical_frag.glsl.js
+++ b/src/renderers/shaders/ShaderLib/meshphysical_frag.glsl.js
@@ -48,6 +48,7 @@ varying vec3 vViewPosition;
 
				 #include <shadowmap_pars_fragment>
			
 
				 #include <bumpmap_pars_fragment>
			
 
				 #include <normalmap_pars_fragment>
			
 
				+#include <clearcoat_normalmap_pars_fragment>
			
 
				 #include <roughnessmap_pars_fragment>
			
 
				 #include <metalnessmap_pars_fragment>
			
 
				 #include <logdepthbuf_pars_fragment>
			
@@ -70,6 +71,8 @@ void main() {
 
				 	#include <metalnessmap_fragment>
			
 
				 	#include <normal_fragment_begin>
			
 
				 	#include <normal_fragment_maps>
			
 
				+	#include <clearcoat_normal_fragment_begin>
			
 
				+	#include <clearcoat_normal_fragment_maps>
			
 
				 	#include <emissivemap_fragment>
			
 
				 
			
 
				 	// accumulation
			
--- a/src/renderers/shaders/ShaderLib/normal_frag.glsl.js
+++ b/src/renderers/shaders/ShaderLib/normal_frag.glsl.js
@@ -3,7 +3,7 @@ export default /* glsl */`
 
				 
			
 
				 uniform float opacity;
			
 
				 
			
 
				-#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || ( defined( USE_NORMALMAP ) && ! defined( OBJECTSPACE_NORMALMAP ) )
			
 
				+#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || ( defined( USE_NORMALMAP ) && ! defined( OBJECTSPACE_NORMALMAP ) ) || defined( USE_CLEARCOAT_NORMALMAP )
			
 
				 
			
 
				 	varying vec3 vViewPosition;
			
 
				 
			
--- a/src/renderers/shaders/ShaderLib/normal_vert.glsl.js
+++ b/src/renderers/shaders/ShaderLib/normal_vert.glsl.js
@@ -1,7 +1,7 @@
 
				 export default /* glsl */`
			
 
				 #define NORMAL
			
 
				 
			
 
				-#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || ( defined( USE_NORMALMAP ) && ! defined( OBJECTSPACE_NORMALMAP ) )
			
 
				+#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || ( defined( USE_NORMALMAP ) && ! defined( OBJECTSPACE_NORMALMAP ) ) || defined( USE_CLEARCOAT_NORMALMAP )
			
 
				 
			
 
				 	varying vec3 vViewPosition;
			
 
				 
			
@@ -58,7 +58,7 @@ void main() {
 
				 	#include <logdepthbuf_vertex>
			
 
				 	#include <clipping_planes_vertex>
			
 
				 
			
 
				-#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || ( defined( USE_NORMALMAP ) && ! defined( OBJECTSPACE_NORMALMAP ) )
			
 
				+#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || ( defined( USE_NORMALMAP ) && ! defined( OBJECTSPACE_NORMALMAP ) ) || defined( USE_CLEARCOAT_NORMALMAP )
			
 
				 
			
 
				 	vViewPosition = - mvPosition.xyz;
			
 
				 
			
--- a/src/renderers/webgl/WebGLProgram.js
+++ b/src/renderers/webgl/WebGLProgram.js
@@ -118,7 +118,7 @@ function generateExtensions( extensions, parameters, rendererExtensions ) {
 
				 	extensions = extensions || {};
			
 
				 
			
 
				 	var chunks = [
			
 
				-		( extensions.derivatives || parameters.envMapCubeUV || parameters.bumpMap || ( parameters.normalMap && ! parameters.objectSpaceNormalMap ) || parameters.flatShading ) ? '#extension GL_OES_standard_derivatives : enable' : '',
			
 
				+		( extensions.derivatives || parameters.envMapCubeUV || parameters.bumpMap || ( parameters.normalMap && ! parameters.objectSpaceNormalMap ) || parameters.clearCoatNormalMap || parameters.flatShading ) ? '#extension GL_OES_standard_derivatives : enable' : '',
			
 
				 		( extensions.fragDepth || parameters.logarithmicDepthBuffer ) && rendererExtensions.get( 'EXT_frag_depth' ) ? '#extension GL_EXT_frag_depth : enable' : '',
			
 
				 		( extensions.drawBuffers ) && rendererExtensions.get( 'WEBGL_draw_buffers' ) ? '#extension GL_EXT_draw_buffers : require' : '',
			
 
				 		( extensions.shaderTextureLOD || parameters.envMap ) && rendererExtensions.get( 'EXT_shader_texture_lod' ) ? '#extension GL_EXT_shader_texture_lod : enable' : ''
			
@@ -389,6 +389,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
				 			parameters.bumpMap ? '#define USE_BUMPMAP' : '',
			
 
				 			parameters.normalMap ? '#define USE_NORMALMAP' : '',
			
 
				 			( parameters.normalMap && parameters.objectSpaceNormalMap ) ? '#define OBJECTSPACE_NORMALMAP' : '',
			
 
				+			parameters.clearCoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',
			
 
				 			parameters.displacementMap && parameters.supportsVertexTextures ? '#define USE_DISPLACEMENTMAP' : '',
			
 
				 			parameters.specularMap ? '#define USE_SPECULARMAP' : '',
			
 
				 			parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
			
@@ -505,6 +506,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
				 			parameters.bumpMap ? '#define USE_BUMPMAP' : '',
			
 
				 			parameters.normalMap ? '#define USE_NORMALMAP' : '',
			
 
				 			( parameters.normalMap && parameters.objectSpaceNormalMap ) ? '#define OBJECTSPACE_NORMALMAP' : '',
			
 
				+			parameters.clearCoatNormalMap ? '#define USE_CLEARCOAT_NORMALMAP' : '',
			
 
				 			parameters.specularMap ? '#define USE_SPECULARMAP' : '',
			
 
				 			parameters.roughnessMap ? '#define USE_ROUGHNESSMAP' : '',
			
 
				 			parameters.metalnessMap ? '#define USE_METALNESSMAP' : '',
			
--- a/src/renderers/webgl/WebGLPrograms.js
+++ b/src/renderers/webgl/WebGLPrograms.js
@@ -29,7 +29,7 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
				 
			
 
				 	var parameterNames = [
			
 
				 		"precision", "supportsVertexTextures", "map", "mapEncoding", "matcap", "matcapEncoding", "envMap", "envMapMode", "envMapEncoding",
			
 
				-		"lightMap", "aoMap", "emissiveMap", "emissiveMapEncoding", "bumpMap", "normalMap", "objectSpaceNormalMap", "displacementMap", "specularMap",
			
 
				+		"lightMap", "aoMap", "emissiveMap", "emissiveMapEncoding", "bumpMap", "normalMap", "objectSpaceNormalMap", "clearCoatNormalMap", "displacementMap", "specularMap",
			
 
				 		"roughnessMap", "metalnessMap", "gradientMap",
			
 
				 		"alphaMap", "combine", "vertexColors", "vertexTangents", "fog", "useFog", "fogExp",
			
 
				 		"flatShading", "sizeAttenuation", "logarithmicDepthBuffer", "skinning",
			
@@ -153,6 +153,7 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
				 			bumpMap: !! material.bumpMap,
			
 
				 			normalMap: !! material.normalMap,
			
 
				 			objectSpaceNormalMap: material.normalMapType === ObjectSpaceNormalMap,
			
 
				+			clearCoatNormalMap: !! material.clearCoatNormalMap,
			
 
				 			displacementMap: !! material.displacementMap,
			
 
				 			roughnessMap: !! material.roughnessMap,
			
 
				 			metalnessMap: !! material.metalnessMap,