The Transparency Problem

Transparent asset not showing what's behind it correctly? Let's dive into why that happens and how to fix it by updating the render order for different objects

After uploading a png photo of our piggy to the Digital Bacon Editor, the ocean disappears behind the transparent portions of the image at certain angles 😑

Why things disappear behind transparent assets

To understand why, we need to learn about how rendering engines decide what to display

To keep performance smooth and maintain high frame rates, rendering engines try to avoid unnecessary calculations. They skip over the parts of assets that are hidden behind others. The renderer only takes the geometry of an asset into account when seeing what should be skipped, not its material or transparency. You might think nothing would ever be displayed behind a transparent asset then right?

Fortunately, the rendering engine renders all solid assets first. This ensures that a transparent asset won't block a solid one from being displayed. The issue is usually encountered among multiple transparent assets. To get around this, rendering engines oftentimes let you specify the Render Order for an asset. Assets with a higher render order won't prevent assets with a lower render order from being displayed

Solution

Increase the render order of the transparent asset that is hiding other assets or decrease the render order for the asset(s) being hidden to solve the transparency problem. When using the Digital Bacon Editor, the Render Order attribute is typically found on the last page of an asset when editing via the virtual menu

After increasing the render order of our piggy, the ocean is now perfectly visible behind it 😄

Once you've cleaned up those transparency issues on your website, it's time to share your work online. Check out My Digital Bacon as an easy to use and convenient hosting service. The user-friendly platform offers a free tier with no payment details required, so you can explore all their features risk-free. Plus, if you choose to host elsewhere, My Digital Bacon can still enable multi-user sessions using its servers to enhance the user experience of your website

If you like this article and want early access to new content, feel free to sign up for our Email Newsletter