- 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

README.md

@@ -5,9 +5,9 @@ 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 syntax may change from revision to revision breaking compatibility.
+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 engine can render using <canvas> and <svg> by now and WebGL renderer will be available soon.
+The engine can render using <canvas> and <svg> and WebGL.
 
 [More info...](http://mrdoob.com/blog/post/693)
 
@@ -48,7 +48,7 @@ This code creates a camera, then creates a scene object, adds a bunch of random
 
 		function init() {
 
-			camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 0.0001, 10000 );
+			camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 			camera.position.z = 1000;
 
 			scene = new THREE.Scene();
@@ -121,6 +121,13 @@ Thanks to the power of the internets (and github <3) these people have kindly he
 
 ### Change Log ###
 
+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
+
+
 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))

examples/geometry_cube.html

@@ -61,7 +61,7 @@
 				info.innerHTML = 'Drag to spin the cube';
 				container.appendChild(info);
 
-				camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.y = 150;
 				camera.position.z = 500;
 				camera.target.position.y = 150;
@@ -74,7 +74,7 @@
 
 				for (var i = 0; i < geometry.faces.length; i++) {
 
-					geometry.faces[i].color.setRGBA( Math.floor( Math.random() * 128), Math.floor( Math.random() * 128 + 128), Math.floor( Math.random() * 128 + 128), 255 );
+					geometry.faces[i].color.setRGBA( Math.random() * 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 );
 				}
 
 				cube = new THREE.Mesh(geometry, new THREE.FaceColorFillMaterial());

examples/geometry_vr.html

@@ -30,38 +30,7 @@
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vr demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
 
-		<!-- <script type="text/javascript" src="../build/three.js"></script> -->
-
-		<script type="text/javascript" src="../src/Three.js"></script>
-		<script type="text/javascript" src="../src/core/Color.js"></script>
-		<script type="text/javascript" src="../src/core/Vector2.js"></script>
-		<script type="text/javascript" src="../src/core/Vector3.js"></script>
-		<script type="text/javascript" src="../src/core/Vector4.js"></script>
-		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
-		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
-		<script type="text/javascript" src="../src/core/Vertex.js"></script>
-		<script type="text/javascript" src="../src/core/Face3.js"></script>
-		<script type="text/javascript" src="../src/core/Face4.js"></script>
-		<script type="text/javascript" src="../src/core/Geometry.js"></script>
-		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
-		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
-		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
-		<script type="text/javascript" src="../src/objects/Particle.js"></script>
-		<script type="text/javascript" src="../src/objects/Line.js"></script>
-		<script type="text/javascript" src="../src/materials/BitmapUVMappingMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/ColorFillMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/ColorStrokeMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/FaceColorFillMaterial.js"></script>
-		<script type="text/javascript" src="../src/materials/FaceColorStrokeMaterial.js"></script>
-		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
-		<script type="text/javascript" src="../src/renderers/Renderer.js"></script>
-		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
-		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
-
+		<script type="text/javascript" src="../build/three.js"></script>
 		<script type="text/javascript" src="primitives/Plane.js"></script>
 
 		<script type="text/javascript">
@@ -85,7 +54,7 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
 				scene = new THREE.Scene();
 
@@ -173,7 +142,7 @@
 
 				isUserInteracting = true;
 
-				wireframe.color.setRGBA(255, 255, 255, 0.2);
+				wireframe.color.setRGBA( 1, 1, 1, 0.2 );
 
 				onPointerDownPointerX = event.clientX;
 				onPointerDownPointerY = event.clientY;

examples/lines_sphere.html

@@ -0,0 +1,155 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - particles - floor</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
+		<style type="text/css">
+			body {
+				background-color: #000000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			a {
+				color:#0078ff;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script type="text/javascript" src="../build/three.js"></script> 
+
+		<script type="text/javascript">
+
+			var SCREEN_WIDTH = window.innerWidth,
+			SCREEN_HEIGHT = window.innerHeight,
+
+			mouseX = 0, mouseY = 0,
+
+			windowHalfX = window.innerWidth / 2,
+			windowHalfY = window.innerHeight / 2,
+
+			SEPARATION = 200,
+			AMOUNTX = 10,
+			AMOUNTY = 10,
+
+			camera, scene, renderer,
+
+			stats;
+
+			init();
+			setInterval(loop, 1000 / 60);
+
+			function init() {
+
+				var container, separation = 100, amountX = 50, amountY = 50,
+				particles, particle, material;
+
+				container = document.createElement('div');
+				document.body.appendChild(container);
+
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera.position.z = 1000;
+
+				scene = new THREE.Scene();
+
+				renderer = new THREE.CanvasRenderer();
+				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+				container.appendChild(renderer.domElement);
+
+				// floor
+
+				material = new THREE.ColorFillMaterial(0xffffff, 1);
+
+				for (var i = 0; i < 1000; i++) {
+
+					particle = new THREE.Particle( material );
+					particle.position.x = Math.random() * 2 - 1;
+					particle.position.y = Math.random() * 2 - 1;
+					particle.position.z = Math.random() * 2 - 1;
+					particle.position.normalize();
+					particle.position.multiplyScalar(Math.random() * 10 + 450);
+					scene.add( particle );
+
+				}
+
+				// lines
+
+				for (var i = 0; i < 300; i++) {
+
+					var geometry = new THREE.Geometry();
+
+					var vector = new THREE.Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
+					vector.normalize();
+					vector.multiplyScalar(450);
+
+					geometry.vertices.push(new THREE.Vertex(vector));
+
+					var vector2 = vector.clone();
+					vector2.multiplyScalar(Math.random() * 0.3 + 1);
+
+					geometry.vertices.push(new THREE.Vertex(vector2));
+
+					var line = new THREE.Line(geometry, new THREE.ColorStrokeMaterial(1, 0xffffff, Math.random()));
+					scene.add(line);
+				}
+
+				/*
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild(stats.domElement);
+				*/
+
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
+				document.addEventListener('touchstart', onDocumentTouchStart, false);
+				document.addEventListener('touchmove', onDocumentTouchMove, false);
+			}
+
+			//
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = event.clientX - windowHalfX;
+				mouseY = event.clientY - windowHalfY;
+			}
+
+			function onDocumentTouchStart( event ) {
+
+				if(event.touches.length > 1) {
+
+					event.preventDefault();
+
+					mouseX = event.touches[0].pageX - windowHalfX;
+					mouseY = event.touches[0].pageY - windowHalfY;
+				}
+			}
+
+			function onDocumentTouchMove( event ) {
+
+				if(event.touches.length == 1) {
+
+					event.preventDefault();
+
+					mouseX = event.touches[0].pageX - windowHalfX;
+					mouseY = event.touches[0].pageY - windowHalfY;
+				}
+			}
+
+			//
+
+			function loop() {
+
+				camera.position.x += (mouseX - camera.position.x) * .05;
+				camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
+				camera.updateMatrix();
+
+				renderer.render(scene, camera);
+
+				// stats.update();
+			}
+
+		</script>
+	</body>
+</html>

