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

Follow me on:
Twitter: https://twitter.com/iced_coffee_dev
Github: https://github.com/simondevyoutube/

In this project we tackle integrating threading and dedicated web workers to supplement the mesh generator and endless terrain system built in three.js/webgl. Specifically, we use JavaScript’s web workers feature to move work off the main execution thread into the background, so that the mesh generation for the procedural terrain can take place in parallel across multiple cores.

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.

The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.

In addition to the web workers, we use a newer feature called “module workers”, introduced recently in chromium based browsers. These allow for cleaner code, since we can reuse the existing module setup. Read more about them at web.dev linked below. Unfortunately, this means that this demo specifically will only work in Chromium based browsers, at least at the time of posting.

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.

Special thanks to ideaspy, check out their channel here: https://www.youtube.com/channel/UCIBrt2CIXIB7lJfQ8Tuspmg

Mozilla’s Docs: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Module Workers:
https://web.dev/module-workers/