Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge branch 'logdepthbuf' of https://github.com/jbaicoianu/three.js into dev

Mr.doob 11 years ago
parent
d3fe8399bf d542550851
commit
c1877e70ef
5 changed files with 521 additions and 5 deletions
Split View Show Diff Stats
  1. 341 0
      examples/webgl_camera_logarithmicdepthbuffer.html
  2. 16 0
      src/renderers/WebGLRenderer.js
  3. 79 2
      src/renderers/shaders/ShaderChunk.js
  4. 70 2
      src/renderers/shaders/ShaderLib.js
  5. 15 1
      src/renderers/webgl/WebGLProgram.js

+ 341 - 0
examples/webgl_camera_logarithmicdepthbuffer.html
View File 

@@ -0,0 +1,341 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - cameras - logarithmic depth buffer</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+			body {
 
+				color: #808080;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+
 
+				background-color: #000;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
+				z-index: 100;
 
+				color: #ddd;
 
+				text-shadow: 0 0 1px rgba(0,0,0,1);
 
+			}
 
+
 
+			a {
 
+
 
+				color: #0080ff;
 
+			}
 
+
 
+			b { color: lightgreen }
 
+
 
+			#stats { position: absolute; top:0; left: 0 }
 
+
 
+			.renderer_label {
 
+				position: absolute;
 
+				bottom: 1em;
 
+				width: 100%;
 
+				color: white;
 
+				z-index: 10;
 
+				display: block;
 
+				text-align: center;
 
+			}
 
+			.renderer_label.renderer_label_normal {
 
+			}
 
+			.renderer_label.renderer_label_logzbuf {
 
+			}
 
+			#container {
 
+				white-space: nowrap;
 
+			}
 
+			#container_normal {
 
+				width: 50%;
 
+				display: inline-block;
 
+				position: relative;
 
+				overflow: hidden;
 
+			}
 
+			#container_logzbuf {
 
+				width: 50%;
 
+				display: inline-block;
 
+				position: relative;
 
+				overflow: hidden;
 
+			}
 
+			#renderer_border {
 
+				position: absolute;
 
+				top: 0;
 
+				bottom: 0;
 
+				width: 2px;
 
+				z-index: 10;
 
+				opacity: .8;
 
+				background: #ccc;
 
+				border: 1px inset #ccc;
 
+				cursor: col-resize;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="container">
 
+			<div id="container_normal"><h2 class="renderer_label renderer_label_normal">normal z-buffer</h2></div><div id="container_logzbuf"><h2 class="renderer_label renderer_label_logzbuf">logarithmic z-buffer</h2></div>
 
+			<div id="renderer_border"></div>
 
+		</div>
 
+
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - cameras - logarithmic depth buffer<br/>
 
+			Zoom through scene with objects ranging in size from 1µm to 100,000,000 light years using the mousewheel<br/>
 
+			Linear z-buffer handles close-up objects well, but fails spectacularly at distant objects<br/>
 
+			Logarithmic handles all but the smallest objects with ease
 
+		</div>
 
+
 
+		<script src="../build/three.min.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+		<script src="fonts/helvetiker_regular.typeface.js"></script>
 
+
 
+		<script>
 
+
 
+			// 1 micrometer to 100 billion light years in one scene, with 1 unit = 1 meter?  preposterous!  and yet...
 
+			var NEAR = 1e-6, FAR = 1e27;
 
+			var SCREEN_WIDTH = window.innerWidth;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
+			var screensplit = .25, screensplit_right = 0;
 
+			var mouse = [.5, .5];
 
+			var zoompos = -100, minzoomspeed = .015;
 
+			var zoomspeed = minzoomspeed;
 
+
 
+			var container, stats;
 
+			var objects = {};
 
+
 
+			// Generate a number of text labels, from 1µm in size up to 100,000,000 light years
 
+			// Try to use some descriptive real-world examples of objects at each scale
 
+
 
