I also have another video covering this stuff (and more) from a game dev perspective on my other channel if you'd like to check it out: ruclips.net/video/7BXvpUbNRno/видео.html
Would be interesting to see the effect of WASM for the generation code too, you could write the wave function collapse code in Go or Rust or similar and load the WASM, maybe even load it in the worker too
I also used web workers in our companies project as a request intercepter to a 3rd party application. This also provided the benefit of a cheap caching mechanism.
A canvas is still a DOM element, and even using Phaser's WebGL renderer (which I am doing) still requires accessing the WebGL rendering context via the canvas element, so at least as far as I understand there isn't a way to avoid the DOM entirely for actually rendering the game visibly to the screen.
@@JoshuaMorony sure, you need a reference to the canvas to access it's APIs, but what do you need Angular for? Most Phaser configurations I saw used just a parent container selector - no frontend frameworks required. I think you could just pass around (client-server-client) the data for the terrain generation and leave rendering, as well as creating canvas element and maintaining context availability to Phaser. Am I missing something?
@@plastikbeau3695 yes you can absolutely build with just Phaser, my primary motivator for including Angular is to have Angular handle the UI because I just don't like managing UIs in Phaser. So basically the canvas sits behind everything, and Angular can overlay a UI on top. But then there are also some other convenient things about using Angular, like I'm using Injectable services to manage events/data and it's nice to be able to use things like the web worker generator.
@@JoshuaMorony I see, so it comes down to you being comfortable with Angular and forcing it into the workflow. All of the things you've mentioned are doable in Vanilla JS. I wouldn't take this route but you do you, might be educational for some.
@@plastikbeau3695 everything is doable in Vanilla JS, you don't ever need React or Angular or other stuff. But sometimes it gets the job done quicker. I wouldn't go this route either but sometimes speed is worth more than cleaner/lighter code.
Gaming with angular? That really caught my attention. How? Also what if you'd want to run your game in a node environment and not through browser? any alternatives?
Thjis is beautiful. Here's a question, with the sheer advances in GPU-native web browser support bluring the lines between a native mobile app or a PWA (or wrapped, don't really mind), web workers, and a TON of native support for other things - other than very few people targeting millions, is there really a benefit anymore to still doing native? This is mainly a mobile question
For a game I think there are definitely strong benefits to going with a lower level/non-browser language, but as for general mobile apps/PWAs I've been of the opinion for a while that JS via something like Ionic/Capacitor is good for the majority of use cases
@@JoshuaMorony Appreciate the opinion thank you very much. I have built a ton of Ionic stuff for firms with < 1000 users (usually employees, e.g. sales order lookup etc with some offline but not much) and started with Cordova, then Capacitor, but since then I have moved them to pure PWA for one reason. I HATE the app stores!
I haven't had the chance to use SharedArrayBuffer yet, but I have a fire spreading/heat transfer simulation mechanic in this game which is causing me some grief with performance still, I'm thinking there might be the potential here to utilise a worker/SharedArrayBuffer to improve this
Hey Josh, fantastic content as always. I second other commenters, please disable translations... it aggressively translates the technical terms, making me clueless. Plus, your voice and tone are recognizable, while the translations voices destroy your video content, to say the least.
Thanks, and you can switch to the original audio track in the settings for the video (I assume you can probably set this RUclips wide if you want to apply it to all videos by default too). It would be good if I could have the original audio track set by default but still have the audio dubs available for people who want them though.
The German translation for this video is "Web Coworkers". Just don't. Please. I know it's well meant but we're all software engineers. We speak English. If the title is translated, I won't click on the video. I won't watch the video.
It's a new feature that's enabled by default, I'm not sure if I have any control over it. I can control the audio dubs, but I haven't been able to find any settings for title translations, I think this might be a user side setting.
I mostly went with JS with this because I'm good with it, I can leverage Angular, and I figured it would be a good way to also learn more about perf optimisation in JS/browser. But yes, this path is going to make some things harder and hopefully I don't end up regretting it. At least I'll learn something.
@@JoshuaMorony Well, I'm not personally opposed to it, I just felt that WFC would benefit from a more performant language. I think you can even leverage wasm to do the heavy lifting and use JS for the core game logic, it is an interesting idea, don't you think? Also, talking about web frameworks, I'm personally curious, what is your opinion on solid-js, have you used it before? I recently used it and I felt it resonates with me more than angular, so I think your personal view on the enjoyability of it would be interesting
@@diadetediotedio6918 yes I absolutely agree, but also these are the sorts of awkward situations I kind of wanted to get myself into to see how I could solve it with JS (and yes wasm is absolutely something I want to look into) I've never used SolidJS, but I have followed its development somewhat, and if I were to pick a framework solely based on how closely it aligns to how I think about coding/app dev it would probably end up being either SolidJS or CycleJS
@@inlandish Benchmarks are always half of the story in this sense, but I never denied JS is performant (it is not performant). The question for me is that JS is not performant in tasks that don't involve allocating huge amounts of wasted memory and in compute heavy algorithms like WFC, most benchmarks in which JS is performant against other languages really just show that JS is running on a very good JIT and GC and the other languages are not. And in most of those benchmarks JavaScript is usually from 5-30x times slower than lower level languages most of the time consistently when we talk about compute-heavy algorithms.
I also have another video covering this stuff (and more) from a game dev perspective on my other channel if you'd like to check it out: ruclips.net/video/7BXvpUbNRno/видео.html
RUclips funily translated the title to Web-Mitarbeiter in german which means web coworker.
Would be interesting to see the effect of WASM for the generation code too, you could write the wave function collapse code in Go or Rust or similar and load the WASM, maybe even load it in the worker too
I can confirm that this works fantastically! I made a chess game where the bot player is written in C++ and runs in a web worker
Uff, yt translates everything into my native language. Horrible.
Web-Mitarbeiter
hahahah pensé lo mismo xD
Great video, very insightful, thanks!
I almost didn't click on this video, because RUclips shit-translated title and description
For me it said Web Employees 😂
@@gigachad8091 true, "Web-Worker" -> "Web-Mitarbeiter". It makes no sense.
Its really beyond me why Google does that and does not let you turn off this "feature"
I also used web workers in our companies project as a request intercepter to a 3rd party application. This also provided the benefit of a cheap caching mechanism.
Sounds like a service worker
@ralusek oh you got me. I totally mistake them for each other all the time
I like the way you think!
Why do you use DOM elements for terrain display in Phaser, doesn't it all happen in canvas?
A canvas is still a DOM element, and even using Phaser's WebGL renderer (which I am doing) still requires accessing the WebGL rendering context via the canvas element, so at least as far as I understand there isn't a way to avoid the DOM entirely for actually rendering the game visibly to the screen.
@@JoshuaMorony sure, you need a reference to the canvas to access it's APIs, but what do you need Angular for? Most Phaser configurations I saw used just a parent container selector - no frontend frameworks required. I think you could just pass around (client-server-client) the data for the terrain generation and leave rendering, as well as creating canvas element and maintaining context availability to Phaser. Am I missing something?
@@plastikbeau3695 yes you can absolutely build with just Phaser, my primary motivator for including Angular is to have Angular handle the UI because I just don't like managing UIs in Phaser. So basically the canvas sits behind everything, and Angular can overlay a UI on top. But then there are also some other convenient things about using Angular, like I'm using Injectable services to manage events/data and it's nice to be able to use things like the web worker generator.
@@JoshuaMorony I see, so it comes down to you being comfortable with Angular and forcing it into the workflow. All of the things you've mentioned are doable in Vanilla JS. I wouldn't take this route but you do you, might be educational for some.
@@plastikbeau3695 everything is doable in Vanilla JS, you don't ever need React or Angular or other stuff. But sometimes it gets the job done quicker. I wouldn't go this route either but sometimes speed is worth more than cleaner/lighter code.
Gaming with angular? That really caught my attention. How? Also what if you'd want to run your game in a node environment and not through browser? any alternatives?
this kind of workers can be used for example to create a chat?
Thjis is beautiful.
Here's a question, with the sheer advances in GPU-native web browser support bluring the lines between a native mobile app or a PWA (or wrapped, don't really mind), web workers, and a TON of native support for other things - other than very few people targeting millions, is there really a benefit anymore to still doing native? This is mainly a mobile question
For a game I think there are definitely strong benefits to going with a lower level/non-browser language, but as for general mobile apps/PWAs I've been of the opinion for a while that JS via something like Ionic/Capacitor is good for the majority of use cases
@@JoshuaMorony Appreciate the opinion thank you very much.
I have built a ton of Ionic stuff for firms with < 1000 users (usually employees, e.g. sales order lookup etc with some offline but not much) and started with Cordova, then Capacitor, but since then I have moved them to pure PWA for one reason. I HATE the app stores!
does receiving message from worker triggers Change detection ?
How did you managed to use worker from library? NX says it only can be added to application?
web workers are native to js
check mozilla docs
ever the excellent teacher
Joshua, I'd like to know if an OffscreenCanvas could have been helpful here ?
I haven't experimented with it and don't know much about it, so not sure, but potentially
Web worker + Shared Array Buffer + wasm = maximum performance
I haven't had the chance to use SharedArrayBuffer yet, but I have a fire spreading/heat transfer simulation mechanic in this game which is causing me some grief with performance still, I'm thinking there might be the potential here to utilise a worker/SharedArrayBuffer to improve this
Hey Josh, fantastic content as always. I second other commenters, please disable translations... it aggressively translates the technical terms, making me clueless. Plus, your voice and tone are recognizable, while the translations voices destroy your video content, to say the least.
Thanks, and you can switch to the original audio track in the settings for the video (I assume you can probably set this RUclips wide if you want to apply it to all videos by default too). It would be good if I could have the original audio track set by default but still have the audio dubs available for people who want them though.
I almost did not click on this video, because RUclips shit-translated title and description
The German translation for this video is "Web Coworkers".
Just don't. Please. I know it's well meant but we're all software engineers. We speak English.
If the title is translated, I won't click on the video. I won't watch the video.
It's a new feature that's enabled by default, I'm not sure if I have any control over it. I can control the audio dubs, but I haven't been able to find any settings for title translations, I think this might be a user side setting.
It's a shame the interface for working with web workers is so basic
5s in JS are 5ms in lower level languages, just saying
I mostly went with JS with this because I'm good with it, I can leverage Angular, and I figured it would be a good way to also learn more about perf optimisation in JS/browser. But yes, this path is going to make some things harder and hopefully I don't end up regretting it. At least I'll learn something.
@@JoshuaMorony
Well, I'm not personally opposed to it, I just felt that WFC would benefit from a more performant language. I think you can even leverage wasm to do the heavy lifting and use JS for the core game logic, it is an interesting idea, don't you think?
Also, talking about web frameworks, I'm personally curious, what is your opinion on solid-js, have you used it before? I recently used it and I felt it resonates with me more than angular, so I think your personal view on the enjoyability of it would be interesting
@@diadetediotedio6918 yes I absolutely agree, but also these are the sorts of awkward situations I kind of wanted to get myself into to see how I could solve it with JS (and yes wasm is absolutely something I want to look into)
I've never used SolidJS, but I have followed its development somewhat, and if I were to pick a framework solely based on how closely it aligns to how I think about coding/app dev it would probably end up being either SolidJS or CycleJS
That's not entirely true. Look at benchmarks and you will see JS is quite performant.
@@inlandish
Benchmarks are always half of the story in this sense, but I never denied JS is performant (it is not performant). The question for me is that JS is not performant in tasks that don't involve allocating huge amounts of wasted memory and in compute heavy algorithms like WFC, most benchmarks in which JS is performant against other languages really just show that JS is running on a very good JIT and GC and the other languages are not. And in most of those benchmarks JavaScript is usually from 5-30x times slower than lower level languages most of the time consistently when we talk about compute-heavy algorithms.