Jump to content

Trying to build a paint application with Pixi


Recommended Posts

I am trying to build a HTML5 paint application similar to Photoshop or Painter. I'm not trying to build something full featured, but instead am building something stripped down that supports my core use case which is painting over existing images. I want this app to be nearly as good as a native app (I can dream right?) and work on desktop, mobile, and tablets.


Here's my requirements:

  1. Display a backing image of some kind. These may be up to 3k*2k pixels in size.
  2. Paint on top of this semi-transparently; maybe have 2+ layers.
  3. Full-screen pan and zoom of the canvas, with full-screen display.
  4. On mobile, support two-finger pan/zoom/rotate and paint with a finger or stylus.

I can do all of this today with HTML5 canvas, with one key problem - performance. I tried to figure out how to use PIXI, but I couldn't figure out how to structure this. I was calling Texture.fromCanvas(...) on each frame to update from my backing store, but it seems this doesn't update the existing texture.


There are two parts to the performance for this app.

  1. Drawing - naive drawing in cavas causes my computer to heat the room; I think I need to do some sort of dirty tracking and redraw only where the stylus touched.
  2. Pan/Zoom - My HTML5 implementation is nice and smooth when the window is small, but maximize the screen and it stutters and is slow. This is not a good experience. In contrast, the tiling example from PIXI is smooth full screen.

The challenge for pan/zoom in Pixi is that I have several layers of potentially large size, and PIXI doesn't seem well suited to this case. However, I suspect WebGL is likely faster at panning than canvas (even if it's accelerated); I just don't know how to do this.


Does anyone with PIXI (or WebGL / CSS) experience have any ideas how I could achieve a performant simple painting app in PIXI?


Thank you!

Link to comment
Share on other sites

PIXI is a bitmap renderer and scene graph, that doesn't really jive with what you are attempting to create. You will likely lose performance using pixi to "draw" instead of just doing it yourself. PIXI is really for sprite-based scene graph applications, most of its speed comes from WebGL texture batching which doesn't really apply to free-form drawing applications.

Link to comment
Share on other sites

If you want to clear a rectangle portion of a render texture I've used the following code to add a clearRect function to the PIXI.RenderTexture class

// **********************************************************        // add clear rect to PIXI RenderTexture        // **********************************************************        PIXI.RenderTexture.prototype.clearRect = function(x, y, w, h){            //.log("clear rect x: " + x + " y: " + y + " w: " + w + " h: " + h);            if(this.renderer.type === PIXI.WEBGL_RENDERER){                var gl = this.renderer.gl;                // turn on the scissor test.                gl.enable(gl.SCISSOR_TEST);                // set the scissor rectangle.                gl.scissor(x, y, w, h);                // clear                this.clear();                // turn off the scissor test so you can render like normal again.                gl.disable(gl.SCISSOR_TEST);            } else {                this.textureBuffer.context.clearRect(x, y, w, h);            }        };
Link to comment
Share on other sites

Bah! I forgot I posted this last night, I ended up using context directly on a phaser BitmapData instance and used clearRect with dirty=true.

In any case, thanks for sharing! It was really interesting to see how you did the webgl version, it is the first time I have seen a simple understandable use case and feel intreaged to explore further.

Cheers lads.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...