masking part of my transparent stage

[dinther]

Ok, my project is going to be on ships2career.com .  Here is what I am doing:

I use pixijs as an overlay on Google maps. I animate ships as pixi sprites on a transparent stage but I want it to look like the ships pass UNDER a bridge. Currently I use a bitmap editor and create separate images for each bridge and render then in the pixi stage (see pic). Very inefficient and maintenance prone (When google updates satellite imagery).

I much rather specify a polygon outlining the bridge and somehow use a mask so the appropriate part of the pixi sprite ship is not rendered.

I played with masks but what I really need is the inverse of a mask I suppose but I understand that isn't going to happen unless I am prepared to change my local code (Not that I quite know how). Is there anyway I can achieve what is shown in the picture using a masking technique without the need to resort to image overlays?

[Fatalist]

You can erase parts of your image. To erase, you render transparent pixels without blending, so they replace the existing pixels.

Here is how you can do this with PIXI.Graphics - http://pixi-erase.netlify.com/ 

[ivan.popelyshev]

I actually have some kind of solution for that, but its just not public yet. It also solves cases for isometry, not only top-down.

In your case, I suggest either use masks, either add "PIXI.Mesh" above the bridge. Look at https://github.com/pixijs/pixi.js/blob/dev/src/mesh/Mesh.js . Also, Mesh will be faster.

[dinther]

15 hours ago, Fatalist said:

You can erase parts of your image. To erase, you render transparent pixels without blending, so they replace the existing pixels.

Here is how you can do this with PIXI.Graphics - http://pixi-erase.netlify.com/ 

This sir, is exactly what I was hoping to achieve. Thank you so much! Your example is very clear. here is my little test: http://ships2career.com/mask/mask.htm

I am a bit greedy here but, how would you suggest I simulate the bridge shadow on the ships deck only?

Next job. Checkout Ivans suggestion.

I will checkout the suggestion from Ivan as well of course.

[Fatalist]

No problem ; ) 

19 hours ago, dinther said:

how would you suggest I simulate the bridge shadow on the ships deck only?

I assume you have shadow shapes that you can draw using semi-transparent Graphics.

I see 2 ways:

1.Patch Graphics/BlendModeManager to use blendFuncSeparate instead of blendFunc when drawing the shadows, pass gl.ZERO, gl.ONE as 3rd and 4th arguments.

2.Make a filter that replaces shadow-only pixels with transparency. You can modify ColorReplaceFilter(to take alpha into account). Not as efficient as #1 but will do the job.

[dinther]

3 hours ago, Fatalist said:

No problem ; ) 

I assume you have shadow shapes that you can draw using semi-transparent Graphics.

I see 2 ways:

1.Patch Graphics/BlendModeManager to use blendFuncSeparate instead of blendFunc when drawing the shadows, pass gl.ZERO, gl.ONE as 3rd and 4th arguments.

2.Make a filter that replaces shadow-only pixels with transparency. You can modify ColorReplaceFilter(to take alpha into account). Not as efficient as #1 but will do the job.

You obviously are an advanced member. The above is way beyond me. I use libraries like Pixijs and managed to avoid having to get to grips with the lower level stuff. It means I am at the mercy of others but it allows me to shine elsewhere.

Unfortunately the erase solution you proposed and as shown in http://ships2career.com/mask/mask.htm doesn't work properly when there are transparent sprites around. The wake animation of the ships make use of transparent sprites and these no longer render correctly when I put a  GraphicsNoBlending object in a pixi group above all the rest. (The wake needs to vanish under the bridge as well of course)

[dinther]

On 8/4/2016 at 11:19 PM, ivan.popelyshev said:

I actually have some kind of solution for that, but its just not public yet. It also solves cases for isometry, not only top-down.

In your case, I suggest either use masks, either add "PIXI.Mesh" above the bridge. Look at https://github.com/pixijs/pixi.js/blob/dev/src/mesh/Mesh.js . Also, Mesh will be faster.

Love to hear more about the solution that is not public yet. Ships 2 Career is fully reliant on pixijs and maybe good enough as another showcase for your library. More than happy to promote pixijs more prominent on the ship 2 career landing page.

As for solutions proposed, I am sorry but I am going to need some hand-holding with code examples. Especially where it concerns masks and filters.

[Fatalist]

@dinther Right, there was a bug. Try now, this should work correctly - Link. I also included an example of rendering shadows.

[dinther]

17 hours ago, Fatalist said:

@dinther Right, there was a bug. Try now, this should work correctly - Link. I also included an example of rendering shadows.

Wow, I don't know what to say. I implemented your solutions and it all works nicely without any visible performance penalty. I don't know how to thank you but thanks anyway. Very happy

[ivan.popelyshev]

@dinther press "Like this" on @Fatalist posts, he needs that rep

Just for future use, here is the code for clearing a rectangle, may be someone will modify it that it will support polygons:

class ClearRect extends Container {
   constructor (
      fromX: number,
      fromY: number,
      private w: number,
      private h: number
   ) {
      super();
      this.position.x = fromX;
      this.position.y = fromY;
   }

   _renderWebGL(renderer: PIXI.WebGLRenderer){
      let gl = (renderer.gl as WebGLRenderingContext);
      let wt = this.worldTransform;

      gl.enable(gl.SCISSOR_TEST); // set the scissor rectangle.
      gl.scissor(wt.tx, wt.ty,
         wt.a * this.w,
         wt.d * this.h); // clear
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.disable(gl.SCISSOR_TEST);
   };

   _renderCanvas(renderer: PIXI.CanvasRenderer){
      let wt = this.worldTransform;

      renderer.context.clearRect(wt.tx, wt.ty, wt.a * this.w, wt.d * this.h);
   };
}

 

[Fatalist]

12 hours ago, dinther said:

Wow, I don't know what to say. I implemented your solutions and it all works nicely without any visible performance penalty. I don't know how to thank you but thanks anyway. Very happy

No worries man, it's just a couple lines of code ; ) Good luck with your project.

[dinther]

On 8/8/2016 at 9:47 AM, Fatalist said:

No worries man, it's just a couple lines of code ; ) Good luck with your project.

https:www.ships2career.com

Thanks again man. Were in Beta now. Greedy as ever I am hoping to get you to pull one more miracle from your sleeve.

The shadow polygons regenerated by your solution are useful in most cases but the edges are unnaturally sharp. Is there a way to blur or feather the edges?