THREE.JS: render large, distant objects with correct z-pointers and still scale up to small objects
I have a scene where I draw (scale) the earth, the moon and some spaceships. When the moon is covered by the earth rather than disappearing, it is still visible (through the earth).
The tricky part here is that I need to have fine grain z-indices as the camera zooms in to look at the spacecraft (an object with a radius of no more than 61 meters compared to the ground, weighing at r =~ 6.5e+06 meters
). For objects on the scale of the moon and earth to be displayed in the correct order, the close one must be at least 100,000 m, at this moment I cannot look at close objects.
One solution would be to scale down the use of kilometers, but I cannot afford to lose this accuracy and prefer to use counters.
Any ideas on how to make very large distant objects render at the correct z indices while maintaining scale and the ability to scale to small objects?
My ideas (which I don't know how to implement):
- Change z-buffer to add more values and higher resolution?
- Add remote objects to "farScene" that are displayed with "farCamera" which is controlled by the same controls as on the large format camera?
source to share
The problem is probably z-testing, not z-precision. this means: the z-test is not applied (possibly because you are rendering a transparent object with alpha blended) or the z-test is applied with non-standard testing (for example, override far side by side).
Try making the whole scene a simple shader without transparency to make sure transparency isn't the source of the error. to solve the z-order without a z-test, you have to sort the object yourself each frame to determine the rendering order (from far to close).
source to share