How can I implement a color changing caret?

[gordyr]

This is a strange title I know.  I will try to explain.

 

We have built a complete page layout/drawing/rich text editing application powered by PIXI.  Think of a web based Microsoft publisher.

 

Obviously within this we have the need to render a flashing caret/cursor when the user is editing text.

 

Currently this caret is a simple sprite with a tiny single color texture rather than PIXI.Graphics (so that it gets naturally antialiased when the textbox is rotated).  This sprite gets scaled vertically to match the size of a given font.  Right now the texture is simply black.  However we would like to make the caret color dependent on the color behind it.

 

e.g. If the caret is flashing over a dark area, that part of the caret becomes white, or is inverted.  When it is over a lighter area it becomes dark/black.

 

In PIXI's WebGL renderer only four blend modes are implemented so we cannot use these to achieve the desired effect.

 

My current thoughts are along the lines of writing a simple custom shader and applying it to the whole stage.  This shader would be fed the coordinates and size of the caret and then draw the caret based on each pixels lightness/darkness.  However this feels extremely overkill and would be quite difficult to get right when the caret/textbox is rotated etc.  There must be a simpler way. 

 

So the question is, what would be the best way to achieve this? 

[ivan.popelyshev]

Yeah, using filter (that shader solution) on that thing is overkill. What is actual blending function that you want?

 

Can you show me the app please? : - )

[gordyr]

I'm afraid I'm not allowed to show you the app itself at the moment.  Not until it's released anyway.

I've literally just a had an idea.  When the user begins text editing we could blit the stage to a 2d canvas once.  Keep this in memory, then as the caret moves, continually sample the pixel data of the area behind the caret on the 2d canvas with getImageData().  This should still be fast as we would only be sampling a few pixels each time.  Then draw the caret itself pixel by pixel based on the inverse of the sampled pixel data.  Either in a custom fragment shader or by simply replacing the sprites texture each time the caret moves. (The shader would of course be faster)

This still feels a bit hacky.  But it should work.

If anyone has any better ideas, I would love to hear them.

[ivan.popelyshev]

Yes,wrap all stage in container, apply your own filter. Can you tell me what mathematical function you need for blending? I still dont understand that effect