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

21–30 of 54 posts

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

#21

Post by brundolf »

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.

You don't really have the choice with graphics either. The GPU keeps mesh and texture data in memory between frames, and I would imagine something similar happens for lighting, etc at some layer in the pipeline. Reconstructing the entire scene every time would not be feasible.

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

#22

Post by tppiotrowski »

vagrantJin wrote: post #17

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?

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.

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

#23

Post by pheelicks »

Nice writeup, I always like it when the shaders are highlighted like this. I got started in a similar way 7 years ago and have been making 3D terrains with THREE.js & WebGL since.

The real fun begins when you need to implement some sort of Level-of-Detail system and streaming in data to give the illusion of high detail everywhere without sacrificing performance.

Last year I released an open-source framework (https://github.com/felixpalmer/procedural-gl-js) for creating 3D terrains for web applications, you can see Uluru here: https://www.procedural.eu/map/?longitude=131.036&latitude=-2... (unfortunately the aerial imagery from our default provider isn't as high resolution as other places in Europe)

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

#24

Post by tppiotrowski »

Excellent write up. I've been using elevation models for the past few months to create real time shadows overlaid on slippy maps using WebGL. [1]

One thing I learned is that if you really want to recreate "real-world" terrain you have to account for the curvature of the earth. Uluru is over 3km wide and I estimate your image is around 5km. Across this distance the earth will curve 2 meters so you could modify the elevation model to drop off a meter gradually from the center to the edges.

[1] https://shademap.app

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

#25

Post by gw »

brundolf wrote: post #21
gw wrote: post #16

Earlier quoted context omitted.

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.

You don't really have the choice with graphics either. The GPU keeps mesh and texture data in memory between frames, and I would imagine something similar happens for lighting, etc at some layer in the pipeline. Reconstructing the entire scene every time would not be feasible.

You can still hold on to references to textures and meshes you uploaded to the GPU without using a full-blown scene graph. Some state is necessary no doubt, but this seems more like unnecessary state that could be replaced by something more direct. But i don't know, i'm not familiar with three.js; the click handlers seem useful.

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

#26

Post by onion2k »

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://onion2k.github.io/r3f-by-example/ Each example can be spun up on Codesandbox with the click of a link eg https://onion2k.github.io/r3f-by-example/examples/geometry/i... (Click the "Fork on Codesandbox" link)

There are tons of good examples of how to use react-three-fiber on Codesandbox - https://codesandbox.io/search?query=react-three-fiber&page=1

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

#27

Post by codetrotter »

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…

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?

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

#28

Post by vagrantJin »

tppiotrowski wrote: post #22
vagrantJin wrote: post #17

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?

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.

Got it.

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

#29

Post by onion2k »

codetrotter wrote: post #27
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…

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?

I'm writing something to generate screenshots at the moment. They'll be there fairly soon.

I could embed the live WebGL, or a codesandbox embed. I might do that eventually.

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

#30

Post by andy_ppp »

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

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.

Unity?
Post reply on HN