5 ms·

Web Game Engines and Libraries

89 points by jverrecchia 2y ago

Herdinger 2y ago
A bit off-topic, But I just want to raise awareness that currently it is impossible to get 60fps for a canvas in chrome on MacOS without dropped frames: https://www.vsynctester.com/ https://www.vsynctester.com/ I have tested with an M2 Air and an older Intel MacBook Pro. I think this is related to this bug report (open for many years) but I am not sure: https://issues.chromium.org/issues/41136434 https://issues.chromium.org/issues/41136434 One might say MacOS users use Safari most of the time, but sadly it is not possible to get a pixel perfect (or at least not wildly off) canvas if a user changes the zoom settings: devicePixelRatio does not change on zoom as it does in other browsers and I believe the spec. https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi... This is a decision made for accessibility reasons on Apples part, but I can’t find the quote on that anymore. Alternative mechanisms to size the internal resolution of a canvas correctly are also not supported on Safari.
dvh 2y ago
Some time ago I needed some 3d on web so I did simple rotating textured cube demo and out of 30 webgl libraries tested only 2 achieved 60fps for such a simple demo. On web you have no performance to spare so when you plan on making larger project test performance first. If it's slow with simple stuff, it's only get worse as you add more and more stuff. (Sorry I don't remember which 2 were fastest, you should do your own tests anyway because when you will be writing your rotating cube demo you will read their documentation, maybe even posts on their community forums and you'll learn how good is doc and how friendly is the community)
- meheleventyone 2y ago
  Wow, how long ago and what device!? It’s definitely not an issue I’ve come across. Even when people have disabled HW acceleration I would think most devices wouldn’t even sniff.
- ridruejo 2y ago
  Check out Renderlet https://www.renderlet.com/ https://www.renderlet.com/
  - seanisom 2y ago
    Yes! You should be able to get nearly native performance for that sort of pipeline out of a WebGL backend.
hopfog 2y ago
I'm building a JavaScript game in my own engine, which in retrospect was a big mistake considering the game utilizes a lot of multithreading (the game is "Noita meets Factorio" so it's required for the simulation). You can only share memory between threads using a SharedArrayBuffer with raw binary data and you need special headers from the web server to even enable it. This means that I've had to write a lot of convoluted code that simply wouldn't be necessary in a non-browser environment. Other than that I really like that I can piggyback on the browser's devtools and that I can use the DOM for the UI.
- speps 2y ago
  You probably found it already but performance wise you should look into WebAssembly: https://maxbittker.com/making-sandspiel https://maxbittker.com/making-sandspiel
  - hopfog 2y ago
    Yes, this is a really good article that I can highly recommend if you're interested in these type of "falling sand" simulations. A big difference between a classic powder toy game like in the article and Noita is that Noita needs to run a much larger simulation that extends beyond the visible canvas. So while multithreading is probably not needed in the former it's most likely needed when the game is a scrolling platformer. I posted a GDC talk by the Noita devs as a reply to a sibling comment if you're interested in their tech.
- Joel_Mckay 2y ago
  There are plenty of babylon.js & physics package demos around. The WebGL support can be an issue on some machines, but when it does work... things like procedural fog/pseudo-procedural-water/dynamic-texture-updates look fairly good even on low-end gpus. Also, the free Blender addon can quickly export basic animated mesh formats that will save a lot of fiddling with assets later, and the base library supports asset loading etc. Like all js solutions your top 3 problems will be: 1. Audio and media syncing (don't even try to live-render something like a face mocap) 2. Interface hardware access (grabbing keyboard/mouse/gamepads is sketchy) 3. Game cheats (you can't trust the clients world constraints are true) 4. web browser ram/cpu overhead The main downside of using __any__ popular game-engine is asset extraction is a popular hobby for some folks (only consoles sort of mitigate this issue). Best of luck, =3
throwaway38375 2y ago
Kaboom was a pleasure to use. Don't get me wrong, it's very simple, but it was fun. Felt like using Flash again. :)
julius 2y ago
One of the sites has a fantastic landing page: https://needle.tools/ https://needle.tools/ (you scroll through 3D scenes)
- polotics 2y ago
  the marketing is indeed super slick, in terms of added value for the framework, as needle is built on top of threejs, I'm not sure I'll bite
  - creativenolo 2y ago
    I only skimmed the landing page but it seems like it helps more with the while pipeline (asset creation, packing and optimising) rather than just the end rendered.
