Hi there, so I’m working on a videogame-esque project at the moment that contains avatars controlled by various people. These avatars are constructed as groups with two parts, 1) a plane where an image will be drawn and 2) a ring geometry which is underneath the plane but is rendered above everything else. I did this so you could see the silhouette of an avatar when it is behind another object and because it was less computationally expensive that using an outline highlight post processing effect. All it took was setting the depthTest for just the ring material to false before adding the geometry to a group and that group to the scene.
Now i have run into a pretty unique issue. Every avatar has an ability to open a circle geometry above themselves (don’t want to have to go too much into detail what the purpose of this is but its a very important feature) because the avatar’s rings render above everything they also render above this circle geometry too. So now you get situations where one of these avatar circles can be obscured by any number of other peoples avatar rings that are rendered on top of it. Even more frustratingly, I need this circle that pops up to be rendered and obscured normally (i.e models in front obscure it like normal) so setting the renderOrder to be higher than the avatar rings is kind of out of the question as that would make it render above everything else too.
So in a nutshell, I want my avatar rings to render above everything save for these circles that the avatar can popup. I’ve looked into using depth functions but didn’t find any luck there. I though about using ray-casting but fear that it will be too computationally expensive to be continually performing ray-cast checks (trying to make this app as optimal as possible). I know I’m asking for a lot and very much am beginning to think that maybe there just isn’t an easy or eloquent solution to this but making this post in the hope that someone smarter than me might know of a solution. If you do, or have any other advice as to how i might get around this problem please let me know. Thanks.
P.S. here is my code for when i create my avatar:
let ringGeometry = new THREE.RingGeometry( 0.225, 0.25, 32 )
let ringMaterial = new THREE.MeshBasicMaterial({ color: 0xFFF, depthTest: false})
let = ringMesh = new THREE.Mesh(ringGeometry, ringMaterial)
let planeGeometry = new THREE.PlaneGeometry(1, 1)
let planeMaterial = THREE.MeshBasicMaterial({ color: 0xAAA })
let planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
let avatarGroup = new THREE.Group()
avatarGroup.add(ringMesh)
avatarGroup.add(planeMesh)
this.scene.add(avatarGroup)