Logarithmic Depth Buffer + Orthographic Camera Test

This is an example of how the orthographic camera breaks the logarithmic depth buffer. #SO

by grano

HTML

<script src="http://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>

CSS

.view {
  display: inline-block;
}

JavaScript

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,...