- ropejumper 2y ago
  I admit it's really cool, but it's not a good fit for a landing page IMO. Would be great if it was behind a "demo" button or something. Though maybe I'm not the target audience.
mdtrooper 2y ago
https://godotengine.org/ https://godotengine.org/ and export to web .
- RaycatRakittra 2y ago
  While you absolutely can use Godot to export to web, I found the exports themselves to be pretty lacking. For one, the export size is much larger compared to other game engines and frameworks. Because we're targeting web and not desktop, small size is a must-have as many people who play web games are more likely to leave and never come back if they're waiting for the game to load.
  - nightowl_games 2y ago
    Export size is very important. We got our Godot export (assets + wasm) down to < 10mb after brotli compression for https://goobershot.winterpixel.io/ https://goobershot.winterpixel.io/ I believe the wasm is about 5mb and the .pck is about 5mb. You can shrink the wasm by disabling unused modules in your Godot compilation and not compile stuff you don't need. You can remove debug symbols, and enable link time optimization as well. We could push our export size even smaller, but I have higher priorities.
- jaimex2 2y ago
  If you were serious about making anything this would be the way to go.
  - kelthuzad 2y ago
    these guys seem to be serious https://equinox.space/ https://equinox.space/ and they used threejs
iainmerrick 2y ago
Three.js is really good and Babylon.js looks good too. But when I was evaluating 3D engines recently I was surprised to find that neither one is properly tree-shakable -- you need to import almost the whole core engine even if you’re only using a tiny part of it. Other engines are either lacking features, or also aren’t tree-shakable, or both. (For example, I think OGL is shakable but it’s much more low-level, just a very thin wrapper around WebGL.) I guess it’s no big deal as both big engines minify down to around 500KB, IIRC. Just a shame they can’t get smaller than that if you just want to make a tiny little 3D widget.
lovegrenoble 2y ago
I'm in love with Gamemaker, which got me interested in programming: https://gamemaker.io https://gamemaker.io
debo_ 2y ago
I've been building in LittleJS a lot recently, and it's very enjoyable (for small games, at least.) I get Pico8 vibes using it. https://github.com/KilledByAPixel/LittleJS https://github.com/KilledByAPixel/LittleJS
nox101 2y ago
three.js is not a game engine. it’s a 3d rendering library. It has no feature of a game engine. No collisions, no physics, no input systems, no facilities for game objects or ai or state machines etc… I have a feeling other libraries on the list are similar
- CaptainOfCoit 2y ago
  The heading of the section is "Engines and libraries", and the subtitle for Three.js is "3D library" so seems correct? The page doesn't make the claim that Three.js is a game engine.
- xray2 2y ago
  Three js has quite a few examples of collision and LOD in its examples folder, I feel you are underestimating it
CaptainOfCoit 2y ago
Missing one of the best choices as long as "maturity" isn't on the top of your list: Bevy - https://bevyengine.org/ https://bevyengine.org/ Game engine written in Rust, leveraging ECS in almost every place and way, with a really capable WASM export option. Wrestling ECS for the first time might take you some time, but in my experience helps you keep game code as clean and decoupled as game code could be.
- plopz 2y ago
  Bevy doesn't have great wasm support currently especially with multithreading but they are working on it.
- jverrecchia 2y ago
  These are only JS engines. There is a dedicated page for Rust with Bevy: https://www.webgamedev.com/engines-libraries/rust-game-dev https://www.webgamedev.com/engines-libraries/rust-game-dev JS ECS libraries are listed here: https://www.webgamedev.com/code-architecture/ecs https://www.webgamedev.com/code-architecture/ecs
  - CaptainOfCoit 2y ago
    Ah true, the heading is currently "Web Game Engines & Libraries" which seems to have confused me. A better heading would be "JS/TS Engines & Libraries" I guess, as many of the Rust ones enable "Web" usage too.
hseager 2y ago
I've been making a text adventure as my first Rust project and really enjoying it. Maybe one day I'll turn it into a crate for making text games that compile to both CLI and WASM. https://hseager.github.io/you-are-merlin-www/ https://hseager.github.io/you-are-merlin-www/ https://github.com/hseager/you-are-merlin https://github.com/hseager/you-are-merlin
deleted 2y ago
[deleted]
vunderba 2y ago
I really like Phaser 3, but if you're more accustomed to a traditional polling-style engine loop (inputs, logic, physics, render), it does take a little getting used to. It's very much a "batteries included" game framework with the exception of a built-in map editor though you can just use something like Tiled.

