SVGRenderer Particle support. CanvasRenderer context.setTransform(). Minor tweaks

README.md

@@ -67,6 +67,12 @@ This code creates a camera, then creates a scene object, adds a bunch of random
 	
 ### Change Log ###
 
+2010 04 26 - **r4** (16.274 kb)
+
+* SVGRenderer Particle rendering
+* CanvasRenderer uses context.setTransform to avoid extra calculations
+
+
 2010 04 24 - **r3** (16.392 kb)
 
 * Fixed incorrect rotation matrix transforms

examples/geometry/cube.html

@@ -105,6 +105,7 @@
 				
 				document.addEventListener('mousemove', onDocumentMouseMove, false);
 				document.addEventListener('mouseup', onDocumentMouseUp, false);
+				document.addEventListener('mouseout', onDocumentMouseOut, false);
 				
 				mouseXOnMouseDown = event.clientX - windowHalfX;
 				targetRotationOnMouseDown = targetRotation;
@@ -120,7 +121,15 @@
 			function onDocumentMouseUp( event )
 			{
 				document.removeEventListener('mousemove', onDocumentMouseMove, false);
-				document.removeEventListener('mouseup', onDocumentMouseUp, false);				
+				document.removeEventListener('mouseup', onDocumentMouseUp, false);
+				document.removeEventListener('mouseout', onDocumentMouseOut, false);
+			}
+			
+			function onDocumentMouseOut( event )
+			{
+				document.removeEventListener('mousemove', onDocumentMouseMove, false);
+				document.removeEventListener('mouseup', onDocumentMouseUp, false);
+				document.removeEventListener('mouseout', onDocumentMouseOut, false);
 			}
 			
 			function onDocumentTouchStart( event )

src/renderers/CanvasRenderer.js

@@ -18,6 +18,8 @@ var CanvasRenderer = Renderer.extend
 
 		this.viewport.width = this.width;
 		this.viewport.height = this.height;
+		
+		this.context.setTransform(1, 0, 0, 1, this.widthHalf, this.heightHalf);
 	},
 
 	render: function( scene, camera )
@@ -26,7 +28,7 @@ var CanvasRenderer = Renderer.extend
 
 		var element , pi2 = Math.PI * 2;
 