+			var labeldata = [
 
+				{ size: .01,           scale: .001, label: "microscopic (1µm)", scale: .0001 }, // FIXME - triangulating text fails at this size, so we scale instead
 
+				{ size: .01,           scale: 0.1,  label: "minuscule (1mm)", scale: .1},
 
+				{ size: .01,           scale: 1.0,  label: "tiny (1cm)", scale: 1 },
 
+				{ size: 1,             scale: 1.0,  label: "child-sized (1m)", scale: 1 },
 
+				{ size: 10,            scale: 1.0,  label: "tree-sized (10m)", scale: 1 },
 
+				{ size: 100,           scale: 1.0,  label: "building-sized (100m)", scale: 1 },
 
+				{ size: 1000,          scale: 1.0,  label: "medium (1km)", scale: 1 },
 
+				{ size: 10000,         scale: 1.0,  label: "city-sized (10km)", scale: 1 },
 
+				{ size: 3400000,       scale: 1.0,  label: "moon-sized (3,400 Km)", scale: 1 },
 
+				{ size: 12000000,      scale: 1.0,  label: "planet-sized (12,000 km)", scale: 1 },
 
+				{ size: 1400000000,    scale: 1.0,  label: "sun-sized (1,400,000 km)", scale: 1 },
 
+ 				{ size: 7.47e12,       scale: 1.0,  label: "solar system-sized (50Au)", scale: 1 },
 
+   				{ size: 9.4605284e15,  scale: 1.0,  label: "gargantuan (1 light year)", scale: 1 },
 
+   				{ size: 3.08567758e16, scale: 1.0,  label: "ludicrous (1 parsec)", scale: 1 },
 
+				{ size: 1e19,          scale: 1.0,  label: "mind boggling (1000 light years)", scale: 1 },
 
+				{ size: 1.135e21,      scale: 1.0,  label: "galaxy-sized (120,000 light years)", scale: 1 },
 
+				{ size: 9.46e23,       scale: 1.0,  label: "... (100,000,000 light years)", scale: 1 }
 
+			];
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				container = document.getElementById( 'container' );
 
+
 
+				// Initialize two copies of the same scene, one with normal z-buffer and one with logarithmic z-buffer
 
+				objects.normal = initScene('normal', false);
 
+				objects.logzbuf = initScene('logzbuf', true);
 
+
 
+				stats = new Stats();
 
+				container.appendChild(stats.domElement);
 
+
 
+				// Resize border allows the user to easily compare effects of logarithmic depth buffer over the whole scene
 
+				border = document.getElementById( 'renderer_border' );
 
+				border.addEventListener("mousedown", onBorderMouseDown);
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+				window.addEventListener( 'mousewheel', onMouseWheel, false );
 
+				window.addEventListener( 'DOMMouseScroll', onMouseWheel, false );
 
+				window.addEventListener( 'mousemove', onMouseMove, false );
 
+
 
+				render();
 
+			}
 
+
 
+			function initScene(name, logDepthBuf) {
 
+
 
+				var scene = new THREE.Scene();
 
+				var framecontainer = document.getElementById('container_' + name);
 
+
 
+				var camera = new THREE.PerspectiveCamera( 50, screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
 
+				scene.add(camera);
 
+
 
+				var light = new THREE.DirectionalLight(0xffffff, 1);
 
+				light.position.set(100,100,100);
 
+				scene.add(light);
 
+
 
+				var pointlight = new THREE.PointLight(0xffccaa, .1);
 
+				pointlight.position = camera.position;
 
+				scene.add(pointlight);
 
+
 
+				var materialargs = {
 
+					color: 0xffffff,
 
+					specular: 0xffaa00,
 
+					shininess: 50,
 
+					shading: THREE.SmoothShading,
 
+					emissive: 0x000000
 
+				};
 
+
 
+				var geomtransform = new THREE.Matrix4();
 
+				var tmpvec = new THREE.Vector3();
 
+				var meshes = [];
 
+				var coloroffset = 0;
 
+				var colorskip = ['black', 'antiquewhite', 'bisque', 'beige', 'blanchedalmond', 'darkblue', 'darkcyan'];
 
+				var colorkeys = Object.keys( THREE.ColorKeywords );
 
+
 
+				for (var i = 0; i < labeldata.length; i++) {
 
+					var scale = labeldata[i].scale || 1;
 
+					var labelgeo = new THREE.TextGeometry( labeldata[i].label, {
 
+						size: labeldata[i].size,
 
+						height: labeldata[i].size / 2,
 
+						font: 'helvetiker',
 
+					});
 
+					labelgeo.computeBoundingSphere();
 
+
 
+					// center text
 
+					geomtransform.setPosition( tmpvec.set( -labelgeo.boundingSphere.radius, 0, 0 ) );
 
+					labelgeo.applyMatrix( geomtransform );
 
+
 
+					// Pick a color at "random".  Exclude black, because it looks bad.
 
+					while ( colorskip.indexOf( colorkeys[ i + coloroffset ] ) != -1 ) {
 
+						coloroffset++;
 
+					}
 
+					materialargs.color = THREE.ColorKeywords[ colorkeys[ i + coloroffset ] ];
 
+
 
+					var material = new THREE.MeshPhongMaterial( materialargs );
 
+					var textmesh = new THREE.Mesh( labelgeo, material );
 
+					textmesh.scale.set(scale, scale, scale);
 
+					textmesh.position.z = -labeldata[i].size * scale;
 
+					textmesh.position.y = labeldata[i].size / 4 * scale;
 
+					var dotmesh = new THREE.Mesh(new THREE.SphereGeometry(labeldata[i].size * scale / 2, 24, 12), material);
 
+					dotmesh.position.y = -labeldata[i].size / 4 * scale;
 
+
 
+					var merged = new THREE.Geometry();
 
+					THREE.GeometryUtils.merge(merged, textmesh);
 
+					THREE.GeometryUtils.merge(merged, dotmesh);
 
+
 
+					var mesh = new THREE.Mesh(merged, material);
 
+					mesh.position.z = -labeldata[i].size * 1 * scale;
 
+
 
+					scene.add(mesh);
 
+				}
 
+
 
+				var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: logDepthBuf });
 
