Better handling of Color

271ad498 · Mr.doob · 30672c1f · 271ad498 · 271ad498 · 271ad498
10 changed file
--- a/README.md
+++ b/README.md
@@ -25,10 +25,10 @@
 		for (var i = 0; i < 1000; i++)
 		{
 			var particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
-			particle.size = Math.random() * 10 + 5;
 			particle.position.x = Math.random() * 2000 - 1000;
 			particle.position.y = Math.random() * 2000 - 1000;
 			particle.position.z = Math.random() * 2000 - 1000;
+			particle.size = Math.random() * 10 + 5;
 			particle.updateMatrix();
 			scene.add( particle );
 		}

--- a/build/three.js
+++ b/build/three.js
--- a/examples/particles/floor.html
+++ b/examples/particles/floor.html
@@ -18,6 +18,7 @@
 		</style>
 	</head>
 	<body>
+	
 		<script type="text/javascript" src="http://github.com/mrdoob/three.js/raw/master/build/three.js"></script>
 		<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>

@@ -30,8 +31,8 @@
 			var AMOUNTX = 50;
 			var AMOUNTY = 50;

-			var stats;
 			var container;
+			var stats;

 			var particle;

@@ -55,7 +56,7 @@
 			function init()
 			{
 				container = document.createElement('div');
-				document.body.appendChild(container);				
+				document.body.appendChild(container);
 			
 				camera = new Camera(0, 0, 1000);
 				camera.focus = 200;

--- a/src/core/Color.js
+++ b/src/core/Color.js
+var Color = Class.extend
+({
+	r: null, g: null, b: null, a: null,
+	hex: null,
+	
+	styleString: null,
+	
+	
+	init: function( hex )
+	{
+		this.setHex( hex ? hex : 0xff000000 );
+	},
+	
+	setHex: function( hex )
+	{
+		this.hex = hex;
+		this.updateRGBA();
+		this.updateStyleString();
+	},
+	
+	setRGBA: function( r, g, b, a )
+	{
+		this.r = r;
+		this.g = g;
+		this.b = b;
+		this.a = a;
+		
+		this.updateHex();
+		this.updateStyleString();
+	},
+	
+	updateHex: function()
+	{
+		this.hex = this.a << 24 | this.r << 16 | this.g << 8 | this.b;
+	},
+	
+	updateRGBA: function()
+	{
+		this.r = this.hex >> 16 & 0xff;
+		this.g = this.hex >> 8 & 0xff;
+		this.b = this.hex & 0xff;
+		this.a = this.hex >> 24 & 0xff;		
+	},
+	
+	updateStyleString: function()
+	{
+		this.styleString = 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + (this.a / 255) + ')';		
+	},
+	
+	toString: function()
+	{
+		return 'Color ( r: ' + this.r + ', g: ' + this.g + ', b: ' + this.b + ', a: ' + this.a + ', hex: ' + this.hex + ', style: ' + this.styleString + ' )';	
+	}
+	
+});
--- a/src/core/Face3.js
+++ b/src/core/Face3.js
@@ -5,7 +5,6 @@ var Face3 = Vector3.extend
 	uv: null,
 	normal: null,
 	color: null,
-	colorString: null,

 	init: function(a, b, c, uv, normal, color)
 	{
@@ -20,12 +19,11 @@ var Face3 = Vector3.extend
 		this.uv = uv ? uv : [ [0, 0], [0, 0], [0, 0] ];
 		this.normal = normal ? normal : new Vector3();

-		this.color = color ? color : [0, 0, 0];
-		this.colorString = 'rgb(' + this.color[0] + ', ' + this.color[1] + ', ' + this.color[2] + ')';
+		this.color = color ? color : new Color();
 	},

 	toString: function()
 	{
-		return 'Face ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
+		return 'Face3 ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
 	}
 });
--- a/src/core/Face4.js
+++ b/src/core/Face4.js
@@ -4,7 +4,6 @@ var Face4 = Vector3.extend
 	normal: null,
 	screen: null,
 	color: null,
-	colorString: null,

 	init: function(a, b, c, d, uv, normal, color)
 	{
@@ -17,12 +16,11 @@ var Face4 = Vector3.extend
 		
 		this.screen = new Vector3();

-		this.color = color ? color : [0, 0, 0];
-		this.colorString = 'rgb(' + this.color[0] + ', ' + this.color[1] + ', ' + this.color[2] + ')';		
+		this.color = color ? color : new Color();
 	},

 	toString: function()
 	{
-		return 'Face ( ' + this.a + ', ' + this.b + ', ' + this.c + ' )';
+		return 'Face4 ( ' + this.a + ', ' + this.b + ', ' + this.c + ', ' + this.d + ' )';
 	}
 });
