Recreating Real-World Terrain with React, Three.js and WebGL Shaders (opens in new tab)

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 why/whether this coupling is actually necessary

Describing WebGL as immediate mode is a little misleading. The rendering is immediate but the API is definitively not. There is a ton of state that needs to be allocated up front, mutated rather than re-created, and eventually torn down. Buffers, textures, shaders, and uniforms are all retained state. There's also the whole OpenGL state machine.

OpenGL used to have a true immediate mode where you called a function for each triangle vertex, and you didn't need shaders or buffers. That mode is not present in WebGL.

Agreed. Haven't checked out the code but it might because of the text labels in the first example?

Last time I checked rendering text into a webgl context was basically reinventing harfbuzz or using a proper game engine like unity.

Edit: So a reactive way to lay over HTML which properly hooks into the 3d context doesn't sound beyond crazy, at least for web tech standards.

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.

Yes, but they are using Three.js, which provides a scene graph structure, basically wrapping WebGL in a retained mode.

> 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?

You don't, it might be a case of VRML cargo-culting or something.

https://en.wikipedia.org/wiki/VRML

While the DOM has some issues which makes React handy, Three.js and its "display list" have none of these problems, but I guess shoving React somewhere will translate in a better conversion for the authors of that article...

Here's the answer from the library author: https://twitter.com/0xca0a/status/1282999626782650368/photo/...

I haven't followed r3f development for the last six months or so, but previously I tested a couple of examples that were available as both r3f and pure three.js. I tested them on my old, slow mobile - and there seemed to be a big difference, with r3f much slower. When I brought this up with the devs, they have waved it away saying it's because the demos were running in dev mode (or something similar). However, I haven't seen any genuine comparisons of performance in r3f vs three.js, so for now I'm erring on the side of caution and assuming it's slow. I don't know enough about react to create performance tests myself, unfortunately.

When I went to your site, the “screenshot coming soon” for each of them caught all of my attention so I didn’t notice the fork on codesandbox link.

But why not just have the live WebGL thing on each page itself?

Thanks for the helpful repo and linking to it! Been looking fwd to playing w react-three-fiber...

That's ace when it loads, but modifying the time on the bar at the bottom of the screen makes the shadow disappear. I get a NaN in the URL which is presumably related (eg https://shademap.app/#47.62769,24.44286,4z,NaNt). Chrome 88.0.4324.182, OSX, no plugins to speak of. There's a bunch of 404s from Mapbox (eg https://api.mapbox.com/v4/mapbox.terrain-rgb/3/3/6.pngraw?ac...) but no other console errors.

I think React's main role here is just to provide structure to the code base: React component as the basic unit of logic encapsulation and then composing logic by combining React components.

At first the thought of combining React with Three.js left me scratching my head - but upon closer inspection the added abstraction actually makes sense and it's quite elegant. Thanks for sharing.

Also I had no idea what "frijoles" was, but I now have recipes bookmarked.

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...

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

Ran perfectly fine on my Dell Precision with an i7-9850H.

WebGPU might get geometry shaders.

https://github.com/gpuweb/gpuweb/issues/445

However, an issue is that many mobile GPUs don't support them.