+				renderer.setSize(SCREEN_WIDTH/2, SCREEN_HEIGHT);
 
+				renderer.domElement.style.position = "relative";
 
+				renderer.domElement.id = 'renderer_' + name;
 
+				framecontainer.appendChild(renderer.domElement);
 
+
 
+				return { container: framecontainer, renderer: renderer, scene: scene, camera: camera }
 
+			}
 
+
 
+			function updateRendererSizes() {
 
+
 
+				// Recalculate size for both renderers when screen size or split location changes
 
+
 
+				SCREEN_WIDTH = window.innerWidth;
 
+				SCREEN_HEIGHT = window.innerHeight;
 
+
 
+				screensplit_right = 1 - screensplit;
 
+
 
+				objects.normal.renderer.setSize( screensplit * SCREEN_WIDTH, SCREEN_HEIGHT );
 
+				objects.normal.camera.aspect = screensplit * SCREEN_WIDTH / SCREEN_HEIGHT;
 
+				objects.normal.camera.updateProjectionMatrix();
 
+				objects.normal.camera.setViewOffset( SCREEN_WIDTH, SCREEN_HEIGHT, 0, 0, SCREEN_WIDTH * screensplit, SCREEN_HEIGHT );
 
+				objects.normal.container.style.width = (screensplit * 100) + '%';
 
+
 
+				objects.logzbuf.renderer.setSize( screensplit_right * SCREEN_WIDTH, SCREEN_HEIGHT );
 
+				objects.logzbuf.camera.aspect = screensplit_right * SCREEN_WIDTH / SCREEN_HEIGHT;
 
+				objects.logzbuf.camera.updateProjectionMatrix();
 
+				objects.logzbuf.camera.setViewOffset( SCREEN_WIDTH, SCREEN_HEIGHT, SCREEN_WIDTH * screensplit, 0, SCREEN_WIDTH * screensplit_right, SCREEN_HEIGHT );
 
+				objects.logzbuf.container.style.width = (screensplit_right * 100) + '%';
 
+
 
+				border.style.left = (screensplit * 100) + "%";
 
+
 
+			}
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				// Put some limits on zooming
 
+				var minzoom = labeldata[0].size * labeldata[0].scale*1;
 
+				var maxzoom = labeldata[labeldata.length-1].size * labeldata[labeldata.length-1].scale * 100;
 
+				var damping = (Math.abs(zoomspeed) > minzoomspeed ? .95 : 1.0);
 
+
 
+				// Zoom out faster the further out you go
 
+				var zoom = THREE.Math.clamp(Math.pow(Math.E, zoompos), minzoom, maxzoom);
 
+				zoompos = Math.log(zoom);
 
+
 
