CanvasRenderer: Added distance(falloff) to PointLight. Removed illumination to ParticleCanvasMaterial.

mrdoob · mrdoob · commit 449a981925ed · 2011-03-29T03:50:04.000+01:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
 

Original file line number	Diff line number	Diff line change
`@@ -112,9 +112,8 @@`
`112`	`112`	`}`
`113`	`113`
`114`	`114`	`var PI2 = Math.PI * 2;`
`115`		`- var program = function ( context, color ) {`
	`115`	`+ var program = function ( context ) {`
`116`	`116`
`117`		`- context.fillStyle = color.__styleString;`
`118`	`117`	`context.beginPath();`
`119`	`118`	`context.arc( 0, 0, 1, 0, PI2, true );`
`120`	`119`	`context.closePath();`