webgl terrain demo look slightly improved.

examples/geometry_terrain_gl.html

@@ -143,7 +143,7 @@
 
 			function generateTexture( data, width, height ) {
 
-				var canvas, context, image, imageData,
+				var canvas, canvasScaled, context, image, imageData,
 				level, diff, vector3, sun, shade;
 
 				vector3 = new THREE.Vector3( 0, 0, 0 );
@@ -154,20 +154,19 @@
 				canvas = document.createElement( 'canvas' );
 				canvas.width = width;
 				canvas.height = height;
-				canvas.loaded = true;
 
 				context = canvas.getContext( '2d' );
 				context.fillStyle = '#000';
 				context.fillRect( 0, 0, width, height );
 
-				image = context.getImageData( 0, 0, width, height );
+				image = context.getImageData( 0, 0, canvas.width, canvas.height );
 				imageData = image.data;
 
-				for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++  ) {
+				for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
 
-					vector3.x = data[ j - 1 ] - data[ j + 1 ];
+					vector3.x = data[ j - 2 ] - data[ j + 2 ];
 					vector3.y = 2;
-					vector3.z = data[ j - width ] - data[ j + width ];
+					vector3.z = data[ j - width * 2 ] - data[ j + width * 2 ];
 					vector3.normalize();
 
 					shade = vector3.dot( sun );
@@ -179,7 +178,33 @@
 
 				context.putImageData( image, 0, 0 );
 
-				return canvas;
+				// Scaled 4x
+
+				canvasScaled = document.createElement( 'canvas' );
+				canvasScaled.width = width * 4;
+				canvasScaled.height = height * 4;
+				canvasScaled.loaded = true;
+
+				context = canvasScaled.getContext( '2d' );
+				context.scale( 4, 4 );
+				context.drawImage( canvas, 0, 0 );
+
+				image = context.getImageData( 0, 0, canvasScaled.width, canvasScaled.height );
+				imageData = image.data;
+
+				for ( var i = 0, l = imageData.length; i < l; i += 4 ) {
+
+					var v = ~~ ( Math.random() * 5 );
+
+					imageData[ i ] += v;
+					imageData[ i + 1 ] += v;
+					imageData[ i + 2 ] += v;
+
+				}
+
+				context.putImageData( image, 0, 0 );
+
+				return canvasScaled;
 
 			}