Implement glTF extension KHR_materials_clearcoat

Specs/Data/Models/glTF-2.0/BoxClearcoat/README.md

@@ -0,0 +1,11 @@
+# Box Clearcoat
+
+## Screenshot
+
+![screenshot](screenshot/screenshot.png)
+
+## License Information
+
+Developed by Cesium for testing the KHR_materials_clearcoat extension. Please follow the [Cesium Trademark Terms and Conditions](https://github.com/AnalyticalGraphicsInc/cesium/wiki/CesiumTrademark.pdf).
+
+This model is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/).

Specs/Data/Models/glTF-2.0/BoxClearcoat/glTF/BoxClearcoat.gltf

@@ -0,0 +1,204 @@
+{
+    "asset": {
+        "generator": "COLLADA2GLTF",
+        "version": "2.0"
+    },
+    "scene": 0,
+    "scenes": [
+        {
+            "nodes": [
+                0
+            ]
+        }
+    ],
+    "nodes": [
+        {
+            "children": [
+                1
+            ],
+            "matrix": [
+                1.0,
+                0.0,
+                0.0,
+                0.0,
+                0.0,
+                0.0,
+                -1.0,
+                0.0,
+                0.0,
+                1.0,
+                0.0,
+                0.0,
+                0.0,
+                0.0,
+                0.0,
+                1.0
+            ]
+        },
+        {
+            "mesh": 0
+        }
+    ],
+    "meshes": [
+        {
+            "primitives": [
+                {
+                    "attributes": {
+                        "NORMAL": 1,
+                        "POSITION": 2,
+                        "TEXCOORD_0": 3
+                    },
+                    "indices": 0,
+                    "mode": 4,
+                    "material": 0
+                }
+            ],
+            "name": "Mesh"
+        }
+    ],
+    "accessors": [
+        {
+            "bufferView": 0,
+            "byteOffset": 0,
+            "componentType": 5123,
+            "count": 36,
+            "max": [
+                23
+            ],
+            "min": [
+                0
+            ],
+            "type": "SCALAR"
+        },
+        {
+            "bufferView": 1,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "max": [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "min": [
+                -1.0,
+                -1.0,
+                -1.0
+            ],
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 1,
+            "byteOffset": 288,
+            "componentType": 5126,
+            "count": 24,
+            "max": [
+                0.5,
+                0.5,
+                0.5
+            ],
+            "min": [
+                -0.5,
+                -0.5,
+                -0.5
+            ],
+            "type": "VEC3"
+        },
+        {
+            "bufferView": 2,
+            "byteOffset": 0,
+            "componentType": 5126,
+            "count": 24,
+            "max": [
+                6.0,
+                1.0
+            ],
+            "min": [
+                0.0,
+                0.0
+            ],
+            "type": "VEC2"
+        }
+    ],
+    "materials": [
+        {
+            "pbrMetallicRoughness": {
+                "baseColorTexture": {
+                    "index": 0
+                },
+                "metallicFactor": 0.0
+            },
+            "name": "Texture",
+            "extensions": {
+                "KHR_materials_clearcoat": {
+                    "clearcoatFactor": 0.5,
+                    "clearcoatRoughnessFactor": 0.2,
+                    "clearcoatTexture": {
+                        "index": 0
+                    },
+                    "clearcoatRoughnessTexture": {
+                        "index": 0
+                    },
+                    "clearcoatNormalTexture": {
+                        "index": 0
+                    }
+                }
+            }
+        }
+    ],
+    "textures": [
+        {
+            "sampler": 0,
+            "source": 0
+        }
+    ],
+    "images": [
+        {
+            "uri": "CesiumLogoFlat.png"
+        }
+    ],
+    "samplers": [
+        {
+            "magFilter": 9729,
+            "minFilter": 9986,
+            "wrapS": 10497,
+            "wrapT": 10497
+        }
+    ],
+    "bufferViews": [
+        {
+            "buffer": 0,
+            "byteOffset": 768,
+            "byteLength": 72,
+            "target": 34963
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 0,
+            "byteLength": 576,
+            "byteStride": 12,
+            "target": 34962
+        },
+        {
+            "buffer": 0,
+            "byteOffset": 576,
+            "byteLength": 192,
+            "byteStride": 8,
+            "target": 34962
+        }
+    ],
+    "buffers": [
+        {
+            "byteLength": 840,
+            "uri": "BoxClearcoat.bin"
+        }
+    ],
+    "extensionsRequired": [
+      "KHR_draco_mesh_compression",
+      "KHR_materials_clearcoat"
+    ],
+    "extensionsUsed": [
+      "KHR_draco_mesh_compression",
+      "KHR_materials_clearcoat"
+    ]
+}

packages/engine/Source/Scene/GltfLoader.js

@@ -55,6 +55,7 @@ const {
   SpecularGlossiness,
   Specular,
   Anisotropy,
+  Clearcoat,
   Material,
 } = ModelComponents;
 
@@ -1587,6 +1588,43 @@ function loadAnisotropy(loader, anisotropyInfo, frameState) {
   return anisotropy;
 }
 
+function loadClearcoat(loader, clearcoatInfo, frameState) {
+  const {
+    clearcoatFactor = Clearcoat.DEFAULT_CLEARCOAT_FACTOR,
+    clearcoatTexture,
+    clearcoatRoughnessFactor = Clearcoat.DEFAULT_CLEARCOAT_ROUGHNESS_FACTOR,
+    clearcoatRoughnessTexture,
+    clearcoatNormalTexture,
+  } = clearcoatInfo;
+
+  const clearcoat = new Clearcoat();
+  if (defined(clearcoatTexture)) {
+    clearcoat.clearcoatTexture = loadTexture(
+      loader,
+      clearcoatTexture,
+      frameState
+    );
+  }
+  if (defined(clearcoatRoughnessTexture)) {
+    clearcoat.clearcoatRoughnessTexture = loadTexture(
+      loader,
+      clearcoatRoughnessTexture,
+      frameState
+    );
+  }
+  if (defined(clearcoatNormalTexture)) {
+    clearcoat.clearcoatNormalTexture = loadTexture(
+      loader,
+      clearcoatNormalTexture,
+      frameState
+    );
+  }
+  clearcoat.clearcoatFactor = clearcoatFactor;
+  clearcoat.clearcoatRoughnessFactor = clearcoatRoughnessFactor;
+
+  return clearcoat;
+}
+
 /**
  * Load textures and parse factors and flags for a glTF material
  *
@@ -1606,6 +1644,7 @@ function loadMaterial(loader, gltfMaterial, frameState) {
   const pbrSpecularGlossiness = extensions.KHR_materials_pbrSpecularGlossiness;
   const pbrSpecular = extensions.KHR_materials_specular;
   const pbrAnisotropy = extensions.KHR_materials_anisotropy;
+  const pbrClearcoat = extensions.KHR_materials_clearcoat;
   const pbrMetallicRoughness = gltfMaterial.pbrMetallicRoughness;
 
   material.unlit = defined(extensions.KHR_materials_unlit);
@@ -1630,6 +1669,9 @@ function loadMaterial(loader, gltfMaterial, frameState) {
     if (defined(pbrAnisotropy) && !material.unlit) {
       material.anisotropy = loadAnisotropy(loader, pbrAnisotropy, frameState);
     }
+    if (defined(pbrClearcoat) && material.unlit === false) {
+      material.clearcoat = loadClearcoat(loader, pbrClearcoat, frameState);
+    }
   }
 
   // Top level textures

packages/engine/Source/Scene/Model/LightingPipelineStage.js

@@ -28,9 +28,7 @@ const LightingPipelineStage = {
  * @private
  */
 LightingPipelineStage.process = function (renderResources, primitive) {
-  const model = renderResources.model;
-  const lightingOptions = renderResources.lightingOptions;
-  const shaderBuilder = renderResources.shaderBuilder;
+  const { model, lightingOptions, shaderBuilder } = renderResources;
 
   if (defined(model.lightColor)) {
     shaderBuilder.addDefine(
@@ -53,7 +51,7 @@ LightingPipelineStage.process = function (renderResources, primitive) {
 
   // The lighting model is always set by the material. However, custom shaders
   // can override this.
-  const lightingModel = lightingOptions.lightingModel;
+  const { lightingModel } = lightingOptions;
 
   if (lightingModel === LightingModel.PBR) {
     shaderBuilder.addDefine(