From 449a981925ed194d08a61ba775ea0ac57b49cc77 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Tue, 29 Mar 2011 03:50:04 +0100 Subject: [PATCH] CanvasRenderer: Added distance(falloff) to PointLight. Removed illumination to ParticleCanvasMaterial. --- examples/canvas_interactive_cubes.html | 3 +- examples/canvas_lights_pointlights.html | 9 ++- .../canvas_lights_pointlights_smooth.html | 9 ++- examples/canvas_lines.html | 15 +++-- examples/canvas_lines_sphere.html | 15 +++-- examples/canvas_materials.html | 3 +- examples/canvas_materials_video.html | 15 +++-- examples/canvas_particles_floor.html | 3 +- examples/canvas_particles_random.html | 3 +- examples/canvas_particles_waves.html | 15 +++-- examples/canvas_performance.html | 2 +- src/lights/DirectionalLight.js | 3 +- src/lights/PointLight.js | 3 +- src/renderers/CanvasRenderer.js | 59 ++++++++----------- 14 files changed, 69 insertions(+), 88 deletions(-) diff --git a/examples/canvas_interactive_cubes.html b/examples/canvas_interactive_cubes.html index 8a84759a..329b8bbe 100644 --- a/examples/canvas_interactive_cubes.html +++ b/examples/canvas_interactive_cubes.html @@ -69,9 +69,8 @@ particleMaterial = new THREE.ParticleCanvasMaterial( { color: 0x000000, - program: function ( context, color ) { + program: function ( context ) { - context.fillStyle = color.__styleString; context.beginPath(); context.arc( 0, 0, 1, 0, PI2, true ); context.closePath(); diff --git a/examples/canvas_lights_pointlights.html b/examples/canvas_lights_pointlights.html index 248c2368..bf89005f 100644 --- a/examples/canvas_lights_pointlights.html +++ b/examples/canvas_lights_pointlights.html @@ -64,19 +64,18 @@ scene.addLight( new THREE.AmbientLight( 0x00020 ) ); - light1 = new THREE.PointLight( 0xff0040 ); + light1 = new THREE.PointLight( 0xff0040, 1, 50 ); scene.addLight( light1 ); - light2 = new THREE.PointLight( 0x0040ff ); + light2 = new THREE.PointLight( 0x0040ff, 1, 50 ); scene.addLight( light2 ); - light3 = new THREE.PointLight( 0x80ff80 ); + light3 = new THREE.PointLight( 0x80ff80, 1, 50 ); scene.addLight( light3 ); var PI2 = Math.PI * 2; - var program = function ( context, color ) { + var program = function ( context ) { - context.fillStyle = color.__styleString; context.beginPath(); context.arc( 0, 0, 1, 0, PI2, true ); context.closePath(); diff --git a/examples/canvas_lights_pointlights_smooth.html b/examples/canvas_lights_pointlights_smooth.html index e57fcc12..f22f4093 100644 --- a/examples/canvas_lights_pointlights_smooth.html +++ b/examples/canvas_lights_pointlights_smooth.html @@ -64,19 +64,18 @@ scene.addLight( new THREE.AmbientLight( 0x00020 ) ); - light1 = new THREE.PointLight( 0xff0040 ); + light1 = new THREE.PointLight( 0xff0040, 1, 50 ); scene.addLight( light1 ); - light2 = new THREE.PointLight( 0x0040ff ); + light2 = new THREE.PointLight( 0x0040ff, 1, 50 ); scene.addLight( light2 ); - light3 = new THREE.PointLight( 0x80ff80 ); + light3 = new THREE.PointLight( 0x80ff80, 1, 50 ); scene.addLight( light3 ); var PI2 = Math.PI * 2; - var program = function ( context, color ) { + var program = function ( context ) { - context.fillStyle = color.__styleString; context.beginPath(); context.arc( 0, 0, 1, 0, PI2, true ); context.closePath(); diff --git a/examples/canvas_lines.html b/examples/canvas_lines.html index e9513b90..b9a8c1e5 100644 --- a/examples/canvas_lines.html +++ b/examples/canvas_lines.html @@ -60,16 +60,15 @@ var PI2 = Math.PI * 2; var material = new THREE.ParticleCanvasMaterial( { - color: 0xffffff, - program: function ( context, color ) { + color: 0xffffff, + program: function ( context ) { - context.fillStyle = color.__styleString; - context.beginPath(); - context.arc( 0, 0, 1, 0, PI2, true ); - context.closePath(); - context.fill(); + context.beginPath(); + context.arc( 0, 0, 1, 0, PI2, true ); + context.closePath(); + context.fill(); - } + } } ); diff --git a/examples/canvas_lines_sphere.html b/examples/canvas_lines_sphere.html index 9bec612a..579c54d5 100644 --- a/examples/canvas_lines_sphere.html +++ b/examples/canvas_lines_sphere.html @@ -63,16 +63,15 @@ var PI2 = Math.PI * 2; var material = new THREE.ParticleCanvasMaterial( { - color: 0xffffff, - program: function ( context, color ) { + color: 0xffffff, + program: function ( context ) { - context.fillStyle = color.__styleString; - context.beginPath(); - context.arc( 0, 0, 1, 0, PI2, true ); - context.closePath(); - context.fill(); + context.beginPath(); + context.arc( 0, 0, 1, 0, PI2, true ); + context.closePath(); + context.fill(); - } + } } ); diff --git a/examples/canvas_materials.html b/examples/canvas_materials.html index ff0ffaf9..a5c71e51 100644 --- a/examples/canvas_materials.html +++ b/examples/canvas_materials.html @@ -112,9 +112,8 @@ } var PI2 = Math.PI * 2; - var program = function ( context, color ) { + var program = function ( context ) { - context.fillStyle = color.__styleString; context.beginPath(); context.arc( 0, 0, 1, 0, PI2, true ); context.closePath(); diff --git a/examples/canvas_materials_video.html b/examples/canvas_materials_video.html index 2359a657..3b2795bd 100644 --- a/examples/canvas_materials_video.html +++ b/examples/canvas_materials_video.html @@ -128,16 +128,15 @@ var PI2 = Math.PI * 2; var material = new THREE.ParticleCanvasMaterial( { - color: 0x0808080, - program: function ( context, color ) { + color: 0x0808080, + program: function ( context ) { - context.fillStyle = color.__styleString; - context.beginPath(); - context.arc( 0, 0, 1, 0, PI2, true ); - context.closePath(); - context.fill(); + context.beginPath(); + context.arc( 0, 0, 1, 0, PI2, true ); + context.closePath(); + context.fill(); - } + } } ); diff --git a/examples/canvas_particles_floor.html b/examples/canvas_particles_floor.html index ed34b763..e4bfee2a 100644 --- a/examples/canvas_particles_floor.html +++ b/examples/canvas_particles_floor.html @@ -53,9 +53,8 @@ var material = new THREE.ParticleCanvasMaterial( { color: 0xffffff, - program: function ( context, color ) { + program: function ( context ) { - context.fillStyle = color.__styleString; context.beginPath(); context.arc( 0, 0, 1, 0, PI2, true ); context.closePath(); diff --git a/examples/canvas_particles_random.html b/examples/canvas_particles_random.html index 1e1825a9..bbd37de5 100644 --- a/examples/canvas_particles_random.html +++ b/examples/canvas_particles_random.html @@ -46,9 +46,8 @@ scene = new THREE.Scene(); var PI2 = Math.PI * 2; - var program = function ( context, color ) { + var program = function ( context ) { - context.fillStyle = color.__styleString; context.beginPath(); context.arc( 0, 0, 1, 0, PI2, true ); context.closePath(); diff --git a/examples/canvas_particles_waves.html b/examples/canvas_particles_waves.html index 09e0258a..0d0ceb6a 100644 --- a/examples/canvas_particles_waves.html +++ b/examples/canvas_particles_waves.html @@ -54,16 +54,15 @@ var PI2 = Math.PI * 2; var material = new THREE.ParticleCanvasMaterial( { - color: 0xffffff, - program: function ( context, color ) { + color: 0xffffff, + program: function ( context ) { - context.strokeStyle = color.__styleString; - context.beginPath(); - context.arc( 0, 0, 1, 0, PI2, true ); - context.closePath(); - context.stroke(); + context.beginPath(); + context.arc( 0, 0, 1, 0, PI2, true ); + context.closePath(); + context.stroke(); - } + } } ); diff --git a/examples/canvas_performance.html b/examples/canvas_performance.html index 3bf3b115..43375d7d 100644 --- a/examples/canvas_performance.html +++ b/examples/canvas_performance.html @@ -100,7 +100,7 @@ directionalLight.position.z = 0; scene.addLight( directionalLight ); - var pointLight = new THREE.PointLight( 0xff0000, 1 ); + var pointLight = new THREE.PointLight( 0xff0000, 1, 500 ); scene.addLight( pointLight ); renderer = new THREE.CanvasRenderer(); diff --git a/src/lights/DirectionalLight.js b/src/lights/DirectionalLight.js index 74633ed8..39e66200 100644 --- a/src/lights/DirectionalLight.js +++ b/src/lights/DirectionalLight.js @@ -2,12 +2,13 @@ * @author mr.doob / http://mrdoob.com/ */ -THREE.DirectionalLight = function ( hex, intensity ) { +THREE.DirectionalLight = function ( hex, intensity, distance ) { THREE.Light.call( this, hex ); this.position = new THREE.Vector3( 0, 1, 0 ); this.intensity = intensity || 1; + this.distance = distance || 0; }; diff --git a/src/lights/PointLight.js b/src/lights/PointLight.js index ab462866..b7b67062 100644 --- a/src/lights/PointLight.js +++ b/src/lights/PointLight.js @@ -2,12 +2,13 @@ * @author mr.doob / http://mrdoob.com/ */ -THREE.PointLight = function ( hex, intensity ) { +THREE.PointLight = function ( hex, intensity, distance ) { THREE.Light.call( this, hex ); this.position = new THREE.Vector3(); this.intensity = intensity || 1; + this.distance = distance || 0; }; diff --git a/src/renderers/CanvasRenderer.js b/src/renderers/CanvasRenderer.js index 520b2424..a3662d4c 100644 --- a/src/renderers/CanvasRenderer.js +++ b/src/renderers/CanvasRenderer.js @@ -358,12 +358,16 @@ THREE.CanvasRenderer = function () { } else if ( light instanceof THREE.DirectionalLight ) { + // for particles + _directionalLights.r += lightColor.r; _directionalLights.g += lightColor.g; _directionalLights.b += lightColor.b; } else if ( light instanceof THREE.PointLight ) { + // for particles + _pointLights.r += lightColor.r; _pointLights.g += lightColor.g; _pointLights.b += lightColor.b; @@ -376,41 +380,41 @@ THREE.CanvasRenderer = function () { function calculateLight( scene, position, normal, color ) { - var l, ll, light, lightColor, lightIntensity, + var l, ll, light, lightColor, amount, lights = scene.lights; for ( l = 0, ll = lights.length; l < ll; l ++ ) { light = lights[ l ]; lightColor = light.color; - lightIntensity = light.intensity; if ( light instanceof THREE.DirectionalLight ) { - amount = normal.dot( light.position ) * lightIntensity; + amount = normal.dot( light.position ); - if ( amount > 0 ) { + if ( amount <= 0 ) continue; - color.r += lightColor.r * amount; - color.g += lightColor.g * amount; - color.b += lightColor.b * amount; + amount *= light.intensity; - } + color.r += lightColor.r * amount; + color.g += lightColor.g * amount; + color.b += lightColor.b * amount; } else if ( light instanceof THREE.PointLight ) { - _vector3.sub( light.position, position ); - _vector3.normalize(); + amount = normal.dot( _vector3.sub( light.position, position ).normalize() ); - amount = normal.dot( _vector3 ) * lightIntensity; + if ( amount <= 0 ) continue; - if ( amount > 0 ) { + amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( light.position ) / light.distance, 1 ); - color.r += lightColor.r * amount; - color.g += lightColor.g * amount; - color.b += lightColor.b * amount; + if ( amount == 0 ) continue; - } + amount *= light.intensity; + + color.r += lightColor.r * amount; + color.g += lightColor.g * amount; + color.b += lightColor.b * amount; } @@ -475,24 +479,6 @@ THREE.CanvasRenderer = function () { } else if ( material instanceof THREE.ParticleCanvasMaterial ) { - if ( _enableLighting ) { - - _light.r = _ambientLight.r + _directionalLights.r + _pointLights.r; - _light.g = _ambientLight.g + _directionalLights.g + _pointLights.g; - _light.b = _ambientLight.b + _directionalLights.b + _pointLights.b; - - _color.r = material.color.r * _light.r; - _color.g = material.color.g * _light.g; - _color.b = material.color.b * _light.b; - - _color.updateStyleString(); - - } else { - - _color.__styleString = material.color.__styleString; - - } - width = element.scale.x * _canvasWidthHalf; height = element.scale.y * _canvasHeightHalf; @@ -504,12 +490,15 @@ THREE.CanvasRenderer = function () { } + setStrokeStyle( material.color.__styleString ); + setFillStyle( material.color.__styleString ); + _context.save(); _context.translate( v1.x, v1.y ); _context.rotate( - element.rotation ); _context.scale( width, height ); - material.program( _context, _color ); + material.program( _context ); _context.restore();