From 2affcfa2b7f3ac0699a56ab36cdf863e103cac5e Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Sat, 18 Aug 2012 18:19:54 +0200 Subject: [PATCH] Better grids code. And minor tweaks to CanvasRenderer. --- examples/canvas_camera_orthographic.html | 23 +++++++++------- examples/canvas_camera_orthographic2.html | 23 +++++++++------- examples/canvas_interactive_voxelpainter.html | 27 ++++++++++--------- examples/canvas_materials.html | 27 +++++++++---------- examples/canvas_performance.html | 25 ++++++++--------- examples/canvas_sandbox.html | 25 ++++++++--------- src/renderers/CanvasRenderer.js | 11 +++----- 7 files changed, 84 insertions(+), 77 deletions(-) diff --git a/examples/canvas_camera_orthographic.html b/examples/canvas_camera_orthographic.html index e8cc49ee28..c275d083d8 100644 --- a/examples/canvas_camera_orthographic.html +++ b/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 ); diff --git a/examples/canvas_camera_orthographic2.html b/examples/canvas_camera_orthographic2.html index 180d3353b7..c7991ba785 100644 --- a/examples/canvas_camera_orthographic2.html +++ b/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 ); diff --git a/examples/canvas_interactive_voxelpainter.html b/examples/canvas_interactive_voxelpainter.html index 8b3268ed48..c30365bcdd 100644 --- a/examples/canvas_interactive_voxelpainter.html +++ b/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() ); diff --git a/examples/canvas_materials.html b/examples/canvas_materials.html index 1948fb4b1c..410192f5c6 100644 --- a/examples/canvas_materials.html +++ b/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 ); diff --git a/examples/canvas_performance.html b/examples/canvas_performance.html index 1189ef811d..7a861f628a 100644 --- a/examples/canvas_performance.html +++ b/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 ); diff --git a/examples/canvas_sandbox.html b/examples/canvas_sandbox.html index d6002ec51e..885db9ebba 100644 --- a/examples/canvas_sandbox.html +++ b/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 = []; diff --git a/src/renderers/CanvasRenderer.js b/src/renderers/CanvasRenderer.js index b54a26c337..1408ad7dea 100644 --- a/src/renderers/CanvasRenderer.js +++ b/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; -- GitLab