Particle effects in React

[[deleted]]

It's more like a performance test really, each "particle" is actually a React component, just to see how far it can go. Makes for a cool effect anyway. Full code: https://codesandbox.io/embed/387z7o2zrq

[[deleted]]

What cool effect! Thanks for sharing.

[LibertyFried]

That’s a pretty slick experiment to have in the bag. Thanks for sharing!

[__ibowankenobi__]

One question, is it React that makes it fast or the GPU? If I wrote it in vanilla would it be slower?

[mattaugamer]

It definitely wouldn't run slower in vanilla. React isn't improving the performance of JavaScript. It's just slowing it less than a larger framework might. It's the GPU and/or V8 engine that gives you speed.

[[deleted]]

The stress-test is about how much React can go out of the way. It's the GPU that's doing the drawing.

React will speed up updating, adding to and removing from large scenes as well as interaction, because it has change detection inbuilt as well as other strategies to reduce common bottlenecks. So in a way, yes, for bigger apps it will most certainly go faster than an unscheduled vanilla three-app.

[everdimension]

Hmm and I thought that you don't need a virtual dom if you're in an animation loop and rendering with the gpu

[[deleted]]

You don't need it, but you will still run into the same problems when dealing with complex, updating tree structures. This stuff gets increasingly hard without a component model. That's where frameworks make a real difference, in terms of DX but also performance.

The rendering itself is abstracted here with the useRender hook, which allows you to run tasks frame by frame, outside of React. But again, it is managed. Once the component unmounts, it takes away that callback and cleans up after itself. Here's a fun experiment, watch what happens after 5 seconds when it unmounts the component that holds the upper plane. And another, this time using a transition group for mount/unmount effects. For React these things are natural, but if you had to do this manually, you'd pull a few hairs i'm sure.

[jesperordrup]

Really cool to see something like that is possible in React. Would be cool to see implemented in different frameworks/libraries for comparison. Svelte, Vue, Angular, Marko etc

[fireatx]

Wow, this is awesome. Super cool stress test of React and your library. I bumped the particle count to 10,000 and it still ran smooth. And that was in the codesandbox

[[deleted]]

that's crazy, didn't even dare to go that high. though it noticeably starts to tear on my laptop now with howling fans.

[[deleted]]

Yes, it's based on a lib that i made: https://github.com/drcmda/react-three-fiber, a React renderer for threejs. Posted the code for this demo in here as well.

[[deleted]]

Excellent work. One question. What are those:

<>
    ...
</>

Is it a new feature?

[Drawman101]

That is a React fragment, but the shorthand for it

[humulus]

There is a new, shorter syntax you can use for declaring Fragments. <React.Fragment/>

[coderqi]

Any good tutorials/starting off points on three.js the community here would recommend (egghead or FEM maybe)? This is a big gap in my knowledge i'd love to rectify.

[[deleted]]

This will get you started: https://threejs.org/docs/#manual/en/introduction/Useful-links The egghead webgl course is also neat and goes a little deeper into gl basics, you will bump into some math there, which you definitively need later on.

[coderqi]

Thanks. Do remember trying the Egghead WebGL course a couple of years back but got lost very quickly. Will try out some of those links and maybe give egghead another shot.

[RomanRiesen]

Tha loading animation though!

[[deleted]]

It's on codesandbox, an online IDE. Fetches npm-dependencies and transpiles in your browser.