Why does the transparent sphere have artefact on the edge?

I followed the How to Make Earth in WebGL tutorial by Jerome Etienne, and I made this pen based on it:

For reference, here’s the full screen tutorial version.

But as you can see in both my simplified pen and in the tutorial, the edge of the cloud sphere has a weird effect where it seems like some polygons are not being draw. It looks like triangles are missing.

Here’s a screen shot of the bottom-left quadrant of my pen, and you see on the edge of the Earth the cloud sphere looks like it is missing triangles:

54%20AM

Why does this happen? How can we fix it?

I found a way to hide the problem. Just make the terrain cast a shadow on the clouds, then that part of the clouds will be barely visible (I’m not sure if the problem is gone, just that it is so dark you can’t see it):

Is there another way to fix the problem without adding shadows?

The problem here is to do with order independent transparency. Due to the clouds being double sided, the back face of the cloud is being rendered on top of the front face of the cloud because the sorting function doesn’t work properly.

To solve it simply, you could make the clouds only one sidedby removing the following in your cloud material.
side: DoubleSide,

You could hide it by increasing the tessellation of your sphere, so the faces become smaller and help hide the effect:
const clouds = new Mesh(new SphereGeometry(0.77, 128, 128), new THREE.MeshStandardMaterial({

I believe that by adding shadows, all you are doing is darkening the inside faces so they don’t render as brightly/obviously. You could make the cloud material one sided and add a second sphere on the inside with a darker material which may be more performant that adding shadows.

3 Likes