dinther

masking part of my transparent stage

Recommended Posts

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?

bridgecrossing.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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)

Wake_as_intended.jpg

Wake_as_with_No_blend.jpg

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.