A flashing line occurs when I write panorama shader by myself

Hello, I am interested in creating a custom panorama shader. However, when testing it on my phone, I noticed a flashing line appearing on the screen at the intersection of the panorama image. I have observed that changing the sampling mode to ‘LINEAR_NEAREST’ resolves this issue, but I need to use ‘BILINEAR’ for my purposes. How can I eliminate the flashing line while still using ‘BILINEAR’ texture sampling?

Here is the playground: custom shader | Babylon.js Playground (babylonjs.com)

The following image shows the flashing line. Besides, this line just appears on the edge of the panorama.

this flashing line only occurs in phone, not find in PC.

You should probably play with the wrap mode of the texture to ensure it would wrap around.

I tried three different wrap mode. All failed.
Like: WRAP_ADDRESSMODE

CLAMP_ADDRESSMODE
MIRROR_ADDRESSMODE

I asked GPT - and it cost me credits, so I don’t just throw away the answer. Maybe it throws a useful hint for you.

GPT: The flashing line issue you are encountering is a common problem when rendering panoramic images, and it occurs due to the way that texture sampling works. In bilinear texture sampling, neighboring pixels are sampled and blended to produce the final color value for a given texel. This process can cause the seams of a panorama image to appear as a line on the screen, especially if the texture coordinates are not carefully calculated.

One solution to this problem is to use a technique called ‘padding’. This involves duplicating the edges of the panorama image and extending them beyond the original boundaries, effectively creating a border around the image. The duplicated edges are blended with the original image using a gradient function to ensure a smooth transition between the two areas. By doing this, the texture sampling will have a larger area to blend and interpolate, which can help to eliminate the flashing line artifact.

Another solution is to use a modified sampling function that takes into account the neighboring pixels at the edges of the panorama image. This can be achieved by adjusting the texture coordinates slightly so that they sample from neighboring pixels at the edge of the image. This can help to blend the colors smoothly across the seam of the panorama, reducing the visibility of the flashing line.

In general, resolving the flashing line artifact when using bilinear texture sampling can be a challenging task, and it may require some experimentation to find the optimal solution for your specific use case.

Thanks. When using Babylon’s PhotoDome, there is no visible flashing line. Maybe Babylon is performing some internal adjustments to the rendering process.

@sebavan is there any internal adjustment in Babylon’s PhotoDemo? There is no visible flashing line when I use it.

hi @wsAndy , not sure if it solves your pb, but use texture.anisotropicFilteringLevel = 1 ; remove the vertical line on mobile. Default is set to 4. BaseTexture | Babylon.js Documentation (babylonjs.com)

custom shader | Babylon.js Playground (babylonjs.com)

1 Like

Thanks, it works! But one thing still confuses me, I’m not open mipmap, why anisotropicFilteringLevel will affect the effect. @sebavan