Skip to content

Commit

Permalink
CanvasRenderer: Added distance(falloff) to PointLight. Removed illumi…
Browse files Browse the repository at this point in the history 
…nation to ParticleCanvasMaterial.
  • Loading branch information
@mrdoob
mrdoob committed Mar 29, 2011
1 parent 377d190 commit 449a981
Show file tree
Hide file tree
Showing 14 changed files with 69 additions and 88 deletions.
3 changes: 1 addition & 2 deletions examples/canvas_interactive_cubes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
9 changes: 4 additions & 5 deletions examples/canvas_lights_pointlights.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
9 changes: 4 additions & 5 deletions examples/canvas_lights_pointlights_smooth.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
15 changes: 7 additions & 8 deletions examples/canvas_lines.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

}
}

} );

Expand Down
15 changes: 7 additions & 8 deletions examples/canvas_lines_sphere.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

}
}

} );

Expand Down
3 changes: 1 addition & 2 deletions examples/canvas_materials.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
15 changes: 7 additions & 8 deletions examples/canvas_materials_video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

}
}

} );

Expand Down
3 changes: 1 addition & 2 deletions examples/canvas_particles_floor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
3 changes: 1 addition & 2 deletions examples/canvas_particles_random.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
15 changes: 7 additions & 8 deletions examples/canvas_particles_waves.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

}
}

} );

Expand Down
2 changes: 1 addition & 1 deletion examples/canvas_performance.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
3 changes: 2 additions & 1 deletion src/lights/DirectionalLight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

};

Expand Down
3 changes: 2 additions & 1 deletion src/lights/PointLight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

};

Expand Down
59 changes: 24 additions & 35 deletions src/renderers/CanvasRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;

}

Expand Down Expand Up @@ -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;

Expand All @@ -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();

Expand Down

0 comments on commit 449a981

Please sign in to comment.