Cross Platform app development runtime in threejs

Babylon native supports cross platform app development by using a runtime. Is this feature is available in three.js ?

Oh don’t you dare say this forbidden name in this discourse. :triumph:

In a single sentence of 10 words you managed to use about 4-5 random words that do not seem to combine together in a logical manner - can you explain what you mean by cross-platform app development using a runtime :’) ?

If you just mean doing cross platform with three - you can easily combine three with: PWA (mobile) / Cordova (mobile, questionable performance) / react-native (mixed, insane performance) / electron (desktop / mac, questionable file sizes), and probably a ton of others. As long as the platform supports WebGL & Canvas API, you’re likely good to go (same goes likely for Babylon.)

If you’re thinking about going cross-platform, personally that’s the one case I’d think about using react-three-fiber + react-native - @drcmda may know a bit more about compatibility, but react native itself is very easy to port to anything from Windows, Mac to your coffee machine, and supports all the good stuff react offers you.

2 Likes

Oh. Okay. I just had the doubt like that. So only I asked . Thank you for your brief explanation.
@mjurczyk

yes, there’s expo-gl which translates raw webgl calls to native opengles. expo belongs to the react-native stack, that means your threejs code can run on native platforms without being constrained to a webview or pwa. i am not sure if that includes desktops, yet, it may just be mobile for now - at least that was the case when i last tried it. react-three-fiber’s role in this is that it immediately adapts - so the same pointerEvents for instance that you work with on the web, will now work natively with touch input.

2 Likes

Thanks for your explanation @drcmda

Hi I am trying to convert my WebGL application which was developed using threejs in normal html file.
Now I am trying to create that within react native for making the android and ios application. First I tried to show the sample cube with rotation. It is working now. Now I am trying to implement the OrbitControls in that. I couldn’t do that . Please give any suggestion or help to me

threes orbitcontrols are reliant on the web, they use web-api event listeners. i believe expo has their own controls. for instance https://github.com/EvanBacon/expo-three-orbit-controls

Thank you for your reply @drcmda. So, I should use expo-three-orbit-controls right?, if yes, in normal Orbitcontrols in three js, we can change the attributes of it at any time dynamically. So how to do this thing in expo-three-orbit-controls . Because an example is given in the link given by you, it is having the orbit controls as a tag in the script. So How to control that dynamically

i think you better search in expos github tracker. i just know that lots of what’s in examples/jsm does not even run under node bc it depends on the web. it wasn’t made for cross platform use. for this reason expo must have its own eco system of sorts.

1 Like

Okay @drcmda. Thank you :blush:

For mobile application development with three.js using ReactNative, expo-three is available as alternate for THREE . So We can use every methods and properties of THREE easily for mobile application too. But I need three more add on classes of three.js for mobile development such as OrbitControls , GLTFLoader, DracoLoader. Please say any suggestion on this @mjurczyk @drcmda . Thanks in advanced

Hi, sorry if open again this topic, but I don’t want to open a new one to not bother around:

I’ve read this sentence in your answer:“react-native (mixed, insane performance)”.
I’m developing an App in Cordova with Threejs at this moment, but I’m having some performance issues despite all the optimization I read around. (Here for example: The Big List of three.js Tips and Tricks! | Discover three.js)
My point is:
Can I have better performance with react native? so much that it could be a good idea to switch?
and
what about expo-gl? I read about people who is struggling using it due a lot of bugs. Is that true or that’s only my impression?

Any suggestion?

1 Like

It’s more likely that the devices gpu is weak because webgl also just makes use of it despite the web view. The webview otherwise is slower when it comes to interaction response for sure. I think expo gl is still used, but I don’t know to which extend and if they’re still working on it.

1 Like

ok, thanks.

It was a bit of an exaggeration :sweat_smile:

Sometimes, but it doesn’t fix performance - at best, it can improve it. Think “going from 45fps to 60fps”, not “going from 3fps to 30-60fps”.

Unlikely.

Yep, that is actually true. Unfortunately super broken, consider not considering it as an option (unless ofc you want to contribute and help patching it along the way - repo is still maintained, just hugely undermanned.)

You should be able to pinpoint the performance issues quite easily:

  1. Open this demo on your target device. Is the fps lower than 30fps? If yes - that device likely just won’t run 3D / WebGL / OpenGL with reasonable performance, so optimising doesn’t make much sense.
  2. If the demo above has 45-60fps and your app doesn’t - optimise your app by adjusting materials / models / textures, just switching technologies won’t fix fundamental issues :sweat_smile:

Thanks for your answer.

  1. Open this demo on your target device. Is the fps lower than 30fps? If yes - that device likely just won’t run 3D / WebGL / OpenGL with reasonable performance, so optimising doesn’t make much sense.

I’ve tried and I had quite unreasonable performance (6 to 15 fps). :smiley:
I have a cheap phone. But I want to try (as much as I can) to let people with cheap phone as me, play my app.

Sometimes, but it doesn’t fix performance - at best, it can improve it. Think “going from 45fps to 60fps”, not “going from 3fps to 30-60fps”.

45 to 60 could be good enough for my goal.
My app works around 30-40 fps (sometimes touching the screen and moving around fps drastically decrease to 16-20 fps, and I’m working on it. By the way some tips would be highly appreciated).
I’ve tried to install “@react-three/fiber” to experiment little bit. It comes out that react-native still does not support it.
So, what if I use vanilla threejs module on a webview in react-native? is that possible?
would I have exactly the same bottleneck as in Cordova? Silly question?

React-three-fiber and three have nearly 1:1 performance (vanilla three technically should be a bit faster, since there’s no lifecycle involved, but it’s sub-1fps difference you can’t really notice.)

Not sure what bottleneck you have on mind? Afaik cordova itself doesn’t introduce any overhead - it just creates a browser view for you, so the performance there should be the same as if you’d open Chrome on mobile.

Take a closer look at your event handlers in this case. Touch events and moving the camera shouldn’t cause significant drops (except for the cases when materials are compiled for the first time.)

I have zero experience with react. I read topic about Fiber “reconciliation” and virtual DOM which increase performance (here for example: GitHub - acdlite/react-fiber-architecture: A description of React's new core algorithm, React Fiber).
I don’t know if react can increase performance of threejs (maybe not because Threejs has it’s own virtual DOM and works on low level with GPU? Am I right?)

Take a closer look at your event handlers in this case. Touch events and moving the camera shouldn’t cause significant drops (except for the cases when materials are compiled for the first time.)

Thanks I will double check my flow. :wink: