Performance

[trusktr]

I like the concept of the type of coding patterns that aframe-react allows us to use in defining 3D scenes,

but it seems like there is a performance concern: props (f.e. position) can be passed to the React components as arrays of numbers, which get converted into strings to be passed into the custom elements, which get converted back into numbers for use internally by A-Frame/Three.js.

That 3-step conversion will happen on every tick while animating a component's prop like position repeatedly.

Is it something to be concerned about? How do you recommend handling animations?

[ngokevin]

I recommend using A-Frame itself to handle such behaviors regarding ticks. And React to be reserved only for view layer and state binding. So rather, you'd write an A-Frame component with a defined tick handler, and use that, rather than having React create its own RAF.

[ngokevin]

Here is how'd I do something like Animations...https://github.com/ngokevin/aframe-react-boilerplate/blob/master/src/js/app.js#L2

[fuleinist]

@trusktr , I believe that's the time when redux can be integrated : )

https://github.com/reactjs/react-redux

[ngokevin]

You can also just use Redux directly for binding, skip React. https://github.com/ngokevin/kframe/tree/master/components/redux

[ngokevin]

So just let three.js/A-Frame do what they're good at, and let React do what it's good at, and then you'll be OK.

[trusktr]

The problem is it is too easy to do (and nice to program) the less performant way. Hopefully people stumble on this. I'll try to post examples in my parts of the web as well. :]

[ngokevin]

Yeah, it'll have to be handled through documentation and examples. Will take a lot of communication to break the old ways of the Web and get people acquainted to a render loop.

[ngokevin]

Also a Best Practices section that can shore up what to do in 3D land and what to do in React land