89 points by jverrecchia 2y ago

A bit off-topic, But I just want to raise awareness that currently it is impossible to get 60fps for a canvas in chrome on MacOS without dropped frames: https://www.vsynctester.com/ https://www.vsynctester.com/ I have tested with an M2 Air and an older Intel MacBook Pro. I think this is related to this bug report (open for many years) but I am not sure: https://issues.chromium.org/issues/41136434 https://issues.chromium.org/issues/41136434 One might say MacOS users use Safari most of the time, but sadly it is not possible to get a pixel perfect (or at least not wildly off) canvas if a user changes the zoom settings: devicePixelRatio does not change on zoom as it does in other browsers and I believe the spec. https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi... This is a decision made for accessibility reasons on Apples part, but I can’t find the quote on that anymore. Alternative mechanisms to size the internal resolution of a canvas correctly are also not supported on Safari.

dvh 2y ago

Some time ago I needed some 3d on web so I did simple rotating textured cube demo and out of 30 webgl libraries tested only 2 achieved 60fps for such a simple demo. On web you have no performance to spare so when you plan on making larger project test performance first. If it's slow with simple stuff, it's only get worse as you add more and more stuff. (Sorry I don't remember which 2 were fastest, you should do your own tests anyway because when you will be writing your rotating cube demo you will read their documentation, maybe even posts on their community forums and you'll learn how good is doc and how friendly is the community)

meheleventyone 2y ago
Wow, how long ago and what device!? It’s definitely not an issue I’ve come across. Even when people have disabled HW acceleration I would think most devices wouldn’t even sniff.
ridruejo 2y ago
Check out Renderlet https://www.renderlet.com/ https://www.renderlet.com/
- seanisom 2y ago
  Yes! You should be able to get nearly native performance for that sort of pipeline out of a WebGL backend.

hopfog 2y ago

I'm building a JavaScript game in my own engine, which in retrospect was a big mistake considering the game utilizes a lot of multithreading (the game is "Noita meets Factorio" so it's required for the simulation). You can only share memory between threads using a SharedArrayBuffer with raw binary data and you need special headers from the web server to even enable it. This means that I've had to write a lot of convoluted code that simply wouldn't be necessary in a non-browser environment. Other than that I really like that I can piggyback on the browser's devtools and that I can use the DOM for the UI.

speps 2y ago
You probably found it already but performance wise you should look into WebAssembly: https://maxbittker.com/making-sandspiel https://maxbittker.com/making-sandspiel
- hopfog 2y ago
  Yes, this is a really good article that I can highly recommend if you're interested in these type of "falling sand" simulations. A big difference between a classic powder toy game like in the article and Noita is that Noita needs to run a much larger simulation that extends beyond the visible canvas. So while multithreading is probably not needed in the former it's most likely needed when the game is a scrolling platformer. I posted a GDC talk by the Noita devs as a reply to a sibling comment if you're interested in their tech.
Joel_Mckay 2y ago
There are plenty of babylon.js & physics package demos around. The WebGL support can be an issue on some machines, but when it does work... things like procedural fog/pseudo-procedural-water/dynamic-texture-updates look fairly good even on low-end gpus. Also, the free Blender addon can quickly export basic animated mesh formats that will save a lot of fiddling with assets later, and the base library supports asset loading etc. Like all js solutions your top 3 problems will be: 1. Audio and media syncing (don't even try to live-render something like a face mocap) 2. Interface hardware access (grabbing keyboard/mouse/gamepads is sketchy) 3. Game cheats (you can't trust the clients world constraints are true) 4. web browser ram/cpu overhead The main downside of using __any__ popular game-engine is asset extraction is a popular hobby for some folks (only consoles sort of mitigate this issue). Best of luck, =3

throwaway38375 2y ago

Kaboom was a pleasure to use. Don't get me wrong, it's very simple, but it was fun. Felt like using Flash again. :)

julius 2y ago

One of the sites has a fantastic landing page: https://needle.tools/ https://needle.tools/ (you scroll through 3D scenes)

polotics 2y ago
the marketing is indeed super slick, in terms of added value for the framework, as needle is built on top of threejs, I'm not sure I'll bite
- creativenolo 2y ago
  I only skimmed the landing page but it seems like it helps more with the while pipeline (asset creation, packing and optimising) rather than just the end rendered.
