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

Yet another geometry optimisation to the minecraft demo.
Added `lights_pointlight_smooth` example. To be used for tracking browser improvements affecting that technique.

Mr.doob 14 years ago
parent
9e5017a2ed
commit
bf495aa486
3 changed files with 182 additions and 41 deletions
Unified View Show Diff Stats
  1. 32 26
      examples/geometry_minecraft.html
  2. 15 15
      examples/lights_pointlights.html
  3. 135 0
      examples/lights_pointlights_smooth.html

+ 32 - 26
examples/geometry_minecraft.html
View File 

@@ -30,8 +30,8 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<div id="container"><br /><br /><br /><br /><br />Generating world...</div> 
-		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div> 
+		<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
 
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div>
 
 
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
 		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
 
@@ -78,7 +78,7 @@
 
 				var grass_dirt = loadTexture( 'textures/minecraft/grass_dirt.png' ),
 
 				var grass_dirt = loadTexture( 'textures/minecraft/grass_dirt.png' ),
 
 					grass 	   = loadTexture( 'textures/minecraft/grass.png' ),
 
 					grass 	   = loadTexture( 'textures/minecraft/grass.png' ),
 
 					dirt	   = loadTexture( 'textures/minecraft/dirt.png' );
 
 					dirt	   = loadTexture( 'textures/minecraft/dirt.png' );
 
-					
+
 
 				var materials = [
 
 				var materials = [
 
 
 
 					grass_dirt, // right
 
 					grass_dirt, // right
 
@@ -90,45 +90,51 @@
 
 
 
 				];
 
 				];
 
 
 
-				var h, px, nx, pz, nz, cubes = [];
 
-				
+				var h, h2, px, nx, pz, nz, cubes = [];
 
+
 
 				for ( var i = 0; i < 16; i++ ) {
 
 				for ( var i = 0; i < 16; i++ ) {
 
-				
+
 
 					px = (i & 8) == 8;
 
 					px = (i & 8) == 8;
 
 					nx = (i & 4) == 4;
 
 					nx = (i & 4) == 4;
 
 					pz = (i & 2) == 2;
 
 					pz = (i & 2) == 2;
 
 					nz = (i & 1) == 1;
 
 					nz = (i & 1) == 1;
 
 					cubes[ i ] = new Cube( 100, 100, 100, 1, 1, materials, false, { px: px, nx: nx, py: true, ny: false, pz: pz, nz: nz } );
 
 					cubes[ i ] = new Cube( 100, 100, 100, 1, 1, materials, false, { px: px, nx: nx, py: true, ny: false, pz: pz, nz: nz } );
 
-					
+
 
 				}
 
 				}
 
-				
+
 
 				var geometry = new THREE.Geometry();
 
 				var geometry = new THREE.Geometry();
 
 
 
-				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) + 100;
 
+				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 
 				camera.target.position.y = camera.position.y;
 
 				camera.target.position.y = camera.position.y;
 
-				
+
 
 				for ( var z = 0; z < worldDepth; z ++ ) {
 
 				for ( var z = 0; z < worldDepth; z ++ ) {
 
 
 
 					for ( var x = 0; x < worldWidth; x ++ ) {
 
 					for ( var x = 0; x < worldWidth; x ++ ) {
 
 
 
 						px = nx = pz = nz = 0;
 
 						px = nx = pz = nz = 0;
 
-						
+
 
 						h = getY( x, z );
 
 						h = getY( x, z );
 
-						
-						px = (getY( x - 1, z ) != h) || x == 0 ? 1 : 0;
 
-						nx = (getY( x + 1, z ) != h) || x == worldWidth - 1 ? 1 : 0;
 
-						
-						pz = (getY( x, z + 1 ) != h) || z == worldDepth - 1 ? 1 : 0;
 
-						nz = (getY( x, z - 1 ) != h) || z == 0 ? 1 : 0;
 
-						
+
 
+						h2 = getY( x - 1, z );
 
+						px = ( h2 != h && h2 != h + 1 ) || x == 0 ? 1 : 0;
 
+
 
+						h2 = getY( x + 1, z );
 
+						nx = ( h2 != h && h2 != h + 1 ) || x == worldWidth - 1 ? 1 : 0;
 
+
 
+						h2 = getY( x, z + 1 );
 
+						pz = ( h2 != h && h2 != h + 1 ) || z == worldDepth - 1 ? 1 : 0;
 
+
 
+						h2 = getY( x, z - 1 );
 
+						nz = ( h2 != h && h2 != h + 1 ) || z == 0 ? 1 : 0;
 
+
 
 						mesh = new THREE.Mesh( cubes[ px * 8 + nx * 4 + pz * 2 + nz ] );
 
 						mesh = new THREE.Mesh( cubes[ px * 8 + nx * 4 + pz * 2 + nz ] );
 
-						
+
 
 						mesh.position.x = x * 100 - worldHalfWidth * 100;
 
 						mesh.position.x = x * 100 - worldHalfWidth * 100;
 
-						mesh.position.y = h;
 
+						mesh.position.y = h * 100;
 
 						mesh.position.z = z * 100 - worldHalfDepth * 100;
 
 						mesh.position.z = z * 100 - worldHalfDepth * 100;
 
 
 
 						GeometryUtils.merge( geometry, mesh );
 
 						GeometryUtils.merge( geometry, mesh );
 
-						
+
 
 					}
 
 					}
 
 
 
 				}
 
 				}
 
