Add Gltf sheen extension

dist/preview release/what's new.md

@@ -100,6 +100,7 @@
 - Added an order property to glTF loader extensions to support reordering. ([bghgary](https://github.com/bghgary))
 - Added support for GLTF clearcoat extension [Sebavan](https://github.com/sebavan/)
 - Added support for GLTF specular extension [Sebavan](https://github.com/sebavan/)
+- Added support for GLTF sheen extension [Sebavan](https://github.com/sebavan/)
 
 ### Materials
 

inspector/src/components/actionTabs/tabs/tools/gltfComponent.tsx

@@ -28,6 +28,7 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
         extensionStates["KHR_draco_mesh_compression"] = extensionStates["KHR_draco_mesh_compression"] || { enabled: true };
         extensionStates["KHR_materials_pbrSpecularGlossiness"] = extensionStates["KHR_materials_pbrSpecularGlossiness"] || { enabled: true };
         extensionStates["KHR_materials_clearcoat"] = extensionStates["KHR_materials_clearcoat"] || { enabled: true };
+        extensionStates["KHR_materials_sheen"] = extensionStates["KHR_materials_sheen"] || { enabled: true };
         extensionStates["KHR_materials_specular"] = extensionStates["KHR_materials_specular"] || { enabled: true };
         extensionStates["KHR_materials_unlit"] = extensionStates["KHR_materials_unlit"] || { enabled: true };
         extensionStates["KHR_lights_punctual"] = extensionStates["KHR_lights_punctual"] || { enabled: true };
@@ -132,6 +133,7 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
                     <CheckBoxLineComponent label="KHR_draco_mesh_compression" isSelected={() => extensionStates["KHR_draco_mesh_compression"].enabled} onSelect={value => extensionStates["KHR_draco_mesh_compression"].enabled = value} />
                     <CheckBoxLineComponent label="KHR_materials_pbrSpecularGlossiness" isSelected={() => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled} onSelect={value => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value} />
                     <CheckBoxLineComponent label="KHR_materials_clearcoat" isSelected={() => extensionStates["KHR_materials_clearcoat"].enabled} onSelect={value => extensionStates["KHR_materials_clearcoat"].enabled = value} />
+                    <CheckBoxLineComponent label="KHR_materials_sheen" isSelected={() => extensionStates["KHR_materials_sheen"].enabled} onSelect={value => extensionStates["KHR_materials_sheen"].enabled = value} />
                     <CheckBoxLineComponent label="KHR_materials_specular" isSelected={() => extensionStates["KHR_materials_specular"].enabled} onSelect={value => extensionStates["KHR_materials_specular"].enabled = value} />
                     <CheckBoxLineComponent label="KHR_materials_unlit" isSelected={() => extensionStates["KHR_materials_unlit"].enabled} onSelect={value => extensionStates["KHR_materials_unlit"].enabled = value} />
                     <CheckBoxLineComponent label="KHR_lights_punctual" isSelected={() => extensionStates["KHR_lights_punctual"].enabled} onSelect={value => extensionStates["KHR_lights_punctual"].enabled = value} />

loaders/src/glTF/2.0/Extensions/KHR_materials_sheen.ts

@@ -0,0 +1,92 @@
+import { Nullable } from "babylonjs/types";
+import { PBRMaterial } from "babylonjs/Materials/PBR/pbrMaterial";
+import { Material } from "babylonjs/Materials/material";
+
+import { ITextureInfo, IMaterial } from "../glTFLoaderInterfaces";
+import { IGLTFLoaderExtension } from "../glTFLoaderExtension";
+import { GLTFLoader } from "../glTFLoader";
+import { Color3 } from 'babylonjs/Maths/math.color';
+
+const NAME = "KHR_materials_sheen";
+
+interface IKHR_materials_sheen {
+    sheenFactor: number;
+    sheenColor: number[];
+    sheenTexture: ITextureInfo;
+}
+
+/**
+ * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
+ * !!! Experimental Extension Subject to Changes !!!
+ */
+export class KHR_materials_sheen implements IGLTFLoaderExtension {
+    /**
+     * The name of this extension.
+     */
+    public readonly name = NAME;
+
+    /**
+     * Defines whether this extension is enabled.
+     */
+    public enabled: boolean;
+
+    /**
+     * Defines a number that determines the order the extensions are applied.
+     */
+    public order = 240;
+
+    private _loader: GLTFLoader;
+
+    /** @hidden */
+    constructor(loader: GLTFLoader) {
+        this._loader = loader;
+        this.enabled = this._loader.isExtensionUsed(NAME);
+    }
+
+    /** @hidden */
+    public dispose() {
+        delete this._loader;
+    }
+
+    /** @hidden */
+    public loadMaterialPropertiesAsync(context: string, material: IMaterial, babylonMaterial: Material): Nullable<Promise<void>> {
+        return GLTFLoader.LoadExtensionAsync<IKHR_materials_sheen>(context, material, this.name, (extensionContext, extension) => {
+            const promises = new Array<Promise<any>>();
+            promises.push(this._loader.loadMaterialPropertiesAsync(context, material, babylonMaterial));
+            promises.push(this._loadSheenPropertiesAsync(extensionContext, extension, babylonMaterial));
+            return Promise.all(promises).then(() => { });
+        });
+    }
+
+    private _loadSheenPropertiesAsync(context: string, properties: IKHR_materials_sheen, babylonMaterial: Material): Promise<void> {
+        if (!(babylonMaterial instanceof PBRMaterial)) {
+            throw new Error(`${context}: Material type not supported`);
+        }
+
+        const promises = new Array<Promise<any>>();
+
+        babylonMaterial.sheen.isEnabled = true;
+
+        if (properties.sheenFactor != undefined) {
+            babylonMaterial.sheen.intensity = properties.sheenFactor;
+        }
+        else {
+            babylonMaterial.sheen.intensity = 0;
+        }
+
+        if (properties.sheenColor != undefined) {
+            babylonMaterial.sheen.color = Color3.FromArray(properties.sheenColor);
+        }
+
+        if (properties.sheenTexture) {
+            promises.push(this._loader.loadTextureInfoAsync(`${context}/sheenTexture`, properties.sheenTexture, (texture) => {
+                texture.name = `${babylonMaterial.name} (Sheen Intensity)`;
+                babylonMaterial.sheen.texture = texture;
+            }));
+        }
+
+        return Promise.all(promises).then(() => { });
+    }
+}
+
+GLTFLoader.RegisterExtension(NAME, (loader) => new KHR_materials_sheen(loader));

loaders/src/glTF/2.0/Extensions/index.ts

@@ -4,6 +4,7 @@ export * from "./KHR_lights_punctual";
 export * from "./KHR_materials_pbrSpecularGlossiness";
 export * from "./KHR_materials_unlit";
 export * from "./KHR_materials_clearcoat";
+export * from "./KHR_materials_sheen";
 export * from "./KHR_materials_specular";
 export * from "./KHR_texture_transform";
 export * from "./MSFT_audio_emitter";