--- a/src/materials/ColorMaterial.js
+++ b/src/materials/ColorMaterial.js
 var ColorMaterial = Class.extend
 ({
-	color: null,
-	opacity: null,
-	
-	colorString: null,	
+	color: null,

-	// Uses hex instead of rgb is for keeping the syntax similar to .as version
-	
-	init: function( color, opacity )
-	{
-		this.setColor( color ? color : 0xff0000 );
-		this.setOpacity( opacity ? opacity : 1 );
-	},
-	
-	setColor: function( color )
+	init: function( hex, opacity )
 	{
-		this.color = color;
-		this.updateColorString();
-	},
-	
-	setOpacity: function( opacity )
-	{
-		this.opacity = opacity;
-		this.updateColorString();		
-	},
-	
-	updateColorString: function()
-	{
-		this.colorString = 'rgba(' + (this.color >> 16 & 0xff) + ',' + (this.color >> 8 & 0xff) + ',' + (this.color & 0xff) + ',' + this.opacity + ')';
+		this.color = new Color( (opacity ? (opacity * 0xff) << 24 : 0xff000000) | hex );
 	}
 });
--- a/src/materials/FaceColorMaterial.js
+++ b/src/materials/FaceColorMaterial.js
+var FaceColorMaterial = Class.extend
+({
+});
--- a/src/renderers/CanvasRenderer.js
+++ b/src/renderers/CanvasRenderer.js
@@ -34,7 +34,11 @@ var CanvasRenderer = Renderer.extend
 			
 			if (element.material instanceof ColorMaterial)
 			{
-				this.context.fillStyle = element.material.colorString;
+				this.context.fillStyle = element.material.color.styleString;
+			}
+			else if (element.material instanceof FaceColorMaterial)
+			{
+				this.context.fillStyle = element.color.styleString;
 			}
 			
 			if (element instanceof Face3)

--- a/src/renderers/Renderer.js
+++ b/src/renderers/Renderer.js
@@ -84,7 +84,7 @@ var Renderer = Class.extend
 						   (face.c.screen.x - face.a.screen.x) * (face.b.screen.y - face.a.screen.y) -
 						   (face.c.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0) )
 						{
-							face.screen.z = Math.max(face.a.screen.z, Math.max(face.b.screen.z, face.c.screen.z));
+							face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z) * 0.3;
 							
 							if (this.face3Pool[face3count] == null)
 								this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
@@ -93,7 +93,8 @@ var Renderer = Class.extend
 							this.face3Pool[face3count].b.screen.copy(face.b.screen);
 							this.face3Pool[face3count].c.screen.copy(face.c.screen);
 							this.face3Pool[face3count].screen.z = face.screen.z;
-							this.face3Pool[face3count].material = face.material;
+							this.face3Pool[face3count].color = face.color;
+							this.face3Pool[face3count].material = object.material;

 							this.renderList.push( this.face3Pool[face3count] );

@@ -108,7 +109,7 @@ var Renderer = Class.extend
 						   (face.b.screen.x - face.c.screen.x) * (face.d.screen.y - face.c.screen.y) -
 						   (face.b.screen.y - face.c.screen.y) * (face.d.screen.x - face.c.screen.x) > 0)) )
 						{
-							face.screen.z = Math.max(face.a.screen.z, Math.max(face.b.screen.z, face.c.screen.z));
+							face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z + face.d.screen.z) * 0.25;

 							if (this.face4Pool[face4count] == null)
 								this.face4Pool[face4count] = new Face4(new Vertex(), new Vertex(), new Vertex(), new Vertex());
@@ -118,7 +119,8 @@ var Renderer = Class.extend
 							this.face4Pool[face4count].c.screen.copy(face.c.screen);
 							this.face4Pool[face4count].d.screen.copy(face.d.screen);
 							this.face4Pool[face4count].screen.z = face.screen.z;
-							this.face4Pool[face4count].material = face.material;
+							this.face4Pool[face4count].color = face.color;
+							this.face4Pool[face4count].material = object.material;

 							this.renderList.push( this.face4Pool[face4count] );