search

pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.49k stars 1.58k forks source link

Portable Reconciler (Bring your own three.js) #3353

Closed wcandillon closed 1 month ago

wcandillon commented 1 month ago

As mentioned in #3352, we tried to run the Three-Fiber reconciler directly but encountered issues while doing so.

Here's a "full" example.

We encountered runtime issues with the "advanced examples," which was surprising.

Is it possible to use the reconciler in a portable way and integrate our own Three.js runtime (the one with WebGPU support)?

In Skia, we have our own reconciler, and we pass the Skia runtime as a parameter. We never import Skia directly because people use various Skia runtimes (headless Node.js, WebAssembly, native, etc.). All these different environments are tied to different platform APIs for gestures, animations, and so on. Therefore, it's important for us to have an isolated reconciler API. Does Three-Fiber use a similar model?

We are open to exploring different approaches to this problem. Our understanding is that Three-Fiber uses a "standardized" mapping from host components to the Three.js API. If this is correct, would it be possible for someone to write a reconciler that is fully compatible with Three.js?

I’m excited to hear your thoughts.

CodyJasonBennett commented 1 month ago

R3F is truly compatible with three.js, more specifically the one you have installed. I'm not sure where your intuition for R3F having any hard dependency or wrapping of three.js comes from, but it's misinformed. No action is needed here.

wcandillon commented 1 month ago

I had made this assumption because simple examples that run with three.js don‘t run for three-fiber but based on your message I will definitely revisit this assumption.

On Fri 13 Sep 2024 at 17:10, Cody Bennett @.***> wrote:

R3F is truly compatible with three.js, more specifically the one you have installed. I'm not sure where your intuition for R3F having any hard dependency or wrapping of three.js comes from, but it's misinformed. No action is needed here.

— Reply to this email directly, view it on GitHub https://github.com/pmndrs/react-three-fiber/issues/3353#issuecomment-2349185589 or unsubscribe https://github.com/notifications/unsubscribe-auth/AACKXVVY4AWIEIKMC6NGF6TZWL57RBFKMF2HI4TJMJ2XIZLTSOBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDUOJ2WLJDOMFWWLLTXMF2GG2C7MFRXI2LWNF2HTAVFOZQWY5LFUVUXG43VMWSG4YLNMWVXI2DSMVQWIX3UPFYGLLDTOVRGUZLDORPXI6LQMWWES43TOVSUG33NNVSW45FGORXXA2LDOOJIFJDUPFYGLKTSMVYG643JORXXE6NFOZQWY5LFVEYTOMRVGIYTSMRWQKSHI6LQMWSWS43TOVS2K5TBNR2WLKRSGUZDIMBUGA3DIOFHORZGSZ3HMVZKMY3SMVQXIZI . You are receiving this email because you authored the thread.

Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub .

wcandillon commented 1 month ago

Thank you for your answer. We got it to work. Standard react-three-fiber and three.js version. The only patch we have to apply is to use the web version of three-fiber instead of the native:

-  "react-native": "native/dist/react-three-fiber-native.cjs.js",
+  "react-native": "dist/react-three-fiber.cjs.js",

Isn't that cool that we are so compliant with Web APIs that we prefer to run the web version instead of the native one? ☺️

https://github.com/user-attachments/assets/c2ab2c56-d54a-42e1-8658-d9bb9cb06378

CodyJasonBennett commented 1 month ago

Why do you have to target our web entrypoint instead? This is not the selling point you think it is but a massive problem that will come up again.

wcandillon commented 1 month ago

Good point the native build should work too actually (haven't tried it). Sorry if my message caused confusion.

The idea is that for the native build to work for us we would need to instead expo-gl, expo-assets, and so on. And we are not interested in any of that. We just want to use Web APIs.

wcandillon commented 1 month ago

Vision Camera and Skia uses this pattern for optional dependencies in React Native (in Skia Renimated and WebGPU are optional deps for instance): https://github.com/Shopify/react-native-skia/blob/main/packages/skia/src/external/reanimated/ReanimatedProxy.ts

If you use this pattern for expo-gl and so on, we would get into a clean situation as described in the custom canvas section for the documentation. Re-opened to make sure we're on the same page but feel free to close it if needed.

CodyJasonBennett commented 1 month ago

I created #3354. It is intended for expo-gl and expo modules to be optional, but now we'll specify it for this case.