+				// Slow down quickly at the zoom limits
 
+				if ((zoom == minzoom && zoomspeed < 0) || (zoom == maxzoom && zoomspeed > 0)) {
 
+					damping = .85;
 
+				}
 
+
 
+				zoompos += zoomspeed;
 
+				zoomspeed *= damping;
 
+
 
+				objects.normal.camera.position.x = Math.sin(.5 * Math.PI * (mouse[0] - .5)) * zoom;
 
+				objects.normal.camera.position.y = Math.sin(.25 * Math.PI * (mouse[1] - .5)) * zoom;
 
+				objects.normal.camera.position.z = Math.cos(.5 * Math.PI * (mouse[0] - .5)) * zoom;
 
+				objects.normal.camera.lookAt(objects.normal.scene.position);
 
+
 
+				// Clone camera settings across both scenes
 
+				objects.logzbuf.camera.position.copy(objects.normal.camera.position);
 
+				objects.logzbuf.camera.quaternion.copy(objects.normal.camera.quaternion);
 
+
 
+				// Update renderer sizes if the split has changed
 
+				if (screensplit_right != 1 - screensplit) {
 
+					updateRendererSizes();
 
+				}
 
+
 
+				objects.normal.renderer.render(objects.normal.scene, objects.normal.camera);
 
+				objects.logzbuf.renderer.render(objects.logzbuf.scene, objects.logzbuf.camera);
 
+
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function onWindowResize(event) {
 
+				updateRendererSizes();
 
+			}
 
+
 
+			function onBorderMouseDown(ev) {
 
+				// activate draggable window resizing bar
 
+				window.addEventListener("mousemove", onBorderMouseMove);
 
+				window.addEventListener("mouseup", onBorderMouseUp);
 
+				ev.stopPropagation();
 
+				ev.preventDefault();
 
+			}
 
+			function onBorderMouseMove(ev) {
 
+				screensplit = Math.max(0, Math.min(1, ev.clientX / window.innerWidth));
 
+				ev.stopPropagation();
 
+			}
 
+			function onBorderMouseUp(ev) {
 
+				window.removeEventListener("mousemove", onBorderMouseMove);
 
+				window.removeEventListener("mouseup", onBorderMouseUp);
 
+			}
 
+			function onMouseMove(ev) {
 
+				mouse[0] = ev.clientX / window.innerWidth;
 
+				mouse[1] = ev.clientY / window.innerHeight;
 
+			}
 
+			function onMouseWheel(ev) {
 
+				var amount = -ev.wheelDeltaY || ev.detail;
 
+				var dir = amount / Math.abs(amount);
 
+				zoomspeed = dir/10;
 
+
 
+				// Slow down default zoom speed after user starts zooming, to give them more control
 
+				minzoomspeed = 0.001;
 
+			}
 
+		</script>
 
+	</body>
 
+</html>

+ 16 - 0
src/renderers/WebGLRenderer.js
View File 

@@ -24,6 +24,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	_antialias = parameters.antialias !== undefined ? parameters.antialias : false,
 
 	_premultipliedAlpha = parameters.premultipliedAlpha !== undefined ? parameters.premultipliedAlpha : true,
 
 	_preserveDrawingBuffer = parameters.preserveDrawingBuffer !== undefined ? parameters.preserveDrawingBuffer : false,
 
+	_logarithmicDepthBuffer = parameters.logarithmicDepthBuffer !== undefined ? parameters.logarithmicDepthBuffer : false,
 
 
 	_clearColor = new THREE.Color( 0x000000 ),
 
 	_clearAlpha = 0;
 
@@ -184,6 +185,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	var _glExtensionTextureFilterAnisotropic;
 
 	var _glExtensionCompressedTextureS3TC;
 
 	var _glExtensionElementIndexUint;
 
+	var _glExtensionFragDepth;
 
 	
 
 	initGL();
 
@@ -4100,6 +4102,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			fogExp: fog instanceof THREE.FogExp2,
 
 
 			sizeAttenuation: material.sizeAttenuation,
 
+			logarithmicDepthBuffer: _logarithmicDepthBuffer,
 
 
 			skinning: material.skinning,
 
 			maxBones: maxBones,
 
@@ -4299,6 +4302,13 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 
 			_gl.uniformMatrix4fv( p_uniforms.projectionMatrix, false, camera.projectionMatrix.elements );
 
 
