WPF 3D Transparency Depth-Order Sorting

 

Just a quick post here - When making WPF 3D apps, transparency can make for some powerful visual effects. The trouble is that any re-orientation of your scene or the camera will ruin the rendering order of your transparent content to obscure content which should be visible under a transparent surface. Below, we have a little carousel of partially transparent photos rendered on DiffuseMaterials. As per the rendering rules with DiffuseMaterials, only content which is closer to the camera will be rendered. The area highlighted in red is being rendered prematurely, which obscures the background content from being rendered at all.

To get over this issue with transparency, we must re-order the sequence of transparent content rendering, such that we progressively go from content most distant to the camera, to content in closest proximity.

To deal with this, I created a simple helper to handle sorting of models to sort in order of distance to camera. Below, we have the helper method interface - it takes the camera position, a collection of models and a World transform to offset the models by(This would be all of the accumulated parent transforms, except for the transforms on the Models themselves), and sorts this collection of Models in order of distance to the camera. Here's the API from the attached Code, followed by a carousel of depth sorted images:

public static void AlphaSort(Point3D CameraPosition, Model3DCollection Models, Transform3D WorldTransform)

Some performance considerations with Depth-Order Sorting favoring transparency:

1. Limit the scope of models to be sorted to as small a set as possible. Two reasons exist for this. The first is that additional models will require a linearithmic growth of sort time - the CLR Array.Sort algorithm employed with the attached solution operates with an average complexity of O(n log n) and a worst case of O(n^2). The second issue is about GPU fill rate - by sorting in favour of distant objects, we are maximizing the number pixels to render to screen(We get no hardware culling benefits, because everything is in front of what we have rendered so far). On the flip side, if you have a  complex scene with lots of opaque, overlapping content, sorting in favour of objects closest to the camera could potentially get you an improved framerate, if sorting is infrequent.
2. Frequency of sorting - With any kind of scene, the supplied sorting operation is not a cheap call to use for real time rendering. As such, I would caution against using this algorithm via CompositionTarget.Rendering. Instead, you may want to give some thought about an invalidation threshold based sorting mechanism. With a 3D arrangement like a carousel, you can work out a safe "interval" of change, within which the content can move, without requiring a re-sort.

This sample is just intended as a quick starting point for folks who want to get some depth sorting on their transparent content. It is not tailored to target 3D tree-walking, and most folks can find optimizations for sorting based on domain specific assumptions about their application in terms of graph representation, caching, and all the other common tricks at an application developer's disposal.