C# 3D Helix Toolkit Shapes are transparent from only certain directions

Question

I am trying to get some animations working where I smoothly change the material of various shapes so that they are transparent/different colors.

The issue is:

If I look into the shape from above I can see the inner corners of it (say if it's a cube I can see the inner surface of it), but anything outside/beyond the perimeter of the shape is occluded.

So far I am doing the following, which works great besides that problem:

Color c = new Color()
{
    A = 16,
    R = Colors.Transparent.R,
    G = Colors.Transparent.G,
    B = Colors.Transparent.B
};

(model as GeometryModel3D).Material = new DiffuseMaterial(new SolidColorBrush(c));
(model as GeometryModel3D).BackMaterial = new DiffuseMaterial(new SolidColorBrush(c));

If I drop the alpha of the color all the way to 0, the shape becomes opaque, seemingly because the shape is invisible but it's still occluding whatever is behind it.

The information I've found so far suggested that using emissive or specular materials would work because it didn't get written to the Z-buffer, but either diffuse materials don't work the same or I implemented that wrong.

Edit:

After coming across this question: StackOverflow, and seeing the comment under the first answer, I'm assuming being able to make objects truly transparent must be more involved than I first thought. That person seems to have had the same trouble as me.

Answer 1

Sounds like your surfaces might be oriented the wrong way. If so, you can fix it by reversing the order of the vertices for each element of the cube.

The standard rasterization pipeline typically draws "one-sided" primitives -- i.e., it will only draw triangles it thinks are facing the camera. That way, for instance, it doesn't even have to try to draw the back-facing sides of your cube.

Answer 2

One more solution that helped me is using Helix toolkit and this example helped a lot

http://helix-toolkit.github.io/demos/wpf/transparency

I imported the models from the stl files and added them as list inside of the HelixToolkit:SortingVisual3D as Model3DGroup (from Microsoft)

an example of XAML:

      <HelixToolkit:SortingVisual3D IsSorting="True" x:Name="sortingVisual1" Method="BoundingBoxCorners" SortingFrequency="2">
        <ModelVisual3D  Content="{Binding Model3DGroup1, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
        <ModelVisual3D  Content="{Binding Model3DGroup2, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
        <ModelVisual3D  Content="{Binding Model3DGroup3, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
        <ModelVisual3D  Content="{Binding Model3DGroup4, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
      </HelixToolkit:SortingVisual3D>

Every group is one separate .stl file

My problem was that when uploaded stl files, the outer one wouldn't let the light through for the inner models no matter the opacity

this is the function for the bound model in VM:

private readonly HelixToolkit.Wpf.ModelImporter _importer = new HelixToolkit.Wpf.ModelImporter();



 var model = _importer.Load(stlPath);
 var m0 = (MeshGeometry3D)((GeometryModel3D)model.Children[0]).Geometry;
 var insideMaterial = MaterialHelper.CreateMaterial(outsideColor, 0.6);
 return new GeometryModel3D { Geometry = m0, Material = insideMaterial };