Three.jsでオブジェクト同士が重なる辺がギザギザするZファイティングのような現象が起きた。

2024.08.29
TABLE OF CONTENTS

three.jsでfbo(フレームバッファオブジェクト)を使用したポストプロセッシングを行なっているときにオブジェクト同士が重なる変がギザギザするZファイティングのような現象が起きました。
その際に見解と解決策を残しておきたいと思います。
fboを使用しないで通常にレンダリングする分には特に問題ありませんでした。

実際に起きた現象

下記のYouTube動画を見ていただくと分かる通り、ギザギザしてます...

解決策

fboを使用しているときにカメラのnear clipを1以下にしないことです。
自分はこれで解決しました。
実際には1以上にして確認はしていませんが、特に理由がない限りは1以外にはしないようにします...

個人的な見解

あんまり自信ないですが、near clipの値を小さくしすぎると深度バッファの精度が落ちている?ビットが足りていない?のかなとか思っています。
1より0.1の方がカバーしないといけないnear側の深度の範囲が大きくなると思うので、頂点等のZ値が混同しやすくなっているのかなとか思ったりします。
なのでZファイティングのような現象が起きているのかと思っています。

PICKUP ARTWORK