@threepipe/plugin-gltf-transform 0.1.2 → 0.2.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@threepipe/plugin-gltf-transform",
   "description": "Utility plugins for threepipe using gltf-transform to optimize/compress glTF files.",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "dependencies": {},
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
@@ -40,6 +41,6 @@
     "directory": "plugins/gltf-transform"
   },
   "peerDependencies": {
-    "threepipe": "^0.0.39"
+    "threepipe": "^0.0.47"
   }
 }

package/src/GLTFDracoExportPlugin.ts

@@ -17,9 +17,14 @@ import {
     noiseBumpMaterialGLTFExtension,
     fragmentClippingGLTFExtension,
 } from 'threepipe'
-import {GLTFDracoExporter} from './GLTFDracoExporter'
+import {
+    createGenericExtensionClass,
+    GLTFDracoExporter,
+    GLTFViewerConfigExtensionGP,
+} from './GLTFDracoExporter'
 import {UiObjectConfig} from 'uiconfig.js'
 import {EncoderOptions} from '@gltf-transform/extensions/dist/khr-draco-mesh-compression/encoder'
+import {Extension} from '@gltf-transform/core'
 
 export enum EncoderMethod {
     EDGEBREAKER = 1,
@@ -42,7 +47,7 @@ export class GLTFDracoExportPlugin extends AViewerPluginSync {
      * These are added here, but also added as plugins. Added here by default so that the data is not lost if some plugin is not added in an app.
      * To explicitly remove the data, use `removeExtension` with the name of the extension
      */
-    extraExtensions = [
+    extraExtensions = [ // its array because we want to keep the order of extensions
         [GLTFMaterialsBumpMapExtension.WebGiMaterialsBumpMapExtension, GLTFMaterialsBumpMapExtension.Textures],
         [GLTFMaterialsLightMapExtension.WebGiMaterialsLightMapExtension, GLTFMaterialsLightMapExtension.Textures],
         [GLTFMaterialsAlphaMapExtension.WebGiMaterialsAlphaMapExtension, GLTFMaterialsAlphaMapExtension.Textures],
@@ -69,6 +74,10 @@ export class GLTFDracoExportPlugin extends AViewerPluginSync {
         // SSBevelMaterialExtension
     ] as [string, Record<string, string|number>|undefined][]
 
+    get gltfTransformExtensions(): (typeof Extension)[] {
+        return [GLTFViewerConfigExtensionGP, ...this.extraExtensions.map(e => createGenericExtensionClass(e[0], e[1]))]
+    }
+
     addExtension(name: string, textures?: Record<string, string|number>) {
         const ext = this.extraExtensions.findIndex(e => e[0] === name)
         if (ext >= 0) this.extraExtensions[ext] = [name, textures]
@@ -95,9 +104,7 @@ export class GLTFDracoExportPlugin extends AViewerPluginSync {
             // todo unregister on dispose
             this._viewer.assetManager.importer.registerFile(tempFile) as DRACOLoader2)
         ex.setup(this._viewer, _exporter.extensions)
-        for (const [ext, config] of this.extraExtensions) {
-            ex.createAndAddExtension(ext, config)
-        }
+        ex.addExtension(...this.gltfTransformExtensions)
         return ex
     }
 

package/src/GLTFDracoExporter.ts

@@ -14,14 +14,14 @@ import {
 } from '@gltf-transform/core'
 import {EncoderOptions} from '@gltf-transform/extensions/dist/khr-draco-mesh-compression/encoder'
 import {ALL_EXTENSIONS, KHRDracoMeshCompression} from '@gltf-transform/extensions'
-import {DRACOLoader2, GLTFExporter2, GLTFExporter2Options, GLTFViewerConfigExtension, IExportParser} from 'threepipe'
+import {DRACOLoader2, GLTFExporter2, GLTFExporter2Options, GLTFViewerConfigExtension, IExportWriter} from 'threepipe'
 
 /**
  * GLTF Draco Exporter
  *
  * Extension of GLTFExporter2 that runs the output through gltf-transform for draco compression.
  */
-export class GLTFDracoExporter extends GLTFExporter2 implements IExportParser {
+export class GLTFDracoExporter extends GLTFExporter2 implements IExportWriter {
     public loader?: DRACOLoader2 // required for loading draco libs.
     private _io: WebIO
     private _loadedLibs = false
@@ -34,9 +34,6 @@ export class GLTFDracoExporter extends GLTFExporter2 implements IExportParser {
             encodeSpeed: 5,
         }
         this._io = new WebIO().registerExtensions(ALL_EXTENSIONS)
-            .registerExtensions([
-                GLTFViewerConfigExtensionGP,
-            ])
         this._encoderOptions = encoderOptions
 
         if (loader) {
@@ -67,7 +64,7 @@ export class GLTFDracoExporter extends GLTFExporter2 implements IExportParser {
 
     }
 
-    async parseAsync(obj: any, {compress = false, dracoOptions, ...options}: {compress: boolean, dracoOptions?: EncoderOptions} & GLTFExporter2Options): Promise<Blob> {
+    async parseAsync(obj: any, {compress = false, dracoOptions, ...options}: {compress: boolean, dracoOptions?: EncoderOptions} & GLTFExporter2Options, throwOnError = false): Promise<Blob> {
         if (!this.loader) {
             console.error('GLTFDracoExporter: No DRACOLoader2 instance provided')
             return super.parseAsync(obj, options)
@@ -86,51 +83,61 @@ export class GLTFDracoExporter extends GLTFExporter2 implements IExportParser {
         const uncompressedBlob = await super.parseAsync(uncompressed, ops)
         if (!compress) return uncompressedBlob
 
-        if (!uncompressed) throw new Error('GLTFDracoExporter: gltf is null')
+        try {
+            if (!uncompressed) throw new Error('GLTFDracoExporter: gltf is null')
 
-        let gltf = uncompressed
+            let gltf = uncompressed
 
-        const bytes = (gltf as ArrayBuffer).byteLength || Infinity
+            const bytes = (gltf as ArrayBuffer).byteLength || Infinity
 
-        const iDocument = await (typeof gltf === 'object' && !(gltf as any).byteLength ? this._io.readJSON({
-            json: gltf as GLTF.IGLTF,
-            resources: {},
-        }) : this._io.readBinary(new Uint8Array(gltf as ArrayBuffer)))
+            const iDocument = await (typeof gltf === 'object' && !(gltf as any).byteLength ? this._io.readJSON({
+                json: gltf as GLTF.IGLTF,
+                resources: {},
+            }) : this._io.readBinary(new Uint8Array(gltf as ArrayBuffer)))
 
-        // iDocument.createExtension(GLTFViewerConfigExtensionGP)
-        iDocument.createExtension(KHRDracoMeshCompression)
-            .setRequired(true)
-            .setEncoderOptions({...this._encoderOptions, ...dracoOptions ?? {}})
+            // iDocument.createExtension(GLTFViewerConfigExtensionGP)
+            iDocument.createExtension(KHRDracoMeshCompression)
+                .setRequired(true)
+                .setEncoderOptions({...this._encoderOptions, ...dracoOptions ?? {}})
 
-        if (ops.exportExt === 'glb') {
-            gltf = await this._io.writeBinary(iDocument)
-            if (isFinite(bytes)) {
-                console.log('DRACO Compression ratio: ' + ((gltf as ArrayBuffer).byteLength / bytes).toFixed(5))
-            }
-        } else {
-            const jDoc = await this._io.writeJSON(iDocument)
-            gltf = jDoc.json
-            if (Object.values(jDoc.resources).filter(v => v).length > 0) {
-                console.warn('DRACOExporter: extra resources in resources not supported properly')
-                ;(gltf as any).resources = jDoc.resources
+            if (ops.exportExt === 'glb') {
+                gltf = await this._io.writeBinary(iDocument)
+                if (isFinite(bytes)) {
+                    console.log('DRACO Compression ratio: ' + ((gltf as ArrayBuffer).byteLength / bytes).toFixed(5))
+                }
+            } else {
+                const jDoc = await this._io.writeJSON(iDocument)
+                gltf = jDoc.json
+                if (Object.values(jDoc.resources).filter(v => v).length > 0) {
+                    console.warn('DRACOExporter: extra resources in resources not supported properly')
+                    ;(gltf as any).resources = jDoc.resources
+                }
             }
-        }
 
-        gltf.__isGLTFOutput = true
-        const blob = await super.parseAsync(gltf, ops) as any // this will just convert it to blob because __isGLTFOutput is set (checked in GLTFExporter2)
-        if (!blob) throw new Error('GLTFDracoExporter: blob is null')
-        blob.ext = 'glb'
-        ;(blob as any).__uncompressed = uncompressedBlob
-        return blob
+            gltf.__isGLTFOutput = true
+            const blob = await super.parseAsync(gltf, ops) as any // this will just convert it to blob because __isGLTFOutput is set (checked in GLTFExporter2)
+            if (!blob) throw new Error('GLTFDracoExporter: blob is null')
+            blob.ext = 'glb'
+            ;(blob as any).__uncompressed = uncompressedBlob
+            return blob
+        } catch (e) {
+            if (throwOnError) throw e
+            console.error('Unable to compress glb with DRACO extension, fallback to uncompressed')
+            console.error(e)
+            return uncompressedBlob
+        }
     }
 
-    addExtension(extension: typeof Extension): this {
-        this._io.registerExtensions([extension])
+    addExtension(...extension: (typeof Extension)[]): this {
+        this._io.registerExtensions(extension)
         return this
     }
     createAndAddExtension(name: string, textures?: Record<string, string|number>): this {
         return this.addExtension(createGenericExtensionClass(name, textures))
     }
+    createAndAddExtensions(extensions: [string, Record<string, string|number>|undefined][]): this {
+        return this.addExtension(...extensions.map(e=> createGenericExtensionClass(e[0], e[1])))
+    }
 }
 
 declare module 'threepipe'{
@@ -150,7 +157,7 @@ class ViewerJSONExtensionProperty extends ExtensionProperty {
     protected init(): void {return}
 
 }
-class GLTFViewerConfigExtensionGP extends Extension {
+export class GLTFViewerConfigExtensionGP extends Extension {
     public readonly extensionName = GLTFViewerConfigExtension.ViewerConfigGLTFExtension
     public static readonly EXTENSION_NAME = GLTFViewerConfigExtension.ViewerConfigGLTFExtension
     private _viewerConfig: any = {}

package/src/GLTFSpecGlossinessConverterPlugin.ts

@@ -0,0 +1,126 @@
+import {AViewerPluginSync, DRACOLoader2, GLTFBinaryExtension, GLTFLoader2, GLTFParser, ThreeViewer} from 'threepipe'
+import {Extension, WebIO} from '@gltf-transform/core'
+import {ALL_EXTENSIONS} from '@gltf-transform/extensions'
+import {GLTFDracoExportPlugin} from './GLTFDracoExportPlugin'
+import {metalRough} from '@gltf-transform/functions'
+
+/**
+ * GLTFSpecGlossinessConverterPlugin
+ *
+ * Plugin that adds a gltf loader extension that automatically converts GLTF files with specular glossiness materials ([KHR_materials_pbrSpecularGlossiness](https://kcoley.github.io/glTF/extensions/2.0/Khronos/KHR_materials_pbrSpecularGlossiness/)) to metallic roughness during import.
+ *
+ * To use this plugin, simply add it to the viewer and import a file with specular glossiness materials.
+ * If `confirm` is set to true, a confirmation dialog will be shown before the conversion.
+ */
+export class GLTFSpecGlossinessConverterPlugin extends AViewerPluginSync {
+    enabled = true
+
+    static readonly PluginType = 'GLTFSpecGlossinessConverterPlugin'
+    toJSON: any = undefined
+
+    // dependencies = [GLTFDracoExportPlugin]
+
+    /**
+     * Whether to show the confirmation dialog when loading a GLTF file with specular glossiness materials.
+     * If set to false, the conversion will be done automatically without confirmation.
+     * To disable the conversion entirely, disable the plugin.
+     */
+    confirm = true
+    /**
+     * The message to show in the confirmation dialog when loading a GLTF file with specular glossiness materials.
+     */
+    confirmMessage = 'GLTF Load: This file includes specular glossiness materials, do you want to convert it to metallic roughness before load?'
+
+    private _loaderCreate({loader}: {loader: GLTFLoader2}) {
+        if (!loader.isGLTFLoader2) return
+
+        const ep = this._viewer?.getPlugin(GLTFDracoExportPlugin)
+        if (!ep) {
+            console.error('GLTFSpecGlossinessConverterPlugin requires GLTFDracoExportPlugin in the plugin for extra extensions')
+        }
+        loader.register(gltfKhrPbrSpecularGlossinessConverter(async(m)=>!this.enabled ? false : !this.confirm ? true : this._viewer?.dialog.confirm(this.confirmMessage || m) ?? true, ep?.gltfTransformExtensions))
+    }
+
+    constructor() {
+        super()
+        this._loaderCreate = this._loaderCreate.bind(this)
+    }
+
+    onAdded(v: ThreeViewer) {
+        super.onAdded(v)
+        v.assetManager.importer.addEventListener('loaderCreate', this._loaderCreate as any)
+    }
+
+    onRemove(v: ThreeViewer) {
+        v.assetManager.importer.removeEventListener('loaderCreate', this._loaderCreate as any)
+        return super.onRemove(v)
+    }
+}
+
+
+export const gltfKhrPbrSpecularGlossinessConverter = (confirm?: (s: string)=>Promise<boolean>, extensions?: (typeof Extension)[])=>(parser: GLTFParser)=>({
+    name: 'KHR_materials_pbrSpecularGlossiness',
+    beforeRoot: async() => {
+        try {
+            if (!parser.json.extensionsUsed || !parser.json.extensionsUsed.includes('KHR_materials_pbrSpecularGlossiness')) return
+            const doConfirm = parser.importOptions?.confirmSpecGlossConversion ?? true
+            if (doConfirm && confirm && !await confirm('Convert KHR_materials_pbrSpecularGlossiness to KHR_materials_pbrMetallicRoughness?')) return
+
+            const json = parser.json
+            const io = new WebIO().registerExtensions(ALL_EXTENSIONS).registerExtensions(extensions ?? [])
+
+            if (parser.extensions.KHR_draco_mesh_compression) {
+                const dracoLoader = parser.extensions.KHR_draco_mesh_compression.dracoLoader as DRACOLoader2
+                if (!dracoLoader.isDRACOLoader2) {
+                    console.error('gltfKhrPbrSpecularGlossinessConverter: DRACOLoader2 required')
+                    return
+                }
+                const decoder = await dracoLoader.initDecoder()
+                io.registerDependencies({
+                    // 'draco3d.encoder': libs[0],
+                    ['draco3d.decoder']: decoder,
+                })
+            }
+
+            const document = await io.readJSON({
+                json, resources: {
+                    ['@glb.bin']: new Uint8Array(parser.extensions.KHR_binary_glTF?.body),
+                },
+            })
+
+
+            // Convert materials.
+            await document.transform(metalRough())
+
+            // no need to compress
+            if (parser.extensions.KHR_draco_mesh_compression) {
+                document.getRoot().listExtensionsUsed().find(e => e.extensionName === 'KHR_draco_mesh_compression')?.dispose()
+            }
+
+            // Write back to GLB.
+            const res = await io.writeBinary(document)
+            const binaryExtension = new GLTFBinaryExtension(res.buffer as any)
+            parser.extensions.KHR_binary_glTF = binaryExtension
+            parser.json = JSON.parse(binaryExtension.content)
+
+            // this doesn't work for some reason
+            // const res = await io.writeJSON(document, {format: Format.GLB})
+            // parser.extensions.KHR_binary_glTF.data = res.resources['@glb.bin'].buffer as any
+            // parser.extensions.KHR_binary_glTF.content = res.json
+            // parser.json = res.json
+        } catch (e) {
+            console.error(e)
+            return
+        }
+    },
+})
+
+declare module 'threepipe'{
+    interface ImportAddOptions{
+        /**
+         * Whether to confirm the conversion of specular glossiness materials to metallic roughness.
+         * @default true
+         */
+        confirmSpecGlossConversion?: boolean
+    }
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export {GLTFDracoExporter, createGenericExtensionClass} from './GLTFDracoExporter'
-export {GLTFDracoExportPlugin} from './GLTFDracoExportPlugin'
+export {GLTFDracoExportPlugin, EncoderMethod} from './GLTFDracoExportPlugin'
+export {GLTFSpecGlossinessConverterPlugin, gltfKhrPbrSpecularGlossinessConverter} from './GLTFSpecGlossinessConverterPlugin'