best-practices approach to painting?

[dmko]

I have some code which works just fine, but I'm not sure if there's a better way of drawing lines on the screen with a texture-brush and I also have a question about erasing

Here's what I'm doing atm:

SETUP

1. Create a RenderTexture of a certain size ("renderTexture")
2. Create a Sprite out of that, and add the Sprite to the stage ("viewSprite")
3. Create a Container, don't add anything to it yet ("drawBuffer")
4. Create an Array (or really object pool "pool") of sprites ("brushSprite") with the current brush texture (and other settings - color, size etc.). ("pool" - under the hood can grow, be reset when brush settings change, etc.)

DRAW A LINE from p1:Point to p2:Point

1. Calculate all the points we need to draw a line between the points (let's ignore this algorithm for now)
2. Get that number of brushSprites from pool
3. For each point - add a brushSprite to drawBuffer at that point
4. When all the children are added, call renderer.render(drawBuffer, renderTexture, false);
5. return all the used brushSprites to pool
6. remove all the children from drawBuffer

Here's my specific questions:

1. Is adding the children to drawBuffer and then calling renderer.render() less often going to be more efficient than just renderer.render() each sprite directly?
2. How can I sprinkle in an erase functionality to this? I'm only concerned about webgl if it matters, canvas support isn't absolutely necessary (and I mean true erase, like if there's an image underneath the viewSprite that image should bleed through - painting a solid color onto the renderTexture won't suffice

Thanks!

[ivan.popelyshev]

1. yes, a bit. It'll be batched.

2. sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY, use black where you want to erase, white for pixels that you wont affect.

You can also try to use ADD blendmode when you draw things: use white where you want to affect pixels and black where you dont want.

[dmko]

Thanks... couldn't get it to work though, is just drawing black:

https://codepen.io/anon/pen/oWyoxm?editors=0010

(it first paints a bunch of circles in random colors, and then tries to erase every other line - but you can see that every other line just gets painted black instead)

I get it's not exactly what you wrote since the alpha pixels would need to be changed to white... but still - the black parts aren't erasing

[ivan.popelyshev]

oh, right.. it paints black, not transparent  We have to use this blendmode function: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFuncSeparate Pixi doesnt know how to do that, we need to override webglstate and other things that will use 4 parameters from webgl blendmodes instead of 2, then add special blendmode in "renderer.blendMode", please find it in pixi sources, its array of something like "(gl.ONE, gl.ONE)". We have to do some magic with 2 additional parameters "srcAlpha" and "dstAlpha".

Sorry, I cant give you much of my time right now ping me in weekend? I wanted to do that improvement some time ago, we need it for multiple reasons, including your "drawing case"

[dmko]

Thanks!

[dmko]

Opened as an issue @ https://github.com/pixijs/pixi.js/issues/4027\

[dmko]

Forgot to ping you over the weekend, sorry! Very interested if/when you make progress though

[ivan.popelyshev]

Yeah, I made https://github.com/pixijs/pixi.js/pull/4049 but i dont think it will be merged in v4  I'm waiting for @Mat Groves approvement. And I still dont know which blendmode you can use, but at least with that thing you can experiment! Try pass diferent constants as in https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc  , in "new BlendMode" first two are for RGB, third and fourth are for alpha. Also you can specify different blend equations. Binary is here: http://pixijs.download/dev-blendmodes-class/pixi.js