Yet another geometry optimisation to the minecraft demo.

Added `lights_pointlight_smooth` example. To be used for tracking browser improvements affecting that technique.

Yet another geometry optimisation to the minecraft demo.
Added `lights_pointlight_smooth` example. To be used for tracking browser improvements affecting that technique.
bf495aa4 · Mr.doob · 9e5017a2 · bf495aa4 · bf495aa4 · bf495aa4
3 changed file
--- a/examples/geometry_minecraft.html
+++ b/examples/geometry_minecraft.html
@@ -30,8 +30,8 @@
 	</head>
 	<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/ImprovedNoise.js"></script>
@@ -78,7 +78,7 @@
 				var grass_dirt = loadTexture( 'textures/minecraft/grass_dirt.png' ),
 					grass 	   = loadTexture( 'textures/minecraft/grass.png' ),
 					dirt	   = loadTexture( 'textures/minecraft/dirt.png' );
-					
+
 				var materials = [

 					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++ ) {
-				
+
 					px = (i & 8) == 8;
 					nx = (i & 4) == 4;
 					pz = (i & 2) == 2;
 					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 } );
-					
+
 				}
-				
+
 				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;
-				
+
 				for ( var z = 0; z < worldDepth; z ++ ) {

 					for ( var x = 0; x < worldWidth; x ++ ) {

 						px = nx = pz = nz = 0;
-						
+
 						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.position.x = x * 100 - worldHalfWidth * 100;
-						mesh.position.y = h;
+						mesh.position.y = h * 100;
 						mesh.position.z = z * 100 - worldHalfDepth * 100;

 						GeometryUtils.merge( geometry, mesh );
-						
+
 					}

 				}
@@ -171,16 +177,16 @@
 			}

 			function generateAO( image, sides ) {
-			
+
 				var c = document.createElement('canvas');
 				c.width = image.width;
 				c.height = image.height;
 				c.getContext( "2d" ).drawImage( image, 0, 0 );
-				
+
 				return c;
-				
+
 			}
-			
+
 			function loadTexture( path ) {

 				var image = new Image();
@@ -218,7 +224,7 @@

 			function getY( x, z ) {

-				return ~~( data[ x + z * worldWidth ] * 0.2 ) * 100;
+				return ~~( data[ x + z * worldWidth ] * 0.2 );

 			}


--- a/examples/lights_pointlights.html
+++ b/examples/lights_pointlights.html
@@ -46,7 +46,7 @@
 			var camera, scene, renderer,
 			particle1, particle2, particle2,
 			light1, light2, light3,
-			object;
+			mesh;

 			init();
 			setInterval( loop, 1000 / 60 );
@@ -60,9 +60,16 @@

 				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.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;
 				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.setSize( window.innerWidth, window.innerHeight );
@@ -97,7 +97,7 @@

 				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.y = Math.cos( time * 0.5 ) * 40;

--- a/examples/lights_pointlights_smooth.html
+++ b/examples/lights_pointlights_smooth.html
+<!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>