Merge branch 'master' into v9

pmndrs · Sep 17, 2023 · 795fa93 · 795fa93
2 parents f681076 + 5d0a70c
commit 795fa93
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 42 deletions.
diff --git a/packages/fiber/CHANGELOG.md b/packages/fiber/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.14.2
+
+### Patch Changes
+
+- 33e8baef: fix: native perf, loader types
+
+## 8.14.1
+
+### Patch Changes
+
+- c99907bf: fix(native): prefer local uri for fs
+
 ## 8.14.0
 
 ### Minor Changes

diff --git a/packages/fiber/src/core/hooks.tsx b/packages/fiber/src/core/hooks.tsx
@@ -81,7 +81,7 @@ export interface Loader<T> extends THREE.Loader {
     url: string | string[] | string[][],
     onLoad?: (result: T, ...args: any[]) => void,
     onProgress?: (event: ProgressEvent) => void,
-    onError?: (event: ErrorEvent) => void,
+    onError?: (event: unknown) => void,
   ): unknown
 }
 
@@ -108,10 +108,10 @@ function loadingFn<T>(extensions?: Extensions<T>, onProgress?: (event: ProgressE
           new Promise<LoaderResult<T>>((res, reject) =>
             loader.load(
               input,
-              (data: any) =>
+              (data) =>
                 res(data?.scene instanceof THREE.Object3D ? Object.assign(data, buildGraph(data.scene)) : data),
               onProgress,
-              (error) => reject(new Error(`Could not load ${input}: ${error.message}`)),
+              (error) => reject(new Error(`Could not load ${input}: ${(error as ErrorEvent)?.message}`)),
             ),
           ),
       ),

diff --git a/packages/fiber/src/native/Canvas.tsx b/packages/fiber/src/native/Canvas.tsx
@@ -143,7 +143,7 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<View, Props>(
 
     return (
       <View {...props} ref={viewRef} onLayout={onLayout} style={{ flex: 1, ...style }} {...bind}>
-        {width > 0 && <GLView onContextCreate={onContextCreate} style={StyleSheet.absoluteFill} />}
+        {width > 0 && <GLView msaaSamples={0} onContextCreate={onContextCreate} style={StyleSheet.absoluteFill} />}
       </View>
     )
   },

diff --git a/packages/fiber/src/native/polyfills.ts b/packages/fiber/src/native/polyfills.ts
@@ -33,10 +33,10 @@ export function polyfills() {
     })
   }
 
-  async function getAsset(input: string | number): Promise<Asset> {
+  async function getAsset(input: string | number): Promise<string> {
     if (typeof input === 'string') {
-      // Point to storage if preceded with fs path
-      if (input.startsWith('file:')) return { localUri: input } as Asset
+      // Don't process storage or data uris
+      if (input.startsWith('file:') || input.startsWith('data:')) return input
 
       // Unpack Blobs from react-native BlobManager
       if (input.startsWith('blob:')) {
@@ -56,33 +56,23 @@ export function polyfills() {
           reader.readAsText(blob)
         })
 
-        input = `data:${blob.type};base64,${data}`
-      }
-
-      // Create safe URI for JSI
-      if (input.startsWith('data:')) {
-        const [header, data] = input.split(',')
-        const [, type] = header.split('/')
-
-        const localUri = fs.cacheDirectory + uuidv4() + `.${type}`
-        await fs.writeAsStringAsync(localUri, data, { encoding: fs.EncodingType.Base64 })
-
-        return { localUri } as Asset
+        return `data:${blob.type};base64,${data}`
       }
     }
 
     // Download bundler module or external URL
-    const asset = Asset.fromModule(input)
+    const asset = await Asset.fromModule(input).downloadAsync()
+    let uri = asset.localUri || asset.uri
 
     // Unpack assets in Android Release Mode
-    if (!asset.uri.includes(':')) {
-      const localUri = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`
-      await fs.copyAsync({ from: asset.uri, to: localUri })
-      return { localUri } as Asset
+    if (!uri.includes(':')) {
+      const file = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`
+      const stats = await fs.getInfoAsync(file, { size: false })
+      if (!stats.exists) await fs.copyAsync({ from: uri, to: file })
+      uri = file
     }
 
-    // Otherwise, resolve from registry
-    return asset.downloadAsync()
+    return uri
   }
 
   // Don't pre-process urls, let expo-asset generate an absolute URL
@@ -96,21 +86,24 @@ export function polyfills() {
     const texture = new THREE.Texture()
 
     getAsset(url)
-      .then(async (asset: Asset) => {
-        const uri = asset.localUri || asset.uri
-
-        if (!asset.width || !asset.height) {
-          const { width, height } = await new Promise<{ width: number; height: number }>((res, rej) =>
-            Image.getSize(uri, (width, height) => res({ width, height }), rej),
-          )
-          asset.width = width
-          asset.height = height
+      .then(async (uri) => {
+        // Create safe URI for JSI
+        if (uri.startsWith('data:')) {
+          const [header, data] = uri.split(',')
+          const [, type] = header.split('/')
+
+          uri = fs.cacheDirectory + uuidv4() + `.${type}`
+          await fs.writeAsStringAsync(uri, data, { encoding: fs.EncodingType.Base64 })
         }
 
+        const { width, height } = await new Promise<{ width: number; height: number }>((res, rej) =>
+          Image.getSize(uri, (width, height) => res({ width, height }), rej),
+        )
+
         texture.image = {
           data: { localUri: uri },
-          width: asset.width,
-          height: asset.height,
+          width,
+          height,
         }
         texture.flipY = true
         texture.unpackAlignment = 1
@@ -134,12 +127,10 @@ export function polyfills() {
     const request = new XMLHttpRequest()
 
     getAsset(url)
-      .then(async (asset) => {
-        let uri = asset.localUri || asset.uri
-
+      .then(async (uri) => {
         // Make FS paths web-safe
-        if (asset.uri.startsWith('file://')) {
-          const data = await fs.readAsStringAsync(asset.uri, { encoding: fs.EncodingType.Base64 })
+        if (uri.startsWith('file://')) {
+          const data = await fs.readAsStringAsync(uri, { encoding: fs.EncodingType.Base64 })
           uri = `data:application/octet-stream;base64,${data}`
         }
 

diff --git a/readme.md b/readme.md
@@ -245,6 +245,8 @@ There is a vibrant and extensive eco system around three-fiber, full of librarie
 - [`maath`](https://github.com/pmndrs/maath) &ndash; a kitchen sink for math helpers
 - [`miniplex`](https://github.com/hmans/miniplex) &ndash; ECS (entity management system)
 - [`composer-suite`](https://github.com/hmans/composer-suite) &ndash; composing shaders, particles, effects and game mechanics
+- [`triplex`](https://triplex.dev/) &ndash; scene editor for react-three-fiber
+- [`koestlich`](https://github.com/coconut-xr/koestlich) &ndash; UI component library for react-three-fiber
 
 # How to contribute