@threepipe/plugin-gltf-transform 0.1.0 → 0.1.3

package/package.json

@@ -1,8 +1,19 @@
 {
   "name": "@threepipe/plugin-gltf-transform",
   "description": "Utility plugins for threepipe using gltf-transform to optimize/compress glTF files.",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "dependencies": {},
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/": {
+      "import": "./dist/",
+      "require": "./dist/"
+    }
+  },
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -26,9 +37,10 @@
   "homepage": "https://github.com/repalash/threepipe#readme",
   "repository": {
     "type": "git",
-    "url": "git://github.com/repalash/threepipe.git"
+    "url": "git://github.com/repalash/threepipe.git",
+    "directory": "plugins/gltf-transform"
   },
   "peerDependencies": {
-    "threepipe": "^0.0.32"
+    "threepipe": "^0.0.39"
   }
 }

package/src/GLTFDracoExportPlugin.ts

@@ -1,8 +1,6 @@
 import {
     AssetExporterPlugin,
     AViewerPluginSync,
-    ClearcoatTintPlugin,
-    CustomBumpMapPlugin,
     DRACOLoader2,
     generateUUID,
     GLTFLightExtrasExtension,
@@ -12,8 +10,12 @@ import {
     GLTFMaterialsDisplacementMapExtension,
     GLTFMaterialsLightMapExtension,
     GLTFObject3DExtrasExtension,
-    NoiseBumpMaterialPlugin,
+    IExporter,
     ThreeViewer,
+    clearCoatTintGLTFExtension,
+    customBumpMapGLTFExtension,
+    noiseBumpMaterialGLTFExtension,
+    fragmentClippingGLTFExtension,
 } from 'threepipe'
 import {GLTFDracoExporter} from './GLTFDracoExporter'
 import {UiObjectConfig} from 'uiconfig.js'
@@ -32,62 +34,92 @@ export enum EncoderMethod {
  *
  * @category Plugins
  */
-export class GLTFDracoExportPlugin extends AViewerPluginSync<''> {
+export class GLTFDracoExportPlugin extends AViewerPluginSync {
     public static readonly PluginType = 'GLTFDracoExportPlugin'
     enabled = true
 
+    /**
+     * 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 = [
+        [GLTFMaterialsBumpMapExtension.WebGiMaterialsBumpMapExtension, GLTFMaterialsBumpMapExtension.Textures],
+        [GLTFMaterialsLightMapExtension.WebGiMaterialsLightMapExtension, GLTFMaterialsLightMapExtension.Textures],
+        [GLTFMaterialsAlphaMapExtension.WebGiMaterialsAlphaMapExtension, GLTFMaterialsAlphaMapExtension.Textures],
+        [GLTFMaterialsDisplacementMapExtension.WebGiMaterialsDisplacementMapExtension, GLTFMaterialsDisplacementMapExtension.Textures],
+        [customBumpMapGLTFExtension.name, customBumpMapGLTFExtension.textures],
+        [GLTFLightExtrasExtension.WebGiLightExtrasExtension, GLTFLightExtrasExtension.Textures],
+        [GLTFObject3DExtrasExtension.WebGiObject3DExtrasExtension, GLTFObject3DExtrasExtension.Textures],
+        [GLTFMaterialExtrasExtension.WebGiMaterialExtrasExtension, GLTFMaterialExtrasExtension.Textures],
+        [clearCoatTintGLTFExtension.name, clearCoatTintGLTFExtension.textures],
+        [noiseBumpMaterialGLTFExtension.name, noiseBumpMaterialGLTFExtension.textures],
+        [fragmentClippingGLTFExtension.name, fragmentClippingGLTFExtension.textures],
+
+        // extenal plugins
+
+        // AnisotropyMaterialExtension
+        ['WEBGI_materials_anisotropy', {
+            anisotropyDirection: 'RGB',
+        }],
+        // todo port
+        // DiamondMaterialExtension
+        // AnimationMarkersExtension
+        // ThinFilmLayerMaterialExtension
+        // TriplanarMappingMaterialExtension
+        // SSBevelMaterialExtension
+    ] as [string, Record<string, string|number>|undefined][]
+
+    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]
+        else this.extraExtensions.push([name, textures])
+    }
+
+    /**
+     * Note - don't remove an extension when removing a plugin.
+     *
+     * extensions can be removed if you don't want to save the data of some plugin when transforming glb. But since this is not desirable in most cases, it is not recommended.
+     * @param name
+     */
+    removeExtension(name: string) {
+        const ext = this.extraExtensions.findIndex(e => e[0] === name)
+        if (ext >= 0) this.extraExtensions.splice(ext, 1)
+    }
+
+    private _lastExporter?: IExporter['ctor'] = undefined
+
+    protected _ctor: IExporter['ctor'] = (_, _exporter) => {
+        if (!this._viewer) throw new Error('Viewer not set')
+        const tempFile = generateUUID() + '.drc' // dummy
+        const ex = new GLTFDracoExporter({},
+            // 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)
+        }
+        return ex
+    }
+
     onAdded(viewer: ThreeViewer): void {
         super.onAdded(viewer)
-        const importer = viewer.assetManager.importer
         const exporter = viewer.assetManager.exporter
 
-        const glbExporter = exporter.getExporter('glb')
-        if (glbExporter) exporter.removeExporter(glbExporter)
-
-        // todo remove exporter and add back the old one on plugin remove.
-        exporter.addExporter({
-            ...glbExporter || {
+        let glbExporter = exporter.getExporter('glb')
+        this._lastExporter = glbExporter?.ctor
+        if (!glbExporter) {
+            console.error('GLTFDracoExportPlugin: GLB exporter not found in AssetManager.exporter, creating a new one.')
+            glbExporter = {
                 ext: ['glb', 'gltf'],
                 extensions: [],
-            }, // for extensions
-            ctor: (_, _exporter) => {
-                const tempFile = generateUUID() + '.drc' // dummy
-                const ex = new GLTFDracoExporter({},
-                    // todo unregister on dispose
-                    importer.registerFile(tempFile) as DRACOLoader2)
-                ex.setup(viewer, _exporter.extensions)
-                ex.createAndAddExtension(GLTFMaterialsBumpMapExtension.WebGiMaterialsBumpMapExtension, {
-                    bumpTexture: 'R',
-                })
-                ex.createAndAddExtension(GLTFMaterialsLightMapExtension.WebGiMaterialsLightMapExtension, {
-                    lightMapTexture: 'RGB',
-                })
-                ex.createAndAddExtension(GLTFMaterialsAlphaMapExtension.WebGiMaterialsAlphaMapExtension, {
-                    alphaTexture: 'G',
-                })
-                ex.createAndAddExtension(GLTFMaterialsDisplacementMapExtension.WebGiMaterialsDisplacementMapExtension, {
-                    displacementTexture: 'R',
-                })
-                ex.createAndAddExtension(CustomBumpMapPlugin.CUSTOM_BUMP_MAP_GLTF_EXTENSION, {
-                    customBumpMap: 'RGB',
-                })
-                ex.createAndAddExtension(GLTFLightExtrasExtension.WebGiLightExtrasExtension)
-                ex.createAndAddExtension(GLTFObject3DExtrasExtension.WebGiObject3DExtrasExtension)
-                ex.createAndAddExtension(GLTFMaterialExtrasExtension.WebGiMaterialExtrasExtension)
-                ex.createAndAddExtension(ClearcoatTintPlugin.CLEARCOAT_TINT_GLTF_EXTENSION)
-                ex.createAndAddExtension(NoiseBumpMaterialPlugin.NOISE_BUMP_MATERIAL_GLTF_EXTENSION)
-                // todo port
-                // DiamondMaterialExtension
-                // AnimationMarkersExtension
-                // AnisotropyMaterialExtension
-                // ThinFilmLayerMaterialExtension
-                // TriplanarMappingMaterialExtension
-                // SSBevelMaterialExtension
-                return ex
-            },
-        })
+                ctor: this._ctor,
+            }
+            exporter.addExporter(glbExporter)
+        } else {
+            glbExporter.ctor = this._ctor
+        }
 
-        // for ui
+        // for ui. todo use viewer.forPlugin
         const exportPlugin = viewer.getPlugin(AssetExporterPlugin)
         if (exportPlugin) {
             Object.assign(exportPlugin.exportOptions, {
@@ -114,6 +146,15 @@ export class GLTFDracoExportPlugin extends AViewerPluginSync<''> {
         }
     }
 
+    onRemove(viewer: ThreeViewer) {
+        const exporter = viewer.assetManager.exporter
+        const glbExporter = exporter.getExporter('glb')
+        if (glbExporter && this._lastExporter) {
+            glbExporter.ctor = this._lastExporter
+        }
+        super.onRemove(viewer)
+    }
+
     protected _makeUi = (exporter: AssetExporterPlugin)=>[
         {
             type: 'checkbox',

package/src/GLTFDracoExporter.ts

@@ -67,7 +67,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,42 +86,49 @@ 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 {