GithubHelp home page GithubHelp logo

rudolfolah / canvas-engines-comparison Goto Github PK

View Code? Open in Web Editor NEW

This project forked from slaylines/canvas-engines-comparison

0.0 0.0 0.0 1.93 MB

Performance comparison of different canvas rendering engines.

Home Page: https://benchmarks.slaylines.io

License: MIT License

JavaScript 84.50% CSS 4.90% Pug 10.60%

canvas-engines-comparison's Introduction

Canvas Engines Comparison

https://benchmarks.slaylines.io/

Description

  • Up to 32000 different rectangles moving on a canvas with various speed
  • Different choice of libraries used to render the scene :
module kb
PixiJS
Mesh.js
P5.js
ZRender
Two.js
Konva.js
CanvasKit
Pencil.js
Paper.js
Fabric.js
Three JS
Scrawl-canvas
Pts
EaselJS
SVG.js
Next2D

Thanks to KaliedaRik for the (highly unscientific) comparison of the performance in different browsers (MacBook Pro 2019, 8k boxes):

Library Chrome Firefox Safari
Pixi 60 48 24
Scrawl-canvas 56 60 40
P5 15 4 44
Mesh 47 34 18
ZRender 13 4 28
Two 23 25 16
Konva 23 7 19
CanvasKit 17 19 22
Paper 16 6 16
Easel 11 4 28
Pencil 12 3 19
Pts 12 4 13
Fabric 9 4 9
SVG 10 7 10
Three 8 7 4
DOM 17 1 11
Raw JS 19 19 39

Pure WebGL implementation outperforms them all with 60/120 fps on modern hardware (2023 laptop/tablet/mobile) for 1M boxes due to GPU offload of position computations.

Quick Start

$ yarn install
$ yarn build
$ yarn start

Misc

A list of webgl libraries : https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc

canvas-engines-comparison's People

Contributors

gnykka avatar enzuo avatar dependabot[bot] avatar kaliedarik avatar redocecin avatar kostyfisik avatar gmartigny avatar alex-zamirouski avatar georeith avatar mkalygin avatar nicolas-chaulet avatar ienaga avatar rudolfolah avatar andreabogazzi avatar supercilex avatar borisovg avatar rparrett avatar samgrosen avatar proyang avatar vladmdgolam avatar williamngan avatar elchenberg avatar icicleling avatar pissang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.