Depth of field issues with Transparent render queue

I am using post processing to create a depth of field effect. Objects with opaque shaders render as expected. Objects using transparent or default UI shaders do not render as expected.

In the attached image you can see 3 UI elements all on the same plane. The top left is in focus like I want it to be, but the other two are not focused. The issue is I need the transparency shader in order to render text and some outline shapes.

I am assuming there are a few elements at play. The render queue, post processing, render passes, etc. But I'm not sure how to untangle all of this. Any help would be greatly appreciated!

 

Depth of Field post process effects work by blurring the final rendered image based on the depth stored in the camera depth texture. The camera depth texture is a screen space texture of the depths of all opaque objects. It’s only opaque objects because it’s only a single depth value per pixel. Anywhere that a transparent surface is visible would need at least 2, or possibly an arbitrary number of depths stored, depending on the number of transparent surfaces visible on that pixel. What’s more is any depth of field effect would have to blur each depth separately, meaning it’d need to know the color values at that depth, not the final rendered image’s color. So instead transparent objects use the depth of whatever opaque object appears at that pixel.

This is true for 99% of AAA games as well. Only a rare handful bother with anything more complex. And if they do it requires sorting transparent objects into near, in focus, and far groups and rendering the, separately into separate render textures. Or you can render out your transparent objects as alpha tested / dithered transparency and make use of Temporal AA to blur it into something that looks kind of like transparency and plays nice with DoF effects.

 

Ok thank you, that is very informative!

I'm not sure I fully understand this approach. I think you're suggesting I adjust the render queue to "alpha tested" for those objects but I'm not sure how the anti aliasing comes into play. Are you saying i can fake a blur with antialiasing? I haven't had any luck getting the desired effect with "alpha tested' either.

 

"Transparent" objects in a lot of modern games aren't actually transparent. They're rendered using temporal dithering, which is to say they're rendered opaque alpha tested surfaces using some kind of noise or pattern that changes every frame. Because it's changing every frame, temporal anti-aliasing ends up blurring this into something that looks transparent. Examples would be the skiff sail in Gears of War 5, or near-camera fading of vegetation in Uncharted 4, or any of the last 4 Assassin's Creed games. Super Mario Odyssey makes heavy used of dithered transparency, and they don't even try to blur it, which made a lot of people notice it and think it somehow unique when it's a really common technique. Technically games have being doing this for decades even before TAA was a thing. GTA V uses dithered transparency on vegetation that gets blurred by a post process effect. Heck, Sonic The Hedgehog, the Sega Genesis game from 1991, did it for liquid, though in that case it was making use of CRT's inherent blurriness and image persistence rather than software post processing.

Ronja has an excellent tutorial on dithered transparency here:
https://www.ronja-tutorials.com/post/042-dithering/

 

OK, excellent input. I've definitely learned some new stuff here.

I was able to achieve what I was attempting to do by using actual geometry for the text thanks to this asset:
https://assetstore.unity.com/packages/3d/props/tools/modular-3d-text-in-game-3d-ui-system-159508
(There are some similar, more limited assets available for free if anybody else just wants to test out the concept)

Now that the text is actual geometry it responds as expected to the depth of field effect. I will be using quads and similar geometry to achieve background panels and the like. The end result should be very close to the original UI designs.

 

I don't know about 99% but yeah, you seem to be right.
But TAA is quite widely disliked by gamers (and me as a developer). So... rock, meet hard place, hard place, meet rock. #AllTAAisBad

MSAA is where it's at.