├── .github
└── workflows
│ └── .ci.yml
├── .gitignore
├── .prettierrc.json
├── README.md
├── deploy.sh
├── package.json
├── src
├── babylon.html
├── canvas.html
├── dom.html
├── excalibur.html
├── hilo.html
├── index.html
├── kaboom.html
├── kaplay.html
├── kontra.html
├── melon.html
├── partials
│ ├── container.html
│ ├── footer.html
│ ├── head.html
│ └── header.html
├── phaser.html
├── pixi.html
├── public
│ ├── favicon.svg
│ ├── sprite.png
│ ├── spritesheet.png
│ └── style.css
├── scripts
│ ├── babylon.js
│ ├── canvas.js
│ ├── dom.js
│ ├── engine.js
│ ├── excalibur.js
│ ├── hilo.js
│ ├── kaboom.js
│ ├── kaplay.js
│ ├── kontra.js
│ ├── melon.js
│ ├── phaser.js
│ ├── pixi.js
│ ├── three.js
│ └── two.js
├── three.html
└── two.html
├── vite.config.js
└── yarn.lock
/.github/workflows/.ci.yml:
--------------------------------------------------------------------------------
1 | name: 'CI'
2 | on:
3 | - push
4 | - pull_request
5 |
6 | jobs:
7 | build:
8 | runs-on: ubuntu-latest
9 | if: github.ref == 'refs/heads/master'
10 | permissions:
11 | contents: write
12 |
13 | steps:
14 | - uses: actions/checkout@v3
15 | - uses: actions/setup-node@v3
16 | with:
17 | node-version: 16
18 | cache: 'yarn'
19 | - run: yarn install --frozen-lockfile --ignore-engines
20 |
21 | - name: Build
22 | run: |
23 | yarn build
24 | echo > ./dist/.nojekyll
25 | env:
26 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
27 | - name: Deploy to GitHub Pages
28 | uses: peaceiris/actions-gh-pages@v3
29 | with:
30 | github_token: ${{ secrets.GITHUB_TOKEN }}
31 | publish_dir: ./dist
32 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "es5",
3 | "tabWidth": 2,
4 | "semi": true,
5 | "singleQuote": true
6 | }
7 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Javascript rendering/game engines comparison
2 |
3 | https://shirajuki.js.org/js-game-rendering-benchmark/
4 |
5 | This is a sprite-based performance test that compares a set of Javascript-based rendering/game engines that are currently maintained. The test includes rendering a set of graphics/shapes and sprites.
6 |
7 | ## Description
8 |
9 | - A preset of up to 10.000 different sprites moving on a canvas with various speed
10 | - A custom option through the count query is also available for comparing sprite counts between libraries more freely. Be aware that drawing a large number of sprites on specific libraries may cause the test to freeze.
11 | - Compare drawing of graphics/shapes and sprites through the type query
12 | - Different libraries used to render the scene are chosen only if they have been maintained in the previous month of this benchmark. The following libraries compared and sorted by popularity (stars) are:
13 |
14 | | Name | Stars | Last Commit | Description | Game engine |
15 | | ------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
16 | | [three.js](https://github.com/mrdoob/three.js) |  |  | JavaScript 3D library. | no |
17 | | [PixiJS](https://github.com/pixijs/pixi.js) |  |  | The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. | no |
18 | | [Phaser](https://github.com/photonstorm/phaser) |  |  | Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. | yes |
19 | | [Babylon.js](https://github.com/BabylonJS/Babylon.js) |  |  | Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. | yes |
20 | | [Two.js](https://github.com/jonobr1/two.js) |  |  | A renderer agnostic two-dimensional drawing api for the web. | no |
21 | | [Hilo](https://github.com/hiloteam/Hilo) |  |  | A Cross-end HTML5 Game development solution developed by Alibaba Group | yes |
22 | | [MelonJS](https://github.com/melonjs/melonjs) |  |  | A fresh & lightweight javascript game engine. | yes |
23 | | [Kaboom](https://github.com/replit/kaboom) (deprecated) |  |  | 💥 JavaScript game library. | yes |
24 | | [Excalibur](https://github.com/excaliburjs/Excalibur) |  |  | 🎮 Your friendly TypeScript 2D game engine for the web 🗡️ | yes |
25 | | [Kaplay](https://github.com/kaplayjs/kaplay) |  |  | 🦖 A JavaScript/TypeScript Game Library that feels like a game. | yes |
26 | | [Kontra](https://github.com/straker/kontra) |  |  | A lightweight JavaScript gaming micro-library, optimized for js13kGames. | yes |
27 |
28 | ## Canvas and WebGL
29 |
30 | As a baseline for benchmarking, a DOM engine and Canvas engine for rendering shapes and sprites are included. Canvas is a 2D rendering context that lets us draw and manipulate sprites on an HTML canvas element. It's simple to use and supported by the majority of modern browsers, making it a popular choice for creating simple graphics, animations, and games.
31 |
32 | In contrast to Canvas, WebGL is a more powerful and versatile alternative. WebGL allows for more detailed and interactive 3D graphics, as well as access to the GPU, which improves performance even more than Canvas. As a result, WebGL is the most powerful choice for any web application that needs graphics-intensive rendering or interactive 3D scenes. However, when comparing Canvas and WebGL performance benchmarks with 2D graphics and sprites, it is important to remember that there may be some bias depending on the specific implementation as well as the environment in which the tests are run. Because WebGL is designed primarily for 3D graphics, it may not provide a significant performance boost over Canvas in a 2D context due to its higher resource requirements.
33 |
34 | To summarize, both technologies have advantages and are used in different scenarios depending on the project's specific needs. As a result, comparing the differences between canvas and WebGL with 2D sprites may be biased.
35 |
36 | ## Game engines and rendering engines
37 |
38 | A game engine is a software framework that gives one the tools and functionality one need to create and develop games. Input handling, physics, collision detection, and sprite animation are examples of the common features. A rendering engine, on the other hand, is a software component that is in charge of displaying and rendering graphics on the screen. It usually does not include the full set of tools and features found in a game engine. Three.js, Pixi.js, and Two.js are examples of such rendering engines.
39 |
40 | The rendering engine libraries Three.js, Pixi.js, and Two.js were tested on rendering 2D graphics and sprites for the performance benchmark. The most performant was discovered to be Pixi.js, followed by Three.js and Two.js. As a fallback, all of these support rendering in both the WebGL and Canvas contexts.
41 |
42 | In terms of performance, Babylon.js and Phaser outperformed the other game engines tested. The former is a game engine designed primarily for 3D games capable of rendering 2D sprites, whereas the latter has a longer history and a larger user base. Babylon.js was discovered to be slightly faster than Phaser, but both game engines performed reasonably well when tested.
43 |
44 | ## Conclusion
45 |
46 | It should be noted that being faster is not always preferable. Aside from performance, one must consider the features a library provides such as asset loading, sprite animation, input, etc. to easily create various games. In addition to this, some rendering/game engines may have a steeper learning curve than others, making them less desirable to use. It is important to consider user experience as well as speed in game development.
47 |
48 | Results of the benchmark on 10.000 sprites:
49 |
50 | 1. **Babylon.js**: [56 FPS] Babylon.js outperforms Three.js and has the best overall performance when it comes to rendering 2D sprites, despite being one of only two 3D engines in this benchmark - game engine. [(link)](https://shirajuki.js.org/js-game-rendering-benchmark/babylon.html?count=10000&type=sprite)
51 | 2. **Pixi.js**: [47 FPS] Good performance - rendering engine. [(link)](https://shirajuki.js.org/js-game-rendering-benchmark/pixi.html?count=10000&type=sprite)
52 | 3. **Phaser**: [43 FPS] The most popular library for HTML5 game development, and the performance demonstrates why. Overall, a good performance - game engine. [(link)](https://shirajuki.js.org/js-game-rendering-benchmark/phaser.html?count=10000&type=sprite)
53 |
54 | Honourable mentions:
55 |
56 | - **Kontra**: [60 FPS] To avoid frame rate issues, the game loop implementation of Kontra uses a time-based animation with a fixed dt. As a result, each update call is always guaranteed set to be 1/60 of a second. The update at 60 FPS in this case is not as smooth as in the other tests above, ranking it lower. - lightweight game engine. [(link)](https://shirajuki.js.org/js-game-rendering-benchmark/kontra.html?count=10000&type=sprite)
57 | - **Kaboom**: [3 FPS] Despite being one of the slowest libraries in terms of performance, developing with Kaboom was the most enjoyable. The library is jam-packed with features that make development simple and enjoyable. It has a straightforward syntax, and the code is simple to read and understand. The documentation and examples are also among the best of any library - game engine. [(link)](https://shirajuki.js.org/js-game-rendering-benchmark/kaboom.html?count=10000&type=sprite)
58 |
59 | The performance of the different libraries was measured by running a benchmark test on a computer with the following specifications:
60 |
61 | - OS: `Microsoft Windows 11 Home - 10.0.22621 Build 22621`
62 | - CPU: `AMD Ryzen 5 4500U`
63 | - RAM: `8GB 2666MHz`
64 | - Browser: `Microsoft Edge - Version 109.0.1518.55 (Official build) (64-bit)`
65 |
66 | ## Readings
67 |
68 | - [A collection of WebGL and WebGPU frameworks and libraries](https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc)
69 | - [A collection of primarily HTML5 based game engines and frameworks](https://github.com/bebraw/jswiki/wiki/Game-Engines)
70 | - [quidmonkey's Benchmark comparison of pixijs and impactjs](https://github.com/quidmonkey/particle_test)
71 | - [slaylines' benchmark comparison of some popular canvas engines](https://github.com/slaylines/canvas-engines-comparison)
72 |
--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | # abort on errors
4 | set -e
5 |
6 | # build
7 | npm run build
8 |
9 | # navigate into the build output directory
10 | cd dist
11 |
12 | # place .nojekyll to bypass Jekyll processing
13 | echo > .nojekyll
14 |
15 | git init
16 | git checkout -B master
17 | git add -A
18 | git commit -m 'ci: deploy web build'
19 |
20 | git push -f git@github.com:shirajuki/js-game-rendering-benchmark.git master:gh-pages
21 |
22 | cd -
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-game-rendering-benchmark",
3 | "private": true,
4 | "version": "1.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "NODE_ENV=development vite",
8 | "build": "vite build",
9 | "deploy": "bash deploy.sh",
10 | "preview": "vite preview"
11 | },
12 | "devDependencies": {
13 | "vite": "^4.0.0",
14 | "vite-plugin-handlebars": "^1.6.0"
15 | },
16 | "dependencies": {
17 | "babylonjs": "^5.42.0",
18 | "excalibur": "^0.30.3",
19 | "fpsmeter": "^0.3.1",
20 | "hilojs": "^2.0.2",
21 | "kaboom": "^2000.2.10",
22 | "kaplay": "^3001.0.12",
23 | "kontra": "^8.0.0",
24 | "melonjs": "^14.5.0",
25 | "phaser": "^3.55.2",
26 | "pixi.js": "^7.1.0",
27 | "three": "^0.148.0",
28 | "two.js": "^0.8.10"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/babylon.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head }} Babylon.js — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head }} Canvas — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/dom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head }} DOM — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/excalibur.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head }} Excalibur — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/hilo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head }} Hilo — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head index=1 }} Index — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/kaboom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head }} Kaboom v2000 — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/kaplay.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head }} Kaboom v3000 — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/kontra.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head }} Kontra — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/melon.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{#> head }} melonJS — JS Game Rendering Benchmark {{/head}}
4 |
5 | {{> header }}
6 |
7 | {{> container }}
8 |
9 |
10 | {{> footer }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/partials/container.html:
--------------------------------------------------------------------------------
1 |