Geek Answers Handbook

Logarithmic Depth Buffer + Spelling Camera

I am trying to use a logarithmic depth buffer with a spelling camera, and come across some interesting results. I built a sample here: http://jsfiddle.net/TheJim01/05up96m0/

The renderer on the left (red node) uses a standard linear depth buffer (from 1to 1000). If you select "Perspective" or "Spelling", the scene will be redrawn with the selected camera type, and both will work as expected.

The renderer on the right (green node) uses a logarithmic depth buffer (from 1e-6to 1e27). As with the left sample, selecting a camera will re-render the scene with this camera. But in this case, only the perspective camera works as expected. When Spelling is selected, the knot is untied. It almost looks like it doesn't take into account the depth buffer.

Am I using this incorrectly, or is something else happening here?

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);
.view {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/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>
Run codeHide result

+5
source share
1 answer

This is fixed in PR 17442 , released in 109.

r109 was released on September 30, 2019 .

, , r109. , !

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);
.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>
Hide result

+1

More articles:


All Articles