javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
							<!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' );

				var scene = initScene();

				// Initialize two copies of the same scene, one with normal z-buffer and one with logarithmic z-buffer
				objects.normal = initView( scene, 'normal', false );
				objects.logzbuf = initView( scene, '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 initView( scene, name, logDepthBuf ) {

				var framecontainer = document.getElementById('container_' + name);

				var camera = new THREE.PerspectiveCamera( 50, screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
				scene.add(camera);

				var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: logDepthBuf });
				renderer.setPixelRatio( window.devicePixelRatio );
				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 initScene() {

				var scene = new THREE.Scene();

				var light = new THREE.DirectionalLight(0xffffff, 1);
				light.position.set(100,100,100);
				scene.add(light);

				var materialargs = {
					color: 0xffffff,
					specular: 0x050505,
					shininess: 50,
					shading: THREE.SmoothShading,
					emissive: 0x000000
				};

				var meshes = [];
				var coloroffset = 0;
				var colorskip = ['black', 'antiquewhite', 'bisque', 'beige', 'blanchedalmond', 'darkblue', 'darkcyan'];
				var colorkeys = Object.keys( THREE.ColorKeywords );

				var geometry = new THREE.SphereBufferGeometry(0.5, 24, 12);

				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
					labelgeo.translate( - labelgeo.boundingSphere.radius, 0, 0 );

					// 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 group = new THREE.Group();
					group.position.z = -labeldata[i].size * scale;
					scene.add(group);

					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;
					group.add(textmesh);

					var dotmesh = new THREE.Mesh(geometry, material);
					dotmesh.position.y = -labeldata[i].size / 4 * scale;
					dotmesh.scale.multiplyScalar(labeldata[i].size * scale);
					group.add(dotmesh);

				}

				return scene;

			}

			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>