@threlte/gltf 3.0.0 → 3.0.2

package/src/index.js

@@ -1,82 +1,54 @@
 import 'jsdom-global'
-import fs from 'fs'
-import path from 'path'
-import transform from './utils/transform.js'
-// import { GLTFLoader, DRACOLoader } from 'three-stdlib'
+import fs from 'node:fs/promises'
+import path from 'node:path'
 import * as prettier from 'prettier'
-import THREE from 'three'
-
-global.THREE = THREE
-
-import './bin/GLTFLoader.js'
-import DracoLoader from './bin/DRACOLoader.js'
-THREE.DRACOLoader.getDecoderModule = () => {}
-
-import parse from './utils/parser.js'
-
-const gltfLoader = new THREE.GLTFLoader()
-gltfLoader.setDRACOLoader(new DracoLoader())
-
-function toArrayBuffer(buf) {
-  var ab = new ArrayBuffer(buf.length)
-  var view = new Uint8Array(ab)
-  for (var i = 0; i < buf.length; ++i) view[i] = buf[i]
-  return ab
-}
-
-export default function (file, output, options) {
-  function getFilePath(file) {
-    return `${options.root ?? '/'}${options.root ? path.basename(file) : path.normalize(file)}`
+import { transform } from './utils/transform.js'
+import { parse } from './utils/parser.js'
+import { GLTFLoader } from './bin/GLTFLoader.js'
+import { DRACOLoader } from './bin/DRACOLoader.js'
+
+globalThis.self = globalThis
+
+const gltfLoader = new GLTFLoader()
+const draco = new DRACOLoader()
+gltfLoader.setDRACOLoader(draco)
+
+export default async function (file, output, options) {
+  try {
+    await fs.stat(file)
+  } catch {
+    throw new Error(`${file} does not exist.`)
   }
 
-  return new Promise((resolve, reject) => {
-    const stream = fs.createWriteStream(output)
-    stream.once('open', async (fd) => {
-      if (!fs.existsSync(file)) {
-        reject(file + ' does not exist.')
-      } else {
-        // Process GLTF
-        if (options.transform || options.instance || options.instanceall) {
-          const { name } = path.parse(file)
-          const transformOut = path.join(name + '-transformed.glb')
-          await transform(file, transformOut, options)
-          file = transformOut
-        }
-        resolve()
-
-        const filePath = getFilePath(file)
-        const data = fs.readFileSync(file)
-        const arrayBuffer = toArrayBuffer(data)
+  // Process GLTF
+  if (options.transform || options.instance || options.instanceall) {
+    const { name } = path.parse(file)
+    const transformOut = path.join(`${name}-transformed.glb`)
+    await transform(file, transformOut, options)
+    file = transformOut
+  }
 
-        gltfLoader.parse(
-          arrayBuffer,
-          '',
-          async (gltf) => {
-            const raw = parse(filePath, gltf, options)
-            try {
-              const prettiered = await prettier.format(raw, {
-                singleQuote: true,
-                trailingComma: 'none',
-                semi: false,
-                printWidth: 100,
-                parser: 'svelte',
-                plugins: ['prettier-plugin-svelte'],
-                overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
-                singleAttributePerLine: true
-              })
-              stream.write(prettiered)
-              stream.end()
-              resolve()
-            } catch (error) {
-              console.error(error)
-              stream.write(raw)
-              stream.end()
-              reject(error)
-            }
-          },
-          reject
-        )
+  const filePath = `${options.root ?? '/'}${options.root ? path.basename(file) : path.normalize(file)}`
+  const data = await fs.readFile(file)
+  const gltf = await gltfLoader.parseAsync(data.buffer)
+
+  const raw = parse(filePath, gltf, options)
+
+  const prettiered = await prettier.format(raw, {
+    singleQuote: true,
+    trailingComma: 'es5',
+    semi: false,
+    printWidth: 100,
+    parser: 'svelte',
+    plugins: ['prettier-plugin-svelte'],
+    overrides: [
+      {
+        files: '*.svelte',
+        options: { parser: 'svelte' }
       }
-    })
+    ],
+    singleAttributePerLine: true
   })
+
+  await fs.writeFile(output, prettiered)
 }

package/src/utils/exports.js

@@ -1,5 +1,5 @@
 import parse from './parser'
 import transform from './transform'
-import GLTFStructureLoader from './glftLoader'
+import { GLTFLoader as GLTFStructureLoader } from '../bin/GLTFLoader.js'
 
 export { transform, parse, GLTFStructureLoader }

package/src/utils/isVarName.js

@@ -1,4 +1,4 @@
-const isVarName = (str) => {
+export function isVarName(str) {
   // eslint-disable-next-line no-misleading-character-class
   const regex = new RegExp(
     // eslint-disable-next-line no-misleading-character-class
@@ -6,5 +6,3 @@ const isVarName = (str) => {
   )
   return regex.test(str)
 }
-
-export default isVarName

package/src/utils/parser.js

@@ -1,5 +1,5 @@
-import THREE from 'three'
-import isVarName from './isVarName.js'
+import * as THREE from 'three'
+import { isVarName } from './isVarName.js'
 
 /**
  * @param {string} fileName
@@ -7,7 +7,12 @@ import isVarName from './isVarName.js'
  * @param {import('./Options.d.ts').Options} options
  * @returns {string}
  */
-function parse(fileName, gltf, options = {}) {
+export function parse(fileName, gltf, options = {}) {
+  if (gltf.isObject3D) {
+    // Wrap scene in a GLTF Structure
+    gltf = { scene: gltf, animations: [], parser: { json: {} } }
+  }
+
   const url = fileName
   const animations = gltf.animations
   const hasAnimations = animations.length > 0
@@ -25,38 +30,40 @@ function parse(fileName, gltf, options = {}) {
 
   function uniqueName(attempt, index = 0) {
     const newAttempt = index > 0 ? attempt + index : attempt
-    if (Object.values(duplicates.geometries).find(({ name }) => name === newAttempt) === undefined)
+    if (
+      Object.values(duplicates.geometries).find(({ name }) => name === newAttempt) === undefined
+    ) {
       return newAttempt
-    else return uniqueName(attempt, index + 1)
+    } else {
+      return uniqueName(attempt, index + 1)
+    }
   }
 
   gltf.scene.traverse((child) => {
-    if (child.isMesh) {
-      if (child.material) {
-        if (!duplicates.materials[child.material.name]) {
-          duplicates.materials[child.material.name] = 1
-        } else {
-          duplicates.materials[child.material.name]++
-        }
+    if (!child.isMesh) {
+      return
+    }
+
+    if (child.material) {
+      if (!duplicates.materials[child.material.name]) {
+        duplicates.materials[child.material.name] = 1
+      } else {
+        duplicates.materials[child.material.name]++
       }
     }
-  })
 
-  gltf.scene.traverse((child) => {
-    if (child.isMesh) {
-      if (child.geometry) {
-        const key = child.geometry.uuid + child.material?.name ?? ''
-        if (!duplicates.geometries[key]) {
-          let name = (child.name || 'Part').replace(/[^a-zA-Z]/g, '')
-          name = name.charAt(0).toUpperCase() + name.slice(1)
-          duplicates.geometries[key] = {
-            count: 1,
-            name: uniqueName(name),
-            node: 'nodes' + sanitizeName(child.name)
-          }
-        } else {
-          duplicates.geometries[key].count++
+    if (child.geometry) {
+      const key = child.geometry.uuid + child.material?.name ?? ''
+      if (!duplicates.geometries[key]) {
+        let name = (child.name || 'Part').replace(/[^a-zA-Z]/g, '')
+        name = name.charAt(0).toUpperCase() + name.slice(1)
+        duplicates.geometries[key] = {
+          count: 1,
+          name: uniqueName(name),
+          node: 'nodes' + sanitizeName(child.name)
         }
+      } else {
+        duplicates.geometries[key].count++
       }
     }
   })
@@ -64,7 +71,9 @@ function parse(fileName, gltf, options = {}) {
   // Prune duplicate geometries
   for (let key of Object.keys(duplicates.geometries)) {
     const duplicate = duplicates.geometries[key]
-    if (duplicate.count === 1) delete duplicates.geometries[key]
+    if (duplicate.count === 1) {
+      delete duplicates.geometries[key]
+    }
   }
 
   function sanitizeName(name) {
@@ -72,17 +81,17 @@ function parse(fileName, gltf, options = {}) {
   }
 
   const rNbr = (number) => {
-    return parseFloat(number.toFixed(Math.round(options.precision || 2)))
+    return Number.parseFloat(number.toFixed(Math.round(options.precision || 2)))
   }
 
   const rDeg = (number) => {
-    const abs = Math.abs(Math.round(parseFloat(number) * 100000))
+    const abs = Math.abs(Math.round(Number.parseFloat(number) * 100000))
     for (let i = 1; i <= 10; i++) {
-      if (abs === Math.round(parseFloat(Math.PI / i) * 100000))
+      if (abs === Math.round(Number.parseFloat(Math.PI / i) * 100000))
         return `${number < 0 ? '-' : ''}Math.PI${i > 1 ? ' / ' + i : ''}`
     }
     for (let i = 1; i <= 10; i++) {
-      if (abs === Math.round(parseFloat(Math.PI * i) * 100000))
+      if (abs === Math.round(Number.parseFloat(Math.PI * i) * 100000))
         return `${number < 0 ? '-' : ''}Math.PI${i > 1 ? ' * ' + i : ''}`
     }
     return rNbr(number)
@@ -125,10 +134,20 @@ function parse(fileName, gltf, options = {}) {
 
   function getType(obj) {
     let type = obj.type.charAt(0).toLowerCase() + obj.type.slice(1)
+
     // Turn object3d's into groups, it should be faster according to the threejs docs
-    if (type === 'object3D') type = 'group'
-    if (type === 'perspectiveCamera') type = 'PerspectiveCamera'
-    if (type === 'orthographicCamera') type = 'OrthographicCamera'
+    if (type === 'object3D') {
+      return 'group'
+    }
+
+    if (type === 'perspectiveCamera') {
+      return 'PerspectiveCamera'
+    }
+
+    if (type === 'orthographicCamera') {
+      return 'OrthographicCamera'
+    }
+
     return type
   }
 
@@ -261,7 +280,6 @@ function parse(fileName, gltf, options = {}) {
       const firstProps = handleThrelteProps(first)
       const regex = /([a-z-A-Z]*)={([a-zA-Z0-9\.\[\]\-\,\ \/]*)}/g
       const keys1 = [...result.matchAll(regex)].map(([, match]) => match)
-      const values1 = [...result.matchAll(regex)].map(([, , match]) => match)
       const keys2 = [...firstProps.matchAll(regex)].map(([, match]) => match)
 
       /** Double negative rotations
@@ -467,7 +485,7 @@ function parse(fileName, gltf, options = {}) {
   const scene = printThrelte(gltf.scene)
 
   const useGltfOptions = {
-    draco: options.transform && options.draco ? (options.draco ? options.transform : true) : false
+    draco: options.transform || options.draco
   }
 
   const imports = `
@@ -489,7 +507,7 @@ function parse(fileName, gltf, options = {}) {
 
   const useGltf = `${options.suspense ? 'suspend(' : ''}useGltf${
     options.types ? '<GLTFResult>' : ''
-  }('${url}'${useGltfOptions.draco ? `, { dracoLoader: useDraco(${typeof useGltfOptions.draco === 'string' ? `'${useGltfOptions.draco}'` : ''}) }` : ''})${
+  }('${url}'${useGltfOptions.draco ? `, { dracoLoader: useDraco(${typeof options.draco === 'string' ? `'${useGltfOptions.draco}'` : ''}) }` : ''})${
     options.suspense ? ')' : ''
   }`
 
@@ -575,5 +593,3 @@ ${
 		</${hasAnimations ? 'T' : 'T.Group'}>
 	`
 }
-
-export default parse

package/src/utils/transform.js

@@ -1,19 +1,25 @@
-import { NodeIO } from '@gltf-transform/core'
+import { Logger, NodeIO } from '@gltf-transform/core'
 import {
+  reorder,
+  palette,
   simplify,
+  join,
   weld,
   dedup,
   resample,
   prune,
   textureCompress,
-  draco
+  draco,
+  sparse,
+  flatten
 } from '@gltf-transform/functions'
 import { ALL_EXTENSIONS } from '@gltf-transform/extensions'
 import { MeshoptDecoder, MeshoptEncoder, MeshoptSimplifier } from 'meshoptimizer'
+import { ready as resampleReady, resample as resampleWASM } from 'keyframe-resample'
 import draco3d from 'draco3dgltf'
 import sharp from 'sharp'
 
-async function transform(file, output, config = {}) {
+export async function transform(file, output, config = {}) {
   await MeshoptDecoder.ready
   await MeshoptEncoder.ready
   const io = new NodeIO().registerExtensions(ALL_EXTENSIONS).registerDependencies({
@@ -22,27 +28,37 @@ async function transform(file, output, config = {}) {
     'meshopt.decoder': MeshoptDecoder,
     'meshopt.encoder': MeshoptEncoder
   })
+  if (config.console) {
+    io.setLogger(new Logger(Logger.Verbosity.ERROR))
+  } else {
+    io.setLogger(new Logger(Logger.Verbosity.WARN))
+  }
 
   const document = await io.read(file)
   const resolution = config.resolution ?? 1024
+  const normalResolution = Math.max(resolution, 2048)
 
-  const functions = [
-    // Losslessly resample animation frames.
-    resample(),
+  const functions = []
+
+  if (!config.keepmaterials) {
+    functions.push(palette({ min: 5 }))
+  }
+
+  functions.push(
+    reorder({ encoder: MeshoptEncoder }),
     // Remove duplicate vertex or texture data, if any.
     dedup(),
-    // Remove unused nodes, textures, or other data.
-    prune(),
-    // Resize and convert textures (using webp and sharp)
-    textureCompress({ targetFormat: 'webp', encoder: sharp, resize: [resolution, resolution] }),
-    // Add Draco compression.
-    draco()
-  ]
+    flatten()
+  )
+
+  if (!config.keepmeshes) {
+    functions.push(join())
+  }
+
+  functions.push(weld())
 
   if (config.simplify) {
     functions.push(
-      // Weld vertices
-      weld({ tolerance: config.weld ?? 0.0001 }),
       // Simplify meshes
       simplify({
         simplifier: MeshoptSimplifier,
@@ -52,9 +68,54 @@ async function transform(file, output, config = {}) {
     )
   }
 
+  functions.push(
+    // Losslessly resample animation frames.
+    resample({ ready: resampleReady, resample: resampleWASM }),
+    // Remove unused nodes, textures, or other data.
+    prune({ keepAttributes: false, keepLeaves: false }),
+    sparse()
+  )
+
+  if (config.degrade) {
+    // Custom per-file resolution
+    functions.push(
+      textureCompress({
+        encoder: sharp,
+        pattern: new RegExp(`^(?=${config.degrade}).*$`),
+        targetFormat: config.format,
+        resize: [degradeResolution, degradeResolution]
+      }),
+      textureCompress({
+        encoder: sharp,
+        pattern: new RegExp(`^(?!${config.degrade}).*$`),
+        targetFormat: config.format,
+        resize: [resolution, resolution]
+      })
+    )
+  } else {
+    // Keep normal maps near lossless
+    functions.push(
+      textureCompress({
+        slots: /^(?!normalTexture).*$/, // exclude normal maps
+        encoder: sharp,
+        targetFormat: config.format,
+        resize: [resolution, resolution]
+      }),
+      textureCompress({
+        slots: /^(?=normalTexture).*$/, // include normal maps
+        encoder: sharp,
+        targetFormat: 'jpeg',
+        resize: [normalResolution, normalResolution]
+      })
+    )
+  }
+
+  functions.push(
+    // Add Draco compression.
+    draco()
+  )
+
   await document.transform(...functions)
 
   await io.write(output, document)
 }
-
-export default transform

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    // ESM out, modern syntax in source
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+
+    // Stricter, modern TS defaults
+    "strict": true,
+    "noImplicitOverride": true,
+    "noUncheckedIndexedAccess": true,
+    "useDefineForClassFields": true,
+    "verbatimModuleSyntax": true,
+    "exactOptionalPropertyTypes": true,
+
+    // Type ergonomics
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+
+    "noEmit": true,
+    // Declarations: keep off in the main tsconfig; use a build tsconfig to emit types
+    "declarationMap": false,
+    "allowJs": true,
+
+    // Svelte types
+    "types": ["svelte"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.js"],
+  "exclude": ["dist", "node_modules"]
+}

package/src/utils/glftLoader.js

@@ -1,4 +0,0 @@
-const THREE = (global.THREE = require('three'))
-require('../bin/GLTFLoader')
-
-module.exports = THREE.GLTFLoader