Render Scene to Window creates ugly borders for images with alpha channel

Steps causing the bug to occur

  1. Create a non-black background with the Make Square Vertices and Shade with Solid Color
  2. Use Get Image and Make 3d Object from Image to bring in a .png file(s) with alpha channel
  3. Connect the 3d objects to Render Scene to Window
  4. Run the composition
  5. The images have ugly borders around them

How did the result differ from what you expected?

I was expecting the result to look much smoother

Have you found a workaround?

Use Render Scene to Image before rendering to the window. Much better results (not perfect).

Other notes

  • Vuo version: 0.5.0
  • macOS version: Mac OS X 10.7

UglyBorders.vuo (5.02 KB)

UglyBordersFixed.vuo (5.27 KB)

Screenshot 2013-10-26 13.57.57.png

The problem here is the order in which the objects are rendered. In Vuo, depth writing and testing are always enabled. In the right window of your screenshot, it looks like the “Top” image is being drawn first. For each pixel in the “Top” image, if the alpha is 1/255 or greater, it writes to the depth buffer. Next, it draws the “Bottom” image. Since the antialiased edges of “Top” already wrote to the depth buffer, it doesn’t draw “Bottom” at all for those pixels, resulting in a hard, unblended edge.

Ultimately (a few 0.5.x releases from now), objects will be rendered back-to-front automatically (“Painter’s Algorithm”), and the solution for 2D compositing will be this:

  • use the Z coordinate to control the order in which objects render (analogous to “Render Layer” in QC)
  • configure the scene to render with orthographic projection (so that the Z value doesn’t affect the size of the layers)

@mnstri — For 2D compositing like this, we came up with a simpler solution. In Vuo 0.5.4, we added a new “Layers” node set, which draws 2D image layers in the order you specify (whereas the Scene node set, in a future release, will be drawing objects ordered by distance from the camera).

I modified your composition to use the new Layers node set, and attached it to this bug report (“UglyBordersFixed.vuo”).