Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does 2D drawing frameworks such as Pixi.js make canvas drawing faster?

Tags:

People also ask

Is PixiJS fast?

The biggest advantage of Pixi is its speed Pixi. js is a devoted rendering engine. It uses WebGL for faster performance, making 2D rendering very fast.

How does PixiJS work?

At its heart, PixiJS is a rendering system that uses WebGL (or optionally Canvas) to display images and other 2D visual content. It provides a full scene graph (a hierarchy of objects to render), and provides interaction support to enable handling click and touch events.

Does PixiJS use canvas?

Create a PixiJS canvas PIXI doesn't render objects directly to the DOM. Instead, it has a renderer that generates an HTML5 canvas that serves as a display area for objects like sprites and textures in the browser.

Is PixiJS open source?

PixiJS is an open source, web-based rendering system that provides blazing fast performance for games, data visualization, and other graphics intensive projects.


I found a bunnymark for Javascript canvas here.

Now of course, I understand their default renderer is using webGL but I am only interested in the native 2D context performance for now. I disabled webGL on firefox and after spawning 16500 bunnies, the counter showed a FPS of 25. I decided to wrote my own little very simple rendering loop to see how much overhead Pixi added. To my surprise, I only got a FPS of 20.

My roughly equivalent JSFiddle.

So I decided to take a look into their source here and it doesn't appear to be that the magic is in their rendering code:

do  
{
    transform = displayObject.worldTransform;
            ...
    if(displayObject instanceof PIXI.Sprite)
    {

        var frame = displayObject.texture.frame;

        if(frame)
        {
            context.globalAlpha = displayObject.worldAlpha;

            context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);

            context.drawImage(displayObject.texture.baseTexture.source, 
                               frame.x,
                               frame.y,
                               frame.width,
                               frame.height,
                               (displayObject.anchor.x) * -frame.width, 
                               (displayObject.anchor.y) * -frame.height,
                               frame.width,
                               frame.height);
        }                      
    }

Curiously, it seems they are using a linked list for their rendering loop and a profile on both app shows that while my version allocates the same amount of cpu time per frame, their implementation shows cpu usage in spikes.

My knowledge ends here unfortunately and I am curious if anyone can shed some light on whats going on.