-		this.context.clearRect (0, 0, this.width, this.height);
+		this.context.clearRect (-this.widthHalf, -this.heightHalf, this.width, this.height);
 		
 		for (j = 0; j < this.renderList.length; j++)
 		{
@@ -44,26 +46,26 @@ var CanvasRenderer = Renderer.extend
 			if (element instanceof Face3)
 			{
 				this.context.beginPath();
-				this.context.moveTo(element.a.screen.x + this.widthHalf, element.a.screen.y + this.heightHalf);
-				this.context.lineTo(element.b.screen.x + this.widthHalf, element.b.screen.y + this.heightHalf);
-				this.context.lineTo(element.c.screen.x + this.widthHalf, element.c.screen.y + this.heightHalf);
+				this.context.moveTo(element.a.screen.x, element.a.screen.y);
+				this.context.lineTo(element.b.screen.x, element.b.screen.y);
+				this.context.lineTo(element.c.screen.x, element.c.screen.y);
 				this.context.fill();
 				this.context.closePath();
 			}
 			else if (element instanceof Face4)
 			{
 				this.context.beginPath();
-				this.context.moveTo(element.a.screen.x + this.widthHalf, element.a.screen.y + this.heightHalf);
-				this.context.lineTo(element.b.screen.x + this.widthHalf, element.b.screen.y + this.heightHalf);
-				this.context.lineTo(element.c.screen.x + this.widthHalf, element.c.screen.y + this.heightHalf);
-				this.context.lineTo(element.d.screen.x + this.widthHalf, element.d.screen.y + this.heightHalf);
+				this.context.moveTo(element.a.screen.x, element.a.screen.y);
+				this.context.lineTo(element.b.screen.x, element.b.screen.y);
+				this.context.lineTo(element.c.screen.x, element.c.screen.y);
+				this.context.lineTo(element.d.screen.x, element.d.screen.y);
 				this.context.fill();
 				this.context.closePath();
 			}
 			else if (element instanceof Particle)
 			{
 				this.context.beginPath();
-				this.context.arc(element.screen.x + this.widthHalf, element.screen.y + this.heightHalf, element.size * element.screen.z, 0, pi2, true);
+				this.context.arc(element.screen.x, element.screen.y, element.size * element.screen.z, 0, pi2, true);
 				this.context.fill();
 				this.context.closePath();				
 			}

src/renderers/SVGRenderer.js

@@ -1,10 +1,7 @@
 var SVGRenderer = Renderer.extend
 ({
-	defs: null,
-
-	svgImagePool: null,
-	svgPatternPool: null,
 	svgPathPool: null,
+	svgCirclePool: null,
 
 	init: function()
 	{
@@ -14,23 +11,7 @@ var SVGRenderer = Renderer.extend
 		this.viewport.style.position = "absolute";
 
 		this.svgPathPool = new Array();
-		this.svgImagePool = new Array();
-
-		this.defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-
-		var texture = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
-		texture.setAttribute('id', 'texture');
-		texture.setAttribute('patternUnits', 'userSpaceOnUse');
-		texture.setAttribute('width', 552);
-		texture.setAttribute('height', 552);
-
-		var bitmap = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-		bitmap.setAttribute('width', 552);
-		bitmap.setAttribute('height', 552);
-		bitmap.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'assets/uvmap.jpg');
-		texture.appendChild(bitmap);
-
-		this.svgImagePool.push(texture);
+		this.svgCirclePool = new Array();
 	},
 
 	setSize: function( width, height )
@@ -49,33 +30,65 @@ var SVGRenderer = Renderer.extend
 			this.viewport.removeChild(this.viewport.childNodes[0]);
 		}
 		
-		this.viewport.appendChild(this.defs);
-		this.defs.appendChild(this.svgImagePool[0]);
+		var pathCount = 0, circleCount = 0, svgNode;
 		
 		for (j = 0; j < this.renderList.length; j++)
 		{
 			element = this.renderList[j];
 
-			if (this.svgPathPool[j] == null)
+			if (element instanceof Face3)
 			{
-				this.svgPathPool[j] = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-				this.svgPathPool[j].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
+				svgNode = this.getPathNode(pathCount++);
+				svgNode.setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + 'z');					
+			}
+			else if (element instanceof Face4)
+			{
+				svgNode = this.getPathNode(pathCount++);
+				svgNode.setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + ' L ' + element.d.screen.x + ',' + element.d.screen.y + 'z');
+			}
+			else if (element instanceof Particle)
+			{
+				svgNode = this.getCircleNode(circleCount++);
+				svgNode.setAttribute('cx', element.screen.x);
+				svgNode.setAttribute('cy', element.screen.y);
+				svgNode.setAttribute('r', element.size * element.screen.z);
 			}
 
-			// this.svgPathPool[j].setAttribute('style', 'fill:url(#texture)');
-
-			this.svgPathPool[j].setAttribute('style', 'fill: rgb(' + element.color[0] + ', ' + element.color[1] + ', ' + element.color[2] + ')'); //fill-opacity:' + 0.5); // + ';stroke:' + element.color + ';stroke-width:10;stroke-opacity:0.5;'); //stroke-miterlimit:40;stroke-dasharray:5');
-
-			if (element instanceof Face3)
+			if (element.material instanceof ColorMaterial)
 			{
-				this.svgPathPool[j].setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + 'z');					
+				svgNode.setAttribute('style', 'fill: rgb(' + element.material.color.r + ',' + element.material.color.g + ',' + element.material.color.b + ')');
 			}
-			else if (element instanceof Face4)
+			else if (element.material instanceof FaceColorMaterial)
 			{
-				this.svgPathPool[j].setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + ' L ' + element.d.screen.x + ',' + element.d.screen.y + 'z');
+				svgNode.setAttribute('style', 'fill: rgb(' + element.color.r + ',' + element.color.g + ',' + element.color.b + ')');
 			}
 
-			this.viewport.appendChild(this.svgPathPool[j]);
+			this.viewport.appendChild(svgNode);
 		}
+	},
+	
+	getPathNode: function( id )
+	{
+		if (this.svgPathPool[id] == null)
+		{
+			this.svgPathPool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+			// this.svgPathPool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
+			return this.svgPathPool[id];
+		}
+		
+		return this.svgPathPool[id];
+	},
+	
+	getCircleNode: function( id )
+	{
+		if (this.svgCirclePool[id] == null)
+		{
+			this.svgCirclePool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+			// this.svgCirclePool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
+			this.svgCirclePool[id].setAttribute('fill', 'red');
+			return this.svgCirclePool[id];
+		}
+		
+		return this.svgCirclePool[id];
 	}
 });