Help with solar observations. How to deal with Z-Fighting when I need my models to share the same space?

Questions
, ,
1

Hi everyone, I’m stuck, not sure how to deal with z-fighting for my use-case.

I’m trying to render real-time observations of the sun.
I’m doing this by creating a model which is essentially a hemisphere with a plane, this is the shape because our observations only see one side of the sun.

The model needs to turn to face where the image was taken (some from earth, some from other points in space), but it the models always share the same space.

When I turn the model, I get all the visual artifacts of course because of the overlapping models are z-fighting. Here’s what the problem looks like

I’ve tried scaling up the model, but when I turn the camera some perspectives, it stops blending properly.

I’ve tried disabling depth testing and rendering with renderOrder, which is really close, but I don’t want to see the rings in the back, it should just show the part that I’m looking at.

And lastly I’ve tried polygonOffset, which has the same issue as scale. Where the camera perspective seems to break it.

I’m out of ideas, what do you think I should try next? I’m working on putting together a smaller demo so I can post code if needed.

1 Like
2

I made a GitHub repo which replicates this: GitHub - dgarciabriseno/fighting: Demo of zfighting issue

3

I think I found a solution by using two scenes.

I put the suns in separate scenes and clear the depth buffer between rendering.

function animate() {
    sunB.rotateY(degToRad(1))
    controls.update(clock.getDelta())
    renderer.render( scene, camera );
    renderer.autoClear = false
    renderer.clearDepth()
    renderer.render( scene2, camera );
    renderer.autoClear = true
}

This seems to give me the effect I want. Now I just need to get this to work in react-three-fiber.

4

I think you want the inner spheres material to be transparent:false
and the outer sphere transparent:true
You may also want to try setting depthWrite:false on the inner sphere.

If they are both the identical geometry and identical transform, this might get you the proper layering.

5

They’re not always going to have identical transform. One may be rotated while the other isn’t.
It’s meant to show observations from earth along with observations from other observatories we have out in space. And it won’t always just be 2 models, they can be changed dynamically.

Like here is images with another observatory looking around the sun instead of directly at it.
There are 2 images, the large blue and the smaller red. They also share the same plane, so I’m using polygon offset to move the red one forward.

My scene has:

  1. black inner sphere for the sun, this is used so that the images of the sun don’t blend with the blue/red planes
    without black sphere:

    image
    image260×259 55.8 KB

    with black sphere:
    image
    image318×281 22.6 KB

  2. Blue plane

  3. Red plane with polygon offset (because if I clear the depth buffer between red & blue, then the black sphere will show up in front of one of the planes)

  4. green sun

  5. yellow sun

Demo:

6

i see… can you draw the interior sphere thing… with
material:
transparent:false
depthWrite:false

and the outer sphere with
transparent:true
depthWrite:false

?