Question

我试图将对数深度缓冲器与正交相机一起使用，并遇到一些有趣的结果。我在这里构建了一个示例：http://jsfiddle.net/TheJim01/05up96m0/

左侧的渲染器（红色结）使用标准的线性深度缓冲区（1000到1e-6）。选择“透视”或“正交”将使用所选的摄像机类型重新渲染场景，并且两者看起来都按预期工作。

右侧的渲染器（绿色结）使用对数深度缓冲区（1e27到var WIDTH = 250, HEIGHT = 250, BACKGROUND = 0xcccccc; var gl1 = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: false }), gl2 = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true }), scene1 = new THREE.Scene(), scene2 = new THREE.Scene(), s1pCam = new THREE.PerspectiveCamera( 28, WIDTH / HEIGHT, 1, 1000 ), s1oCam = new THREE.OrthographicCamera(-1 * (WIDTH / HEIGHT), 1 * (WIDTH / HEIGHT), 1, -1, 1, 1000), aLight1 = new THREE.AmbientLight(0x333333), dLight1 = new THREE.DirectionalLight(0xffffff, 0.75); s1pCam.position.set(0, 0, 100); s1pCam.lookAt(scene1.position); s1oCam.position.set(0, 0, 100); s1oCam.lookAt(scene1.position); dLight1.position.set(0, 0, 100); dLight1.lookAt(new THREE.Vector3(0, 0, -1)); // calculate ortho frustum var modelCenter = new THREE.Vector3(), tmpCamPosition = s1pCam.position.clone(), camTarget = new THREE.Vector3(), radFOV = (Math.PI / 180.) * s1pCam.fov; modelCenter.sub(camTarget); tmpCamPosition.sub(camTarget); var projectedLocation = modelCenter.projectOnVector(tmpCamPosition); var distance = tmpCamPosition.distanceTo(projectedLocation); var halfHeight = Math.tan(radFOV / 2.) * distance; var halfWidth = halfHeight * s1pCam.aspect; s1oCam.left = -halfWidth; s1oCam.right = halfWidth; s1oCam.top = halfHeight; s1oCam.bottom = -halfHeight; s1oCam.zoom = s1pCam.zoom; s1oCam.updateProjectionMatrix(); var s2pCam = s1pCam.clone(), s2oCam = s1oCam.clone(), aLight2 = aLight1.clone(), dLight2 = dLight1.clone(); s2pCam.near = 1e-6; s2pCam.far = 1e27; s2oCam.near = 1e-6; s2oCam.far = 1e27; scene1.add(s1pCam); scene1.add(s1oCam); scene1.add(aLight1); scene1.add(dLight1); scene1.add(new THREE.Mesh(new THREE.TorusKnotGeometry(10, 4, 100, 32), new THREE.MeshPhongMaterial({ color: 'red' }))); scene2.add(s2pCam); scene2.add(s2oCam); scene2.add(aLight2); scene2.add(dLight2); scene2.add(new THREE.Mesh(new THREE.TorusKnotGeometry(10, 4, 100, 32), new THREE.MeshPhongMaterial({ color: 'green' }))); document.getElementById("view1").appendChild(gl1.domElement); document.getElementById("view2").appendChild(gl2.domElement); gl1.setSize(WIDTH, HEIGHT); gl1.setClearColor(BACKGROUND); gl2.setSize(WIDTH, HEIGHT); gl2.setClearColor(BACKGROUND); gl1.render(scene1, s1pCam); gl2.render(scene2, s2pCam); function handleCameraChanges(e) { debugger; if (gl1 && e.target.id.indexOf("1") !== -1) { gl1.render(scene1, (e.target.id.indexOf("p") !== -1) ? s1pCam : s1oCam); } else if (gl2) { gl2.render(scene2, (e.target.id.indexOf("p") !== -1) ? s2pCam : s2oCam); } } document.getElementById("v1p").addEventListener("click", handleCameraChanges); document.getElementById("v1o").addEventListener("click", handleCameraChanges); document.getElementById("v2p").addEventListener("click", handleCameraChanges); document.getElementById("v2o").addEventListener("click", handleCameraChanges);）。与左侧样本一样，选择摄像机将使用该摄像机重新渲染场景。但在这种情况下，只有Perspective相机按预期工作。当选择“正交”时，结“解开”＃34;。它看起来几乎没有考虑深度缓冲区。

我使用它错了，还是其他的东西在这里？

＆＃13;

.view {
  display: inline-block;
}

＆＃13;

<script src="https://threejs.org/build/three.js"></script>

<fieldset id="view1" class="view">
  <legend>Standard Depth Buffer</legend>
  <label><input id="v1p" type="radio" name="cameraMode1" checked />Perspective</label>
  <label><input id="v1o" type="radio" name="cameraMode1" />Orthographic</label><br>
</fieldset>

<fieldset id="view2" class="view">
  <legend>Logarithmic Depth Buffer</legend>
  <label><input id="v2p" type="radio" name="cameraMode2" checked />Perspective</label>
  <label><input id="v2o" type="radio" name="cameraMode2" />Orthographic</label><br></fieldset>

＆＃13;

io.sockets.on('connection', function (socket) {
  // console.log('A new socket connected with id : '+socket.id);
   socket.on('error',function(e){
      // console.log(e);
   })
   socket.on('disconnect',function(e){
      // console.log( " \n disconnect \n ",e);
   })
   socket.on('UserRoom', function(data){
      var user_id = data.user_id;
      if(socket.adapter.rooms[user_id]===undefined)
      {
          console.log('Hey i am connected to server for User id => '+user_id);
          socket.join(user_id);
      }
      else
      {
          console.log('Hey i am already connected to User id');
      }

     }); 
    socket.on('JoinDraft', function(data) 
    {
       var game_unique_id    =  data.game_unique_id;
       socket.join(game_unique_id);
    });
});
app.post('/game_update', function(req, res)
{
   var target = true;
   var response = '';
   req.on('data', function (data) {
       response += data;
   });
  req.on('end', function () {
       res.sendStatus(200);
      var result = JSON.parse(response);
      game_update(result);
  });
});

＆＃13;

Answer 1

此问题已在PR 17442中解决，并已在r109中发布。

r109 was released on 30 September, 2019。

以下是使用r109的与上述示例完全相同的示例。感谢参与此修复程序的每个人！

.view {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>

<fieldset id="view1" class="view">
  <legend>Standard Depth Buffer</legend>
  <label><input id="v1p" type="radio" name="cameraMode1" checked />Perspective</label>
  <label><input id="v1o" type="radio" name="cameraMode1" />Orthographic</label><br>
</fieldset>

<fieldset id="view2" class="view">
  <legend>Logarithmic Depth Buffer</legend>
  <label><input id="v2p" type="radio" name="cameraMode2" checked />Perspective</label>
  <label><input id="v2o" type="radio" name="cameraMode2" />Orthographic</label><br></fieldset>

{{1}}

对数深度缓冲+正交相机

1 个答案: