Build WebGPU apps with PlayCanvas | Hacker News Reader

Build WebGPU apps with PlayCanvas

blog.playcanvas.com

147 pointspjmlp43 comments

Open articleView on HN

You can also build Unreal Engine 5 applications for WebGPU as well! See demos linked below:

https://simplystream.com/demos

Edit: These demo should load faster, but use WebGL:

https://topdown.tiwsamples.com/

https://vehiclegame.tiwsamples.com/

More like you can wait for loading Unreal Engine 5 applications for WebGPU today ;)

The car configurator demo loads a 117 MBytes WASM blob and then hundreds of tiny files between a few hundred bytes to a few KBytes, both extremes are worst case for a web application, it's quite hilarious really.

The demo didn't finish loading while writing this comment, and it doesn't look like the loading of those tiny files will ever end...

Yeah but the fact is that it works today, and will only get better and faster with time.

I bet there's a lot of cheap wins by bundling all those tiny files in a few bigger ones. But minimizing the WASM blob for a humongous native engine like Unreal Engine 5 sounds like a real challenge. Even when this is reduced by 90% it's still 10x bigger than Unity's web output, which is 10x bigger than a specialized WASM game engine designed for the web as "first class citizen".

I have higher hopes for the web people (like PlayCanvas, Babylon, threejs, etc...) writing a proper WASM game engine by "scaling up" their experience of building browser rendering engines, than the traditional "native game engine" people "scaling down" to web requirements (especially when it comes to time needed to start into the game - the entire asset loading system of native engines needs to be rebuilt from scratch for this).

We've actually managed to reduce the WASM runtime for UE5 to just 8MB compressed.

In regards to downloading assets, we've built out an asset streaming system to address this. It allows you to dynamically load in just what you need, when you need it, while everything else that isn't needed right away can be fetched at runtime.

Introducing the cdn of pre built wasm blobs...

I remember the experience of Unreal Engine demos compiled to asmjs a decade ago being more or less the same, taking absolutely forever to load before anything happens. It doesn't feel like much progress has been made on that front.

Try these demos instead (Unreal Engine using WebGL 2.0)

https://vehiclegame.tiwsamples.com/

https://topdown.tiwsamples.com/

Those aren't as bad, about 20 seconds to get going from a cold cache. Car Configurator is incredibly slow though, I timed it at about 8 minutes to load from scratch and when it finally got there it was unusably laggy until I refreshed and let it start again with a pre-warmed cache. According to Chromes internal task manager the CarConfig tab is continuously using about 500% CPU (i.e. five entire cores) and 5GB of RAM despite very little going on in the demo. This is on a current-gen desktop processor.

That's pretty neat, not much in the way of progress bar for me but they load in about 30 seconds. And it seems a little choppy at times but playable. Reminds me of late stage flash era games.

> Yeah but the fact is that it works today, and will only get better and faster with time.

And your assumption is based on what exactly?

WASM + WebGPU don't magically make the whole game, its assets and the engine it uses appear on your computer.

The demo didn't finish loading on a 4090 after 5 minutes...

Which demo did you try? The car configurator? Also if you're using Firefox, WebGPU isn't supported there yet, so I recommend trying using a Chromium browser.

DevTools will most likely help with debugging.

In my case, several of the WebGPU demos on https://simplystream.com/demos fail (while keeping on falsely showing "Loading") with the error message (in DevTools):

"WebGPU requestDevice failed, trying low spec DOMException: Failed to execute 'requestDevice' on 'GPUAdapter': Required limit (64) is greater than the supported limit (32)."

Was using latest Chrome

Didn't work

Honestly Unreal is incredibly suspect in these kinds of applications. Unreal's biggest hallmark is the incredible amount of shaders it generates (thousands for a simple scene) which leads to constant shader compilation delays and stutters even on desktop.

I can't imagine it being good in a web scenario where you can't even precompile.

I like the portability aspect, but between the microstutters, broken textures, and visual glitches, I'm not particularly impressed by these. I kind of feel like Java did this in the browser ten years ago, albeit at a lower resolution.

I guess it still needs work. It's not even available yet on Firefox, but I expected Chrome to work at the very least.

Edit: oh, GPU support doesn't work on Linux, that explains the weirdness. Guess I'll wait for either Firefox or Chrome to release their final releases before I start experimenting with this!

Demos - Cesium crashes my phone.

Edit. Car config the same

Unreal is a bloated way to develop WebGPU projects for the web. PlayCanvas is a sensible solution if your target is web.

If anyone here is using PlayCanvas then I would love to know why you chose it over the abundance of other game engines out there.

Every time I've taken a look at this engine it has always felt very limited. And with a $15/month subscription just to be able to create private projects I just can't justify it personally. I would love to be convinced otherwise though.

I've used one of my game projects, and here's why I don't want to use it again:

- You're locked into an online IDE if you want to use the PlayCanvas editor (which is the main selling point).

- Third-party dependencies are hard to integrate (for the online editor).

- You can't use different JavaScript languages (again due to the editor).

- I've seen lots of minor version changes that break too many things (not very stable).

- The editor had some major UI bugs back then (and probably still does).

Pros:

- Web-first library.

- Unity-like editor.

- Easy to debug/access things with only a link.

- Recently started to support WebGPU.

I've used ThreeJS, PlayCanvas, and BabylonJS in serious projects. I've concluded that BabylonJS is my go-to web-based 3D library from now on.

Hey ertucetin!

(Disclaimer, I used to work at PlayCanvas and still manage the Discord)

Just to help feedback on some points:

- ES6 Modules and NPM support is actively being worked on and should be ready by end of year

- Typescript support will follow after that

(Mark who wrote this now works at PlayCanvas https://forum.playcanvas.com/t/playbuild-a-compiler-and-pack...)

- If an minor engine release breaks existing project, the editor supports running and building with the last minor and patch release. Minor releases should never break existing projects unknowningly (shader chunks was the last (and painful) known big breaking change). The PlayCanvas team are usually pretty good at dealing with reported minor version breakages.

If you do take on another web 3D project after this work is done, hopefully this will help with reconsideration :)

1) Can build to web mobile 2) Editor for the art team

I can't wait for compute shaders to be widely available on the web!

Any idea how close Apple is to shipping stable WebGPU? They are the main bottleneck in terms of marketshare, Chrome has shipped it on Windows and Android already.

They feel pretty close to shipping this to me: https://webkit.org/blog/14879/webgpu-now-available-for-testi... They recently shipped an update that resolves all issues running PlayCanvas' WebGPU backend. My guess is that we're looking at 6-12 months to reach production. To track WebGPU support, I recommend this awesome site: https://web3dsurvey.com/webgpu

It’s in advanced safari iOS feature flags right now, and has been for a while. It works on the demos for PlayCanvas, but I can’t speak to long term stability .

Hopefully it will release later this year to coincide with iOS 18. As other commenters have mentioned, it's already available for developer testing.

Linux is missing it too. And WebGL2 beats WebGPU on all GPU performance benchmarks.

What sort of things will compute shaders on the web unlock that wasn't possible before? Asking as someone with only a little graphics programming experience

Better crypto miners in the browser

I think you'll begin to see more advanced particle systems and physical simulations for a start. And 3D Gaussian Splatting will probably benefit too (since compute will probably enable much faster sorting of splats). So it's not really that this stuff wasn't possible before...but compute will enable these techniques to run far faster.

Native games on the web.

They unlock a lot of advanced graphics techniques that are too slow to do CPU-side but work well in parallel on GPU. It's a pretty wide variety of things, but e.g. lighting, mesh manipulation, terrain, voxels, post-processing.

Basically they bring us back to the days of 3D software rendering algorithms, now however fully accelerated on the graphics card.

See offline renders like OTOY, that make use of CUDA.

However we could already have gotten them via WebGL Compute, as they are part of OpenGL ES, had its implementation not been sabotaged.

https://github.com/9ballsyndrome/WebGL_Compute_shader

https://registry.khronos.org/webgl/specs/latest/2.0-compute/

https://issues.chromium.org/issues/40150444

With WebGPU, Stable Diffusion in the browser (watch out, once you click the "Generate" button, it will fetch 2 GByte of daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaata) (and probably make your laptop hang whiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiile generating, as you can tell by my typing).

https://websd.mlc.ai/

Venge.io is probably one of the most impressive games I've played in the browser, and was built using PlayCanvas.

I think Playcanvas would do well to focus on the basics, like being able to export/import variables in the standard js way, being able to develop offline, using your own source control. I could go on.

Support for Javascript modules looks like it is in-progress: https://github.com/playcanvas/engine/issues/4767

Developing offline with the engine-only (https://github.com/playcanvas/engine) is obviously an option, but I wouldn't hold your breath for an offline editor.

That issue was opened in 2022. Honestly if you really get into the nitty gritty of PC it becomes quickly apparent there’s some very strange design choices and priorities.

You can produce some great stuff but there are many dev-exp headaches

Hey PUSH_AX! (Disclaimer, I used to work at PlayCanvas and still manage the Discord)

- ES6 Modules and NPM support is actively being worked on and should be ready by end of year

- Typescript support will follow after that

(Mark who wrote this now works at PlayCanvas https://forum.playcanvas.com/t/playbuild-a-compiler-and-pack...)

You can do all that, when you develop without online Editor. In that regard, there is no difference between PlayCanvas, BabylonJS or ThreeJS. You can pick the one you are more familiar with.

Reply on news.ycombinator.com