Trying to build a paint application with Pixi

[mierle]

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!

[xerver]

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.

[clark]

Would you not use a RenderTexture for the Drawing? I am about to start something similar (more basic) with no pan/zoom. 

[xerver]

You *could* but why use pixi if all you are going to do is use the stencil buffer? You are just including a bunch of stuff for no reason.

[clark]

Purely because it is over my head

[clark]

What is the best way to erase a portion of bitmap data?  For example, the equivalent of clear() but for only a rectangle region?

[alex_h]

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);            }        };

[clark]

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.

[nonamedude]

This library might suit your needs better

 

http://soulwire.github.io/sketch.js/