React.js three renderer example | Hacker News Reader

React.js three renderer example

toxicfork.github.io

96 pointsChrisCinelli21 comments

Any info on the performance of react-three-renderer? Does it make things slower / quicker compared to similar setups with only three.js ?

Two of the linked examples are benchmarks that let you compare the React renderer with direct updates. I saw no difference (both were at 60 fps for me).

Did you try increasing the amount of cubes? There's a dropdown at the top.

React drops to ~30fps for me on 1500 cubes, direct update stays at a solid 60fps. The delta increases as cube count increases.

Indeed. For me at 500 cubes, React is already about 2x slower (44fps -> 23fps).

I'm guessing the reason that I only get between 3fps and 7fps on a 3rd-gen iPad from 3 years ago is that the webgl support is not much on tablets, or at least on older tablets? I get the same canvas 3d experience in these demos as I get in my own demos that don't use React at all. Maybe on newer tablets it would be far different.

Is that on all of the examples?

Interesting idea. In theory it would be possible to port a scene description language like the one used in Persistence of Vision across to something like this. That might be fun.

Firefox 42 on OSX crashes repeatedly on switching the examples.

Same here in Windows 7.

I'll take a look, it's probably because of webgl context disposal, also crashes in android Firefox :(

Yep, it is. I have reported the bug to Mozilla, hopefully they will be able to fix it.

Why does the title have React.js when they are WebGL examples?

It's providing an interface/binding to that underlying functionality that fits into the React model of specifying a UI declaratively. Like almost any framework or library, React tends to be easiest to work with if you can follow its conventions. There is more friction if you want to do something outside its comfort zone, so this kind of bridge is potentially quite useful for anyone who does have a need for 3D visuals in their React-based app.

Something about making 3D primitives into a DOM-like hierarchy with update-able props: https://github.com/toxicFork/react-three-renderer#implementa...

Still wrapping my head around it.

React has been ported a few times, React Native is the most well known. Since React is basically describing components as functions of props and state, what's returned doesn't have to be DOM.

Because it's demonstrating the binding of WebGL to React using this library: https://github.com/toxicFork/react-three-renderer/

But where does React come into play?

https://github.com/toxicFork/react-three-renderer/#usage

The library includes a lot of custom React components to represent the scene.

Hi! Author here, thanks for posting this :D I'm happy to answer any questions you may have :) I'll read through the comments when I have time!

Can this be used on React-Native?

> Can this be used on React-Native?

Does react-native uses WebGL ? of course not , since WebGL is a browser API.

But you can start coding the same stuff for openGL on mobile.

Reply on news.ycombinator.com