+			if ( _logarithmicDepthBuffer ) {
 
+
 
+				_gl.uniform1f(p_uniforms.logDepthBufFC, 2.0 / (Math.log(camera.far + 1.0) / Math.LN2));
 
+
 
+			}
 
+
 
+
 
 			if ( camera !== _currentCamera ) _currentCamera = camera;
 
 
 		}
 
@@ -6135,6 +6145,12 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			}
 
 		}
 
 
+		if ( _logarithmicDepthBuffer ) {
 
+
 
+			_glExtensionFragDepth = _gl.getExtension( 'EXT_frag_depth' );
 
+
 
+		}
 
+
 
 	};
 
 
 	function setDefaultGLState () {

+ 79 - 2
src/renderers/shaders/ShaderChunk.js
View File 

@@ -35,7 +35,15 @@ THREE.ShaderChunk = {
 
 
 		"#ifdef USE_FOG",
 
 
-		"	float depth = gl_FragCoord.z / gl_FragCoord.w;",
 
+		"	#ifdef USE_LOGDEPTHBUF_EXT",
 
+
 
+		"		float depth = gl_FragDepthEXT / gl_FragCoord.w;",
 
+
 
+		"	#else",
 
+
 
+		"		float depth = gl_FragCoord.z / gl_FragCoord.w;",
 
+
 
+		"	#endif",
 
 
 		"	#ifdef FOG_EXP2",
 
 
@@ -1656,7 +1664,76 @@ THREE.ShaderChunk = {
 
 
 		"#endif"
 
 
-	].join("\n")
 
+	].join("\n"),
 
+
 
+	// LOGARITHMIC DEPTH BUFFER
 
+	// http://outerra.blogspot.com/2012/11/maximizing-depth-buffer-range-and.html
 
+
 
+	// WebGL doesn't support gl_FragDepth out of the box, unless the EXT_frag_depth extension is available.  On platforms
 
+	// without EXT_frag_depth, we have to fall back on linear z-buffer in the fragment shader, which means that some long 
+	// faces close to the camera may have issues.	This can be worked around by tesselating the model more finely when
 
+	// the camera is near the surface.
 
+
 
+	logdepthbuf_pars_vertex: [
 
+
 
+		"#ifdef USE_LOGDEPTHBUF",
 
+
 
+		"	#ifdef USE_LOGDEPTHBUF_EXT",
 
+
 
+		"		varying float vFragDepth;",
 
+
 
+		"	#endif",
 
+
 
+		"	uniform float logDepthBufFC;",
 
+
 
+		"#endif",
 
+
 
+	].join('\n'),
 
+
 
+	logdepthbuf_vertex: [
 
+
 
+		"#ifdef USE_LOGDEPTHBUF",
 
+
 
+		"	gl_Position.z = log2(max(1e-6, gl_Position.w + 1.0)) * logDepthBufFC;",
 
+
 
+		"	#ifdef USE_LOGDEPTHBUF_EXT",
 
+
 
+		"		vFragDepth = 1.0 + gl_Position.w;",
 
 
+		"#else",
 
+
 
+		"		gl_Position.z = (gl_Position.z - 1.0) * gl_Position.w;",
 
+
 
+		"	#endif",
 
+
 
+		"#endif"
 
+
 
+	].join("\n"),
 
+
 
+	logdepthbuf_pars_fragment: [
 
+
 
+		"#ifdef USE_LOGDEPTHBUF",
 
+
 
+		"	uniform float logDepthBufFC;",
 
+
 
+		"	#ifdef USE_LOGDEPTHBUF_EXT",
 
+
 
+		"		#extension GL_EXT_frag_depth : enable",
 
+		"		varying float vFragDepth;",
 
+
 
+		"	#endif",
 
+
 
+		"#endif"
 
+
 
+	].join('\n'),
 
+
 
+	logdepthbuf_fragment: [
 
+		"#if defined(USE_LOGDEPTHBUF) && defined(USE_LOGDEPTHBUF_EXT)",
 
+
 
+		"	gl_FragDepthEXT = log2(vFragDepth) * logDepthBufFC * 0.5;",
 
+
 
+		"#endif"
 
+
 
+	].join("\n")
 
 
 };

