Comments (6)
Oh ... fyi in case you are interested: the 2D molecular dynamics system: https://github.com/concord-consortium/lab
from pixijs.
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.
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.
- Stephen Bannasch
Concord Consortium, http://www.concord.org
from pixijs.
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.
considering this closed, reopen if there is still an issue that needs to be addressed.
from pixijs.
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)
- Bug: TypeError: Cannot read properties of null (reading 'uid') HOT 1
- Bug: The content of multiple texts overlaps with each other. HOT 17
- Bug: [v8] antialias=true drastically cuts performance even when idle HOT 3
- Bug: Arc line cap not re-rendered if graphics is cleared HOT 1
- Bug: v8 mask container bounds changes
- Bug: Unable to add a mask to the text HOT 1
- Bug: [v8] Multiple issues with mipmaps HOT 7
- Bug: Sprite alpha masks broken in chrome & edge HOT 7
- Bug: V8 text stroke is applied even with width 0. Also strokeThickness does not update at runtime
- Bug: [v8] double `onRender` of rendergroup? HOT 1
- Bug: Can't get updated worldTransform immediately
- Bug: [v8] arctifact when rendering big polygon with offscreen coordinates in Firefox and Safari HOT 4
- Is it possible to do a lossless rotation in Pixi?
- Bug: When forceCanvas is true, mask sprites with sprites doesn't work
- Bug: Some props like dropShadow and resolution are not updating for Text object.
- Bug: Generated Texture doesn't support scale mode since 8.1.0 HOT 2
- Bug: Events are firing twice when we have dynamic and static mode
- [bug] v8 NineSliceSprite doesnt works as mask on Sprite HOT 1
- Bug: v8 ESM is broken with esm.run HOT 4
- V8 Bug! HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixijs.