Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

techblog.geekyants.com

Post reply on HN
Print view View original

41–50 of 54 posts

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

#41

Post by modeless »

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?

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.

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

#42

Post by throw_m239339 »

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?

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

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

#43

Post by astrea »

mdoms wrote: post #6
astrea wrote: post #5

Earlier quoted context omitted.

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

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.

I'm saying the only thing running like shit is your overpriced laptop you goon

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

#44

Post by [deleted] »

modeless wrote: post #41
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?

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 fo…

[deleted]

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

#45

Post by pantelisk »

gw wrote: post #16
brundolf wrote: post #10

Earlier quoted context omitted.

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.

Because of react's popularity, it's attractive to make a project that applies react's style of development to threejs.

Similarly, around 2013 threeQuery (threejs + jquery) was becoming somewhat popular too (it had a jquery "chain" api like syntax). It's good to see people experiment and attempt to improve developer efficiency. Who knows what new tricks will be discovered and what kind of benefit and new approaches will be created! However, I mostly agree with you.

I find threejs to be one of the most enjoyable libraries to work with (and its codebase is simple and beautiful too). I also highly recommend to everybody that wants to go into 3d graphics to dedicate some effort and learn the actual fundamentals (eg webgl, opengl, metal, matrix math, quaternions, etc). This way you gain domain specific knowledge that is applicable across platforms and across time. Abstractions are not future-proof, they are recycled and change according to the latest trends in development. Domain specific knowledge stays with you forever! If there is an intermediate ground on which people can meet (eg start with react-three or three.js and then dive deeper) that's a win too. Recently I have been advocating that web devs can start learning 3d graphic concepts by just playing with... CSS to familiarize with some of the concepts and then move from there. This way one can avoid all the overhead around the gl statemachines or various libs and focus on the basic concepts first

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

#46

Post by esperent »

onion2k wrote: post #26

react-three-fiber is a really nice library to make web 3D things with. Three.js is brilliant, but there's a metric ton of boilerplate to get complicated things up and running. react-three-fiber just shuffles that away so you can concentrate on building a graph out of components. I've been getting up to speed with it for a little while and I've been chucking things I've learned in to a Github Pages site - https://onio…

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.

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

#47

Post by esperent »

adamredwoods wrote: post #39

Maybe someday we can have geometry shaders in WebGL 3, so we can make nice adaptive LOD.

WebGPU might get geometry shaders.

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

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

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

#48

Post by onion2k »

esperent wrote: post #46
onion2k wrote: post #26

react-three-fiber is a really nice library to make web 3D things with. Three.js is brilliant, but there's a metric ton of boilerplate to get complicated things up and running. react-three-fiber just shuffles that away so you can concentrate on building a graph out of components. I've been getting up to speed with it for a little while and I've been chucking things I've learned in to a Github Pages site - https://onio…

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 have…

You don't really need to err on the side of caution, you can just try some of the examples. The first example, https://i2160.csb.app/ runs well on my $120 3 year old Android phone. My instanced ducks example, https://os16k.csb.app/ only gets about 15fps but its doing more than most games or sites need albeit in a trivial way.

react-three-fiber isn't a magic bullet that will make all web 3D things fast. You still have to be sensible. It does make it much easier to prototype things though, and a lot of the time performance is great. And if it isn't then most of the code is quite straightforward to move to pure WebGL.

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

#49

Post by panzerklein »

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?

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

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

#50

Post by artifact_44 »

There's a lot of disinfo in this thread. React-three-fiber is great. Threejs by itself is also great. R3F allows people with minimal low level 3d graphics knowledge, to use higher level constructs they are familiar with, i.e. dom elements and react, to rapidly build compelling interactive 3d experiences. The aframe library is a similar kind of abstraction. WebGL has a thriving ecosystem and IMO is a signpost for the future of visual computing. Cross platform, OS agnostic 3D for the masses.
Post reply on HN