@@ -171,16 +177,16 @@
 
 			}
 
 			}
 
 
 
 			function generateAO( image, sides ) {
 
 			function generateAO( image, sides ) {
 
-			
+
 
 				var c = document.createElement('canvas');
 
 				var c = document.createElement('canvas');
 
 				c.width = image.width;
 
 				c.width = image.width;
 
 				c.height = image.height;
 
 				c.height = image.height;
 
 				c.getContext( "2d" ).drawImage( image, 0, 0 );
 
 				c.getContext( "2d" ).drawImage( image, 0, 0 );
 
-				
+
 
 				return c;
 
 				return c;
 
-				
+
 
 			}
 
 			}
 
-			
+
 
 			function loadTexture( path ) {
 
 			function loadTexture( path ) {
 
 
 
 				var image = new Image();
 
 				var image = new Image();
 
@@ -218,7 +224,7 @@
 
 
 
 			function getY( x, z ) {
 
 			function getY( x, z ) {
 
 
 
-				return ~~( data[ x + z * worldWidth ] * 0.2 ) * 100;
 
+				return ~~( data[ x + z * worldWidth ] * 0.2 );
 
 
 
 			}
 
 			}

+ 15 - 15
examples/lights_pointlights.html
View File 

@@ -46,7 +46,7 @@
 
 			var camera, scene, renderer,
 
 			var camera, scene, renderer,
 
 			particle1, particle2, particle2,
 
 			particle1, particle2, particle2,
 
 			light1, light2, light3,
 
 			light1, light2, light3,
 
-			object;
 
+			mesh;
 
 
 
 			init();
 
 			init();
 
 			setInterval( loop, 1000 / 60 );
 
 			setInterval( loop, 1000 / 60 );
 
@@ -60,9 +60,16 @@
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
 
-				object = new THREE.Mesh( new WaltHead(), new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
 
-				object.overdraw = true;
 
-				scene.addObject( object );
 
+				scene.addLight( new THREE.AmbientLight( 0x00020 ) );
 
+
 
+				light1 = new THREE.PointLight( 0xff0040 );
 
+				scene.addLight( light1 );
 
+
 
+				light2 = new THREE.PointLight( 0x0040ff );
 
+				scene.addLight( light2 );
 
+
 
+				light3 = new THREE.PointLight( 0x80ff80 );
 
+				scene.addLight( light3 );
 
 
 
 				particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xff0040 } ) );
 
 				particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xff0040 } ) );
 
 				particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
 
 				particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
 
@@ -76,16 +83,9 @@
 
 				particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
 
 				particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
 
 				scene.addObject( particle3 );
 
 				scene.addObject( particle3 );
 
 
 
-				scene.addLight( new THREE.AmbientLight( 0x00020 ) );
 
-
 
-				light1 = new THREE.PointLight( 0xff0040 );
 
-				scene.addLight( light1 );
 
-
 
-				light2 = new THREE.PointLight( 0x0040ff );
 
-				scene.addLight( light2 );
 
-
 
-				light3 = new THREE.PointLight( 0x80ff80 );
 
-				scene.addLight( light3 );
 
