SpriteMaterial with Transparent PNG Acting Differently r89 to r116, Exact Same Code

[FlashMapper]

I built a threejs scene in 2018 with the Sun as a transparent PNG on a SpriteMaterial. Around the sun were semi-transparent orbits that used LineBasic Material.

I built a new version of the same piece with the a newer version of threeJS, using the exact same code to create the objects, and now the sprite acts differently. The front side of the Venus orbit draws in front as expected but the sun sprite clips the back side.

Mercury’s orbit visually works ok because it’s offset from (0,0,0). If you spin the scene around the same thing happens though and the backside of Mercury’s orbit gets masked.

Here is a live version of 2018:
https://www.bluecorallearning.com/prod/guides/science/solar_system/

Here is a temp version of 2020 (ignore title screen name):

Blue Coral Guide to the Earth

This is the code to create each, this was copied right out of the old version:

Sun Object
var sunGroup = new THREE.Object3D() entireSolar.add(sunGroup) var sunMap = manifestData.sunrays.imageData var sunMat = new THREE.SpriteMaterial( { map: sunMap, color: 0xffffff, fog: true } ); sunMat.transparent = true; sunMat.opacity = 1; var sunObject = new THREE.Sprite( sunMat ); sunObject.scale.set(13.2, 13.2, 1) sunGroup.add(sunObject)

Orbit Object
var venusOrbitGroup = new THREE.Object3D() entireSolar.add(venusOrbitGroup) var venusOrbitGeom = new THREE.CircleGeometry( 17, 200 ); venusOrbitGeom.vertices.shift(); venusOrbitGeom.scale(1, 1, 1) var venusOrbitMat = new THREE.LineBasicMaterial( { color:planetOrbitColor } ); venusOrbitMat.transparent = true; venusOrbitMat.opacity = planetOpacity; var venusOrbitObject = new THREE.LineLoop( venusOrbitGeom, venusOrbitMat ) venusOrbitGroup.add(venusOrbitObject)

If I set the sun to depthWrite = true now the Venus orbit writes over in front and in back. This happens in both versions (I’d expect this to be the case).

If I take the transparency off the orbit everything works. You can see in all examples it doesn’t clip the Asteroid belt, which is also a transparent PNG on a geometric plane.

Did something change in how threejs renders this transparency combo?

[Mugen87]

Sprite rendering was refactored with r95 in order to solve some conceptual issues. But it seems this affects your particular usage of sprites.

Try to disable transparency and set Material.alphaTest to a proper value (start with 0.5 and then optimize). This will create a so called alpha cutout. The sun will be rendered slightly differently but the depth issues should be solved.

[FlashMapper]

Ok, thanks. I’ll be aware of this and keep the note.

I solved for this instance by changing the orbit colors to a version with some navy blue just added into the hex and then switching to the regular brighter version if selected. Same effect but with no transparency.

I run into similar issues sometimes though when using sprites for labels so this will be helpful.