ropejumper 2y ago
I admit it's really cool, but it's not a good fit for a landing page IMO. Would be great if it was behind a "demo" button or something. Though maybe I'm not the target audience.

mdtrooper 2y ago

https://godotengine.org/ https://godotengine.org/ and export to web .

RaycatRakittra 2y ago
While you absolutely can use Godot to export to web, I found the exports themselves to be pretty lacking. For one, the export size is much larger compared to other game engines and frameworks. Because we're targeting web and not desktop, small size is a must-have as many people who play web games are more likely to leave and never come back if they're waiting for the game to load.
- nightowl_games 2y ago
  Export size is very important. We got our Godot export (assets + wasm) down to < 10mb after brotli compression for https://goobershot.winterpixel.io/ https://goobershot.winterpixel.io/ I believe the wasm is about 5mb and the .pck is about 5mb. You can shrink the wasm by disabling unused modules in your Godot compilation and not compile stuff you don't need. You can remove debug symbols, and enable link time optimization as well. We could push our export size even smaller, but I have higher priorities.
jaimex2 2y ago
If you were serious about making anything this would be the way to go.
- kelthuzad 2y ago
  these guys seem to be serious https://equinox.space/ https://equinox.space/ and they used threejs

iainmerrick 2y ago

Three.js is really good and Babylon.js looks good too. But when I was evaluating 3D engines recently I was surprised to find that neither one is properly tree-shakable -- you need to import almost the whole core engine even if you’re only using a tiny part of it. Other engines are either lacking features, or also aren’t tree-shakable, or both. (For example, I think OGL is shakable but it’s much more low-level, just a very thin wrapper around WebGL.) I guess it’s no big deal as both big engines minify down to around 500KB, IIRC. Just a shame they can’t get smaller than that if you just want to make a tiny little 3D widget.

lovegrenoble 2y ago

I'm in love with Gamemaker, which got me interested in programming: https://gamemaker.io https://gamemaker.io

debo_ 2y ago

I've been building in LittleJS a lot recently, and it's very enjoyable (for small games, at least.) I get Pico8 vibes using it. https://github.com/KilledByAPixel/LittleJS https://github.com/KilledByAPixel/LittleJS

nox101 2y ago

three.js is not a game engine. it’s a 3d rendering library. It has no feature of a game engine. No collisions, no physics, no input systems, no facilities for game objects or ai or state machines etc… I have a feeling other libraries on the list are similar

CaptainOfCoit 2y ago
The heading of the section is "Engines and libraries", and the subtitle for Three.js is "3D library" so seems correct? The page doesn't make the claim that Three.js is a game engine.
xray2 2y ago
Three js has quite a few examples of collision and LOD in its examples folder, I feel you are underestimating it

CaptainOfCoit 2y ago

Missing one of the best choices as long as "maturity" isn't on the top of your list: Bevy - https://bevyengine.org/ https://bevyengine.org/ Game engine written in Rust, leveraging ECS in almost every place and way, with a really capable WASM export option. Wrestling ECS for the first time might take you some time, but in my experience helps you keep game code as clean and decoupled as game code could be.

plopz 2y ago
Bevy doesn't have great wasm support currently especially with multithreading but they are working on it.
jverrecchia 2y ago
These are only JS engines. There is a dedicated page for Rust with Bevy: https://www.webgamedev.com/engines-libraries/rust-game-dev https://www.webgamedev.com/engines-libraries/rust-game-dev JS ECS libraries are listed here: https://www.webgamedev.com/code-architecture/ecs https://www.webgamedev.com/code-architecture/ecs
- CaptainOfCoit 2y ago
  Ah true, the heading is currently "Web Game Engines & Libraries" which seems to have confused me. A better heading would be "JS/TS Engines & Libraries" I guess, as many of the Rust ones enable "Web" usage too.

hseager 2y ago

I've been making a text adventure as my first Rust project and really enjoying it. Maybe one day I'll turn it into a crate for making text games that compile to both CLI and WASM. https://hseager.github.io/you-are-merlin-www/ https://hseager.github.io/you-are-merlin-www/ https://github.com/hseager/you-are-merlin https://github.com/hseager/you-are-merlin

deleted 2y ago

[deleted]

vunderba 2y ago

I really like Phaser 3, but if you're more accustomed to a traditional polling-style engine loop (inputs, logic, physics, render), it does take a little getting used to. It's very much a "batteries included" game framework with the exception of a built-in map editor though you can just use something like Tiled.