[Question] Texture colour interpolation with transparent pixel

Questions
1

Dear experts,

I am facing an issue related to texture rendering with alpha/transparent edges.

I can see there are two options for interpolation Linear and Nearest. Most of the cases, linear is preferred as it provides smoother transfer signal.

Nearest

image
image1158Ă—792 32.4 KB

Linear

image
image951Ă—620 17.2 KB

However, when there are areas with very weak signal, there will be holes (represented by texture with transparent colour). When enable linear, these will be a very noticeable dark edge which may confused the user. This situation will become more critical when there are many coverage holes in a complicated environment.

image
image1413Ă—1224 61.6 KB

Please can anyone give some advice, how i can let the interpolation for example skip the pixels with transparency? I have tried an “alpha test” threshold, but it is very hard to define its value and it generates different effect at different location.

Texture Colour Interpolation | Babylon.js Playground

2

Would it be better to use alpha blending then? This way you could have a smooth transition

3

Something along these lines:
Texture Colour Interpolation | Babylon.js Playground

1 Like
4

Thanks @Deltakosh for your quick reply as always :grinning:s.

Alpha blender looks definitely better, I will test out more complex scenarios to see the results.

Will get back to you of my findings.

Thanks again.

1 Like
5

Hi @Deltakosh,

I have recently updated the method based on your suggestion. It works well in most cases.

One of the new issue I found is that the overlapped area will have strange blend issue.

Texture Colour Blend Issue | Babylon.js Playground

As you can see, the color of the overlap area has strange patches. But the overlap area is not transparent.

image
image739Ă—430 47.7 KB

Is it a bug or is there any way we can improve?

Many thanks.

6

This should work: Texture Colour Blend Issue | Babylon.js Playground

1 Like
7

Thanks. That is quick. :slight_smile:

I did try this setting before in our viewer. But it did not work at that time.

I compared the code, and find that we use “useLogarithmicDepth” to address glitch issues.

When it is combined with “needDepthPrePass”, it does not work properly.

Any suggestion? Many Thanks.

8

ha yeah..this is a problem yeah..

To address glitch issues: did you try to reduce camera.maxZ or increase camera.minZ

9

Thanks @Deltakosh .

We did set the MaxZ and MinZ, but since our scenario can be very large. The MaxZ normally is quite large, and some times, when you zoom out a lot, you can see the whole Earth…

I will try to set the signal material to be linear, and leave others be logarithm to see it works.

Will update the thread once i get the result.

1 Like
10

Ideally you can maybe also rescale the entire scene? It happens to be a good solution when you have a root node that can be used to scale down a scene

That may force you to redo some of your calculations but at the end of the day it could be simpler

1 Like