WPF semi-transparent mesh issue

Question

I have a mesh of truncated pyramids stacked on top of each other.

My goal is to reverse it, turning it into a sphere approximation. For that I draw the exact same thing, but Z-axis reversed. It works, except that the back is somehow semi transparent.

Here I set brush.Opacity = .3; to make the semi transparency problem more apparent.

Unfortunately all I can find on the topic is failing to enable the transparency for separate mesh elements, not to remove it. What could be causing the problem, and how do I fix it? Here is the excerpt of my code in which I draw the mesh:

public void Approximate()
{
    group.Children.Clear();
    SolidColorBrush brush = new SolidColorBrush(Colors.Blue);
    DiffuseMaterial material = new DiffuseMaterial(brush);

    [...]

    for(int level = 0; level < level_number; level++)
    {
    GeometryModel3D model_front = new GeometryModel3D();
    model_front.Material = material;

    GeometryModel3D model_back = new GeometryModel3D();
    model_back.Material = material;

    [...]

    TruncatedPyramid pyramid1 = new TruncatedPyramid(bottom_points, top_points);
    pyramid1.Draw(model_front);
    group.Children.Add(model_front);

    TruncatedPyramid pyramid2 = new TruncatedPyramid(bottom_points, reverse_points);
    pyramid2.Draw(model_back);
    group.Children.Add(model_back);
    }
}

And in which I set up the window:

    <Viewport3D Name="myViewport" Margin="0,94,0,0" >

        <Viewport3D.Camera>
            <PerspectiveCamera  Position="10,10,10" LookDirection="-2,-2,-2" UpDirection="0,1,0" />
        </Viewport3D.Camera>

        <ModelVisual3D>
            <ModelVisual3D.Content>
                <DirectionalLight x:Name = "dirLightMain" Direction = "-1,-1,-1">
                </DirectionalLight>
            </ModelVisual3D.Content>
        </ModelVisual3D>

        <ModelVisual3D x:Name = "Wedge">
            <ModelVisual3D.Content>
                <Model3DGroup x:Name="group">

                </Model3DGroup>
            </ModelVisual3D.Content>

            <ModelVisual3D.Transform>
            [...]
            </ModelVisual3D.Transform>

        </ModelVisual3D>
    </Viewport3D>

The code that I removed definitely works fine and seems irrelevant to the problem (functions that calculate the points of the mesh and classes responsible for rotating the group)

My guess is that the front has some kind of transparency-related quality that the back still doesn't despite being drawn with the same brush, but I'm not familiar with WPF enough to find it.

Spektre · Accepted Answer · 2018-02-15T14:14:12.147

I do not use WPF nor C# so can't help you with actual implementation. Anyway first see:

OpenGL - How to create Order Independent transparency?

I think your issue is wrong order of your triangles rendering. As you got more intersecting layers is this not easy to do in order independent way like in the link above. However there are more options how to deal with this:

Z-Sorting

you simply collect list of all triangles to render and sort them by distance to camera. As your mesh is self-intersecting you need to divide all intersected faces into non intersecting ones which is nasty thing to do and wery hard to implement properly. When done render the triangles in order back to front ...
(Back) ray-tracing

change your ender to ray tracing technique. These natively handle transparency correctly. Here an example:
- 3D Mesh back ray tracer
- 3D volumetric back ray tracer
repair mesh

You can use computation geometry to remedy your mesh by removing all interior faces from the mesh. But it is not easy for self intersecting meshes. When done then you can use the approach in the first link.

I would go for #2 for complicated meshes but if you need speed then #3 is the way.

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

The primary problems that arise when rendering semi-transparent 3d objects in Windows Presentation Foundation have to do with false z-buffer occlusions. Specifically, when a transparent surface or polygon is rendered, it sets the z-buffer depth values to block objects that are behind it from being rendered, even though they should show through the transparent layer.

In WPF with C#, the z-buffer is not accessible. So, it can not be disabled during transparent rendering. Instead, we must render the transparent objects last so that they are layered over the rest of the scene and the objects behind them show through.

for example:

qModelGroup.Children.Add(qBackGeometry);
qModelGroup.Children.Add(qOuterGeometry);

Notice that the transparent “Outer Geometry” layer is added last. See the reference for more details.

UPDATE:

Another way is using EmissiveMaterial or SpecularMaterial instead of DiffuseMaterial in WPF. This works for me in a complex problem. See this post for more.

WPF semi-transparent mesh issue

2 Answers2

UPDATE: