what is the best way to blend edge color of 2 neighbour polygon?

[lancety]

In my top-down view game, the terrain is formated with many polygon regions. each region has a different biome type. such as the below screenshot, one is a forest, another one has snow.  
It does not look good with a clear edge between the 2 regions. I want to make the edge colour blended, so the colour is smoothly transferred. 
appreciate any help, cheers.

 

[ivan.popelyshev]

make one biome edge to go on top of another biome edge and add gradient. oh right, pixijs doesnt have gradients, you have to use your own shader for that, or wait when i add it to something like graphics-smooth
 

or maybe gradient texture on a rope can do it

Edited August 31, 2021 by ivan.popelyshev

[lancety]

thanks @ivan.popelyshev, I spend this morning looking for how to implement gradient shader on polygon edge, did not work out yet, will keep trying.   Using rope for each region will make the logic more complex and I prefer the gradient option, by looking for the solution, I can improve my shader skill as well.

 

I need to mention one thing as well about the map,   other than polygon data for each region, I also have a mesh for all regions, I guess it will be easier to make the gradiant between regions on this map data, right?

[lancety]

I just worked out a way to make the blur looks good enough as I need.   how do you think @ivan.popelyshev

what I did:

1. background regions map blur - I simply made a BaseRenderTexture on the background graphic and made a sprite from it, the texture is generated with Linear ScaleMode, and make it low resolution to make basic color gradient

drawRegionShape(containerTemp, cachedMap, new MapColorDiscrete(), true, true);
const bgSprite = new PixiSprite(pixiTool.generateTexture(containerTemp, 1, 2));

2. apply a BlurFilter to the same sprite - this made a smooth gradient over the ScaleMode used in step 1, because step 1 still can see big rectangel pixel block when zoom in a lot. Using a BlurFitler further smoothed and make the issue to be less noticed

private _blurFilter: BlurFilter = new BlurFilter(128, 4);

bgSprite.filters = [this._blurFilter];
containerTemp.destroy({children: true});
container.addChild(bgSprite);

3. since my game support very large scale of zoom, the fixed blur value on BlurFilter will cause noticeable difference when zoom out to map level and zoom in to very close region view. So I added a listener to dynamically change BlurFilter.blur value based on zoom level.

protected _watchCamScopeLevel(level, prevLevel) {
    this._blurFilter && (this._blurFilter.blur = 128 / level);
}

 

This solution also provide to me a way to customise the display of water region, here I attached a lake region screenshot.

What I did:

on the background render texture drawing logic of step 1, I used darker green as under water / wet soil color, on top of that I made a graphics with light blue, which I am going to replace with dynamic scrolling water surface texture by calling fillTexture.

 

 

The Region edge color gradient result

Here I attached some sample result images to show the color gradient (or say actually it is blur) on different scale level

 

[lancety]

I noticed the BlurFilter takes 0.7ms per frame, which is not good. So I made little further improvement.

Firstly, make a container to draw all the regions on graphics same as above, then instead of generateTexture directly from container, I applied BlurFilter to the continer first, so when generateTexture, it uses BlurFilter effect on graphics output, then the generateTexture Linear scale will be smoothed beause of the blur effect, which with make a even better result than above step1 result.   ALSO more improtantly, it does not require render BlurFilter every frame;