Better grids code. And minor tweaks to CanvasRenderer.

examples/canvas_camera_orthographic.html

@@ -49,23 +49,26 @@
 
 				// Grid
 
+				var size = 500, step = 50;
+
 				var geometry = new THREE.Geometry();
-				geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
-				geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
 
-				for ( var i = 0; i <= 20; i ++ ) {
+				for ( var i = - size; i <= size; i += step ) {
 
-					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
-					line.position.z = ( i * 50 ) - 500;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
+					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
 
-					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
-					line.position.x = ( i * 50 ) - 500;
-					line.rotation.y = 90 * Math.PI / 180;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
+					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
 
 				}
 
+				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
+
+				var line = new THREE.Line( geometry, material );
+				line.type = THREE.LinePieces;
+				scene.add( line );
+
 				// Cubes
 
 				var geometry = new THREE.CubeGeometry( 50, 50, 50 );

examples/canvas_camera_orthographic2.html

@@ -116,23 +116,26 @@
 
 				// Grid
 
+				var size = 500, step = 50;
+
 				var geometry = new THREE.Geometry();
-				geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
-				geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
 
-				for ( var i = 0; i <= 20; i ++ ) {
+				for ( var i = - size; i <= size; i += step ) {
 
-					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
-					line.position.z = ( i * 50 ) - 500;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
+					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
 
-					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
-					line.position.x = ( i * 50 ) - 500;
-					line.rotation.y = 90 * Math.PI / 180;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
+					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
 
 				}
 
+				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
+
+				var line = new THREE.Line( geometry, material );
+				line.type = THREE.LinePieces;
+				scene.add( line );
+
 				// Cubes
 
 				var geometry = new THREE.CubeGeometry( 50, 50, 50 );

examples/canvas_interactive_voxelpainter.html

@@ -52,25 +52,28 @@
 
 				// Grid
 
-				var geometry = new THREE.Geometry();
-				geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
-				geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
+				var size = 500, step = 50;
 
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
+				var geometry = new THREE.Geometry();
 
-				for ( var i = 0; i <= 20; i ++ ) {
+				for ( var i = - size; i <= size; i += step ) {
 
-					var line = new THREE.Line( geometry, material );
-					line.position.z = ( i * 50 ) - 500;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
+					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
 
-					var line = new THREE.Line( geometry, material );
-					line.position.x = ( i * 50 ) - 500;
-					line.rotation.y = 90 * Math.PI / 180;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
+					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
 
 				}
 
+				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
+
+				var line = new THREE.Line( geometry, material );
+				line.type = THREE.LinePieces;
+				scene.add( line );
+
+				//
+
 				projector = new THREE.Projector();
 
 				plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshBasicMaterial() );

examples/canvas_materials.html

@@ -41,27 +41,26 @@
 
 				// Grid
 
-				var geometry = new THREE.Geometry();
-				geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
-				geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
+				var size = 500, step = 100;
 
-				var material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } );
+				var geometry = new THREE.Geometry();
 
-				for ( var i = 0; i <= 10; i ++ ) {
+				for ( var i = - size; i <= size; i += step ) {
 
-					var line = new THREE.Line( geometry, material );
-					line.position.y = - 120;
-					line.position.z = ( i * 100 ) - 500;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( - size, - 120, i ) );
+					geometry.vertices.push( new THREE.Vector3(   size, - 120, i ) );
 
-					var line = new THREE.Line( geometry, material );
-					line.position.x = ( i * 100 ) - 500;
-					line.position.y = - 120;
-					line.rotation.y = 90 * Math.PI / 180;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( i, - 120, - size ) );
+					geometry.vertices.push( new THREE.Vector3( i, - 120,   size ) );
 
 				}
 
+				var material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } );
+
+				var line = new THREE.Line( geometry, material );
+				line.type = THREE.LinePieces;
+				scene.add( line );
+
 				// Spheres
 
 				var geometry = new THREE.SphereGeometry( 100, 14, 7, false );

