From bf495aa486a5aa75c5d2e49118877d0ee40b5982 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Sun, 12 Dec 2010 09:35:00 +0000 Subject: [PATCH] Yet another geometry optimisation to the minecraft demo. Added `lights_pointlight_smooth` example. To be used for tracking browser improvements affecting that technique. --- examples/geometry_minecraft.html | 58 +++++----- examples/lights_pointlights.html | 30 +++--- examples/lights_pointlights_smooth.html | 135 ++++++++++++++++++++++++ 3 files changed, 182 insertions(+), 41 deletions(-) create mode 100644 examples/lights_pointlights_smooth.html diff --git a/examples/geometry_minecraft.html b/examples/geometry_minecraft.html index bc4d2999..cb5bc6ba 100644 --- a/examples/geometry_minecraft.html +++ b/examples/geometry_minecraft.html @@ -30,8 +30,8 @@ -





Generating world...
-
three.js - minecraft demo. featuring painterly pack
(left click: forward, right click: backward)
+





Generating world...
+
three.js - minecraft demo. featuring painterly pack
(left click: forward, right click: backward)
@@ -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 ); } diff --git a/examples/lights_pointlights.html b/examples/lights_pointlights.html index effaa35b..61eeb23a 100644 --- 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; diff --git a/examples/lights_pointlights_smooth.html b/examples/lights_pointlights_smooth.html new file mode 100644 index 00000000..88cb8cdb --- /dev/null +++ b/examples/lights_pointlights_smooth.html @@ -0,0 +1,135 @@ + + + + three.js - point light + + + + + +
+
+ three.js - point lights demo.
+ Walt Disney head by David OReilly +
+ + + + + + +