search

Izzimach / react-three-legacy

React bindings to create and control a 3D scene using three.js
Other
1.52k stars 128 forks source link

Question on overall design + performance #78

Closed hellogerard closed 8 years ago

hellogerard commented 8 years ago

Hello,

I've been writing ordinary React web apps for awhile now and am comfortable with that. I have inherited an existing THREE.js project that is a mess of Javascript classes wrapping THREE.js objects. I was hoping to use your project to bring the clarity and ease of React to THREE. Few questions, if you don't mind:

  1. After studying the code, it appears that you are using React's reactivity mechanisms to call THREE's render function instead of using requestAnimationFrame. Is that correct? If so, then a static THREE scene that just sits there should not re-render at all, resulting in good performance! (My THREE app is mostly idle, except for if there is user input.)
  2. That said, I don't quite understand the conversation in #33. It's not clear to me what the difference between using react-three vs plain THREE.js in that case is. His example is still updating the position of each cube on each render frame. Is the overhead of using React components instead of plain THREE objects that much?
  3. Can you compare this project to https://github.com/toxicFork/react-three-renderer? They appear to do the same thing, in the same way.

Thanks for your time.

Izzimach commented 8 years ago

Thanks for your interest! I can answer 1 and 2 here, and sort of answer 3.

  1. The code by default will render every frame using requestAnimationFrame even if you don't change anything by calling render. I did this since I expected some objects to animate themselves outside of React's visibility (i.e., skeletal meshes) but I'm not sure it ever caused any problems. In any case, you can set the enableRapidRender prop in THREERenderer to false to disable auto-rendering every frame. There are some other props mentioned here: https://github.com/Izzimach/react-three#extra-props
  2. The overhead of React is not a big deal if you're updating a few objects but for hundreds of objects it's a problem. If you iterate over all yours object using a for loop and set the x/y/z values, the Javascript JIT can optimize that pretty well. If you rely on the React reconciler to update all the positions there are several layers of function calls and checks that can really screw with the JIT. You can get around this by hacking in to the reconciler with some Dark Sorcery but IMHO at that point you would be better off just using threejs directly.
  3. I'm not too familar with that project, so I can only make some observations. While react-three re-uses as much of React as possible react-three-renderer seems to reimplement some React code internally that is specifically written to work with threejs. This should make code faster and less kludgy then the equivalent in react-three. It appears you can't use composite components (user-defined components) inside the scene graph though. Also it's unclear how well things like React dev tools or hot reload work with react-three-renderer.

I opened an issue here so hopefully @toxicFork can comment on the differences better than I can.

hellogerard commented 8 years ago

Thank you, @Izzimach.