examples/materials_video.html

@@ -66,7 +66,7 @@
 				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> trailer';
 				container.appendChild(info);
 
-				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();

examples/particles_floor.html

@@ -53,7 +53,7 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();

examples/particles_random.html

@@ -51,7 +51,7 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();

examples/particles_waves.html

@@ -53,7 +53,7 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();

src/core/Color.js

@@ -4,13 +4,14 @@
 
 THREE.Color = function ( hex ) {
 
-	var _r, _g, _b, _a, _hex;
+	this.r; this.g; this.b; this.a;
+	this.hex;
 
-	this.__styleString = "rgba(0, 0, 0, 1)";
+	this.__styleString = 'rgba(0, 0, 0, 1)';
 
 	this.setHex = function ( hex ) {
 
-		_hex = hex;
+		this.hex = hex;
 		this.updateRGBA();
 		this.updateStyleString();
 
@@ -18,10 +19,10 @@ THREE.Color = function ( hex ) {
 
 	this.setRGBA = function ( r, g, b, a ) {
 
-		_r = r;
-		_g = g;
-		_b = b;
-		_a = a;
+		this.r = r;
+		this.g = g;
+		this.b = b;
+		this.a = a;
 
 		this.updateHex();
 		this.updateStyleString();
@@ -30,28 +31,28 @@ THREE.Color = function ( hex ) {
 
 	this.updateHex = function () {
 
-		_hex = Math.floor( _a * 255 ) << 24 | _r << 16 | _g << 8 | _b;
+		this.hex = Math.floor( this.a * 255 ) << 24 | Math.floor( this.r * 255 ) << 16 | Math.floor( this.g * 255 ) << 8 | Math.floor( this.b * 255 );
 
 	};
 
 	this.updateRGBA = function () {
 
-		_r = _hex >> 16 & 0xff;
-		_g = _hex >> 8 & 0xff;
-		_b = _hex & 0xff;
-		_a = (_hex >> 24 & 0xff) / 255;
+		this.a = ( this.hex >> 24 & 0xff ) / 0xff;
+		this.r = ( this.hex >> 16 & 0xff ) / 0xff;
+		this.g = ( this.hex >> 8 & 0xff ) / 0xff;
+		this.b = ( this.hex & 0xff ) / 0xff;
 
 	};
 
 	this.updateStyleString = function () {
 
-		this.__styleString = 'rgba(' + _r + ',' + _g + ',' + _b + ',' + _a + ')';
+		this.__styleString = 'rgba(' + Math.floor( this.r * 255 ) + ',' + Math.floor( this.g * 255 ) + ',' + Math.floor( this.b * 255 ) + ',' + this.a + ')';
 
 	};
 
 	this.toString = function () {
 
-		return 'THREE.Color ( r: ' + _r + ', g: ' + _g + ', b: ' + _b + ', a: ' + _a + ', hex: ' + _hex + ' )';
+		return 'THREE.Color ( r: ' + this.r + ', g: ' + this.g + ', b: ' + this.b + ', a: ' + this.a + ', hex: ' + this.hex + ' )';
 
 	};
 

src/core/Matrix4.js

@@ -34,7 +34,6 @@ THREE.Matrix4 = function () {
 
 		y.cross( z, x );
 		y.normalize();
-		y.negate();
 
 		this.n11 = x.x; this.n12 = x.y; this.n13 = x.z; this.n14 = - x.dot( eye );
 		this.n21 = y.x; this.n22 = y.y; this.n23 = y.z; this.n24 = - y.dot( eye );
@@ -225,10 +224,10 @@ THREE.Matrix4.makeFrustum = function( left, right, bottom, top, near, far ) {
 	c = - ( far + near ) / ( far - near );
 	d = - 2 * far * near / ( far - near );
 
-	m.n11 = x; m.n13 = a;
-	m.n22 = y; m.n23 = b;
-	m.n33 = c; m.n34 = d;
-	m.n43 = - 1; m.n44 = 0;
+	m.n11 = x; m.n12 = 0; m.n13 = a; m.n14 = 0;
+	m.n21 = 0; m.n22 = y; m.n23 = b; m.n24 = 0;
+	m.n31 = 0; m.n32 = 0; m.n33 = c; m.n34 = d;
+	m.n41 = 0; m.n42 = 0; m.n43 = - 1; m.n44 = 0;
 
 	return m;
 

src/renderers/CanvasRenderer.js

@@ -6,15 +6,15 @@ THREE.CanvasRenderer = function () {
 
 	THREE.Renderer.call( this );
 
-	var _viewport = document.createElement( "canvas" ),
-	_context = _viewport.getContext( "2d" ),
+	var _canvas = document.createElement( 'canvas' ),
+	_context = _canvas.getContext( '2d' ),
 	_width, _height, _widthHalf, _heightHalf,
 	_clipRect = new THREE.Rectangle(),
 	_clearRect = new THREE.Rectangle( 0, 0, 0, 0 ),
 	_bboxRect = new THREE.Rectangle(),
 	_vector2 = new THREE.Vector2();
 
-	this.domElement = _viewport;
+	this.domElement = _canvas;
 	this.autoClear = true;
 
 	this.setSize = function ( width, height ) {
@@ -22,10 +22,10 @@ THREE.CanvasRenderer = function () {
 		_width = width; _height = height;
 		_widthHalf = _width / 2; _heightHalf = _height / 2;
 
-		_viewport.width = _width;
-		_viewport.height = _height;
+		_canvas.width = _width;
+		_canvas.height = _height;
 
-		_context.setTransform( 1, 0, 0, 1, _widthHalf, _heightHalf );
+		_context.setTransform( 1, 0, 0, -1, _widthHalf, _heightHalf );
 
 		_clipRect.set( - _widthHalf, - _heightHalf, _widthHalf, _heightHalf );
 
@@ -42,8 +42,7 @@ THREE.CanvasRenderer = function () {
 
 	this.render = function ( scene, camera ) {
 
-		var i, j, element, pi2 = Math.PI * 2,
-		elementsLength, material, materialLength,
+		var e, el, m, ml, element, material, pi2 = Math.PI * 2,
 		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y,
 
 		uv1 = new THREE.Vector2(), uv2 = new THREE.Vector2(), uv3 = new THREE.Vector2(),
@@ -64,13 +63,9 @@ THREE.CanvasRenderer = function () {
 
 		this.project( scene, camera );
 
-		elementsLength = this.renderList.length;
+		for ( e = 0, el = this.renderList.length; e < el; e++ ) {
 
-		for ( i = 0; i < elementsLength; i++ ) {
-
-			element = this.renderList[ i ];
-
-			materialLength = element.material.length;
+			element = this.renderList[ e ];
 
 			_bboxRect.empty();
 
@@ -183,9 +178,9 @@ THREE.CanvasRenderer = function () {
 
 			_context.closePath();
 
-			for ( j = 0; j < materialLength; j++ ) {
+			for ( m = 0, ml = element.material.length; m < ml; m++ ) {
 
-				material = element.material[ j ];
+				material = element.material[ m ];
 
 				if ( material instanceof THREE.ColorFillMaterial ) {
 

src/renderers/GLRenderer.js

@@ -1,323 +0,0 @@
-/**
- * @author supereggbert / http://www.paulbrunt.co.uk/
- */
-
-/* TODO: Refactoring */
-
-var GLRenderer = Renderer.extend
-({
-	init: function()
-	{
-		this._super();
-
-		this.viewport = document.createElement("canvas");
-		this.viewport.style.position = "absolute";
-
-		try {
-			this.gl = this.viewport.getContext("experimental-webgl");
-		} catch(e) {}
-
-		if (!this.gl) {
-			alert("WebGL not supported");
-			throw "cannot create webgl context";
-		}
-
-		this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
-		this.gl.clearDepth(1.0);
-		this.gl.enable(this.gl.DEPTH_TEST);
-		this.gl.depthFunc(this.gl.LESS);
-		this.gl.enable(this.gl.BLEND);
-		this.gl.blendFunc(this.gl.SRC_ALPHA,this.gl.ONE_MINUS_SRC_ALPHA);
-		this.gl.clearColor(0,0,0,0);
-		this.createProgram();
-		this.initParticles(32);
-	},
-	
-	setSize: function( width, height )
-	{
-		this._super( width, height );
-
-		this.viewport.width = this.width;
-		this.viewport.height = this.height;
-		this.gl.viewport(0,0,this.width,this.height);
-	},
-	
-	initParticles: function (segments)
-	{
-		var gl=this.gl;
-		var x,y;
-		var vertexArray=[0,0,0];
-		var faceArray=[];
-		piStep=6.282/segments;
-		for(var i=0;i<segments;i++){
-			x=Math.sin(piStep*i);
-			y=Math.cos(piStep*i);
-			vertexArray.push(x,y,0);
-			if(i>0)
-			{
-				faceArray.push(0,i,i+1);
-			}
-		}
-		faceArray.push(0,i,1);
-		
-		var vtxShader=[
-		"attribute vec3 position;",
-		"uniform vec3 location;",
-		"uniform mat4 cameraMatrix;",
-		"uniform mat4 pMatrix;",
-		"uniform float size;",
-		"void main(){",
-		"vec4 pos=cameraMatrix*vec4(location,1.0);",
-		"pos=vec4(position*vec3(size),0.0)+pos;",
-		"gl_Position = pMatrix*pos;",
-		"}"
-		].join("");
-		
-		frgShader=[
-		"uniform vec4 color;",
-		"void main(){",
-		"gl_FragColor=color;",
-		"}"
-		].join("");
-		
-		var vertexShader=gl.createShader(gl.VERTEX_SHADER);
-		var fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
-
-		gl.shaderSource(vertexShader, vtxShader);
-		gl.compileShader(vertexShader);
-				
-		gl.shaderSource(fragmentShader,frgShader);
-		gl.compileShader(fragmentShader);
-		
-		this.particleProgram = gl.createProgram();
-		gl.attachShader(this.particleProgram, vertexShader);
-		gl.attachShader(this.particleProgram, fragmentShader);
-		gl.linkProgram(this.particleProgram);
-		
-		this.particleProgram.cameraMatrix=gl.getUniformLocation(this.particleProgram, "cameraMatrix");
-		this.particleProgram.pMatrix=gl.getUniformLocation(this.particleProgram, "pMatrix");
-		this.particleProgram.color=gl.getUniformLocation(this.particleProgram, "color");
-		this.particleProgram.size=gl.getUniformLocation(this.particleProgram, "size");
-		this.particleProgram.location=gl.getUniformLocation(this.particleProgram, "location");
-		this.particleProgram.position=gl.getAttribLocation(this.particleProgram, "position");
-		
-		this.particleProgram.mvMatrixArray=new WebGLFloatArray(16);
-		this.particleProgram.pMatrixArray=new WebGLFloatArray(16);
-		
-		this.particleProgram.webGLVertexBuffer = gl.createBuffer();
-		gl.bindBuffer( gl.ARRAY_BUFFER, this.particleProgram.webGLVertexBuffer );
-		gl.bufferData( gl.ARRAY_BUFFER, new WebGLFloatArray(vertexArray), gl.STATIC_DRAW );
-					
-		this.particleProgram.webGLFaceBuffer = gl.createBuffer();
-		gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, this.particleProgram.webGLFaceBuffer );
-		gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(faceArray), gl.STATIC_DRAW );	
-		this.particleProgram.faceNum=faceArray.length;
-		
-		this.particleProgram.cameraMatrixArray=new WebGLFloatArray(16);
-		this.particleProgram.pMatrixArray=new WebGLFloatArray(16);
-	},
-	
-	createProgram: function()
-	{
-		var gl=this.gl;
-		
-		var vtxShader=[
-		"attribute vec3 position;",
-		"attribute vec4 color;",
-		"uniform mat4 mvMatrix;",
-		"uniform mat4 pMatrix;",
-		"varying vec4 vcolor;",
-		"void main(){",
-		"vcolor=color;",
-		"gl_Position = pMatrix*mvMatrix*vec4(position,1.0);",
-		"}"
-		].join("");
-		
-		frgShader=[
-		"varying vec4 vcolor;",
-		"void main(){",
-		"gl_FragColor=vcolor;",
-		"}"
-		].join("");
-		
-		var vertexShader=gl.createShader(gl.VERTEX_SHADER);
-		var fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
-
-		gl.shaderSource(vertexShader, vtxShader);
-		gl.compileShader(vertexShader);
-	
-		gl.shaderSource(fragmentShader,frgShader);
-		gl.compileShader(fragmentShader);
-		
-		
-		this.program = gl.createProgram();
-		gl.attachShader(this.program, vertexShader);
-		gl.attachShader(this.program, fragmentShader);
-		gl.linkProgram(this.program);
-		
-		this.program.mvMatrix=gl.getUniformLocation(this.program, "mvMatrix");
-		this.program.pMatrix=gl.getUniformLocation(this.program, "pMatrix");
-		this.program.position=gl.getAttribLocation(this.program, "position");
-		this.program.color=gl.getAttribLocation(this.program, "color");
-		
-		this.program.mvMatrixArray=new WebGLFloatArray(16);
-		this.program.pMatrixArray=new WebGLFloatArray(16);
-	},
-	
-	matrix2Array: function( matrix, array )
-	{
-		array[0]=matrix.n11;
-		array[1]=matrix.n12;
-		array[2]=matrix.n13;
-		array[3]=matrix.n14;
-		array[4]=matrix.n21;
-		array[5]=matrix.n22;
-		array[6]=matrix.n23;
-		array[7]=matrix.n24;
-		array[8]=matrix.n31;
-		array[9]=matrix.n32;
-		array[10]=matrix.n33;
-		array[11]=matrix.n34;
-		array[12]=matrix.n41;
-		array[13]=matrix.n42;
-		array[14]=matrix.n43;
-		array[15]=matrix.n44;
-	},
-	
-	render: function( scene, camera )
-	{		
-		var gl=this.gl;
-		var vertexArray,colorArray,faceArray;
-		
-		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-		
-		for (var i = 0; i < scene.objects.length; i++)
-		{
-			object = scene.objects[i];
-			if (object instanceof Mesh)
-			{
-				// Very inefficient but easiest way initially
-				
-				var vertexArray = [];
-				var faceArray = [];
-				var colorArray = [];
-				var vertexIndex = 0;
-				var color;
-							
-				for (j = 0; j < object.geometry.faces.length; j++)
-				{
-					face = object.geometry.faces[j];
-					if (object.material instanceof ColorMaterial)
-					{
-						color=object.material.color;
-					}
-					else if (object.material instanceof FaceColorMaterial)
-					{
-						color = face.color;
-					}
-					if (face instanceof Face3)
-					{
-						vertexArray.push( face.a.x, face.a.y, face.a.z );
-						vertexArray.push( face.b.x, face.b.y, face.b.z );
-						vertexArray.push( face.c.x, face.c.y, face.c.z );
-						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
-						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
-						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
-						faceArray.push( vertexIndex, vertexIndex+1, vertexIndex+2 );
-						vertexIndex += 3;
-					}
-					else if (face instanceof Face4)
-					{					
-						vertexArray.push( face.a.x, face.a.y, face.a.z );
-						vertexArray.push( face.b.x, face.b.y, face.b.z );
-						vertexArray.push( face.c.x, face.c.y, face.c.z );
-						vertexArray.push( face.d.x, face.d.y, face.d.z );
-						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
-						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
-						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
-						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
-						faceArray.push( vertexIndex, vertexIndex+1, vertexIndex+2 );
-						faceArray.push( vertexIndex, vertexIndex+2, vertexIndex+3 );
-						vertexIndex += 4;
-					}
-				}
-
-				vertexArray = new WebGLFloatArray(vertexArray);
-				colorArray = new WebGLFloatArray(colorArray);
-				faceArray = new WebGLUnsignedShortArray(faceArray);
-				
-				
-				if (!object.WebGLVertexBuffer) object.WebGLVertexBuffer = gl.createBuffer();
-				gl.bindBuffer( gl.ARRAY_BUFFER, object.WebGLVertexBuffer );
-				gl.bufferData( gl.ARRAY_BUFFER, vertexArray, gl.DYNAMIC_DRAW );
-					
-				if (!object.WebGLColorBuffer) object.WebGLColorBuffer = gl.createBuffer();
-				gl.bindBuffer( gl.ARRAY_BUFFER, object.WebGLColorBuffer );
-				gl.bufferData( gl.ARRAY_BUFFER, colorArray, gl.DYNAMIC_DRAW );
-					
-				if(!object.WebGLFaceBuffer) object.WebGLFaceBuffer = gl.createBuffer();
-				gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, object.WebGLFaceBuffer );
-				gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, faceArray, gl.DYNAMIC_DRAW );
-					
-				gl.useProgram(this.program);
-			
-				this.matrix.multiply( camera.matrix, object.matrix );
-				
-				this.matrix2Array( this.matrix, this.program.mvMatrixArray );
-				this.matrix2Array( camera.projectionMatrix, this.program.pMatrixArray );
-				
-				gl.uniformMatrix4fv(this.program.pMatrix, true, this.program.pMatrixArray);
-				gl.uniformMatrix4fv(this.program.mvMatrix, true, this.program.mvMatrixArray);
-				
-				for(var n=0; n<8; n++) gl.disableVertexAttribArray(i);
-				
-				gl.bindBuffer(gl.ARRAY_BUFFER, object.WebGLVertexBuffer);
-				gl.enableVertexAttribArray(this.program.position);
-				gl.vertexAttribPointer(this.program.position, 3, gl.FLOAT, false, 0, 0);
-				
-				gl.bindBuffer(gl.ARRAY_BUFFER, object.WebGLColorBuffer);
-				gl.enableVertexAttribArray(this.program.color);
-				gl.vertexAttribPointer(this.program.color, 4, gl.FLOAT, false, 0, 0);
-				
-				gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.WebGLFaceBuffer);
-				gl.drawElements(gl.TRIANGLES,faceArray.length, gl.UNSIGNED_SHORT, 0);
-				
-			}
-			else if (object instanceof Particle)
-			{	
-				var color
-				if (object.material instanceof ColorMaterial)
-				{
-					color=object.material.color;
-				}
-				else if (object.material instanceof FaceColorMaterial)
-				{
-					color = face.color;
-				}
-					
-				gl.useProgram(this.particleProgram);
-				
-				gl.bindBuffer(gl.ARRAY_BUFFER, this.particleProgram.webGLVertexBuffer);
-				gl.enableVertexAttribArray(this.particleProgram.position);
-				gl.vertexAttribPointer(this.particleProgram.position, 3, gl.FLOAT, false, 0, 0);
-				
-				gl.uniform3f( this.particleProgram.location, object.position.x, object.position.y, object.position.z );
-				gl.uniform4f( this.particleProgram.color, color.r/255, color.g/255, color.b/255, color.a/255 );
-				gl.uniform1f( this.particleProgram.size, object.size);
-				
-				this.matrix2Array( camera.matrix, this.particleProgram.cameraMatrixArray );
-				this.matrix2Array( camera.projectionMatrix, this.particleProgram.pMatrixArray );
-				
-				gl.uniformMatrix4fv(this.particleProgram.pMatrix, true, this.particleProgram.pMatrixArray);
-				gl.uniformMatrix4fv(this.particleProgram.cameraMatrix, true, this.particleProgram.cameraMatrixArray);
-				
-				gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.particleProgram.webGLFaceBuffer);
-				gl.drawElements(gl.TRIANGLES,this.particleProgram.faceNum, gl.UNSIGNED_SHORT, 0);
-				
-			}
-			
-		}
-	}
-});
-	
-	

src/renderers/Renderer.js

@@ -11,7 +11,7 @@ THREE.Renderer = function() {
 	particlePool = [],
 
 	vector4 = new THREE.Vector4(),
-	matrix = new THREE.Matrix4();
+	viewMatrix = new THREE.Matrix4();
 
 	function painterSort( a, b ) {
 
@@ -23,9 +23,8 @@ THREE.Renderer = function() {
 
 	this.project = function (scene, camera) {
 
-		var i, j, vertex, vertex2, face, object, v1, v2, v3, v4,
-		face3count = 0, face4count = 0, lineCount = 0, particleCount = 0,
-		verticesLength = 0, facesLength = 0;
+		var o, ol, v, vl, f, fl, vertex, vertex2, face, object, v1, v2, v3, v4,
+		face3count = 0, face4count = 0, lineCount = 0, particleCount = 0;
 
 		this.renderList = [];
 
@@ -35,9 +34,9 @@ THREE.Renderer = function() {
 
 		}
 
-		for ( i = 0; i < scene.objects.length; i++ ) {
+		for ( o = 0, ol = scene.objects.length; o < ol; o++ ) {
 
-			object = scene.objects[i];
+			object = scene.objects[ o ];
 
 			if( object.autoUpdateMatrix ) {
 
@@ -47,18 +46,16 @@ THREE.Renderer = function() {
 
 			if ( object instanceof THREE.Mesh ) {
 
-				matrix.multiply( camera.matrix, object.matrix );
+				viewMatrix.multiply( camera.matrix, object.matrix );
 
 				// vertices
 
-				verticesLength = object.geometry.vertices.length;
+				for ( v = 0, vl = object.geometry.vertices.length; v < vl; v++ ) {
 
-				for ( j = 0; j < verticesLength; j++ ) {
-
-					vertex = object.geometry.vertices[ j ];
+					vertex = object.geometry.vertices[ v ];
 					vertex.screen.copy( vertex.position );
 
-					matrix.transform( vertex.screen );
+					viewMatrix.transform( vertex.screen );
 					camera.projectionMatrix.transform( vertex.screen );
 
 					vertex.__visible = vertex.screen.z > 0 && vertex.screen.z < 1;
@@ -67,15 +64,13 @@ THREE.Renderer = function() {
 
 				// faces
 
-				facesLength = object.geometry.faces.length;
-
-				for ( j = 0; j < facesLength; j++ ) {
+				for ( f = 0, fl = object.geometry.faces.length; f < fl; f++ ) {
 
-					face = object.geometry.faces[ j ];
+					face = object.geometry.faces[ f ];
 
 					// TODO: Use normals for culling... maybe not?
 
-					if (face instanceof THREE.Face3) {
+					if ( face instanceof THREE.Face3 ) {
 
 						v1 = object.geometry.vertices[ face.a ];
 						v2 = object.geometry.vertices[ face.b ];
@@ -83,7 +78,7 @@ THREE.Renderer = function() {
 
 						if ( v1.__visible && v2.__visible && v3.__visible && ( object.doubleSided ||
 						   ( v3.screen.x - v1.screen.x ) * ( v2.screen.y - v1.screen.y ) -
-						   ( v3.screen.y - v1.screen.y ) * ( v2.screen.x - v1.screen.x ) > 0 ) ) {
+						   ( v3.screen.y - v1.screen.y ) * ( v2.screen.x - v1.screen.x ) < 0 ) ) {
 
 							face.screen.z = Math.max( v1.screen.z, Math.max( v2.screen.z, v3.screen.z ) );
 
@@ -103,7 +98,7 @@ THREE.Renderer = function() {
 
 							face3Pool[ face3count ].material = object.material;
 							face3Pool[ face3count ].overdraw = object.overdraw;
-							face3Pool[ face3count ].uvs = object.geometry.uvs[j];
+							face3Pool[ face3count ].uvs = object.geometry.uvs[ f ];
 							face3Pool[ face3count ].color = face.color;
 
 							this.renderList.push(face3Pool[face3count]);
@@ -120,9 +115,9 @@ THREE.Renderer = function() {
 
 						if ( v1.__visible && v2.__visible && v3.__visible && v4.__visible && (object.doubleSided ||
 						   ( ( v4.screen.x - v1.screen.x ) * ( v2.screen.y - v1.screen.y ) -
-						   ( v4.screen.y - v1.screen.y ) * ( v2.screen.x - v1.screen.x ) > 0 ||
+						   ( v4.screen.y - v1.screen.y ) * ( v2.screen.x - v1.screen.x ) < 0 ||
 						   ( v2.screen.x - v3.screen.x ) * ( v4.screen.y - v3.screen.y ) -
-						   ( v2.screen.y - v3.screen.y ) * ( v4.screen.x - v3.screen.x ) > 0 ) ) ) {
+						   ( v2.screen.y - v3.screen.y ) * ( v4.screen.x - v3.screen.x ) < 0 ) ) ) {
 
 							face.screen.z = Math.max( v1.screen.z, Math.max( v2.screen.z, Math.max( v3.screen.z, v4.screen.z ) ) );
 
@@ -144,7 +139,7 @@ THREE.Renderer = function() {
 
 							face4Pool[ face4count ].material = object.material;
 							face4Pool[ face4count ].overdraw = object.overdraw;
-							face4Pool[ face4count ].uvs = object.geometry.uvs[j];
+							face4Pool[ face4count ].uvs = object.geometry.uvs[ f ];
 							face4Pool[ face4count ].color = face.color;
 
 							this.renderList.push( face4Pool[ face4count ] );
@@ -156,23 +151,21 @@ THREE.Renderer = function() {
 
 			} else if ( object instanceof THREE.Line ) {
 
-				matrix.multiply( camera.matrix, object.matrix );
-
-				verticesLength = object.geometry.vertices.length;
+				viewMatrix.multiply( camera.matrix, object.matrix );
 
-				for ( j = 0; j < verticesLength; j++ ) {
+				for ( v = 0, vl = object.geometry.vertices.length; v < vl; v++ ) {
 
-					vertex = object.geometry.vertices[ j ];
+					vertex = object.geometry.vertices[ v ];
 					vertex.screen.copy( vertex.position );
 
-					matrix.transform( vertex.screen );
+					viewMatrix.transform( vertex.screen );
 					camera.projectionMatrix.transform( vertex.screen );
 
 					vertex.__visible = vertex.screen.z > 0 && vertex.screen.z < 1;
 
-					if ( j > 0 ) {
+					if ( v > 0 ) {
 
-						vertex2 = object.geometry.vertices[ j - 1 ];
+						vertex2 = object.geometry.vertices[ v - 1 ];
 
 						if ( vertex.__visible && vertex2.__visible ) {
 

src/renderers/SVGRenderer.js

@@ -6,14 +6,14 @@ THREE.SVGRenderer = function () {
 
 	THREE.Renderer.call( this );
 
-	var _viewport = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
+	var _svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
 	_width, _height, _widthHalf, _heightHalf,
 	_clipRect = new THREE.Rectangle(),
 	_bboxRect = new THREE.Rectangle(),
 	_svgPathPool = [], _svgCirclePool = [],
 	_quality = 1;
 
-	this.domElement = _viewport;
+	this.domElement = _svg;
 	this.autoClear = true;
 
 	this.setQuality = function( quality ) {
@@ -32,9 +32,9 @@ THREE.SVGRenderer = function () {
 		_width = width; _height = height;
 		_widthHalf = _width / 2; _heightHalf = _height / 2;
 
-		_viewport.setAttribute( 'viewBox', ( - _widthHalf ) + ' ' + ( - _heightHalf ) + ' ' + _width + ' ' + _height );
-		_viewport.setAttribute( 'width', _width );
-		_viewport.setAttribute( 'height', _height );
+		_svg.setAttribute( 'viewBox', ( - _widthHalf ) + ' ' + ( - _heightHalf ) + ' ' + _width + ' ' + _height );
+		_svg.setAttribute( 'width', _width );
+		_svg.setAttribute( 'height', _height );
 
 		_clipRect.set( - _widthHalf, - _heightHalf, _widthHalf, _heightHalf );
 
@@ -42,9 +42,9 @@ THREE.SVGRenderer = function () {
 
 	this.clear = function () {
 
-		while ( _viewport.childNodes.length > 0 ) {
+		while ( _svg.childNodes.length > 0 ) {
 
-			_viewport.removeChild( _viewport.childNodes[ 0 ] );
+			_svg.removeChild( _svg.childNodes[ 0 ] );
 
 		}
 
@@ -52,7 +52,7 @@ THREE.SVGRenderer = function () {
 
 	this.render = function ( scene, camera ) {
 
-		var i, j, element, elementsLength, material, materialLength,
+		var e, el, m, ml, element, material,
 		pathCount = 0, circleCount = 0, svgNode,
 		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y,
 		size;
@@ -65,22 +65,19 @@ THREE.SVGRenderer = function () {
 
 		this.project( scene, camera );
 
-		elementsLength = this.renderList.length;
+		for ( e = 0, el = this.renderList.length; e < el; e++ ) {
 
-		for ( i = 0; i < elementsLength; i++ ) {
+			element = this.renderList[ e ];
 
-			element = this.renderList[ i ];
-			materialLength = element.material.length;
+			for ( m = 0, ml = element.material.length; m < ml; m++ ) {
 
-			for ( j = 0; j < materialLength; j++ ) {
-
-				material = element.material[ j ];
+				material = element.material[ m ];
 
 				_bboxRect.empty();
 
 				if ( element instanceof THREE.RenderableParticle ) {
 
-					v1x = element.x * _widthHalf; v1y = element.y * _heightHalf;
+					v1x = element.x * _widthHalf; v1y = element.y * -_heightHalf;
 					size = element.size  * _widthHalf;
 
 					_bboxRect.set( v1x - size, v1y - size, v1x + size, v1y + size );
@@ -98,9 +95,9 @@ THREE.SVGRenderer = function () {
 
 				} else if ( element instanceof THREE.RenderableFace3 ) {
 
-					v1x = element.v1.x * _widthHalf; v1y = element.v1.y * _heightHalf;
-					v2x = element.v2.x * _widthHalf; v2y = element.v2.y * _heightHalf;
-					v3x = element.v3.x * _widthHalf; v3y = element.v3.y * _heightHalf;
+					v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
+					v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
+					v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
 
 					_bboxRect.addPoint( v1x, v1y );
 					_bboxRect.addPoint( v2x, v2y );
@@ -117,10 +114,10 @@ THREE.SVGRenderer = function () {
 
 				} else if ( element instanceof THREE.RenderableFace4 ) {
 
-					v1x = element.v1.x * _widthHalf; v1y = element.v1.y * _heightHalf;
-					v2x = element.v2.x * _widthHalf; v2y = element.v2.y * _heightHalf;
-					v3x = element.v3.x * _widthHalf; v3y = element.v3.y * _heightHalf;
-					v4x = element.v4.x * _widthHalf; v4y = element.v4.y * _heightHalf;
+					v1x = element.v1.x * _widthHalf; v1y = element.v1.y * -_heightHalf;
+					v2x = element.v2.x * _widthHalf; v2y = element.v2.y * -_heightHalf;
+					v3x = element.v3.x * _widthHalf; v3y = element.v3.y * -_heightHalf;
+					v4x = element.v4.x * _widthHalf; v4y = element.v4.y * -_heightHalf;
 
 					_bboxRect.addPoint( v1x, v1y );
 					_bboxRect.addPoint( v2x, v2y );
@@ -158,7 +155,7 @@ THREE.SVGRenderer = function () {
 
 				}
 
-				_viewport.appendChild( svgNode );
+				_svg.appendChild( svgNode );
 
 			}
 

src/renderers/WebGLRenderer.js

@@ -0,0 +1,299 @@
+/**
+ * @author supereggbert / http://www.paulbrunt.co.uk/
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.WebGLRenderer = function () {
+
+	var _canvas = document.createElement( 'canvas' ), _gl, _program,
+	viewMatrix = new THREE.Matrix4();
+
+	this.domElement = _canvas;
+	this.autoClear = true;
+
+	initGL();
+	initProgram();
+
+	this.setSize = function ( width, height ) {
+
+		_canvas.width = width;
+		_canvas.height = height;
+		_gl.viewport( 0, 0, _canvas.width, _canvas.height );
+
+	};
+
+	this.clear = function () {
+
+		_gl.clear( _gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT );
+
+	};
+
+	this.render = function ( scene, camera ) {
+
+		var face, faceColor, object, material,
+		vertexArray, faceArray, colorArray, vertexIndex,
+		o, ol, f, fl, m, ml, i, v1, v2, v3, v4;
+
+		if ( this.autoClear ) {
+
+			this.clear();
+
+		}
+
+		for ( o = 0, ol = scene.objects.length; o < ol; o++ ) {
+
+			object = scene.objects[ o ];
+
+			if ( object instanceof THREE.Mesh ) {
+
+				if ( !object.__webGLVertexBuffer ) {
+
+					vertexArray = [];
+					faceArray = [];
+					colorArray = [];
+					vertexIndex = 0;
+
+					for ( f = 0, fl = object.geometry.faces.length; f < fl; f++ ) {
+
+						face = object.geometry.faces[ f ];
+						faceColor = face.color;
+
+						if ( face instanceof THREE.Face3 ) {
+
+							v1 = object.geometry.vertices[ face.a ].position;
+							v2 = object.geometry.vertices[ face.b ].position;
+							v3 = object.geometry.vertices[ face.c ].position;
+
+							vertexArray.push( v1.x, v1.y, v1.z );
+							vertexArray.push( v2.x, v2.y, v2.z );
+							vertexArray.push( v3.x, v3.y, v3.z );
+
+							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
+							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
+							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
+
+							faceArray.push( vertexIndex, vertexIndex + 1, vertexIndex + 2 );
+
+							vertexIndex += 3;
+
+						} else if ( face instanceof THREE.Face4 ) {
+
+							v1 = object.geometry.vertices[ face.a ].position;
+							v2 = object.geometry.vertices[ face.b ].position;
+							v3 = object.geometry.vertices[ face.c ].position;
+							v4 = object.geometry.vertices[ face.d ].position;
+
+							vertexArray.push( v1.x, v1.y, v1.z );
+							vertexArray.push( v2.x, v2.y, v2.z );
+							vertexArray.push( v3.x, v3.y, v3.z );
+							vertexArray.push( v4.x, v4.y, v4.z );
+
+							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
+							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
+							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
+							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
+
+							faceArray.push( vertexIndex, vertexIndex + 1, vertexIndex + 2 );
+							faceArray.push( vertexIndex, vertexIndex + 2, vertexIndex + 3 );
+
+							vertexIndex += 4;
+						}
+					}
+
+					if ( !vertexArray.length ) {
+
+						continue;
+
+					}
+
+					object.__webGLVertexBuffer = _gl.createBuffer();
+					_gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webGLVertexBuffer );
+					_gl.bufferData( _gl.ARRAY_BUFFER, new WebGLFloatArray( vertexArray ), _gl.STATIC_DRAW );
+
+					object.__webGLColorBuffer = _gl.createBuffer();
+					_gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webGLColorBuffer );
+					_gl.bufferData( _gl.ARRAY_BUFFER, new WebGLFloatArray( colorArray ), _gl.STATIC_DRAW );
+
+					object.__webGLFaceBuffer = _gl.createBuffer();
+					_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, object.__webGLFaceBuffer );
+					_gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray( faceArray ), _gl.STATIC_DRAW );
+
+					object.__webGLFaceCount = faceArray.length;
+
+				}
+
+
+				viewMatrix.multiply( camera.matrix, object.matrix );
+
+				matrix2Array( viewMatrix, _program.viewMatrixArray );
+				matrix2Array( camera.projectionMatrix, _program.projectionMatrixArray );
+
+				_gl.uniformMatrix4fv( _program.viewMatrix, false, _program.viewMatrixArray );
+				_gl.uniformMatrix4fv( _program.projectionMatrix, false, _program.projectionMatrixArray );
+
+				_gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webGLVertexBuffer );
+				_gl.vertexAttribPointer( _program.position, 3, _gl.FLOAT, false, 0, 0 );
+
+
+				for ( m = 0, ml = object.material.length; m < ml; m++ ) {
+
+					material = object.material[ m ];
+
+					if ( material instanceof THREE.ColorFillMaterial ) {
+
+						if ( !material.__webGLColorBuffer ) {
+
+							colorArray = [];
+
+							for ( i = 0; i < object.__webGLFaceCount; i ++ ) {
+
+								colorArray.push( material.color.r, material.color.g, material.color.b, material.color.a );
+
+							}
+
+							material.__webGLColorBuffer = _gl.createBuffer();
+							_gl.bindBuffer( _gl.ARRAY_BUFFER, material.__webGLColorBuffer );
+							_gl.bufferData( _gl.ARRAY_BUFFER, new WebGLFloatArray( colorArray ), _gl.STATIC_DRAW );
+
+						}
+
+						_gl.bindBuffer( _gl.ARRAY_BUFFER, material.__webGLColorBuffer );
+						_gl.vertexAttribPointer( _program.color, 4, _gl.FLOAT, false, 0, 0 );
+
+					} else if ( material instanceof THREE.FaceColorFillMaterial ) {
+
+						_gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webGLColorBuffer );
+						_gl.enableVertexAttribArray( _program.color );
+						_gl.vertexAttribPointer( _program.color, 4, _gl.FLOAT, false, 0, 0 );
+
+					}
+
+				}
+
+				_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, object.__webGLFaceBuffer );
+				_gl.drawElements( _gl.TRIANGLES, object.__webGLFaceCount, _gl.UNSIGNED_SHORT, 0 );
+
+			}
+		}
+
+	};
+
+	function initGL() {
+
+		try {
+
+			_gl = _canvas.getContext( 'experimental-webgl' );
+
+		} catch(e) { }
+
+		if (!_gl) {
+
+			alert("WebGL not supported");
+			throw "cannot create webgl context";
+
+		}
+
+		_gl.clearColor( 0, 0, 0, 1 );
+		_gl.clearDepth( 1 );
+
+		_gl.enable( _gl.DEPTH_TEST );
+		_gl.depthFunc( _gl.LEQUAL );
+
+		_gl.enable( _gl.BLEND );
+		_gl.blendFunc( _gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA );
+		// _gl.blendFunc( _gl.SRC_ALPHA, _gl.ONE ); // cool!
+		_gl.clearColor( 0, 0, 0, 0 );
+
+	}
+
+	function initProgram() {
+
+		_program = _gl.createProgram();
+
+		_gl.attachShader( _program, getShader( "fragment", [
+								"varying vec4 vcolor;",
+
+								"void main(){",
+
+									"gl_FragColor = vcolor;",
+
+								"}"].join("") ) );
+
+		_gl.attachShader( _program, getShader( "vertex", [
+								"attribute vec3 position;",
+								"attribute vec4 color;",
+
+								"uniform mat4 viewMatrix;",
+								"uniform mat4 projectionMatrix;",
+								"varying vec4 vcolor;",
+
+								"void main(void) {",
+
+									"vcolor = color;",
+									"gl_Position = projectionMatrix * viewMatrix * vec4( position, 1 );",
+
+								"}"].join("") ) );
+
+		_gl.linkProgram( _program );
+
+		if ( !_gl.getProgramParameter( _program, _gl.LINK_STATUS ) ) {
+
+			alert( "Could not initialise shaders" );
+
+		}
+
+		_gl.useProgram( _program );
+
+		_program.viewMatrix = _gl.getUniformLocation( _program, "viewMatrix" );
+		_program.projectionMatrix = _gl.getUniformLocation( _program, "projectionMatrix" );
+
+		_program.color = _gl.getAttribLocation( _program, "color" );
+		_gl.enableVertexAttribArray( _program.color );
+
+		_program.position = _gl.getAttribLocation( _program, "position" );
+		_gl.enableVertexAttribArray( _program.position );
+
+		_program.viewMatrixArray = new WebGLFloatArray( 16 );
+		_program.projectionMatrixArray = new WebGLFloatArray( 16 );
+
+	}
+
+	function getShader( type, string ) {
+
+		var shader;
+
+		if ( type == "fragment" ) {
+
+			shader = _gl.createShader( _gl.FRAGMENT_SHADER );
+
+		} else if ( type == "vertex" ) {
+
+			shader = _gl.createShader( _gl.VERTEX_SHADER );
+
+		}
+
+		_gl.shaderSource( shader, string );
+		_gl.compileShader( shader );
+
+		if ( !_gl.getShaderParameter( shader, _gl.COMPILE_STATUS ) ) {
+
+			alert( _gl.getShaderInfoLog( shader ) );
+			return null;
+
+		}
+
+		return shader;
+	}
+
+	function matrix2Array( matrix, array ) {
+
+		// Also flatten
+
+		array[ 0 ] = matrix.n11; array[ 1 ] = matrix.n21; array[ 2 ] = matrix.n31; array[ 3 ] = matrix.n41;
+		array[ 4 ] = matrix.n12; array[ 5 ] = matrix.n22; array[ 6 ] = matrix.n32; array[ 7 ] = matrix.n42;
+		array[ 8 ] = matrix.n13; array[ 9 ] = matrix.n23; array[ 10 ] = matrix.n33; array[ 11 ] = matrix.n43;
+		array[ 12 ] = matrix.n14; array[ 13 ] = matrix.n24; array[ 14 ] = matrix.n34; array[ 15 ] = matrix.n44;
+
+	}
+
+};

utils/deployer.py

@@ -3,7 +3,7 @@ import os
 
 # MERGER
 
-rev = 11;
+rev = 12;
 
 files = [];
 files.append('Three.js');
@@ -31,6 +31,7 @@ files.append('scenes/Scene.js');
 files.append('renderers/Renderer.js');
 files.append('renderers/CanvasRenderer.js');
 files.append('renderers/SVGRenderer.js');
+files.append('renderers/WebGLRenderer.js');
 files.append('renderers/renderables/RenderableFace3.js');
 files.append('renderers/renderables/RenderableFace4.js');
 files.append('renderers/renderables/RenderableParticle.js');
@@ -42,15 +43,15 @@ for item in files:
 	src_file = open('../src/' + item,'r');
 	string += src_file.read() + "\n";
 
-dep_file = open('temp.js','w');
-dep_file.write(string);
-dep_file.close();
+tmp_file = open('temp.js','w');
+tmp_file.write(string);
+tmp_file.close();
 
 
 # YUICOMPRESSOR
 
 os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/three.js --charset utf-8 -v");
-
+os.unlink("temp.js");
 
 # HEADER