search

donmccurdy / three-gltf-viewer

Drag-and-drop preview for glTF 2.0 models in WebGL using three.js.
https://gltf-viewer.donmccurdy.com/
MIT License
2.09k stars 534 forks source link

How does this repository solve the Z-fighting problem? #300

Closed syzdev closed 2 years ago

syzdev commented 2 years ago

For the same model, there is a Z-fighting problem in the model after I use the native GLTFLoader, but there is no such problem after using this repository. After checking the source code, I didn't get any inspiration. Could you please describe the problem in detail. Thanks.

donmccurdy commented 2 years ago

Z-fighting occurs when triangles overlap, or are too close together for the amount of precision in your depth buffer. The depth buffer is configured by camera.near and camera.far properties. This viewer sets those properties automatically based on the input model — so that .near is as high as possible and .far is as low as possible, without clipping the model. Usually you can choose these properties based on the scale of your scene pretty quickly.

syzdev commented 2 years ago

@donmccurdy

I tried to adjust the two parameters camera.near and camera.far, but when the value of camera.near is too large (e.g. from 0.1 to 10), when the camera is close to the model, the display of the model will be incomplete, and the Z-fighting problem has not been solved.

I am not sure whether there is something wrong with my code or other problems. I finally solved my Z-fighting problem by using material.polygonOffset.

syzdev commented 2 years ago

When solving the problem, I collected some information and share it below, hoping to be helpful to everyone.