Jump to content

best-practices approach to painting?


Recommended Posts

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:


  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


Link to comment
Share on other sites

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


(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

Link to comment
Share on other sites

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"

Link to comment
Share on other sites

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

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...