{"id":278,"date":"2015-08-06T15:28:07","date_gmt":"2015-08-06T19:28:07","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics\/?p=278"},"modified":"2015-08-06T15:28:07","modified_gmt":"2015-08-06T19:28:07","slug":"transparency-in-3d","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics\/2015\/08\/06\/transparency-in-3d\/","title":{"rendered":"Transparency in 3D"},"content":{"rendered":"

Transparency in 3D<\/h3>

Transparency is a very useful feature when creating pictures in 3D. But there are a suprising number of things to think about when you're using transparency in 3D.<\/p>

Let's look at a simple example to explore some of these issues.<\/p>

First we'll create a patch with three rectangular faces.<\/p>

u = [-1; 1; 1; -1];\r\nv = [-.67; -.67; .67; .67];\r\nw = [0; 0; 0; 0];\r\nh = patch([u,v,w],[v,w,u],[w,u,v],zeros(4,3), ...<\/span>\r\n          'FaceVertexCData'<\/span>,eye(3),'FaceColor'<\/span>,'flat'<\/span>);\r\nview(3)\r\nbox on<\/span>\r\n<\/pre>\"\" 
Next we'll make them partially transparent.<\/p>
h.FaceAlpha = 1\/3;\r\n<\/pre>\"\" 
Notice that there are two areas where we see just the blue and green patches.<\/p>
a1 = annotation('textarrow'<\/span>,'X'<\/span>,[.725 .6125],'Y'<\/span>,[.05 .375],'String'<\/span>,'Green in back of Blue'<\/span>);\r\na2 = annotation('textarrow'<\/span>,'X'<\/span>,[.365 .47],'Y'<\/span>,[.93 .67],'String'<\/span>,'Green in front of Blue'<\/span>);\r\n<\/pre>\"\" 
But if we look closely, they're not the same color. The upper left area is greener, and the lower right area is bluer.<\/p>
a1.String = 'Red=0.44, Green=0.67, Blue=0.78'<\/span>;\r\na2.String = 'Red=0.44, Green=0.78, Blue=0.67'<\/span>;\r\n<\/pre>\"\" 
Why is that, and where do those numbers come from?<\/p>
When we draw a transparent object, the color is determined by compositing<\/a> the object using a blend function that looks like this:<\/p>
$$C_{after} = \\alpha*C_{object} + (1-\\alpha)*C_{before}$$<\/p>
When we draw overlapping transparent objects, the result is the product of multiple compositing operations. The blending functions of the compositing operations multiply like this:<\/p>
$$C_{after} = \\alpha_2*C_{object2} + (1-\\alpha_2)*(\\alpha_1*C_{object1} + (1-\\alpha_1)*C_{before})$$<\/p>
If you stick our colors and alphas into those equations, you'll get the numbers we saw earlier.<\/p>
a1.String = '\\alpha Blue + (1-\\alpha)(\\alpha Green + (1-\\alpha)White)'<\/span>;\r\na2.String = '\\alpha Green + (1-\\alpha)(\\alpha Blue + (1-\\alpha)White)'<\/span>;\r\n<\/pre>\"\" 
The reason we have different colors in these two cases is that the blending function doesn't commute.<\/p>
$$A \\otimes B \\neq B \\otimes A$$<\/p>
There's another important point you should notice here. When we're drawing opaque objects (i.e. alpha=1), then the only thing that affects the final color of the pixel is the color of the last object to be drawn. But when we're drawing transparent objects (i.e. alpha<1), then the final color of the pixel is affected by the colors of all of the objects that touch that pixel, and the order matters because the blending function doesn't commute. In the upper left, we needed to draw the blue patch before the green. But in the lower right, we needed to draw the green patch before the blue.<\/p>
This means that depth sorting transparent objects is inherently more complex than depth sorting opaque objects. For the same reasons that MATLAB's max<\/a> function is simpler and faster than its sort<\/a> function, the opaque depth sort is simpler and faster than the one we use for transparent objects.<\/p>
The depth sort for opaque objects is a simple one called Z-buffering<\/a>. For depth sorting the transparent objects, there are a number of different choices. Each of them has its own strengths and weaknesses. In MATLAB Graphics, we do this depth sort with a technique called Order Independent Transparency<\/a>, or OIT for short. We chose OIT because it works well on the current generation of graphics hardware, although there are still a few graphics cards which don't support it.<\/p>
OIT's biggest weakness is that it struggles when it encounters objects with exactly the same depth. We can actually see that in this picture. Those faint lines where the patches intersect are caused by that.<\/p>
The other thing you may have noticed is that when OIT kicks in, the antialiasing is lost. That's because OIT is implemented using the same resources as GraphicsSmoothing<\/a> and we can't currently do both at the same time.<\/p>
In earlier versions of MATLAB we didn't use the graphics hardware to sort transparent objects. This meant that it didn't handle intersecting objects very well. Here's what R2014a did with this picture:<\/p>
\"\" <\/p>
You can actually get a very similar effect with the new graphics system by setting the SortMethod<\/a>, although that will affect the opaque objects as well as the transparent ones. When SortMethod is set to childorder, then all of this gets a lot simpler. That's why you usually don't have to worry about these issues when you're drawing 2D scenes.<\/p>
Now that we have a 3D scene with transparency, we might want to print it. There are a few more things to think about when we print 3D transparency.<\/p>
By default, when you print we use a sorting technique which is more like the one that MATLAB used on screen before R2014b. This means that it isn't going to handle this intersecting patch case well.<\/p>
print -dpdf<\/span> transparency.pdf<\/span>\r\n<\/pre>
\"\" <\/p>
Even worse, if you're printing to one of the PostScript file formats (.PS and .EPS), then you need to be aware of the fact that they do not support transparency at all! That's because colors in the PostScript language are all opaque and do not have alpha values.<\/p>
print -dpsc<\/span> transparency.ps<\/span>\r\n<\/pre>
\"\" <\/p>
That means that if you're using transparency, you'll either need to output to a file format which does support alpha (such as .PDF) or do the compositing before writing the results to the file.<\/p>
The easiest way to do the compositing before writing the results to the file is to tell the print command to use OpenGL. When you do that, MATLAB will use OIT to generate an image with the correct sorting and compositing, and then save that image in the .PS file. But when you do this you might want to increase the resolution because the default is to use the screen resolution.<\/p>
print -dpsc<\/span> -opengl<\/span> -r600<\/span> transparency_opengl.ps<\/span>\r\n<\/pre>
\"\" <\/p>
I hope that gave you some insight into what's happening when you use transparency in 3D with MATLAB Graphics.<\/p>