+ 70 - 2
src/renderers/shaders/ShaderLib.js
View File 

@@ -28,6 +28,7 @@ THREE.ShaderLib = {
 
 			THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
 
 			THREE.ShaderChunk[ "skinning_pars_vertex" ],
 
 			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
 
 			"void main() {",
 
 
@@ -47,6 +48,7 @@ THREE.ShaderLib = {
 
 				THREE.ShaderChunk[ "morphtarget_vertex" ],
 
 				THREE.ShaderChunk[ "skinning_vertex" ],
 
 				THREE.ShaderChunk[ "default_vertex" ],
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
 
 				THREE.ShaderChunk[ "worldpos_vertex" ],
 
 				THREE.ShaderChunk[ "envmap_vertex" ],
 
@@ -68,11 +70,13 @@ THREE.ShaderLib = {
 
 			THREE.ShaderChunk[ "fog_pars_fragment" ],
 
 			THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
 
 			THREE.ShaderChunk[ "specularmap_pars_fragment" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
 
 			"void main() {",
 
 
 			"	gl_FragColor = vec4( diffuse, opacity );",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
 				THREE.ShaderChunk[ "map_fragment" ],
 
 				THREE.ShaderChunk[ "alphatest_fragment" ],
 
 				THREE.ShaderChunk[ "specularmap_fragment" ],
 
@@ -128,6 +132,7 @@ THREE.ShaderLib = {
 
 			THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
 
 			THREE.ShaderChunk[ "skinning_pars_vertex" ],
 
 			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
 
 			"void main() {",
 
 
@@ -143,6 +148,7 @@ THREE.ShaderLib = {
 
 				THREE.ShaderChunk[ "morphtarget_vertex" ],
 
 				THREE.ShaderChunk[ "skinning_vertex" ],
 
 				THREE.ShaderChunk[ "default_vertex" ],
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
 
 				THREE.ShaderChunk[ "worldpos_vertex" ],
 
 				THREE.ShaderChunk[ "envmap_vertex" ],
 
@@ -172,11 +178,13 @@ THREE.ShaderLib = {
 
 			THREE.ShaderChunk[ "fog_pars_fragment" ],
 
 			THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
 
 			THREE.ShaderChunk[ "specularmap_pars_fragment" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
 
 			"void main() {",
 
 
 			"	gl_FragColor = vec4( vec3( 1.0 ), opacity );",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
 				THREE.ShaderChunk[ "map_fragment" ],
 
 				THREE.ShaderChunk[ "alphatest_fragment" ],
 
 				THREE.ShaderChunk[ "specularmap_fragment" ],
 
@@ -248,6 +256,7 @@ THREE.ShaderLib = {
 
 			THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
 
 			THREE.ShaderChunk[ "skinning_pars_vertex" ],
 
 			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
 
 			"void main() {",
 
 
@@ -265,6 +274,7 @@ THREE.ShaderLib = {
 
 				THREE.ShaderChunk[ "morphtarget_vertex" ],
 
 				THREE.ShaderChunk[ "skinning_vertex" ],
 
 				THREE.ShaderChunk[ "default_vertex" ],
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
 
 			"	vViewPosition = -mvPosition.xyz;",
 
 
@@ -297,11 +307,13 @@ THREE.ShaderLib = {
 
 			THREE.ShaderChunk[ "bumpmap_pars_fragment" ],
 
 			THREE.ShaderChunk[ "normalmap_pars_fragment" ],
 
 			THREE.ShaderChunk[ "specularmap_pars_fragment" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
 
 			"void main() {",
 
 
 			"	gl_FragColor = vec4( vec3( 1.0 ), opacity );",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
 				THREE.ShaderChunk[ "map_fragment" ],
 
 				THREE.ShaderChunk[ "alphatest_fragment" ],
 
 				THREE.ShaderChunk[ "specularmap_fragment" ],
 
@@ -339,6 +351,7 @@ THREE.ShaderLib = {
 
 
 			THREE.ShaderChunk[ "color_pars_vertex" ],
 
 			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
 
 			"void main() {",
 
 
@@ -354,6 +367,7 @@ THREE.ShaderLib = {
 
 
 			"	gl_Position = projectionMatrix * mvPosition;",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
 				THREE.ShaderChunk[ "worldpos_vertex" ],
 
 				THREE.ShaderChunk[ "shadowmap_vertex" ],
 
 
@@ -370,11 +384,13 @@ THREE.ShaderLib = {
 
 			THREE.ShaderChunk[ "map_particle_pars_fragment" ],
 
 			THREE.ShaderChunk[ "fog_pars_fragment" ],
 
 			THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
 
 			"void main() {",
 
 
 			"	gl_FragColor = vec4( psColor, opacity );",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
 				THREE.ShaderChunk[ "map_particle_fragment" ],
 
 				THREE.ShaderChunk[ "alphatest_fragment" ],
 
 				THREE.ShaderChunk[ "color_fragment" ],
 
@@ -410,6 +426,7 @@ THREE.ShaderLib = {
 
 			"varying float vLineDistance;",
 
 
 			THREE.ShaderChunk[ "color_pars_vertex" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
 
 			"void main() {",
 
 
@@ -420,6 +437,8 @@ THREE.ShaderLib = {
 
 			"	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
 
 			"	gl_Position = projectionMatrix * mvPosition;",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
+
 
 			"}"
 
 
 		].join("\n"),
 
@@ -436,6 +455,7 @@ THREE.ShaderLib = {
 
 
 			THREE.ShaderChunk[ "color_pars_fragment" ],
 
 			THREE.ShaderChunk[ "fog_pars_fragment" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
 
 			"void main() {",
 
 
@@ -447,6 +467,7 @@ THREE.ShaderLib = {
 
 
 			"	gl_FragColor = vec4( diffuse, opacity );",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
 				THREE.ShaderChunk[ "color_fragment" ],
 
 				THREE.ShaderChunk[ "fog_fragment" ],
 
 
@@ -467,11 +488,13 @@ THREE.ShaderLib = {
 
 		},
 
 
 		vertexShader: [
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
 
 			"void main() {",
 
 
 			"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
 			"}"
 
 
 		].join("\n"),
 
@@ -481,10 +504,22 @@ THREE.ShaderLib = {
 
 			"uniform float mNear;",
 
 			"uniform float mFar;",
 
 			"uniform float opacity;",
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
 
 			"void main() {",
 
 
-			"	float depth = gl_FragCoord.z / gl_FragCoord.w;",
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
+
 
+			"	#ifdef USE_LOGDEPTHBUF_EXT",
 
+
 
+			"		float depth = gl_FragDepthEXT / gl_FragCoord.w;",
 
+
 
+			"	#else",
 
+
 
+			"		float depth = gl_FragCoord.z / gl_FragCoord.w;",
 
+
 
+			"	#endif",
 
+
 
 			"	float color = 1.0 - smoothstep( mNear, mFar, depth );",
 
 			"	gl_FragColor = vec4( vec3( color ), opacity );",
 
 
@@ -507,6 +542,7 @@ THREE.ShaderLib = {
 
 			"varying vec3 vNormal;",
 
 
 			THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
 
 			"void main() {",
 
 
@@ -514,6 +550,7 @@ THREE.ShaderLib = {
 
 
 				THREE.ShaderChunk[ "morphtarget_vertex" ],
 
 				THREE.ShaderChunk[ "default_vertex" ],
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
 
 			"}"
 
 
@@ -524,10 +561,14 @@ THREE.ShaderLib = {
 
 			"uniform float opacity;",
 
 			"varying vec3 vNormal;",
 
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
+
 
 			"void main() {",
 
 
 			"	gl_FragColor = vec4( 0.5 * normalize( vNormal ) + 0.5, opacity );",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
+
 
 			"}"
 
 
 		].join("\n")
 
@@ -666,8 +707,10 @@ THREE.ShaderLib = {
 
 
 			THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
 
 			THREE.ShaderChunk[ "fog_pars_fragment" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
 
 			"void main() {",
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
 
 			"	gl_FragColor = vec4( vec3( 1.0 ), opacity );",
 
 
@@ -1039,6 +1082,7 @@ THREE.ShaderLib = {
 
 
 			THREE.ShaderChunk[ "skinning_pars_vertex" ],
 
 			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
 
 			"void main() {",
 
 
@@ -1126,6 +1170,8 @@ THREE.ShaderLib = {
 
 
 			"	gl_Position = projectionMatrix * mvPosition;",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
+
 
 				//
 
 
 			"	vWorldPosition = worldPosition.xyz;",
 
@@ -1162,6 +1208,8 @@ THREE.ShaderLib = {
 
 
 			"varying vec3 vWorldPosition;",
 
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
+
 
 			"void main() {",
 
 
 			"	vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
 
@@ -1169,6 +1217,8 @@ THREE.ShaderLib = {
 
 
 			"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
+
 
 			"}"
 
 
 		].join("\n"),
 
@@ -1180,10 +1230,14 @@ THREE.ShaderLib = {
 
 
 			"varying vec3 vWorldPosition;",
 
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
+
 
 			"void main() {",
 
 
 			"	gl_FragColor = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) );",
 
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
+
 
 			"}"
 
 
 		].join("\n")
 
@@ -1206,6 +1260,7 @@ THREE.ShaderLib = {
 
 
 			THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
 
 			THREE.ShaderChunk[ "skinning_pars_vertex" ],
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
 
 
 			"void main() {",
 
 
@@ -1213,6 +1268,7 @@ THREE.ShaderLib = {
 
 				THREE.ShaderChunk[ "morphtarget_vertex" ],
 
 				THREE.ShaderChunk[ "skinning_vertex" ],
 
 				THREE.ShaderChunk[ "default_vertex" ],
 
+				THREE.ShaderChunk[ "logdepthbuf_vertex" ],
 
 
 			"}"
 
 
@@ -1220,6 +1276,8 @@ THREE.ShaderLib = {
 
 
 		fragmentShader: [
 
 
+			THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
+
 
 			"vec4 pack_depth( const in float depth ) {",
 
 
 			"	const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );",
 
@@ -1232,7 +1290,17 @@ THREE.ShaderLib = {
 
 
 			"void main() {",
 
 
-			"	gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );",
 
+				THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
+
 
+			"	#ifdef USE_LOGDEPTHBUF_EXT",
 
+
 
+			"		gl_FragData[ 0 ] = pack_depth( gl_FragDepthEXT );",
 
+
 
+			"	#else",
 
+
 
+			"		gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );",
 
+
 
+			"	#endif",
 
 
 				//"gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z / gl_FragCoord.w );",
 
 				//"float z = ( ( gl_FragCoord.z / gl_FragCoord.w ) - 3.0 ) / ( 4000.0 - 3.0 );",

+ 15 - 1
src/renderers/webgl/WebGLProgram.js
View File 

@@ -146,6 +146,10 @@ THREE.WebGLProgram = ( function () {
 
 
 				parameters.sizeAttenuation ? "#define USE_SIZEATTENUATION" : "",
 
 
+				parameters.logarithmicDepthBuffer ? "#define USE_LOGDEPTHBUF" : "",
 
+				//_this._glExtensionFragDepth ? "#define USE_LOGDEPTHBUF_EXT" : "",
 
+
 
+
 
 				"uniform mat4 modelMatrix;",
 
 				"uniform mat4 modelViewMatrix;",
 
 				"uniform mat4 projectionMatrix;",
 
@@ -242,6 +246,9 @@ THREE.WebGLProgram = ( function () {
 
 				parameters.shadowMapDebug ? "#define SHADOWMAP_DEBUG" : "",
 
 				parameters.shadowMapCascade ? "#define SHADOWMAP_CASCADE" : "",
 
 
+				parameters.logarithmicDepthBuffer ? "#define USE_LOGDEPTHBUF" : "",
 
+				//_this._glExtensionFragDepth ? "#define USE_LOGDEPTHBUF_EXT" : "",
 
+
 
 				"uniform mat4 viewMatrix;",
 
 				"uniform vec3 cameraPosition;",
 
 				""
 
@@ -308,6 +315,13 @@ THREE.WebGLProgram = ( function () {
 
 
 		}
 
 
+		if ( parameters.logarithmicDepthBuffer ) {
 
+
 
+			identifiers.push('logDepthBufFC');
 
+
 
+		}
 
+
 
+
 
 		for ( var u in uniforms ) {
 
 
 			identifiers.push( u );
 
@@ -358,4 +372,4 @@ THREE.WebGLProgram = ( function () {
 
 
 	};
 
 
-} )();
 
+} )();