Git Product home page Git Product logo

Comments (6)

stepheneb avatar stepheneb commented on March 28, 2024

Oh ... fyi in case you are interested: the 2D molecular dynamics system: https://github.com/concord-consortium/lab

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 28, 2024

Thanks for the comprehensive tests @stepheneb ! The 2D molecular dynamics system is ace!

With regards to your findings, they do make sense I think.

There is 1 major difference between kinect.js and pixi.js that is causing the discrepancies. Kinect.js is SVG based and pixi.js is image based. The circle in the pixiDemo is being drawn to canvas using drawImage while kinect.js using stroke and fill calls.

Based on your findings, its clear some browsers draw primitives faster than they draw images in canvas.

I guess it comes down to what you are creating, if vector shapes are required its worth looking in to SVG/Primitive drawing based solutions (eg Kinect.js)

If you are creating more image based creations then bitmap based renderers are the best way to go (eg pixi.js)

cheers!

from pixijs.

stepheneb avatar stepheneb commented on March 28, 2024

At 1:14 AM -0700 4/11/13, Mat Groves wrote:

Date: Thu, 11 Apr 2013 01:14:48 -0700
Mime-Version: 1.0
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit
Content-ID: [email protected]

Thanks for the comprehensive tests https://github.com/stepheneb@stepheneb ! The 2D molecular dynamics system is ace!

With regards to your findings, they do make sense I think.

There is 1 major difference between kinect.js and pixi.js that is causing the discrepancies. Kinect.js is SVG based and
pixi.jsis image based. The circle in the pixiDemo is being drawn to canvas using drawImage while kinect.js using stroke and
fill calls.

You may be mixing up the D3.js framework which is deeply integrated with SVG and http://kineticjs.com/ which describes itself
as a "HTML5 Canvas JavaScript framework"

In the red-circle benchmark test for Canvas (KineticJS) + Shape Caching we are rendering into an HTML5 Canvas element:
http://bl.ocks.org/pjanik/5169961

So while it's also true and surprising that SVG performance is faster on the iPad than Canvas performance -- I was very
surprised to find that Pixi.js was a great deal slower than KineticJS setup to use Shape caching rendering to an HTML5 Canvas
on Safari, Mobile Safari, and the Android browsers.

I took a closer look at Piotr's red-circle benchmarks for KineticJS and Pixi.js.

I just looked at the KineticJS source and it is using context.arc() to draw circles to a canvas.

While for Pixi.js he is creating a red circle in a separate canvas and using PIXI.Texture.fromCanvas() to create a texture
thatPici.js manipulates.

So the slowdown on the iPad seems to be in how you are rendering your PIXI.Texture objects.

I wrote a heatmap canvas renderer as part of a research spike in JS performance for a hard-coded adaptation of a model
originally written in NetLogo about 18 months ago and I'm drawing directly into what is returned by context.getImageData().

http://stepheneb.github.io/avalanche2d-js/avalanche2d.html

This runs quite fast on an iPad.

Table of benchmark results:
https://docs.google.com/a/concord.org/spreadsheet/ccc?key=0AtvlFoSBUC5kdDM4cHJhU0I4NGg5TjlWRkQ0ZExpcGc

And the canvas rendering code (if it is useful):
https://github.com/stepheneb/avalanche2d-js/blob/master/src/avalanche2d.js#L75-L155

Pixi.js of course are solving a more general problem, but my heatmap rendering code shows that the problem isn't a performance
issue with just drawing into and ImageData object and then transferring that back to the view canvas.

So I wonder if there still might not be a way to speed up Pixi.js on an iPad.

It's on my list to look at this because I'd like to think more about using Pixi.js ... but many things are on my list and
sinceI haven't gotten to it yet ... I thought the least I could do was document my current findings here for you.

Note: I use 'iPad' when I actually mean Safari, Mobile Safari, and the Android browsers because the right now theiPadis the
most important platform on which I see this slowdown.

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 28, 2024

Doh! yup you are correct :)

Its quite interesting really! It must be just down to specific browser implementations of JS maybe?
As both engines are using similar drawImage calls?

Interestingly I just tried the tests on my ipad 2 Safari and got:

Pixi.js :

circles fps repaint
25 59.29 16.87
50 54.86 18.23
150 33.07 30.24
250 23.87 41.90
500 13.29 74.13
750 8.96 111.63

kinect.js:

circles fps repaint
25 59.59 16.91
50 40.85 23.14
150 19.61 51.74
250 12.72 82.35
500 6.36 157.27
750 4.29 232.9

from pixijs.

englercj avatar englercj commented on March 28, 2024

considering this closed, reopen if there is still an issue that needs to be addressed.

from pixijs.

lock avatar lock commented on March 28, 2024

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

from pixijs.

Related Issues (20)

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.