3D World Generation #7: Speeding it up via Threading (JavaScript Web Workers & Three.js)

Follow me on:

This is the 7th in a series of 3D World Generation and procedural terrain tutorials. In previous tutorials, we started with mesh generation using heightmaps, beforing moving onto more advanced topics like quad-trees, planetary level-of-detail, and atmospheric scattering. This project takes a step back in order to improve the speed and overall responsiveness of the application by using some built-in features of JavaScript.

Web Workers in JavaScript are just a simple way for you to run scripts in the background, giving you access to multiple hardware threads. In essence, they’re a lightweight and easy to use abstraction over OS threads, with message passing capabilities. This means they can potentially perform tasks without interrupting the main execution thread. Typically, these can be things like xhr’s and other forms of IO. Read more about that at the MDN link provided below.

In the video, we cover:
* Web Workers: What they are, how to use them, and step through a simple example with code.
* Architectural changes to support threading and web workers, including alternative methods of implementation.
* The existing terrain generation code that was developed in previous videos.
* The code changes needed to create a threaded terrain builder class.

Module Workers:

[DNMNTUR]

For years now I'm (re)watching your videos every now and then and you've learned me so much new things. I'm surprised your channel has no more subscribers. Thank you for sharing your knowledge with us, absolute king!

[Mainguyenish]

I start learning Three.js after watching your video. Keep making more wonderful videos. You're awesome!!!

[wafflecat_]

I love these! Awesome content, I'm sure this channel is gonna blow up soon

[PawelGrzelak]

Truly amazing tutorial. So much knowledge in 12 minutes.

[alvarolloret]

That's pretty awesome! I would love to see more tips like this to optimize your three.js code 👍 your channel is an amazing resource!

[christopherkarlsson]

"make sure you're subscribed", you're kidding right? I subscribed on the first video xD

[zaxadim]

Great, just downloaded the code to play around, thanks! One thing i noticed is that there is the usual LOD-switching problem between the quads (cracks). The best solution to that which i have seen in similar codes is to generate X+1, Y+1 subquads (so to extend each quad strips by one row/col in each dimention) and interpolate between the overlapping vertices that belong to that strip. There are other approaches like creating 'stitching' in the margin of LOD change but the first one always seemed cleaner to me. Some other 'hacky' solutions also exist, like extending 'below' the quad edge so the crack is invisible (ie to edge's subquad face normal, with negative sign so it goes downwards). Thats a nice topic to see btw!

[kirillvoloshin]

wow!
is coding your main job? I am blown away by the quality of your content!

[zaxadim]

Fantastic job man. I wouldn't dream this possible in JS.

[ciomio]

awesome channel ! thanks for these amazing content

[ezequielgarrido]

Thumbs up for using all cores of the thinking silicon.

[jmddotfm]

This is so good.

EDIT: I'm interested in seeing how this could be scaled up to look hyper realistic in terms of the planet size. Right now it looks awesome, but is clearly 'toy' size. It would be cool to figure out how to make the planet seem like it's gigantic, something like Star Citizen's planetary feel.

[cinecodegames]

That's awesome ! Thank you. It's very informative, I want to apply this to my ECS systems to make ThreadedSystem :D

[richardramirez]

Simon, is there any way to adjust fps programatically? I am getting 45fps at first, but 10fps after some seconds

[BackWoodsWisco]

Did you have a lot of problems getting SharedArrayBuffer to work? A while ago I went down a rabbit hole reading about how major browser vendors deactivated it do to security concerns in 2018 and how it's kinda back now but there are stricter requirements for using it.

[Lancelot]

I need to learn this.... can you share your story or provide some roadmap?

[culpritdesign]

Could you program a poor-man's version of unreal's nanite to auto-scale detail based on how many triangles are in a pixel instead of having detail pop in and out? It seems like you could check if a pixel contains more than 1 triangle and then instead of rendering the detail which is too small to see you estimate a pixel color or reduce the triangles somehow. I am talking out of my butt so maybe this makes no sense.

[horrabin]

If you have the secret sauce to understanding quaternions intuitively, that'd be neat. If that is possible. Your videos are good for getting back into ThreeJS after the webdev dayjob makes JS feel crufty and annoying.

[noxen_studios]

Personnaly got these errors x7 in console. Tried to enable gpu on chrome and allow file opening, no changes.

Uncaught ReferenceError: SharedArrayBuffer is not defined
at
at self.onmessage

Same results on other further videos that uses threads (which is logicle)

[starburstdragon]

Maybe to create earth size object is possible to have geometry defined in doubles - at it's real scale - then to make a vector from camera to vertices of this object(there is Vector3d double version of float Unity3d standard version of this class on github) then scale it down (v/1000) and get it closer to camera but in a way that it covers original big scale geometry completely and give impression of big objects - basically u have smaller triangles near camera that cover those bigger real scale triangles that are far a way and of course 1000 times bigger. Only when camera is close enough u create triangles that have original not scaled dimensions - maybe this approach might work? Basically what is far is scaled what is close has real dimensions