examples/canvas_performance.html

@@ -42,25 +42,26 @@
 
 				// Grid
 
-				var geometry = new THREE.Geometry();
-				geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
-				geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
+				var size = 500, step = 100;
 
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
+				var geometry = new THREE.Geometry();
 
-				for ( var i = 0; i <= 10; i ++ ) {
+				for ( var i = - size; i <= size; i += step ) {
 
-					var line = new THREE.Line( geometry, material );
-					line.position.z = ( i * 100 ) - 500;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
+					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
 
-					var line = new THREE.Line( geometry, material );
-					line.position.x = ( i * 100 ) - 500;
-					line.rotation.y = 90 * Math.PI / 180;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
+					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
 
 				}
 
+				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
+
+				var line = new THREE.Line( geometry, material );
+				line.type = THREE.LinePieces;
+				scene.add( line );
+
 				// Spheres
 
 				geometry = new THREE.SphereGeometry( 100, 26, 18 );

examples/canvas_sandbox.html

@@ -66,25 +66,26 @@
 
 				// Grid
 
-				var geometry = new THREE.Geometry();
-				geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
-				geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
+				var size = 500, step = 100;
 
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
+				var geometry = new THREE.Geometry();
 
-				for ( var i = 0; i <= 10; i ++ ) {
+				for ( var i = - size; i <= size; i += step ) {
 
-					var line = new THREE.Line( geometry, material );
-					line.position.z = ( i * 100 ) - 500;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
+					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
 
-					var line = new THREE.Line( geometry, material );
-					line.position.x = ( i * 100 ) - 500;
-					line.rotation.y = 90 * Math.PI / 180;
-					scene.add( line );
+					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
+					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
 
 				}
 
+				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
+
+				var line = new THREE.Line( geometry, material );
+				line.type = THREE.LinePieces;
+				scene.add( line );
+
 				// Spheres
 
 				objects = [];

src/renderers/CanvasRenderer.js

@@ -918,9 +918,6 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 					_imagedatas[ texture.id ] = context.getImageData( 0, 0, texture.image.width, texture.image.height ).data;
 
-					// variables cannot be deleted in ES5 strict mode
-					//delete canvas;
-
 				}
 
 				var data = _imagedatas[ texture.id ];
@@ -992,10 +989,10 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 			// http://mrdoob.com/blog/post/710
 
-			var c1r = ~~ ( color1.r * 255 ), c1g = ~~ ( color1.g * 255 ), c1b = ~~ ( color1.b * 255 ),
-			c2r = ~~ ( color2.r * 255 ), c2g = ~~ ( color2.g * 255 ), c2b = ~~ ( color2.b * 255 ),
-			c3r = ~~ ( color3.r * 255 ), c3g = ~~ ( color3.g * 255 ), c3b = ~~ ( color3.b * 255 ),
-			c4r = ~~ ( color4.r * 255 ), c4g = ~~ ( color4.g * 255 ), c4b = ~~ ( color4.b * 255 );
+			var c1r = ( color1.r * 255 ) | 0, c1g = ( color1.g * 255 ) | 0, c1b = ( color1.b * 255 ) | 0;
+			var c2r = ( color2.r * 255 ) | 0, c2g = ( color2.g * 255 ) | 0, c2b = ( color2.b * 255 ) | 0;
+			var c3r = ( color3.r * 255 ) | 0, c3g = ( color3.g * 255 ) | 0, c3b = ( color3.b * 255 ) | 0;
+			var c4r = ( color4.r * 255 ) | 0, c4g = ( color4.g * 255 ) | 0, c4b = ( color4.b * 255 ) | 0;
 
 			_pixelMapData[ 0 ] = c1r < 0 ? 0 : c1r > 255 ? 255 : c1r;
 			_pixelMapData[ 1 ] = c1g < 0 ? 0 : c1g > 255 ? 255 : c1g;