BackSide not shown at certain camera angle?

I am trying to understand why in this example of a striped transparent sphere the interior side of the sphere (the BackSide) is rendered only when looking into the sphere from below:

But not when looking from above:

The material is doublesided, and has an alpha map for the stripes.

Is that an inherent limitation of the material ? It just seems strange that the behavior would depend on the camera angle. Presumably, it would work to render two spheres, one with FrontSide and a separate one with BackSide, which apparently is not quite what happens with DoubleSide. But there may be a better solution which would depend on the underlying cause.

Investigating, I found material.side = THREE.TwoPassDoubleSide.

With that option the BackSide is correctly shown. Why are two passes needed but only sometimes ?

WebGLRenderer: Render transparent doublesided in two calls by mrdoob · Pull Request #21967 · mrdoob/three.js · GitHub and

has some background. DoubleSide is complicated with transparent objects.

That’s a typical issue with transparency rendering. Faces are not always rendered in the best order so first rendering the back and then the front faces produces better results for transparent, double-sided, non-flat meshes.

BTW: There is some ongoing discussion about this topic here: Replaced TwoPassDoubleSide with object.renderForceSinglePass by mrdoob · Pull Request #25239 · mrdoob/three.js · GitHub

1 Like

Oh, I see. So material.TwoPassDoubleSide will be removed in r149 and replaced by object3d.renderForceSinglePass = false which will be the default. (Until there is an uprising demanding performance over quality by default).
object3d would be a Mesh but could be a Camera as well. I suppose for camera there would be no effect on rendering ?
Amazing how quickly one gets into the thick and thin.

Yes, it only affects renderable objects. And only then if they are transparent and double-sided.

1 Like