+				mesh = new THREE.Mesh( new WaltHead(), new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
 
+				mesh.overdraw = true;
 
+				scene.addObject( mesh );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -97,7 +97,7 @@
 
 
 
 				var time = new Date().getTime() * 0.0005;
 
 				var time = new Date().getTime() * 0.0005;
 
 
 
-				object.rotation.y -= 0.01;
 
+				mesh.rotation.y -= 0.01;
 
 
 
 				particle1.position.x = Math.sin( time * 0.7 ) * 30;
 
 				particle1.position.x = Math.sin( time * 0.7 ) * 30;
 
 				particle1.position.y = Math.cos( time * 0.5 ) * 40;
 
 				particle1.position.y = Math.cos( time * 0.5 ) * 40;

+ 135 - 0
examples/lights_pointlights_smooth.html
View File 

@@ -0,0 +1,135 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - point light</title>
 
+		<meta charset="utf-8">
 
+		<style type="text/css">
 
+			body {
 
+				background-color: #000000;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				color: #ffffff;
 
+				padding: 5px;
 
+				font-family: Monospace;
 
+				font-size: 13px;
 
+				text-align: center;
 
+			}
 
+
 
+			a {
 
+				color: #ff0080;
 
+				text-decoration: none;
 
+			}
 
+
 
+			a:hover {
 
+				color: #0080ff;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="container"></div>
 
+		<div id="info">
 
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights demo.<br />
 
+			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 
+		</div>
 
+
 
+		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="obj/WaltHead.js"></script> 
+
 
+		<script type="text/javascript">
 
+
 
+			var camera, scene, renderer,
 
+			particle1, particle2, particle2,
 
+			light1, light2, light3,
 
+			geometry, mesh;
 
+
 
+			init();
 
+			setInterval( loop, 1000 / 60 );
 
+
 
+			function init() {
 
+
 
+				var container = document.getElementById( 'container' );
 
+
 
+				camera = new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera.position.z = 100;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				scene.addLight( new THREE.AmbientLight( 0x00020 ) );
 
+
 
+				light1 = new THREE.PointLight( 0xff0040 );
 
+				scene.addLight( light1 );
 
+
 
+				light2 = new THREE.PointLight( 0x0040ff );
 
+				scene.addLight( light2 );
 
+
 
+				light3 = new THREE.PointLight( 0x80ff80 );
 
+				scene.addLight( light3 );
 
+
 
+				particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xff0040 } ) );
 
+				particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
 
+				scene.addObject( particle1 );
 
+
 
+				particle2 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x0040ff } ) );
 
+				particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
 
+				scene.addObject( particle2 );
 
+
 
+				particle3 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x80ff80 } ) );
 
+				particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
 
+				scene.addObject( particle3 );
 
+
 
+				geometry = new WaltHead();
 
+				geometry.computeVertexNormals();
 
+
 
+				mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) );
 
+				mesh.overdraw = true;
 
+				scene.addObject( mesh );
 
+
 
+				renderer = new THREE.CanvasRenderer();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				container.appendChild( renderer.domElement );
 
+
 
+			}
 
+
 
+			function loop() {
 
+
 
+				var time = new Date().getTime() * 0.0005;
 
+
 
+				mesh.rotation.y -= 0.01;
 
+
 
+				particle1.position.x = Math.sin( time * 0.7 ) * 30;
 
+				particle1.position.y = Math.cos( time * 0.5 ) * 40;
 
+				particle1.position.z = Math.cos( time * 0.3 ) * 30;
 
+
 
+				light1.position.x = particle1.position.x;
 
+				light1.position.y = particle1.position.y;
 
+				light1.position.z = particle1.position.z;
 
+
 
+				particle2.position.x = Math.cos( time * 0.3 ) * 30;
 
+				particle2.position.y = Math.sin( time * 0.5 ) * 40;
 
+				particle2.position.z = Math.sin( time * 0.7 ) * 30;
 
+
 
+				light2.position.x = particle2.position.x;
 
+				light2.position.y = particle2.position.y;
 
+				light2.position.z = particle2.position.z;
 
+
 
+				particle3.position.x = Math.sin( time * 0.7 ) * 30;
 
+				particle3.position.y = Math.cos( time * 0.3 ) * 40;
 
+				particle3.position.z = Math.sin( time * 0.5 ) * 30;
 
+
 
+				light3.position.x = particle3.position.x;
 
+				light3.position.y = particle3.position.y;
 
+				light3.position.z = particle3.position.z;
 
+
 
+				renderer.render(scene, camera);
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>