Most performant way to make a gradient alpha mask

[soylomass]

So I'm building this map editor: https://mapmaker.deeeep.io/map/mrbirdyflee_cartography

As you see, the separation between sky objects is too rough, I'd like to soften it. Each sky is a graphic object with textureFill and drawPolygon (because they are polygons)

 

So what I did is create an aditional graphic per side, draw an extension of the sky on each. After that I use a 1x300 texture of a white to black gradient, create a sprite with it, enlarge it and apply it as a mask to each graphic:

 

The problem is, when many of these objects are present on screen, the performance goes down, presumably because of the mask.

 

Does anyone know of a better way to do this?

Thanks!

[soylomass]

I also experimented with drawing the graphics at the side line by line (or polygon by polygon, actually) from alpha 1 to 0, but I found out that to look good it should have next to one line per pixel and it would require a lot of lines, I don't think it'll be performant either.

PS: Instead of sprite mask, in the first case, I tried with graphic mask, but it didn't respect it's content, it either showed all or nothing (no intermediate alpha values)

[ivan.popelyshev]

pixi-heaven had spriteMask for v4, but this particular feature wasn't ported yet.

You can try make a batch renderer plugin with shader that multiplies resulting color by alpha of your gradient: https://www.pixiplayground.com/#/edit/5iyQ5DmCftTiCOi2VxJ0i  that thing will be batched, if you specify "pluginName='myPlugin'" for all your sky objects.

[soylomass]

I feel writing shaders is far away from my possibilities, at least for now? Will investigate anyway. Thanks!

[ivan.popelyshev]

Well, either that, either you wait "someone" to move masked batched renderer to v5. Its not like we stop you from using all the power of shaders. Yes, some renderers have effective masks in-package, but not pixi.

[Jammy]

1 hour ago, soylomass said:

I feel writing shaders is far away from my possibilities, at least for now? Will investigate anyway. Thanks!

Feel you there bro I wouldn't touch shaders. I thought about this one a lot and what about maybe... A pixel art dither as a texture, repeated to the height of the screen, dithering from one color to transparency.

You could maybe even build the dither on an off screen canvas.

[soylomass]

2 hours ago, Jammy said:

Feel you there bro I wouldn't touch shaders. I thought about this one a lot and what about maybe... A pixel art dither as a texture, repeated to the height of the screen, dithering from one color to transparency.

You could maybe even build the dither on an off screen canvas.

The problem is that the skies are gradients, not solid colors, so the borders should not only be a gradient from top color to bottom color, but have an horizontal alpha gradient from 1 to 0.

[Jammy]

11 minutes ago, soylomass said:

The problem is that the skies are gradients, not solid colors, so the borders should not only be a gradient from top color to bottom color, but have an horizontal alpha gradient from 1 to 0.

Yea I see the issue...

You could do it like a 9-grid (i.e. 3-grid), e.g. the sky is a 1px width gradient rendered from a photoshop png the height of the sky (stretched to the desired width), and on each end of the sky you attach your gradient-ed dither from photoshop or such.

That way you could even do away with the pixel dither all together and just have joining skys with whatever gradient u want... but ofcourse im not sure on the impact of a stretched 1px texture, not tried it in pixi.

[soylomass]

54 minutes ago, Jammy said:

Yea I see the issue...

You could do it like a 9-grid (i.e. 3-grid), e.g. the sky is a 1px width gradient rendered from a photoshop png the height of the sky (stretched to the desired width), and on each end of the sky you attach your gradient-ed dither from photoshop or such.

That way you could even do away with the pixel dither all together and just have joining skys with whatever gradient u want... but ofcourse im not sure on the impact of a stretched 1px texture, not tried it in pixi.

The sky is made from a 1px width gradient, pixi works fine with that. But the gradients are made in real time as the users can change the colors of the skies, so everything has to be dynamic. 

[Jammy]

10 minutes ago, soylomass said:

The sky is made from a 1px width gradient, pixi works fine with that. But the gradients are made in real time as the users can change the colors of the skies, so everything has to be dynamic. 

I guess the only other way I can think... If the gradient was put onto offscreen canvas and you had an algorithm go along each edge removing pixel in a dither pattern with transparent pixel to create the dither.... Again though.. not sure on impact to performance.

[soylomass]

28 minutes ago, Jammy said:

I guess the only other way I can think... If the gradient was put onto offscreen canvas and you had an algorithm go along each edge removing pixel in a dither pattern with transparent pixel to create the dither.... Again though.. not sure on impact to performance.

Yes, maybe I could create a small square version (for example 100x100) of the sky gradient, apply the gradient transparency on it somehow and then create a texture out of it and use it in both sides enlarged/skewed, this way I would be using only a small additional texture per sky. (though maybe 100x100 will look bad when enlarged)

I will try this later.

[ivan.popelyshev]

>  it as a mask to each graphic:

you know about beginTextureFill , right?