Browse Source

CanvasRenderer: Clean up.

Mr.doob 8 years ago
parent
commit
578f62189f
2 changed files with 73 additions and 81 deletions
  1. 72 81
      examples/js/renderers/CanvasRenderer.js
  2. 1 0
      src/materials/SpriteMaterial.js

+ 72 - 81
examples/js/renderers/CanvasRenderer.js

@@ -9,7 +9,7 @@ THREE.SpriteCanvasMaterial = function ( parameters ) {
 	this.type = 'SpriteCanvasMaterial';
 	this.type = 'SpriteCanvasMaterial';
 
 
 	this.color = new THREE.Color( 0xffffff );
 	this.color = new THREE.Color( 0xffffff );
-	this.program = function ( context, color ) {};
+	this.program = function () {};
 
 
 	this.setValues( parameters );
 	this.setValues( parameters );
 
 
@@ -17,6 +17,7 @@ THREE.SpriteCanvasMaterial = function ( parameters ) {
 
 
 THREE.SpriteCanvasMaterial.prototype = Object.create( THREE.Material.prototype );
 THREE.SpriteCanvasMaterial.prototype = Object.create( THREE.Material.prototype );
 THREE.SpriteCanvasMaterial.prototype.constructor = THREE.SpriteCanvasMaterial;
 THREE.SpriteCanvasMaterial.prototype.constructor = THREE.SpriteCanvasMaterial;
+THREE.SpriteCanvasMaterial.prototype.isSpriteCanvasMaterial = true;
 
 
 THREE.SpriteCanvasMaterial.prototype.clone = function () {
 THREE.SpriteCanvasMaterial.prototype.clone = function () {
 
 
@@ -39,78 +40,69 @@ THREE.CanvasRenderer = function ( parameters ) {
 	parameters = parameters || {};
 	parameters = parameters || {};
 
 
 	var _this = this,
 	var _this = this,
-	_renderData, _elements, _lights,
-	_projector = new THREE.Projector(),
+		_renderData, _elements, _lights,
+		_projector = new THREE.Projector(),
 
 
-	_canvas = parameters.canvas !== undefined
-			 ? parameters.canvas
-			 : document.createElement( 'canvas' ),
+		_canvas = parameters.canvas !== undefined
+				 ? parameters.canvas
+				 : document.createElement( 'canvas' ),
 
 
-	_canvasWidth = _canvas.width,
-	_canvasHeight = _canvas.height,
-	_canvasWidthHalf = Math.floor( _canvasWidth / 2 ),
-	_canvasHeightHalf = Math.floor( _canvasHeight / 2 ),
+		_canvasWidth = _canvas.width,
+		_canvasHeight = _canvas.height,
+		_canvasWidthHalf = Math.floor( _canvasWidth / 2 ),
+		_canvasHeightHalf = Math.floor( _canvasHeight / 2 ),
 
 
-	_viewportX = 0,
-	_viewportY = 0,
-	_viewportWidth = _canvasWidth,
-	_viewportHeight = _canvasHeight,
+		_viewportX = 0,
+		_viewportY = 0,
+		_viewportWidth = _canvasWidth,
+		_viewportHeight = _canvasHeight,
 
 
-	_pixelRatio = 1,
+		_pixelRatio = 1,
 
 
-	_context = _canvas.getContext( '2d', {
-		alpha: parameters.alpha === true
-	} ),
+		_context = _canvas.getContext( '2d', {
+			alpha: parameters.alpha === true
+		} ),
 
 
-	_clearColor = new THREE.Color( 0x000000 ),
-	_clearAlpha = parameters.alpha === true ? 0 : 1,
+		_clearColor = new THREE.Color( 0x000000 ),
+		_clearAlpha = parameters.alpha === true ? 0 : 1,
 
 
-	_contextGlobalAlpha = 1,
-	_contextGlobalCompositeOperation = 0,
-	_contextStrokeStyle = null,
-	_contextFillStyle = null,
-	_contextLineWidth = null,
-	_contextLineCap = null,
-	_contextLineJoin = null,
-	_contextLineDash = [],
+		_contextGlobalAlpha = 1,
+		_contextGlobalCompositeOperation = 0,
+		_contextStrokeStyle = null,
+		_contextFillStyle = null,
+		_contextLineWidth = null,
+		_contextLineCap = null,
+		_contextLineJoin = null,
+		_contextLineDash = [],
 
 
-	_camera,
+		_v1, _v2, _v3,
 
 
-	_v1, _v2, _v3, _v4,
-	_v5 = new THREE.RenderableVertex(),
-	_v6 = new THREE.RenderableVertex(),
+		_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
 
 
-	_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
-	_v4x, _v4y, _v5x, _v5y, _v6x, _v6y,
+		_color = new THREE.Color(),
 
 
-	_color = new THREE.Color(),
-	_color1 = new THREE.Color(),
-	_color2 = new THREE.Color(),
-	_color3 = new THREE.Color(),
-	_color4 = new THREE.Color(),
+		_diffuseColor = new THREE.Color(),
+		_emissiveColor = new THREE.Color(),
 
 
-	_diffuseColor = new THREE.Color(),
-	_emissiveColor = new THREE.Color(),
+		_lightColor = new THREE.Color(),
 
 
-	_lightColor = new THREE.Color(),
+		_patterns = {},
 
 
-	_patterns = {},
+		_uvs,
+		_uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
 
 
-	_image, _uvs,
-	_uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
+		_clipBox = new THREE.Box2(),
+		_clearBox = new THREE.Box2(),
+		_elemBox = new THREE.Box2(),
 
 
-	_clipBox = new THREE.Box2(),
-	_clearBox = new THREE.Box2(),
-	_elemBox = new THREE.Box2(),
+		_ambientLight = new THREE.Color(),
+		_directionalLights = new THREE.Color(),
+		_pointLights = new THREE.Color(),
 
 
-	_ambientLight = new THREE.Color(),
-	_directionalLights = new THREE.Color(),
-	_pointLights = new THREE.Color(),
-
-	_vector3 = new THREE.Vector3(), // Needed for PointLight
-	_centroid = new THREE.Vector3(),
-	_normal = new THREE.Vector3(),
-	_normalViewMatrix = new THREE.Matrix3();
+		_vector3 = new THREE.Vector3(), // Needed for PointLight
+		_centroid = new THREE.Vector3(),
+		_normal = new THREE.Vector3(),
+		_normalViewMatrix = new THREE.Matrix3();
 
 
 	/* TODO
 	/* TODO
 	_canvas.mozImageSmoothingEnabled = false;
 	_canvas.mozImageSmoothingEnabled = false;
@@ -266,10 +258,10 @@ THREE.CanvasRenderer = function ( parameters ) {
 			_clearBox.intersect( _clipBox );
 			_clearBox.intersect( _clipBox );
 			_clearBox.expandByScalar( 2 );
 			_clearBox.expandByScalar( 2 );
 
 
-			_clearBox.min.x = _clearBox.min.x + _canvasWidthHalf;
-			_clearBox.min.y =  - _clearBox.min.y + _canvasHeightHalf;		// higher y value !
-			_clearBox.max.x = _clearBox.max.x + _canvasWidthHalf;
-			_clearBox.max.y =  - _clearBox.max.y + _canvasHeightHalf;		// lower y value !
+			_clearBox.min.x =   _clearBox.min.x + _canvasWidthHalf;
+			_clearBox.min.y = - _clearBox.min.y + _canvasHeightHalf;		// higher y value !
+			_clearBox.max.x =   _clearBox.max.x + _canvasWidthHalf;
+			_clearBox.max.y = - _clearBox.max.y + _canvasHeightHalf;		// lower y value !
 
 
 			if ( _clearAlpha < 1 ) {
 			if ( _clearAlpha < 1 ) {
 
 
@@ -312,7 +304,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 
 	this.render = function ( scene, camera ) {
 	this.render = function ( scene, camera ) {
 
 
-		if ( camera instanceof THREE.Camera === false ) {
+		if ( camera.isCamera === undefined ) {
 
 
 			console.error( 'THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.' );
 			console.error( 'THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.' );
 			return;
 			return;
@@ -341,7 +333,6 @@ THREE.CanvasRenderer = function ( parameters ) {
 		_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
 		_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
 		_elements = _renderData.elements;
 		_elements = _renderData.elements;
 		_lights = _renderData.lights;
 		_lights = _renderData.lights;
-		_camera = camera;
 
 
 		_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
 		_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
 
 
@@ -454,17 +445,17 @@ THREE.CanvasRenderer = function ( parameters ) {
 			var light = _lights[ l ];
 			var light = _lights[ l ];
 			var lightColor = light.color;
 			var lightColor = light.color;
 
 
-			if ( light instanceof THREE.AmbientLight ) {
+			if ( light.isAmbientLight ) {
 
 
 				_ambientLight.add( lightColor );
 				_ambientLight.add( lightColor );
 
 
-			} else if ( light instanceof THREE.DirectionalLight ) {
+			} else if ( light.isDirectionalLight ) {
 
 
 				// for sprites
 				// for sprites
 
 
 				_directionalLights.add( lightColor );
 				_directionalLights.add( lightColor );
 
 
-			} else if ( light instanceof THREE.PointLight ) {
+			} else if ( light.isPointLight ) {
 
 
 				// for sprites
 				// for sprites
 
 
@@ -484,7 +475,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 
 			_lightColor.copy( light.color );
 			_lightColor.copy( light.color );
 
 
-			if ( light instanceof THREE.DirectionalLight ) {
+			if ( light.isDirectionalLight ) {
 
 
 				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
 				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
 
 
@@ -496,7 +487,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 
 				color.add( _lightColor.multiplyScalar( amount ) );
 				color.add( _lightColor.multiplyScalar( amount ) );
 
 
-			} else if ( light instanceof THREE.PointLight ) {
+			} else if ( light.isPointLight ) {
 
 
 				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
 				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
 
 
@@ -530,7 +521,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 		_elemBox.min.set( v1.x - dist, v1.y - dist );
 		_elemBox.min.set( v1.x - dist, v1.y - dist );
 		_elemBox.max.set( v1.x + dist, v1.y + dist );
 		_elemBox.max.set( v1.x + dist, v1.y + dist );
 
 
-		if ( material instanceof THREE.SpriteMaterial ) {
+		if ( material.isSpriteMaterial ) {
 
 
 			var texture = material.map;
 			var texture = material.map;
 
 
@@ -586,7 +577,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 
 			}
 			}
 
 
-		} else if ( material instanceof THREE.SpriteCanvasMaterial ) {
+		} else if ( material.isSpriteCanvasMaterial ) {
 
 
 			setStrokeStyle( material.color.getStyle() );
 			setStrokeStyle( material.color.getStyle() );
 			setFillStyle( material.color.getStyle() );
 			setFillStyle( material.color.getStyle() );
@@ -623,7 +614,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 		_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
 		_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
 		_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
 		_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
 
 
-		if ( material instanceof THREE.LineBasicMaterial ) {
+		if ( material.isLineBasicMaterial ) {
 
 
 			setLineWidth( material.linewidth );
 			setLineWidth( material.linewidth );
 			setLineCap( material.linecap );
 			setLineCap( material.linecap );
@@ -670,7 +661,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 			_context.stroke();
 			_context.stroke();
 			_elemBox.expandByScalar( material.linewidth * 2 );
 			_elemBox.expandByScalar( material.linewidth * 2 );
 
 
-		} else if ( material instanceof THREE.LineDashedMaterial ) {
+		} else if ( material.isLineDashedMaterial ) {
 
 
 			setLineWidth( material.linewidth );
 			setLineWidth( material.linewidth );
 			setLineCap( material.linecap );
 			setLineCap( material.linecap );
@@ -702,7 +693,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 
 		drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y );
 		drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y );
 
 
-		if ( ( material instanceof THREE.MeshLambertMaterial || material instanceof THREE.MeshPhongMaterial ) && material.map === null ) {
+		if ( ( material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) && material.map === null ) {
 
 
 			_diffuseColor.copy( material.color );
 			_diffuseColor.copy( material.color );
 			_emissiveColor.copy( material.emissive );
 			_emissiveColor.copy( material.emissive );
@@ -725,9 +716,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 				 : fillPath( _color );
 				 : fillPath( _color );
 
 
-		} else if ( material instanceof THREE.MeshBasicMaterial ||
-				    material instanceof THREE.MeshLambertMaterial ||
-				    material instanceof THREE.MeshPhongMaterial ) {
+		} else if ( material.isMeshBasicMaterial || material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) {
 
 
 			if ( material.map !== null ) {
 			if ( material.map !== null ) {
 
 
@@ -776,7 +765,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 
 			}
 			}
 
 
-		} else if ( material instanceof THREE.MeshNormalMaterial ) {
+		} else if ( material.isMeshNormalMaterial ) {
 
 
 			_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );
 			_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );
 
 
@@ -944,10 +933,10 @@ THREE.CanvasRenderer = function ( parameters ) {
 		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 
 
 		var a, b, c, d, e, f, det, idet,
 		var a, b, c, d, e, f, det, idet,
-		offsetX = texture.offset.x / texture.repeat.x,
-		offsetY = texture.offset.y / texture.repeat.y,
-		width = texture.image.width * texture.repeat.x,
-		height = texture.image.height * texture.repeat.y;
+			offsetX = texture.offset.x / texture.repeat.x,
+			offsetY = texture.offset.y / texture.repeat.y,
+			width = texture.image.width * texture.repeat.x,
+			height = texture.image.height * texture.repeat.y;
 
 
 		u0 = ( u0 + offsetX ) * width;
 		u0 = ( u0 + offsetX ) * width;
 		v0 = ( v0 + offsetY ) * height;
 		v0 = ( v0 + offsetY ) * height;
@@ -985,6 +974,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 
 	}
 	}
 
 
+	/*
 	function clipImage( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, image ) {
 	function clipImage( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, image ) {
 
 
 		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
@@ -1022,13 +1012,14 @@ THREE.CanvasRenderer = function ( parameters ) {
 		_context.restore();
 		_context.restore();
 
 
 	}
 	}
+	*/
 
 
 	// Hide anti-alias gaps
 	// Hide anti-alias gaps
 
 
 	function expand( v1, v2, pixels ) {
 	function expand( v1, v2, pixels ) {
 
 
 		var x = v2.x - v1.x, y = v2.y - v1.y,
 		var x = v2.x - v1.x, y = v2.y - v1.y,
-		det = x * x + y * y, idet;
+			det = x * x + y * y, idet;
 
 
 		if ( det === 0 ) return;
 		if ( det === 0 ) return;
 
 

+ 1 - 0
src/materials/SpriteMaterial.js

@@ -34,6 +34,7 @@ function SpriteMaterial( parameters ) {
 
 
 SpriteMaterial.prototype = Object.create( Material.prototype );
 SpriteMaterial.prototype = Object.create( Material.prototype );
 SpriteMaterial.prototype.constructor = SpriteMaterial;
 SpriteMaterial.prototype.constructor = SpriteMaterial;
+SpriteMaterial.prototype.isSpriteMaterial = true;
 
 
 SpriteMaterial.prototype.copy = function ( source ) {
 SpriteMaterial.prototype.copy = function ( source ) {