React Native: load a GLB with embedded textures #1972
Comments
axeldelafosse
changed the title
|
I did this with r133 but with r134 three swapped over to the fetch API under the hood which react-native's polyfill doesn't implement correctly (no streaming, blob/array buffer support). Maybe we can create a FileLoader in three-stdlib that could progressively fallback to the old API or just prefer to use loaders' parse methods. I don't want the API to change from web if we can help it though. |
Good to know, thanks! Just saw that you use r133 in your example app.
Yeah that's a good idea. Happy to help!
Me neither. Thank you very much for your reactivity and for your work on React Native support. Really appreciate it. |
|
@axeldelafosse could you please share your sample...I can't get a working sample with beta version...I have issues when try to install dependency. thanks! :-) |
|
@wiulma, I'd see the react-native example in the docs. You'd roll back three to r133 for full compatibility as described here though. |
|
hi @CodyJasonBennett . thanks for the quick reply. I'm trying to get it working since some hours... I have a conflict in npm install with fiber v8, react native 064 or 0.65 and react@rc. So I'm trying different configurations or versions, but without any luck. I'm pretty sure I'm doing something wrong, but I can't address it. Maybe it's because I started from a bare react native project. and I manually installed expo modules, but in any case the dependency conflict is between react and fiber. |
|
@wiulma, react 18 isn't released yet so it won't resolve but you can pass |
|
I had to specify it because |
|
@wiulma use yarn instead of npm |
CodyJasonBennett
added
enhancement
|
I went and polyfilled loader behavior in #1994 so loaders should behave correctly with and without useLoader. Only loader not covered is Will release a beta (or release-candidate at this point, just waiting on React 18), but in the meantime you can try it by pointing R3F to the PR in your package.json:
Leaving this issue open until we roll this out. |
|
Thank you Cody! It's working well on iOS 💯 We are experiencing some issues on Android tho, it looks like |
|
Yes, what's happening on Android? |
|
Here is the crash report: |
|
And this is the crash report when running from Expo Go (same error): |
Why are you pinning Edit: using the same |
|
That doesn't look correct, looks like a mistake. Same for We'll have to unpin |
|
I tried tweaking this in #2004. Hopefully, that should work without issue: "@react-three/fiber": "https://pkg.csb.dev/pmndrs/react-three-fiber/commit/673ffe4e/@react-three/fiber" |
|
Thanks for the quick turnaround! Unfortunately it gives the same error as before. The solution looks correct but I don't think this works as expected: |
|
Can you create an issue for this? We're not getting dependencies quite right and I'd like to get more eyes on this. |
|
Yeah sure :) Here it is: #2013 |
|
Hey @CodyJasonBennett! I'm working with Axel (@axeldelafosse) on getting Three to load remote models/textures correctly in React Native. I have noticed that RN does not support constructing Blobs from I created a library called react-native-blob-jsi-helper, which you just have to call in that code piece from RN Core. I have locally patched this in our repo, but Three still doesn't load remote models correctly, this is the error message I'm getting: -Unable to download file: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={NSErrorFailingURLStringKey=blob:D7FFA2DB-8747-4C22-863E-470C3C8AACA9?offset=0&size=12332, NSErrorFailingURLKey=blob:D7FFA2DB-8747-4C22-863E-470C3C8AACA9?offset=0&size=12332, _NSURLErrorRelatedURLSessionTaskErrorKey=(
- "BackgroundDownloadTask <FA2791A0-A1D2-4E93-9A44-1EE92FDA8AF6>.<13>"
-), _NSURLErrorFailingURLSessionTaskErrorKey=BackgroundDownloadTask <FA2791A0-A1D2-4E93-9A44-1EE92FDA8AF6>.<13>, NSLocalizedDescription=unsupported URL}I am thinking, either I am now thinking maybe Three is loading the URL wrong, since it successfully loads a <Image source={{uri: sourceURI}} style={{width: 100, height: 100}} />Do you have any ideas where I could help looking? |
|
I think the main issue here is that RN does not support streaming. @CodyJasonBennett let me know if you can think of a workaround that would unblock us here, otherwise the only option would be to implement Streams into RN Core. |
|
Yes, I pointed this out to three where they swapped over to fetch under the hood for loaders. They since patched loaders to skip onprogress checks for environments without streaming in r136 (Firefox also suffers from this). I polyfilled loaders in #1994 that you can try from this gist. I'll be releasing a v8 beta in a moment that should have these fixes. |
|
I'm not sure if this polyfill is working correctly, I tried pulling it in and still got the same error. GLTFLoader: Created blob URL: blob:09187D72-14DE-47CC-8FCF-E7DF06EEC48D?offset=0&size=12332
PayloadTooLargeError: request entity too large
at readStream (/usr/local/lib/node_modules/expo-cli/node_modules/raw-body/index.js:155:17)
at getRawBody (/usr/local/lib/node_modules/expo-cli/node_modules/raw-body/index.js:108:12)
at read (/usr/local/lib/node_modules/expo-cli/node_modules/body-parser/lib/read.js:77:3)
at jsonParser (/usr/local/lib/node_modules/expo-cli/node_modules/body-parser/lib/types/json.js:135:5)
at call (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:239:7)
at next (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:183:5)
at remoteDevtoolsCorsMiddleware (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/src/middleware/remoteDevtoolsCorsMiddleware.ts:31:3)
at call (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:239:7)
at next (/usr/local/lib/node_modules/expo-cli/node_modules/connect/index.js:183:5)
at serveStatic (/usr/local/lib/node_modules/expo-cli/node_modules/serve-static/index.js:75:16)
- THREE.GLTFLoader: Couldn't load texture, blob:09187D72-14DE-47CC-8FCF-E7DF06EEC48D?offset=0&size=12332
at /Users/mrousavy/Projects/showtime-frontend/node_modules/three/examples/jsm/loaders/GLTFLoader.js:2923:3 in Promise.resolve.then.then._catch$argument_0 |
|
See #1972 (comment), a workaround would be to load a glTF without embedded textures from an absolute URL. |
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
|
Any update on this issue? Or there any workaround to load glb files. |
|
See #1972 (comment). This is a downstream issue in react-native. I'm looking into sending in a PR with a fix based on the linked workarounds but they've been notoriously slow to triage related issues/PRs. If a workaround becomes available that we can ship/inject within R3F I can release it in a minor. |
|
Any updates on this? |
|
No, and please don't ask that of open-source projects. I have now a chain of responses that outline user-land fixes and work-arounds, but we can't make this official without a fix in |
|
It looks like your arrayBuffer changes might have finally been merged
Does this mean that support for .glb's with texture might be possible now? |
|
Hi, thanks @CodyJasonBennett, for all the support you provide! Is there a way to export an object in glb/gltf properly from Blender so that it loads on RN like the iPhone in this project: https://github.com/CodyJasonBennett/r3f-native-starter Currently, our models are not working, and I feel like we are not exporting them properly to make them work like your iPhone Secondly @CodyJasonBennett, where can we help to solve this issue regarding the new comment of @bawolf |
|
I'll take a look to give you a better answer as for pending work. This issue is notably exclusive to inlined textures within GLBs or GLTF (avoid, this is slow), since you need both |
Thanks for the quick response @CodyJasonBennett 🙏. Another question, other types of imports are supposed to work well on react-native? For example, ‘.obj .mtl‘ with packed textures as |
|
btw. if anyone here needs an example of how to do this, I've created a starter for this: |
acc to this, does this mean we should be able load GLBs with embedded textures in React Native 0.72.0 onwards? currently still in the midst of upgrading, getting some errors with metro, symlinks, etc. but hopefully should be able to resolve them soon. |
|
I've implemented patches for missing APIs in #2982 which is possible to upstream in react-native itself, pending coverage. Codesandbox CI creates preview builds if you want to try ahead of release. // package.json
{
"dependencies": {
"@react-three/fiber": "https://pkg.csb.dev/pmndrs/react-three-fiber/commit/0772cfaa/@react-three/fiber"
}
}Below asset is from https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/Duck/glTF-Binary/Duck.glb, rendered on iOS emulator. 
|
|
Had to do a partial revert in #3042, but I've since upstreamed related fixes in facebook/react-native#39276. I'll see what else we need to do here, but it hinges around Blob/ArrayBuffer support and thus |
|
Following up to #1972 (comment), I've put out v8.14.7 which hardens the surrounding networking stack and re-implements patches for |
Hi everyone!
I'm checking out the beta with React Native and I wanted to check if someone was able to load via a remote URL with
GLTFLoader. Looks like React Native'sFileLoaderimplementation isn't working correctly. I started to patch it but wanted to check here.Let me know if you have any feedback! Thanks :)
The text was updated successfully, but these errors were encountered: