PNG texture not rendering correctly with MeshBasicMaterial depending on the camera position

I have a scene with terrain (PlaneGeometry + MeshBasicMaterial) and other PlaneGeometry assets above that terrain. However, depending on the camera’s position or the asset’s position, the asset stops being transparent. The materials are set to transparent: true. I have also tried using alphaTest. While rendering with alphaTest works, the result is very pixelated/ugly. I can create a demo if needed.

Have you tries one of these:

  • renderOrder (i.e. to enforce specific order of rendering)
  • polygonOffset (i.e. to shift the depth of one of the object)
1 Like

I am making a map editor, and adding the responsibility of ordering assets to the user makes things very complicated.

I think the easiest way to solve this is by letting the user choose whether the material is transparent or not.

I just wanted to know why this is happening. Is this a bug, or do all engines work this way?

Guessing because no code: The terrain and the object planes are at the same depth, and depth writing is enabled for both. If you don’t have a definite renderOrder, then they may swap order when depth testing happens, for …reasons. The transparent pixels of the objects are written to the depth buffer even though they are transparent (because no alpha testing happens), and the fragments of the terrain below the object get discarded (because depth testing happens). The black part is not missing transparency, that’s the background color of the framebuffer.

This is why you should set the terrain to a low renderOrder (render first) and the objects that should be above the terrain to higher renderOrder (render later).

If you’re planning to have overlapping objects, then the issue might come back. Alpha testing and/or proper back-to-front sorting is required for transparent objects.

Not a bug, that’s just how stuff works.

2 Likes