Recreating Real-World Terrain with React, Three.js and WebGL Shaders • Hacker News Board

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#11

Post by brundolf » Tue, Feb 23, 2021, 7:08 PM UTC

mdoms wrote: post #4

Looks very cool and there's a ton of good info here. But the final product is unusably laggy on my Dell XPS 13 i7 - not something I'd be happy to put into production. Edit - thank you for all the replies, we have now established that different hardware renders at different speeds, quite the discovery.

It probably lacks a discrete graphics card. Not much to be done about that for a fundamentally graphics-concerned project; the only thing I can think of for production would be to disable the 3D content when the client lacks discrete graphics (which, I'm not actually sure whether that can be detected)

Edit: Here's something. You could probably hack something up that would check if the vendor name includes AMD or NVIDIA, or something. Might be fragile though https://developer.mozilla.org/en-US/docs/Web/API/WebGLRender...

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#12

Post by [deleted] » Tue, Feb 23, 2021, 7:09 PM UTC

nmg wrote: post #9

mdoms wrote: post #6

Earlier quoted context omitted.

Yes I understand that different hardware renders things at different speeds, thanks for your input? I'm saying that if something runs like shit on my $3,000 laptop I wouldn't be comfortable putting it into production for a user base that likely has, on average, far less.

Runs silky smooth on my 2015 MBP - it’s possibly a system specific issue

[deleted]

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#13

Post by esrauch » Tue, Feb 23, 2021, 7:13 PM UTC

brundolf wrote: post #11

mdoms wrote: post #4

Looks very cool and there's a ton of good info here. But the final product is unusably laggy on my Dell XPS 13 i7 - not something I'd be happy to put into production. Edit - thank you for all the replies, we have now established that different hardware renders at different speeds, quite the discovery.

It probably lacks a discrete graphics card. Not much to be done about that for a fundamentally graphics-concerned project; the only thing I can think of for production would be to disable the 3D content when the client lacks discrete graphics (which, I'm not actually sure whether that can be detected) Edit: Here's something. You could probably hack something up that would check if the vendor name includes AMD or NVID…

The demo in the article would still run full speed on several year old integrated graphics. Probably chrome blacklisted his gpu driver and it's doing pure cpu rendering (or else his driver itself is bugged in a way that is killing the performance).

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#14

Post by brundolf » Tue, Feb 23, 2021, 7:18 PM UTC

esrauch wrote: post #13

brundolf wrote: post #11

Earlier quoted context omitted.

It probably lacks a discrete graphics card. Not much to be done about that for a fundamentally graphics-concerned project; the only thing I can think of for production would be to disable the 3D content when the client lacks discrete graphics (which, I'm not actually sure whether that can be detected) Edit: Here's something. You could probably hack something up that would check if the vendor name includes AMD or NVID…

The demo in the article would still run full speed on several year old integrated graphics. Probably chrome blacklisted his gpu driver and it's doing pure cpu rendering (or else his driver itself is bugged in a way that is killing the performance).

Ah, yeah, it's running smooth on my MBP without switching to discrete

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#15

Post by gdubs » Tue, Feb 23, 2021, 7:21 PM UTC

mdoms wrote: post #4

Looks very cool and there's a ton of good info here. But the final product is unusably laggy on my Dell XPS 13 i7 - not something I'd be happy to put into production. Edit - thank you for all the replies, we have now established that different hardware renders at different speeds, quite the discovery.

FWIW it’s zippy as hell on my iPhone 11 Pro.

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#16

Post by gw » Tue, Feb 23, 2021, 7:30 PM UTC

brundolf wrote: post #10

gw wrote: post #3

That looks neat but why would you need a react-style reconciler to render a webgl scene? It's immediate mode...every frame is rendered according to the latest state available. What is even being reconciled?

Three.js has an imperative/stateful API for constructing and updating objects, not dissimilar to the DOM. So if your state lives in a separate place, then just like the DOM, you'd have to imperatively patch the view state to keep it in sync. Adding a layer that does this syncing automatically makes a lot of sense to me. Doing it through React seems a little bit odd... but I haven't looked closely enough to understand…

That makes sense, but it seems like a case of building an abstraction to solve a problem caused by another abstraction. If a scene graph creates a new chore for me that necessitates yet another dependency, i think it'd be simpler to not fuss with these layers at all. That's a choice i don't have with the DOM.

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#17

Post by vagrantJin » Tue, Feb 23, 2021, 7:30 PM UTC

It's confirmed that I'm an idiot who happens to just be into WebGl and threejs these last few months. But I must ask about the choice to use React. Is there an actual benefit to using React or is it popular enough to justify its use?

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#18

Post by matthoiland » Tue, Feb 23, 2021, 7:31 PM UTC

Very cool demo! And also nice to know my laptop fans still work. (2019 MBP 16", Chrome v84)

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#19

Post by tppiotrowski » Tue, Feb 23, 2021, 7:32 PM UTC

gw wrote: post #3

That looks neat but why would you need a react-style reconciler to render a webgl scene? It's immediate mode...every frame is rendered according to the latest state available. What is even being reconciled?

I believe React developers think in terms of Components now as we used to think of Object/modules in the past. I personally find it easier to encapsulate logic into a Component because it seems more tangible than a plain JS file/module. You can also nest React components to compose logic, for example: composing multiple shaders.

Re: Recreating Real-World Terrain with React, Three.js and WebGL Shaders

#20

Post by tppiotrowski » Tue, Feb 23, 2021, 7:33 PM UTC

gdubs wrote: post #15

mdoms wrote: post #4

Looks very cool and there's a ton of good info here. But the final product is unusably laggy on my Dell XPS 13 i7 - not something I'd be happy to put into production. Edit - thank you for all the replies, we have now established that different hardware renders at different speeds, quite the discovery.

FWIW it’s zippy as hell on my iPhone 11 Pro.

The iPhone/iPad GPU's are actually faster than the Intel MacBooks in my experience. I haven't tried an M1 yet, but hopefully it eliminates this performance gap.