Skip to content

Commit 286a65b

Browse files
mrdoobmrdoob
committed
Made CanvasRenderer and SVGRenderer behave like WebGLRenderer with MeshLambertMaterial and no lights.
1 parent f2da423 commit 286a65b

2 files changed

Lines changed: 57 additions & 121 deletions

File tree

‎examples/js/renderers/SVGRenderer.js‎

Lines changed: 14 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ THREE.SVGRenderer = function () {
1717
_clipBox = new THREE.Box2(),
1818
_elemBox = new THREE.Box2(),
1919

20-
_enableLighting = false,
2120
_color = new THREE.Color(),
2221
_diffuseColor = new THREE.Color(),
2322
_emissiveColor = new THREE.Color(),
@@ -111,13 +110,7 @@ THREE.SVGRenderer = function () {
111110

112111
_pathCount = 0; _circleCount = 0; _lineCount = 0;
113112

114-
_enableLighting = _lights.length > 0;
115-
116-
if ( _enableLighting ) {
117-
118-
calculateLights( _lights );
119-
120-
}
113+
calculateLights( _lights );
121114

122115
for ( e = 0, el = _elements.length; e < el; e ++ ) {
123116

@@ -283,23 +276,15 @@ THREE.SVGRenderer = function () {
283276
284277
if ( material instanceof THREE.ParticleCircleMaterial ) {
285278
286-
if ( _enableLighting ) {
287-
288-
_color.r = _ambientLight.r + _directionalLights.r + _pointLights.r;
289-
_color.g = _ambientLight.g + _directionalLights.g + _pointLights.g;
290-
_color.b = _ambientLight.b + _directionalLights.b + _pointLights.b;
279+
_color.r = _ambientLight.r + _directionalLights.r + _pointLights.r;
280+
_color.g = _ambientLight.g + _directionalLights.g + _pointLights.g;
281+
_color.b = _ambientLight.b + _directionalLights.b + _pointLights.b;
291282
292-
_color.r = material.color.r * _color.r;
293-
_color.g = material.color.g * _color.g;
294-
_color.b = material.color.b * _color.b;
283+
_color.r = material.color.r * _color.r;
284+
_color.g = material.color.g * _color.g;
285+
_color.b = material.color.b * _color.b;
295286
296-
_color.updateStyleString();
297-
298-
} else {
299-
300-
_color = material.color;
301-
302-
}
287+
_color.updateStyleString();
303288
304289
_svgNode.setAttribute( 'style', 'fill: ' + _color.__styleString );
305290
@@ -358,19 +343,11 @@ THREE.SVGRenderer = function () {
358343

359344
}
360345

361-
if ( _enableLighting ) {
362-
363-
_color.copy( _ambientLight );
346+
_color.copy( _ambientLight );
364347

365-
calculateLight( _lights, element.centroidModel, element.normalModel, _color );
348+
calculateLight( _lights, element.centroidModel, element.normalModel, _color );
366349

367-
_color.multiply( _diffuseColor ).add( _emissiveColor );
368-
369-
} else {
370-
371-
_color.copy( _diffuseColor );
372-
373-
}
350+
_color.multiply( _diffuseColor ).add( _emissiveColor );
374351

375352
} else if ( material instanceof THREE.MeshDepthMaterial ) {
376353

@@ -428,19 +405,11 @@ THREE.SVGRenderer = function () {
428405

429406
}
430407

431-
if ( _enableLighting ) {
432-
433-
_color.copy( _ambientLight );
408+
_color.copy( _ambientLight );
434409

435-
calculateLight( _lights, element.centroidModel, element.normalModel, _color );
410+
calculateLight( _lights, element.centroidModel, element.normalModel, _color );
436411

437-
_color.multiply( _diffuseColor ).add( _emissiveColor );
438-
439-
} else {
440-
441-
_color.copy( _diffuseColor );
442-
443-
}
412+
_color.multiply( _diffuseColor ).add( _emissiveColor );
444413

445414
} else if ( material instanceof THREE.MeshDepthMaterial ) {
446415

‎src/renderers/CanvasRenderer.js‎

Lines changed: 43 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ THREE.CanvasRenderer = function ( parameters ) {
6363
_clearBox = new THREE.Box2(),
6464
_elemBox = new THREE.Box2(),
6565

66-
_enableLighting = false,
6766
_ambientLight = new THREE.Color(),
6867
_directionalLights = new THREE.Color(),
6968
_pointLights = new THREE.Color(),
@@ -276,13 +275,7 @@ THREE.CanvasRenderer = function ( parameters ) {
276275
_context.fillRect( _clipBox.min.x, _clipBox.min.y, _clipBox.max.x - _clipBox.min.x, _clipBox.max.y - _clipBox.min.y );
277276
*/
278277

279-
_enableLighting = _lights.length > 0;
280-
281-
if ( _enableLighting === true ) {
282-
283-
calculateLights();
284-
285-
}
278+
calculateLights();
286279

287280
for ( var e = 0, el = _elements.length; e < el; e++ ) {
288281

@@ -641,46 +634,36 @@ THREE.CanvasRenderer = function ( parameters ) {
641634

642635
}
643636

644-
if ( _enableLighting === true ) {
645-
646-
if ( material.wireframe === false && material.shading == THREE.SmoothShading && element.vertexNormalsLength == 3 ) {
647-
648-
_color1.copy( _ambientLight );
649-
_color2.copy( _ambientLight );
650-
_color3.copy( _ambientLight );
651-
652-
calculateLight( element.v1.positionWorld, element.vertexNormalsModel[ 0 ], _color1 );
653-
calculateLight( element.v2.positionWorld, element.vertexNormalsModel[ 1 ], _color2 );
654-
calculateLight( element.v3.positionWorld, element.vertexNormalsModel[ 2 ], _color3 );
655-
656-
_color1.multiply( _diffuseColor ).add( _emissiveColor );
657-
_color2.multiply( _diffuseColor ).add( _emissiveColor );
658-
_color3.multiply( _diffuseColor ).add( _emissiveColor );
659-
_color4.addColors( _color2, _color3 ).multiplyScalar( 0.5 );
637+
if ( material.wireframe === false && material.shading == THREE.SmoothShading && element.vertexNormalsLength == 3 ) {
660638

661-
_image = getGradientTexture( _color1, _color2, _color3, _color4 );
639+
_color1.copy( _ambientLight );
640+
_color2.copy( _ambientLight );
641+
_color3.copy( _ambientLight );
662642

663-
clipImage( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, 0, 0, 1, 0, 0, 1, _image );
643+
calculateLight( element.v1.positionWorld, element.vertexNormalsModel[ 0 ], _color1 );
644+
calculateLight( element.v2.positionWorld, element.vertexNormalsModel[ 1 ], _color2 );
645+
calculateLight( element.v3.positionWorld, element.vertexNormalsModel[ 2 ], _color3 );
664646

665-
} else {
647+
_color1.multiply( _diffuseColor ).add( _emissiveColor );
648+
_color2.multiply( _diffuseColor ).add( _emissiveColor );
649+
_color3.multiply( _diffuseColor ).add( _emissiveColor );
650+
_color4.addColors( _color2, _color3 ).multiplyScalar( 0.5 );
666651

667-
_color.copy( _ambientLight );
652+
_image = getGradientTexture( _color1, _color2, _color3, _color4 );
668653

669-
calculateLight( element.centroidModel, element.normalModel, _color );
654+
clipImage( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, 0, 0, 1, 0, 0, 1, _image );
670655

671-
_color.multiply( _diffuseColor ).add( _emissiveColor );
656+
} else {
672657

673-
material.wireframe === true
674-
? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
675-
: fillPath( _color );
658+
_color.copy( _ambientLight );
676659

677-
}
660+
calculateLight( element.centroidModel, element.normalModel, _color );
678661

679-
} else {
662+
_color.multiply( _diffuseColor ).add( _emissiveColor );
680663

681664
material.wireframe === true
682-
? strokePath( material.color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
683-
: fillPath( material.color );
665+
? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
666+
: fillPath( _color );
684667

685668
}
686669

@@ -825,54 +808,40 @@ THREE.CanvasRenderer = function ( parameters ) {
825808

826809
}
827810

828-
if ( _enableLighting === true ) {
811+
if ( material.wireframe === false && material.shading == THREE.SmoothShading && element.vertexNormalsLength == 4 ) {
829812

830-
if ( material.wireframe === false && material.shading == THREE.SmoothShading && element.vertexNormalsLength == 4 ) {
813+
_color1.copy( _ambientLight );
814+
_color2.copy( _ambientLight );
815+
_color3.copy( _ambientLight );
816+
_color4.copy( _ambientLight );
831817

832-
_color1.copy( _ambientLight );
833-
_color2.copy( _ambientLight );
834-
_color3.copy( _ambientLight );
835-
_color4.copy( _ambientLight );
818+
calculateLight( element.v1.positionWorld, element.vertexNormalsModel[ 0 ], _color1 );
819+
calculateLight( element.v2.positionWorld, element.vertexNormalsModel[ 1 ], _color2 );
820+
calculateLight( element.v4.positionWorld, element.vertexNormalsModel[ 3 ], _color3 );
821+
calculateLight( element.v3.positionWorld, element.vertexNormalsModel[ 2 ], _color4 );
836822

837-
calculateLight( element.v1.positionWorld, element.vertexNormalsModel[ 0 ], _color1 );
838-
calculateLight( element.v2.positionWorld, element.vertexNormalsModel[ 1 ], _color2 );
839-
calculateLight( element.v4.positionWorld, element.vertexNormalsModel[ 3 ], _color3 );
840-
calculateLight( element.v3.positionWorld, element.vertexNormalsModel[ 2 ], _color4 );
823+
_color1.multiply( _diffuseColor ).add( _emissiveColor );
824+
_color2.multiply( _diffuseColor ).add( _emissiveColor );
825+
_color3.multiply( _diffuseColor ).add( _emissiveColor );
826+
_color4.multiply( _diffuseColor ).add( _emissiveColor );
841827

842-
_color1.multiply( _diffuseColor ).add( _emissiveColor );
843-
_color2.multiply( _diffuseColor ).add( _emissiveColor );
844-
_color3.multiply( _diffuseColor ).add( _emissiveColor );
845-
_color4.multiply( _diffuseColor ).add( _emissiveColor );
846-
847-
_image = getGradientTexture( _color1, _color2, _color3, _color4 );
848-
849-
// TODO: UVs are incorrect, v4->v3?
850-
851-
drawTriangle( _v1x, _v1y, _v2x, _v2y, _v4x, _v4y );
852-
clipImage( _v1x, _v1y, _v2x, _v2y, _v4x, _v4y, 0, 0, 1, 0, 0, 1, _image );
853-
854-
drawTriangle( _v5x, _v5y, _v3x, _v3y, _v6x, _v6y );
855-
clipImage( _v5x, _v5y, _v3x, _v3y, _v6x, _v6y, 1, 0, 1, 1, 0, 1, _image );
856-
857-
} else {
858-
859-
_color.copy( _ambientLight );
828+
_image = getGradientTexture( _color1, _color2, _color3, _color4 );
860829

861-
calculateLight( element.centroidModel, element.normalModel, _color );
830+
// TODO: UVs are incorrect, v4->v3?
862831

863-
_color.multiply( _diffuseColor ).add( _emissiveColor );
832+
drawTriangle( _v1x, _v1y, _v2x, _v2y, _v4x, _v4y );
833+
clipImage( _v1x, _v1y, _v2x, _v2y, _v4x, _v4y, 0, 0, 1, 0, 0, 1, _image );
864834

865-
drawQuad( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _v4x, _v4y );
835+
drawTriangle( _v5x, _v5y, _v3x, _v3y, _v6x, _v6y );
836+
clipImage( _v5x, _v5y, _v3x, _v3y, _v6x, _v6y, 1, 0, 1, 1, 0, 1, _image );
866837

867-
material.wireframe === true
868-
? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
869-
: fillPath( _color );
838+
} else {
870839

871-
}
840+
_color.copy( _ambientLight );
872841

873-
} else {
842+
calculateLight( element.centroidModel, element.normalModel, _color );
874843

875-
_color.addColors( _diffuseColor, _emissiveColor );
844+
_color.multiply( _diffuseColor ).add( _emissiveColor );
876845

877846
drawQuad( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _v4x, _v4y );
878847

@@ -937,8 +906,6 @@ THREE.CanvasRenderer = function ( parameters ) {
937906

938907
}
939908

940-
941-
942909
} else if ( material instanceof THREE.MeshDepthMaterial ) {
943910

944911
_near = camera.near;

0 commit comments

Comments
 (0)