Transparent textures behaviour in WebGL

by

You’re running into depth buffer issues, it has nothing to do with your shader or blend modes.

What’s happening is that the order that you render your transparent geometry in is affecting your ability to render behind it. This is because the depth buffer has no concept of transparent or non-transparent. As a result, even though they don’t visually contribute to the scene those transparent pixels write themselves into the depth buffer anyway, and after that any pixels that you draw behind them will be discard because they’re “not visible”. If you drew the geometry behind the transparent object first, though, it would show correctly because it gets written into the frame before the transparent depth is put in place to discard it.

This is something that even large commercial game engines still struggle with to some degree, so don’t feel bad about it causing some confusion. 🙂

There’s no “perfect solution” to this problem, but what it really boils down to is trying to structure your scene like so:

  1. Render any opaque geometry sorted by state (shader/texture/etc)
  2. Render any transparent geometry next. If possible sort these by depth, so that you draw the furthest one from the camera first.

Simply by flagging the bits of geometry that are transparent and rendering them after everything else you’ll solve 90% of this problem, but the issue may still remain for overlapping transparent objects. That may not be an issue for you, depending on your scene, but if it’s still causing artifacts you’ll need to sort transparent objects by depth before you draw.

More Related Contents:

  1. Multiple transparent textures on the same mesh face in Three.js
  2. Read pixels from a WebGL texture
  3. WebGL – wait for texture to load
  4. Rendering meshes with multiple indices
  5. How to check if a specific pixel of an image is transparent?
  6. Transparent hollow or cut out circle
  7. Copying From and To Clipboard loses image transparency
  8. How does the calculation of the light model work in a shader program?
  9. artifacts when rendering both sides of a transparent object with three.js
  10. C# Picturebox transparent background doesn’t seem to work
  11. Click through transparency for Visual C# Window Forms?
  12. How to get the absolute position of a vertex in three.js?
  13. Android OpenGL Texture Compression
  14. IE6 PNG transparency
  15. How to make a transparent JFrame but keep everything else the same?
  16. How to make a tkinter canvas rectangle transparent?
  17. webgl readpixels is always returning 0,0,0,0
  18. How to make completely transparent navigation bar in iOS 7
  19. How to get object in WebGL 3d space from a mouse click coordinate
  20. Bitmap too large to be uploaded into a texture
  21. How do you completely remove the button border in wpf?
  22. WebGL Read pixels from floating point render target
  23. Android Transparent TextView?
  24. Alpha rendering difference between OpenGL and WebGL
  25. How to detect if user has enabled full screen in browser
  26. Colorize image while preserving transparency with PIL?
  27. Threading textures load process for android opengl game
  28. How can I add transparency to a c# form while keeping controls visible?
  29. Why do shaders have to be in html file for webgl program?
  30. PHP/GD – transparent background

Leave a Comment