Line opacity rendering issue with transparent spheres

Questions
1

I’ve ran into an issue in which lines with an opacity setting don’t get rendered properly on top of Mesh objects (in this case spheres) also containing a transparency setting. But only sometimes…

There is an example here: https://bl.ocks.org/vasturiano/raw/02affe306ce445e423f992faeea13521/

As you zoom in you’ll notice that some spheres have solid line segments on top of them while others don’t. Also by rotating/panning around this may change and a sphere that was fine suddenly shows the glitch and vice-versa.

The component which has the ThreeJS code is here:

The relevant code which generates the Three objects is:

mySphere = new THREE.Mesh(
    new THREE.SphereGeometry(myRadius, 8, 8),
    new THREE.MeshLambertMaterial({ color: myColor, transparent: true, opacity: 0.75 })
);

myLine = new THREE.Line(
    new THREE.Geometry(), 
    new THREE.LineBasicMaterial({ color: 0xf0f0f0, transparent: true, opacity: 0.2 })
);

The renderer is used with all the default options: new THREE.WebGLRenderer()

I’m at a complete loss as to what is causing this glitch, any help/pointers as to what may be the cause will be much appreciated!

2

Hello asturiano,

to make sure we are all talking about the same “glitch”, from the pix below can you tell us if the glitch occurs in case 1 or case 2 or neither cases:

Thx

3

Hi Inf1n1t, thanks for jumping in.

And sorry, I should’ve added a screenshot to clarify the issue. The glitch I’m referring to is in neither cases 1 or 2. Here’s what it looks like:

I’m referring to those dark line segments on the large sphere, which doesn’t occur in the other spheres and even appears/disappears as the objects are rotated.

4

Re asturiano,

As you can see in the following pix, the “dark line segment” is the actual line on top of the object;

The renderer may need a blending instruction to accomplish what you want.

I am not sure which one from (https://threejs.org/examples/?q=blending#webgl_materials_blending) will accomplish the final color you want thought.

Try this in your line material definition and see if you have any improvement:

blending: THREE.AdditiveBlending

5

Thanks for the tip Inf1n1t.

What’s puzzling is the way it renders a line on top of the object is not consistent. In fact, if you look at the two smaller spheres in the my previous screenshot, those lines are actually “in front” of the object, yet they are rendered the way I’d expect it, by mixing the two opacities.
It just seems that for some camera angles that opacity mixing is misbehaving, causing some line segments to be completely solid.

I’ve tried the blending settings you suggested, both on the lines and/or sphere objects. No combination of blending makes any difference except when selecting NoBlending (effectively cancelling the object’s transparency) or SubtractiveBlending which makes matters worse by always drawing dark lines on top of the spheres:

6

If you have not tried it already, you could force the depth-buffer to render the line first (or vise-versa) with something like this:

mySphere.renderOrder=2;
myLine.renderOrder=1;

Just make sure that all the spheres have the same renderOrder value or have a superior value (than the lines).

1 Like
7

Thanks so much Inf1n1t, it worked!!

By setting the lines to render after all the spheres, the issue is gone. I’m not quite certain why rendering the lines mixed in with the spheres (I suppose that’s what was happening) would cause that visual anomaly in the mixed opacity.

But, the bottomline is it worked!! :tada:

Thanks for your help. Here’s the example again without the issue:
https://bl.ocks.org/vasturiano/raw/02affe306ce445e423f992faeea13521/

8

Great!

Depending on the view, the renderer was using the background only to define the line color (with opacity). Setting the order, tells the renderer to layer the objects with the proper hierarchy and thus have all the colors to blend.