カメラが近くにいなくても、Three.jsの近くのカリング

Question

Three.jsの対数奥行きバッファに切り替えた後、問題が発生しました。次の写真で説明したようにすべてが地面の近くの淘汰を除いてうまく動作します：

あなたが見ることができるように、カメラが大幅に地上に上昇しています。示されている文字ボックスは、地上約2単位である、と私のカメラは、次のような設定されている：

var WIDTH = window.innerWidth 
    , HEIGHT = window.innerHeight; 
    var VIEW_ANGLE = 70 
    , ASPECT = WIDTH/HEIGHT 
    , NEAR = 1e-6 
    , FAR = 9000; 
    var aspect = WIDTH/HEIGHT; 
    var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 
    camera.rotation.order = 'YXZ'; 

だから私のNEARパラメータは、カメラと地面との間の距離、どこにも2近くではありません。 2番目の画像では、私のPointerLockControlsでカメラを上げても問題は解決しています。

誰かが自分の問題を診断できますか？

また、このバグが静的なカメラで発生したかどうかを確認して、私の問題をテストしました。します。

また、この問題は、デフォルト深度バッファでは発生しないため、ログ深度バッファでのみ発生します。

次のように定義されてcontrolsオブジェクト、子として、私は私のカメラを持っている：

controls = new THREE.PointerLockControls(camera); 
controls.getObject().position.set(strtx, 50, strtz); 
scene.add(controls.getObject()); 
camera.position.z += 2; 
camera.position.y += .1; 

ここPointerLockControlsに関連するコードです：

var pitchObject, yawObject; 
var v = new THREE.Vector3(0, 0, -1); 


THREE.PointerLockControls = function(camera){ 

    var scope = this; 

    camera.rotation.set(0, 0, 0); 

    pitchObject = new THREE.Object3D(); 
    pitchObject.rotation.x -= 0.3; 
    pitchObject.add(camera); 


    yawObject = new THREE.Object3D(); 
    yawObject.position.y = 10; 
    yawObject.add(pitchObject); 


    var PI_2 = Math.PI/2; 

    var onMouseMove = function(event){ 

     if (scope.enabled === false) return; 

     var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; 
     var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; 

     yawObject.rotation.y -= movementX * 0.002; 
     pitchObject.rotation.x -= movementY * 0.002; 

     pitchObject.rotation.x = Math.max(- PI_2, Math.min(PI_2, pitchObject.rotation.x)); 

    }; 

    this.dispose = function() { 

     document.removeEventListener('mousemove', onMouseMove, false); 

    }; 

    document.addEventListener('mousemove', onMouseMove, false); 

    this.enabled = false; 

    this.getObject = function() { 

     return yawObject; 

    }; 

    this.getDirection = function() { 

     // assumes the camera itself is not rotated 

     var rotation = new THREE.Euler(0, 0, 0, "YXZ"); 
    var direction = new THREE.Vector3(0, 0, -1); 

     return function() { 

      rotation.set(pitchObject.rotation.x, yawObject.rotation.y, 0); 
      v.copy(direction).applyEuler(rotation); 

      return v; 

     }; 

    }(); 

}; 

あなたはそれがだともわかります他のオブジェクトではなく、他のオブジェクトではなく、取り除かれている地面だけです。

編集：

大きな問題を示す隔離された環境を整理しました。最初の画像では、PlaneBufferGeometryフラットがあり、幅と高さの両方に400セグメントあり、var g = new THREE.PlaneBufferGeometry(380, 380, 400, 400);で定義されています。でも、表面に非常に近くなって、クリッピングが存在しない：

しかし、私は唯一の1セグメント、var g = new THREE.PlaneBufferGeometry(380, 380, 1, 1);を提供する場合、これは意図した場合、クリッピングが

私はよく分からない存在でありますThree.js/WebGLでは、しかし、私はそれを回避するために何かをする必要があるようだ。

Answer 1

これはバグではないと私は考えています。これは、さまざまな設定のデプスバッファがどのように機能するかの特徴だと思います。 Look at this example。右側では、深度バッファーは「微視的」な文字と球の文字の間に心を作り上げることはできません。これは、非常に小さいスケールでは精度が低く、あるオブジェクトと別のオブジェクトとの間を揺らぎ、z深度にわたって描画順序を優先する丸めを開始するためです。

いつもトレードオフです。この問題を回避したい場合は、シーンの全体的なスケールを上げてみてください。そのため、カメラの「近く」が決して近くにならないようになります。対数zバッファの指数モデルでは丸められません。

また、別の質問 - あなたが見ているものがあまりにも近くからクリッピングされていない可能性があるため、どのように青が定義されていますか？それがすべてを網羅した青い箱であれば、それを地面から大きく遠ざけることができます。

編集： これはうまくいくようです。エッジケースを探し始めるでしょう。シーンが変わるためには何ができますか？あなたは他のものが壊れ始めるために何をすることができますか？遠くまで遠くダウン/風景を移動

• 試みは、（それにダウンするのではなく、検索するとき、それは紛れもなく遠く離れていても、問題は、それが持続しない、持続ん？）
• は風景
• に回転してみてくださいカメラに
• はそれが持っているどのような効果を参照0.000001、0.0001、0.01、0.1、などに1E-X表記から平面の近くにカメラを変更してみてくださいこれまで平面を変更してみてくださいカメラFOV
• を変更してみてください。
• console.logカメラのオブジェクトをレンダリング機能に入れて、fov、near、farなどがセットアップ時に設定したとおりで、上書きされずにデフォルトにリセットされていることを確認します。クロームの開発ツールで何が印刷されているかを確認し、オブジェクト全体をブラウズし、位置、親の名前、すべてのものをチェックすることができます。

基本的には間違いがないので、見つけにくいと思うか、正確に動作するはずです。あなたは効果を改善するためにできることを理解し、それを悪化させ、それは行く方向を明確にします。

デバッグの経験則としては、極端なものを修正しようとせずに、またはその目的に合ったコードをそのまま使用して、それがどのように追加/変更されたかを見てみるだけです。あなたが何かを見つけたら報告してください。