When a large transparent object contains another small transparent object, the small object is not displayed. How to deal with it?
One good algorithm for dealing with transparency is called “depth peeling” even with a low depth the results can be amazing.
var sg = new THREE.SphereGeometry(1)
var m = new THREE.MeshBasicMaterial({transparent:true, opacity:0.5})
var m1 = new THREE.Mesh(sg,m)
var m2 = new THREE.Mesh(sg,m)
m1.scale.multiplyScalar(10)
scene.add(m1)
m2.scale.multiplyScalar(5)
m2.position.z = 1
camera.position.set(0,0,20)
camera.lookAt(new THREE.Vector3())
I think this might do it. Easier to describe it with the sentence from OP. What this code says is:
I have two transparent objects, one is inside another, and i’m having issues rendering them.
Please have a look at the following thread. It discusses the same use case (rendering nested transparent spheres), the related problems and possible solution approaches.
I have had success with using renderOrder and depth writing. Only caveat is issues with object that overlap themselves sometimes have issues with what is in front and behind. This also works well with sprite displaying