* Added `ParticleCircleMaterial` and `ParticleBitmapMaterial`

* `Particle` now use `ParticleCircleMaterial` instead of `ColorFillMaterial`
* `Particle.size` > `Particle.scale.x` and `Particle.scale.y`
* `SVGRenderer` currently out of sync

README.md

@@ -5,7 +5,7 @@ three.js
 
 [![Flattr this](http://api.flattr.com/button/button-compact-static-100x17.png)](http://flattr.com/thing/287/three-js)
 
-The aim of this project is to create a 3D engine with a very low level of abstraction (aka for dummies). Currently there is no documentation available but feel free to use the examples as a reference and/or read the source code. However, be aware that the API may change from revision to revision breaking compatibility.
+The aim of this project is to create a lightweight 3D engine with a very low level of abstraction (aka for dummies). Currently there is no documentation available but feel free to use the examples as a reference and/or read the source code. However, be aware that the API may change from revision to revision breaking compatibility.
 
 The engine can render using <canvas> and <svg> and WebGL.
 
@@ -33,7 +33,7 @@ Other similar projects: [pre3d](http://deanm.github.com/pre3d/), [pvjs](http://c
 
 ### Usage ###
 
-The library needs to be included first thing.
+Download the [compiled library](http://github.com/mrdoob/three.js/raw/master/build/three.js) and include it in your html.
 
 	<script type="text/javascript" src="js/three.js"></script>
 
@@ -102,10 +102,13 @@ For creating a customised version of the library, including the source files in
 	<script type="text/javascript" src="js/three/materials/ColorStrokeMaterial.js"></script>
 	<script type="text/javascript" src="js/three/materials/FaceColorFillMaterial.js"></script>
 	<script type="text/javascript" src="js/three/materials/FaceColorStrokeMaterial.js"></script>
+	<script type="text/javascript" src="js/three/materials/ParticleBitmapMaterial.js"></script>
+	<script type="text/javascript" src="js/three/materials/ParticleCircleMaterial.js"></script>
 	<script type="text/javascript" src="js/three/scenes/Scene.js"></script>
 	<script type="text/javascript" src="js/three/renderers/Renderer.js"></script>
 	<script type="text/javascript" src="js/three/renderers/CanvasRenderer.js"></script>
 	<script type="text/javascript" src="js/three/renderers/SVGRenderer.js"></script>
+	<script type="text/javascript" src="js/three/renderers/WebGLRenderer.js"></script>
 	<script type="text/javascript" src="js/three/renderers/renderables/RenderableFace3.js"></script>
 	<script type="text/javascript" src="js/three/renderers/renderables/RenderableFace4.js"></script>
 	<script type="text/javascript" src="js/three/renderers/renderables/RenderableParticle.js"></script>
@@ -121,40 +124,48 @@ Thanks to the power of the internets (and github <3) these people have kindly he
 
 ### Change Log ###
 
+2010 07 12 - **r13** (29.410 kb)
+
+* Added `ParticleCircleMaterial` and `ParticleBitmapMaterial`
+* `Particle` now use `ParticleCircleMaterial` instead of `ColorFillMaterial`
+* `Particle.size` > `Particle.scale.x` and `Particle.scale.y`
+* `SVGRenderer` currently out of sync
+
+
 2010 07 07 - **r12** (28.494 kb)
 
-* First version of the WebGLRenderer (ColorFillMaterial and FaceColorFillMaterial by now)
-* Matrix4.lookAt fix (CanvasRenderer and SVGRenderer now handle the -Y)
-* Color class now using 0-1 floats instead of 0-255 integers
+* First version of the `WebGLRenderer` (`ColorFillMaterial` and `FaceColorFillMaterial` by now)
+* `Matrix4.lookAt` fix (`CanvasRenderer` and `SVGRenderer` now handle the -Y)
+* `Color` now using 0-1 floats instead of 0-255 integers
 
 
 2010 07 03 - **r11** (23.541 kb)
 
 * Blender 2.5 exporter (utils/export_threejs.py) now exports UV and normals (Thx [kikko](http://github.com/kikko))
-* Scene.add > Scene.addObject
-* Enabled Scene.removeObject
-* Removed computeNormals() from Geometry
+* `Scene.add` > `Scene.addObject`
+* Enabled `Scene.removeObject`
+* Removed `computeNormals()` from `Geometry`
 
 
 2010 06 22 - **r10** (23.959 kb)
 
 * Changed Camera system. (Thx [Paul Brunt](http://github.com/supereggbert))
-* Object3D.overdraw = true to enable CanvasRenderer screen space point expansion hack.
+* `Object3D.overdraw = true` to enable CanvasRenderer screen space point expansion hack.
 
 
 2010 06 20 - **r9** (23.753 kb)
 
 * JSLinted.
-* autoClear property for renderers.
+* `autoClear` property for renderers.
 * Removed SVG rgba() workaround for WebKit. (WebKit now supports it)
 * Fixed matrix bug. (transformed objects outside the x axis would get infinitely tall :S)
 
 
 2010 06 06 - **r8** (23.496 kb)
 
-* Moved UVs to Geometry.
-* CanvasRenderer expands screen space points (workaround for antialias gaps).
-* CanvasRenderer supports BitmapUVMappingMaterial.
+* Moved UVs to `Geometry`.
+* `CanvasRenderer` expands screen space points (workaround for antialias gaps).
+* `CanvasRenderer` supports `BitmapUVMappingMaterial`.
 
 
 2010 06 05 - **r7** (22.387 kb)
@@ -166,38 +177,38 @@ Thanks to the power of the internets (and github <3) these people have kindly he
 
 2010 05 17 - **r6** (21.003 kb)
 
-* 2d clipping on CanvasRenderer and SVGRenderer
-* clearRect optimisations on CanvasRenderer
+* 2d clipping on `CanvasRenderer` and `SVGRenderer`
+* `clearRect` optimisations on `CanvasRenderer`
 
 
 2010 05 16 - **r5** (19.026 kb)
 
 * Removed Class.js dependency
-* Added THREE namespace
-* Camera.x -> Camera.position.x
-* Camera.target.x -> Camera.target.position.x
-* ColorMaterial -> ColorFillMaterial
-* FaceColorMaterial -> FaceColorFillMaterial
+* Added `THREE` namespace
+* `Camera.x` -> `Camera.position.x`
+* `Camera.target.x` > `Camera.target.position.x`
+* `ColorMaterial` > `ColorFillMaterial`
+* `FaceColorMaterial` > `FaceColorFillMaterial`
 * Materials are now multipass (use array)
-* Added ColorStrokeMaterial and FaceColorStrokeMaterial
-* geometry.faces.a are now indexes instead of links 
+* Added `ColorStrokeMaterial` and `FaceColorStrokeMaterial`
+* `geometry.faces.a` are now indexes instead of references
 
 
 2010 04 26 - **r4** (16.274 kb)
 
-* SVGRenderer Particle rendering
-* CanvasRenderer uses context.setTransform to avoid extra calculations
+* `SVGRenderer` Particle rendering
+* `CanvasRenderer` uses `context.setTransform` to avoid extra calculations
 
 
 2010 04 24 - **r3** (16.392 kb)
 
 * Fixed incorrect rotation matrix transforms
-* Added Plane and Cube primitives
+* Added `Plane` and `Cube` primitives
 
 
 2010 04 24 - **r2** (15.724 kb)
 
-* Improved Color handling
+* Improved `Color` handling
 
 
 2010 04 24 - **r1** (15.25 kb)

examples/particles_floor.html

@@ -61,7 +61,7 @@
 				renderer = new THREE.CanvasRenderer();
 				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 
-				var material = new THREE.ColorFillMaterial(0xffffff, 1);
+				var material = new THREE.ParticleCircleMaterial(0xffffff, 1);
 
 				for (var ix = 0; ix < AMOUNTX; ix++) {
 

examples/particles_random.html

@@ -61,11 +61,11 @@
 
 				for (var i = 0; i < 1000; i++) {
 
-					particle = new THREE.Particle( new THREE.ColorFillMaterial( Math.random() * 0x808008 + 0x808080, 1 ) );
-					particle.size = Math.random() * 10 + 5;
+					particle = new THREE.Particle( new THREE.ParticleCircleMaterial( Math.random() * 0x808008 + 0x808080, 1 ) );
 					particle.position.x = Math.random() * 2000 - 1000;
 					particle.position.y = Math.random() * 2000 - 1000;
 					particle.position.z = Math.random() * 2000 - 1000;
+					particle.scale.x = particle.scale.y = Math.random() * 10 + 5;
 					scene.add(particle);
 				}
 

examples/particles_waves.html

@@ -64,14 +64,13 @@
 				particles = new Array();
 
 				var i = 0;
-				var material = new THREE.ColorFillMaterial(0xffffff, 1);
+				var material = new THREE.ParticleCircleMaterial(0xffffff, 1);
 
 				for (var ix = 0; ix < AMOUNTX; ix++) {
 
 					for(var iy = 0; iy < AMOUNTY; iy++) {
 
 						particle = particles[i++] = new THREE.Particle( material );
-						particle.size = 1;
 						particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
 						particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
 						scene.add( particle );
@@ -139,8 +138,8 @@
 					for(var iy = 0; iy < AMOUNTY; iy++) {
 
 						particle = particles[i++];
-						particle.size = (Math.sin((ix + count) * .3) + 1) * 2 + (Math.sin((iy + count) * .5) + 1) * 2;
 						particle.position.y = (Math.sin((ix + count) * .3) * 50) + (Math.sin((iy + count) * .5) * 50);
+						particle.scale.x = particle.scale.y = (Math.sin((ix + count) * .3) + 1) * 2 + (Math.sin((iy + count) * .5) + 1) * 2;
 
 					}
 				}

src/materials/ParticleBitmapMaterial.js

@@ -0,0 +1,15 @@
+/**
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+THREE.ParticleBitmapMaterial = function ( bitmap ) {
+
+	this.bitmap = bitmap;
+
+	this.toString = function () {
+
+		return 'THREE.ParticleBitmapMaterial ( bitmap: ' + this.bitmap + ' )';
+
+	};
+
+};

src/materials/ParticleCircleMaterial.js

@@ -0,0 +1,15 @@
+/**
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+THREE.ParticleCircleMaterial = function ( hex, opacity ) {
+
+	this.color = new THREE.Color( ( opacity >= 0 ? ( opacity * 0xff ) << 24 : 0xff000000 ) | hex );
+
+	this.toString = function () {
+
+		return 'THREE.ParticleCircleMaterial ( color: ' + this.color + ' )';
+
+	};
+
+};

src/objects/Particle.js

@@ -6,7 +6,6 @@ THREE.Particle = function ( material ) {
 
 	THREE.Object3D.call( this, material );
 
-	this.size = 1;
 	this.autoUpdateMatrix = false;
 
 };

src/renderers/CanvasRenderer.js

@@ -43,12 +43,12 @@ THREE.CanvasRenderer = function () {
 	this.render = function ( scene, camera ) {
 
 		var e, el, m, ml, element, material, pi2 = Math.PI * 2,
-		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y,
+		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, width, height,
 
 		uv1 = new THREE.Vector2(), uv2 = new THREE.Vector2(), uv3 = new THREE.Vector2(),
 		suv1 = new THREE.Vector2(), suv2 = new THREE.Vector2(), suv3 = new THREE.Vector2(),
 		suv1x, suv1y, suv2x, suv2y, suv3x, suv3y, denom, m11, m12, m21, m22, dx, dy,
-		bitmap, bitmapWidth, bitmapHeight, size;
+		bitmap, bitmapWidth, bitmapHeight;
 
 		if ( this.autoClear ) {
 
@@ -74,17 +74,6 @@ THREE.CanvasRenderer = function () {
 			if ( element instanceof THREE.RenderableParticle ) {
 
 				v1x = element.x * _widthHalf; v1y = element.y * _heightHalf;
-				size = element.size * _widthHalf;
-
-				_bboxRect.set( v1x - size, v1y - size, v1x + size, v1y + size );
-
-				if ( !_clipRect.instersects( _bboxRect ) ) {
-
-					continue;
-
-				}
-
-				_context.arc( v1x, v1y, size, 0, pi2, true );
 
 			} else if ( element instanceof THREE.RenderableLine ) {
 
@@ -154,7 +143,7 @@ THREE.CanvasRenderer = function () {
 
 				v1x = element.v1.x; v1y = element.v1.y;
 				v2x = element.v2.x; v2y = element.v2.y;
-				v3x = element.v3.x; v3y = element.v3.y;
+				v3x = element.v3.x; heightv3y = element.v3.y;
 				v4x = element.v4.x; v4y = element.v4.y;
 
 				_bboxRect.addPoint( v1x, v1y );
@@ -182,7 +171,52 @@ THREE.CanvasRenderer = function () {
 
 				material = element.material[ m ];
 
-				if ( material instanceof THREE.ColorFillMaterial ) {
+				if ( material instanceof THREE.ParticleCircleMaterial ) {
+
+					width = element.scale.x * _widthHalf;
+					height = element.scale.y * _heightHalf;
+
+					_bboxRect.set( v1x - width, v1y - height, v1x + width, v1y + height );
+
+					if ( !_clipRect.instersects( _bboxRect ) ) {
+
+						continue;
+
+					}
+
+					_context.save();
+					_context.translate( v1x, v1y );
+					_context.scale( width, height );
+					_context.arc( 0, 0, 1, 0, pi2, true );
+					_context.restore();
+
+					_context.fillStyle = material.color.__styleString;
+					_context.fill();
+
+				} else if ( material instanceof THREE.ParticleBitmapMaterial ) {
+
+					bitmap = material.bitmap;
+					bitmapWidth = bitmap.width / 2;
+					bitmapHeight = bitmap.height / 2;
+
+					width = element.scale.x * _widthHalf * bitmapWidth;
+					height = element.scale.y * _heightHalf * bitmapHeight;
+
+					_bboxRect.set( v1x - width, v1y - height, v1x + width, v1y + height );
+
+					if ( !_clipRect.instersects( _bboxRect ) ) {
+
+						continue;
+
+					}
+
+					_context.save();
+					_context.translate( v1x - width, v1y + height );
+					_context.scale( element.scale.x * _widthHalf, - ( element.scale.y * _heightHalf ) );
+					_context.drawImage( bitmap, 0, 0 );
+					_context.restore();
+
+				} else if ( material instanceof THREE.ColorFillMaterial ) {
 
 					_context.fillStyle = material.color.__styleString;
 					_context.fill();

src/renderers/Renderer.js

@@ -211,7 +211,8 @@ THREE.Renderer = function() {
 					particlePool[ particleCount ].y = object.screen.y;
 					particlePool[ particleCount ].z = object.screen.z;
 
-					particlePool[ particleCount ].size = object.size * Math.abs( vector4.x / vector4.w - ( vector4.x + camera.projectionMatrix.n11 ) / ( vector4.w + camera.projectionMatrix.n14 ) );
+					particlePool[ particleCount ].scale.x = object.scale.x * Math.abs( vector4.x / vector4.w - ( vector4.x + camera.projectionMatrix.n11 ) / ( vector4.w + camera.projectionMatrix.n14 ) );
+					particlePool[ particleCount ].scale.y = object.scale.y * Math.abs( vector4.y / vector4.w - ( vector4.y + camera.projectionMatrix.n22 ) / ( vector4.w + camera.projectionMatrix.n24 ) );
 					particlePool[ particleCount ].material = object.material;
 					particlePool[ particleCount ].color = object.color;
 

src/renderers/renderables/RenderableParticle.js

@@ -6,9 +6,10 @@ THREE.RenderableParticle = function () {
 
 	this.x = null;
 	this.y = null;
-
 	this.z = null;
 
+	this.scale = new THREE.Vector2();
+
 	this.color = null;
 	this.material = null;
 

utils/deployer.py

@@ -3,7 +3,7 @@ import os
 
 # MERGER
 
-rev = 12;
+rev = 13;
 
 files = [];
 files.append('Three.js');
@@ -27,6 +27,8 @@ files.append('materials/ColorFillMaterial.js');
 files.append('materials/ColorStrokeMaterial.js');
 files.append('materials/FaceColorFillMaterial.js');
 files.append('materials/FaceColorStrokeMaterial.js');
+files.append('materials/ParticleBitmapMaterial.js');
+files.append('materials/ParticleCircleMaterial.js');
 files.append('scenes/Scene.js');
 files.append('renderers/Renderer.js');
 files.append('renderers/CanvasRenderer.js');