Experimenting with array-less materials.

Do not use for anything, this is just snapshot of a test in progress. I solved quite a few issues, but many things are still clumsy and broken.

examples/js/Car.js

@@ -106,8 +106,8 @@ THREE.Car = function () {
 
 		var loader = new THREE.JSONLoader();
 
-		loader.load( { model: bodyURL, callback: function( geometry ) { createBody( geometry ) } } );
-		loader.load( { model: wheelURL, callback: function( geometry ) { createWheels( geometry ) } } );
+		loader.load( bodyURL, function( geometry ) { createBody( geometry ) } );
+		loader.load( wheelURL, function( geometry ) { createWheels( geometry ) } );
 
 	};
 
@@ -115,8 +115,8 @@ THREE.Car = function () {
 
 		var loader = new THREE.BinaryLoader();
 
-		loader.load( { model: bodyURL, callback: function( geometry ) { createBody( geometry ) } } );
-		loader.load( { model: wheelURL, callback: function( geometry ) { createWheels( geometry ) } } );
+		loader.load( bodyURL, function( geometry ) { createBody( geometry ) } );
+		loader.load( wheelURL, function( geometry ) { createWheels( geometry ) } );
 
 	};
 

examples/js/postprocessing/BloomPass.js

@@ -65,7 +65,7 @@ THREE.BloomPass.prototype = {
 
 		// Render quad with blured scene into texture (convolution pass 1)
 
-		THREE.EffectComposer.quad.materials[ 0 ] = this.materialConvolution;
+		THREE.EffectComposer.quad.material = this.materialConvolution;
 
 		this.convolutionUniforms[ "tDiffuse" ].texture = readBuffer;
 		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;
@@ -82,7 +82,7 @@ THREE.BloomPass.prototype = {
 
 		// Render original scene with superimposed blur to texture
 
-		THREE.EffectComposer.quad.materials[ 0 ] = this.materialScreen;
+		THREE.EffectComposer.quad.material = this.materialScreen;
 
 		this.screenUniforms[ "tDiffuse" ].texture = this.renderTargetY;
 

examples/js/postprocessing/DotScreenPass.js

@@ -35,7 +35,7 @@ THREE.DotScreenPass.prototype = {
 		this.uniforms[ "tDiffuse" ].texture = readBuffer;
 		this.uniforms[ "tSize" ].value.set( readBuffer.width, readBuffer.height );
 
-		THREE.EffectComposer.quad.materials[ 0 ] = this.material;
+		THREE.EffectComposer.quad.material = this.material;
 
 		if ( this.renderToScreen ) {
 

examples/js/postprocessing/FilmPass.js

@@ -34,7 +34,7 @@ THREE.FilmPass.prototype = {
 		this.uniforms[ "tDiffuse" ].texture = readBuffer;
 		this.uniforms[ "time" ].value += delta;
 
-		THREE.EffectComposer.quad.materials[ 0 ] = this.material;
+		THREE.EffectComposer.quad.material = this.material;
 
 		if ( this.renderToScreen ) {
 

examples/js/postprocessing/SavePass.js

@@ -43,7 +43,7 @@ THREE.SavePass.prototype = {
 
 		}
 
-		THREE.EffectComposer.quad.materials[ 0 ] = this.material;
+		THREE.EffectComposer.quad.material = this.material;
 
 		renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, this.renderTarget, this.clear );
 

examples/js/postprocessing/ShaderPass.js

@@ -34,7 +34,7 @@ THREE.ShaderPass.prototype = {
 
 		}
 
-		THREE.EffectComposer.quad.materials[ 0 ] = this.material;
+		THREE.EffectComposer.quad.material = this.material;
 
 		if ( this.renderToScreen ) {
 

examples/js/postprocessing/TexturePass.js

@@ -28,7 +28,7 @@ THREE.TexturePass.prototype = {
 
 	render: function ( renderer, writeBuffer, readBuffer, delta ) {
 
-		THREE.EffectComposer.quad.materials[ 0 ] = this.material;
+		THREE.EffectComposer.quad.material = this.material;
 
 		renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, readBuffer );
 

examples/webgl_animation_skinning.html

@@ -140,7 +140,7 @@
 
 				var material = new THREE.MeshFaceMaterial();
 
-				var originalMaterial = geometry.materials[ 0 ][ 0 ];
+				var originalMaterial = geometry.materials[ 0 ];
 
 				originalMaterial.skinning = true;
 				originalMaterial.transparent = true;

examples/webgl_geometry_blenderexport_colors.html

@@ -91,20 +91,24 @@
 
 			function createScene1( geometry ) {
 
-				geometry.materials[0][0].shading = THREE.FlatShading;
+				geometry.materials[ 0 ].shading = THREE.FlatShading;
 
-				var material = [ new THREE.MeshFaceMaterial(), new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframeLinewidth: 2 } ) ];
-
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new THREE.Object3D();
 				mesh.position.x = 400;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 250;
 				scene.add( mesh );
 
+				var part1 = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
+				mesh.add( part1 );
+
+				var part2 = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 0.9, shading: THREE.FlatShading, wireframe: true, wireframeLinewidth: 2, transparent: true } ) );
+				mesh.add( part2 );
+
 			}
 
 			function createScene2( geometry ) {
 
-				geometry.materials[0][0].shading = THREE.FlatShading;
+				geometry.materials[ 0 ].shading = THREE.FlatShading;
 
 				var material = new THREE.MeshFaceMaterial();
 

examples/webgl_geometry_colors.html

@@ -48,7 +48,7 @@
 
 			var camera, scene, renderer;
 
-			var mesh, mesh2, mesh3, light;
+			var group1, group2, group3, light;
 
 			var mouseX = 0, mouseY = 0;
 
@@ -100,7 +100,7 @@
 					geometry2 = new THREE.IcosahedronGeometry( 1 ),
 					geometry3 = new THREE.IcosahedronGeometry( 1 );
 
-				for ( var i = 0; i < geometry.faces.length; i++ ) {
+				for ( var i = 0; i < geometry.faces.length; i ++ ) {
 
 					f  = geometry.faces[ i ];
 					f2 = geometry2.faces[ i ];
@@ -137,27 +137,45 @@
 				var materials = [
 
 					new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
+					new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true } )
 
 				];
 
-				mesh = new THREE.Mesh( geometry, materials  );
-				mesh.position.x = -400;
-				mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;
-				mesh.rotation.x = -1.87;
-				scene.add( mesh );
+				group1 = new THREE.Object3D();
+				group1.position.x = -400;
+				group1.scale.x = group1.scale.y = group1.scale.z = 200;
+				group1.rotation.x = -1.87;
+				scene.add( group1 );
+
+				var p1 = new THREE.Mesh( geometry, materials[ 0 ] );
+				var p2 = new THREE.Mesh( geometry, materials[ 1 ] );
+
+				group1.add( p1 );
+				group1.add( p2 );
+
+				group2 = new THREE.Object3D();
+				group2.position.x = 400;
+				group2.rotation.x = 0;
+				group2.scale = group1.scale;
+				scene.add( group2 );
+
+				var p1 = new THREE.Mesh( geometry2, materials[ 0 ] );
+				var p2 = new THREE.Mesh( geometry2, materials[ 1 ] );
+
+				group2.add( p1 );
+				group2.add( p2 );
+
+				group3 = new THREE.Object3D();
+				group3.position.x = 0;
+				group3.rotation.x = 0;
+				group3.scale = group1.scale;
+				scene.add( group3 );
+
+				var p1 = new THREE.Mesh( geometry3, materials[ 0 ] );
+				var p2 = new THREE.Mesh( geometry3, materials[ 1 ] );
 
-				mesh2 = new THREE.Mesh( geometry2, materials  );
-				mesh2.position.x = 400;
-				mesh2.rotation.x = 0;
-				mesh2.scale = mesh.scale;
-				scene.add( mesh2 );
-
-				mesh3 = new THREE.Mesh( geometry3, materials  );
-				mesh3.position.x = 0;
-				mesh3.rotation.x = 0;
-				mesh3.scale = mesh.scale;
-				scene.add( mesh3 );
+				group3.add( p1 );
+				group3.add( p2 );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgl_geometry_text.html

@@ -441,11 +441,13 @@
 
 					bend: bend,
 
-					material: textMaterialFront,
-					extrudeMaterial: textMaterialSide
+					material: 0,
+					extrudeMaterial: 1
 
 				});
 
+				textGeo.materials = [ textMaterialFront, textMaterialSide ];
+
 				textGeo.computeBoundingBox();
 				textGeo.computeVertexNormals();
 
@@ -460,7 +462,7 @@
 
 						var face = textGeo.faces[ i ];
 
-						if ( face.materials[ 0 ].id == textMaterialSide.id ) {
+						if ( face.materialIndex == 1 ) {
 
 							for ( var j = 0; j < face.vertexNormals.length; j ++ ) {
 

examples/webgl_interactive_draggablecubes.html

@@ -56,7 +56,7 @@
 
 					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
-					object.materials[ 0 ].ambient = object.materials[ 0 ].color;
+					object.material.ambient = object.material.color;
 
 					object.position.x = Math.random() * 1000 - 500;
 					object.position.y = Math.random() * 600 - 300;
@@ -153,10 +153,10 @@
 
 					if ( INTERSECTED != intersects[ 0 ].object ) {
 
-						if ( INTERSECTED ) INTERSECTED.materials[ 0 ].color.setHex( INTERSECTED.currentHex );
+						if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
 
 						INTERSECTED = intersects[ 0 ].object;
-						INTERSECTED.currentHex = INTERSECTED.materials[ 0 ].color.getHex();
+						INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
 
 						plane.position.copy( INTERSECTED.position );
 
@@ -166,7 +166,7 @@
 
 				} else {
 
-					if ( INTERSECTED ) INTERSECTED.materials[ 0 ].color.setHex( INTERSECTED.currentHex );
+					if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
 
 					INTERSECTED = null;
 

examples/webgl_materials2.html

@@ -227,7 +227,7 @@
 				pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 				scene.add( pointLight );
 
-				particleLight.materials[ 0 ].color = pointLight.color;
+				particleLight.material.color = pointLight.color;
 				pointLight.position = particleLight.position;
 
 				//

examples/webgl_materials_cars.html

@@ -532,9 +532,9 @@
 					$( button_name( car, i ) ).counter = i;
 					$( button_name( car, i ) ).addEventListener( 'click', function() {
 
-						for ( var j = 0; j < material_indices.length; j++ ) {
+						for ( var j = 0; j < material_indices.length; j ++ ) {
 
-							geometry.materials[ material_indices [ j ] ][ 0 ] = materials[ this.counter ][ 1 ];
+							geometry.materials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
 
 						}
 
@@ -557,7 +557,7 @@
 
 				for ( var i in CARS[ car ].mmap ) {
 
-					geometry.materials[ i ][ 0 ] = CARS[ car ].mmap[ i ];
+					geometry.materials[ i ] = CARS[ car ].mmap[ i ];
 
 				}
 

examples/webgl_materials_cars_camaro.html

@@ -147,7 +147,7 @@
 
 				var i, src = "", parent = $( "buttons" );
 
-				for( i = 0; i < materials.length; i++ ) {
+				for( i = 0; i < materials.length; i ++ ) {
 
 					src += '<button id="m' + i + '">' + materials[ i ][ 0 ] + '</button>';
 
@@ -158,7 +158,7 @@
 				for( i = 0; i < materials.length; i ++ ) {
 
 					$( "m" + i ).counter = i;
-					$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ][ 0 ] = materials[ this.counter ][ 1 ] }, false );
+					$( "m" + i ).addEventListener( 'click', function() { geometry.materials[ 0 ] = materials[ this.counter ][ 1 ] }, false );
 
 				}
 
@@ -168,15 +168,15 @@
 
 				var s = 75, m = new THREE.MeshFaceMaterial();
 
-				geometry.materials[ 0 ][ 0 ] = materials.body[ 0 ][ 1 ]; // car body
-				geometry.materials[ 1 ][ 0 ] = materials.chrome; // wheels chrome
-				geometry.materials[ 2 ][ 0 ] = materials.chrome; // grille chrome
-				geometry.materials[ 3 ][ 0 ] = materials.darkchrome; // door lines
-				geometry.materials[ 4 ][ 0 ] = materials.glass; // windshield
-				geometry.materials[ 5 ][ 0 ] = materials.interior; // interior
-				geometry.materials[ 6 ][ 0 ] = materials.tire; // tire
-				geometry.materials[ 7 ][ 0 ] = materials.black; // tireling
-				geometry.materials[ 8 ][ 0 ] = materials.black; // behind grille
+				geometry.materials[ 0 ] = materials.body[ 0 ][ 1 ]; // car body
+				geometry.materials[ 1 ] = materials.chrome; // wheels chrome
+				geometry.materials[ 2 ] = materials.chrome; // grille chrome
+				geometry.materials[ 3 ] = materials.darkchrome; // door lines
+				geometry.materials[ 4 ] = materials.glass; // windshield
+				geometry.materials[ 5 ] = materials.interior; // interior
+				geometry.materials[ 6 ] = materials.tire; // tire
+				geometry.materials[ 7 ] = materials.black; // tireling
+				geometry.materials[ 8 ] = materials.black; // behind grille
 
 				var mesh = new THREE.Mesh( geometry, m );
 				mesh.rotation.y = 1;

examples/webgl_materials_cubemap_dynamic.html

@@ -51,8 +51,127 @@
 			motion blur: <span class="h">b</span>
 			</div>
 		</div>
-
+<!--
 		<script src="../build/Three.js"></script>
+-->
+		<script type="text/javascript" src="../src/Three.js"></script>
+		<script type="text/javascript" src="../src/core/Clock.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/Ray.js"></script>
+		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
+		<script type="text/javascript" src="../src/core/Math.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
+		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
+		<script type="text/javascript" src="../src/core/Object3D.js"></script>
+		<script type="text/javascript" src="../src/core/Projector.js"></script>
+		<script type="text/javascript" src="../src/core/Quaternion.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/UV.js"></script>
+		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/core/Spline.js"></script>
+		<script type="text/javascript" src="../src/core/Edge.js"></script>
+		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/cameras/OrthographicCamera.js"></script>
+		<script type="text/javascript" src="../src/cameras/PerspectiveCamera.js"></script>
+		<script type="text/javascript" src="../src/lights/Light.js"></script>
+		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
+		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
+		<script type="text/javascript" src="../src/lights/PointLight.js"></script>
+		<script type="text/javascript" src="../src/lights/SpotLight.js"></script>
+		<script type="text/javascript" src="../src/materials/Material.js"></script>
+		<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleCanvasMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ShaderMaterial.js"></script>
+		<script type="text/javascript" src="../src/textures/Texture.js"></script>
+		<script type="text/javascript" src="../src/textures/DataTexture.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Bone.js"></script>
+		<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/MorphAnimMesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
+		<script type="text/javascript" src="../src/objects/LOD.js"></script>
+		<script type="text/javascript" src="../src/objects/Sprite.js"></script>
+		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
+		<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
+		<script type="text/javascript" src="../src/renderers/DOMRenderer.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/WebGLShaders.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderTarget.js"></script>
+		<script type="text/javascript" src="../src/renderers/WebGLRenderTargetCube.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableVertex.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/RenderableObject.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="../src/extras/ColorUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/SceneUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/core/Curve.js"></script>
+		<script type="text/javascript" src="../src/extras/core/CurvePath.js"></script>
+		<script type="text/javascript" src="../src/extras/core/Path.js"></script>
+		<script type="text/javascript" src="../src/extras/core/Shape.js"></script>
+		<script type="text/javascript" src="../src/extras/core/TextPath.js"></script>
+		<script type="text/javascript" src="../src/extras/animation/AnimationHandler.js"></script>
+		<script type="text/javascript" src="../src/extras/animation/Animation.js"></script>
+		<script type="text/javascript" src="../src/extras/cameras/CubeCamera.js"></script>
+		<script type="text/javascript" src="../src/extras/cameras/FirstPersonCamera.js"></script>
+		<script type="text/javascript" src="../src/extras/cameras/PathCamera.js"></script>
+		<script type="text/javascript" src="../src/extras/cameras/FlyCamera.js"></script>
+		<script type="text/javascript" src="../src/extras/cameras/RollCamera.js"></script>
+		<script type="text/javascript" src="../src/extras/cameras/TrackballCamera.js"></script>
+		<script type="text/javascript" src="../src/extras/cameras/CombinedCamera.js"></script>
+		<script type="text/javascript" src="../src/extras/controls/FirstPersonControls.js"></script>
+		<script type="text/javascript" src="../src/extras/controls/PathControls.js"></script>
+		<script type="text/javascript" src="../src/extras/controls/FlyControls.js"></script>
+		<script type="text/javascript" src="../src/extras/controls/RollControls.js"></script>
+		<script type="text/javascript" src="../src/extras/controls/TrackballControls.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/CubeGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/CylinderGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/ExtrudeGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/IcosahedronGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/LatheGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/OctahedronGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/PlaneGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/SphereGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/TextGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/TorusGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/geometries/TorusKnotGeometry.js"></script>
+		<script type="text/javascript" src="../src/extras/modifiers/SubdivisionModifier.js"></script>
+		<script type="text/javascript" src="../src/extras/loaders/Loader.js"></script>
+		<script type="text/javascript" src="../src/extras/loaders/BinaryLoader.js"></script>
+		<script type="text/javascript" src="../src/extras/loaders/ColladaLoader.js"></script>
+		<script type="text/javascript" src="../src/extras/loaders/JSONLoader.js"></script>
+		<script type="text/javascript" src="../src/extras/loaders/SceneLoader.js"></script>
+		<script type="text/javascript" src="../src/extras/loaders/UTF8Loader.js"></script>
+		<script type="text/javascript" src="../src/extras/objects/Axes.js"></script>
+		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/physics/Collisions.js"></script>
+		<script type="text/javascript" src="../src/extras/physics/CollisionUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/renderers/AnaglyphWebGLRenderer.js"></script>
+		<script type="text/javascript" src="../src/extras/renderers/CrosseyedWebGLRenderer.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/RequestAnimationFrame.js"></script>
@@ -817,15 +936,15 @@
 
 				var materials = car.bodyGeometry.materials;
 
-				materials[ 0 ][ 0 ] = mlib.body[ 0 ][ 1 ]; 		// body
-				materials[ 1 ][ 0 ] = mlib[ "Dark chrome" ]; 	// front under lights, back
+				materials[ 0 ] = mlib.body[ 0 ][ 1 ]; 		// body
+				materials[ 1 ] = mlib[ "Dark chrome" ]; 	// front under lights, back
 
 				// WHEELS
 
 				materials = car.wheelGeometry.materials;
 
-				materials[ 0 ][ 0 ] = mlib[ "Chrome" ];			// insides
-				materials[ 1 ][ 0 ] = mlib[ "Black rough" ];	// tire
+				materials[ 0 ] = mlib[ "Chrome" ];			// insides
+				materials[ 1 ] = mlib[ "Black rough" ];	// tire
 
 			}
 
@@ -844,21 +963,21 @@
 
 				var materials = car.bodyGeometry.materials;
 
-				materials[ 0 ][ 0 ] = mlib[ "Black metal" ];	// top, front center, back sides
-				materials[ 1 ][ 0 ] = mlib[ "Chrome" ];			// front sides
-				materials[ 2 ][ 0 ] = mlib[ "Chrome" ];			// engine
-				materials[ 3 ][ 0 ] = mlib[ "Dark chrome" ];	// small chrome things
-				materials[ 4 ][ 0 ] = mlib[ "Red glass" ];		// backlights
-				materials[ 5 ][ 0 ] = mlib[ "Orange glass" ];	// back signals
-				materials[ 6 ][ 0 ] = mlib[ "Black rough" ];	// bottom, interior
-				materials[ 7 ][ 0 ] = mlib[ "Dark glass" ];		// windshield
+				materials[ 0 ] = mlib[ "Black metal" ];	// top, front center, back sides
+				materials[ 1 ] = mlib[ "Chrome" ];			// front sides
+				materials[ 2 ] = mlib[ "Chrome" ];			// engine
+				materials[ 3 ] = mlib[ "Dark chrome" ];	// small chrome things
+				materials[ 4 ] = mlib[ "Red glass" ];		// backlights
+				materials[ 5 ] = mlib[ "Orange glass" ];	// back signals
+				materials[ 6 ] = mlib[ "Black rough" ];	// bottom, interior
+				materials[ 7 ] = mlib[ "Dark glass" ];		// windshield
 
 				// WHEELS
 
 				materials = car.wheelGeometry.materials;
 
-				materials[ 0 ][ 0 ] = mlib[ "Chrome" ];			// insides
-				materials[ 1 ][ 0 ] = mlib[ "Black rough" ];	// tire
+				materials[ 0 ] = mlib[ "Chrome" ];			// insides
+				materials[ 1 ] = mlib[ "Black rough" ];	// tire
 
 			}
 
@@ -900,16 +1019,16 @@
 
 					if ( veyron.loaded ) {
 
-						veyron.bodyGeometry.materials[ 1 ][ 0 ] = mlib[ "ChromeN" ];
-						veyron.bodyGeometry.materials[ 2 ][ 0 ] = mlib[ "ChromeN" ];
+						veyron.bodyGeometry.materials[ 1 ] = mlib[ "ChromeN" ];
+						veyron.bodyGeometry.materials[ 2 ] = mlib[ "ChromeN" ];
 
-						veyron.wheelGeometry.materials[ 0 ][ 0 ] = mlib[ "ChromeN" ];
+						veyron.wheelGeometry.materials[ 0 ] = mlib[ "ChromeN" ];
 
 					}
 
 					if ( gallardo.loaded ) {
 
-						gallardo.wheelGeometry.materials[ 0 ][ 0 ] = mlib[ "ChromeN" ];
+						gallardo.wheelGeometry.materials[ 0 ] = mlib[ "ChromeN" ];
 
 					}
 
@@ -917,16 +1036,16 @@
 
 					if ( veyron.loaded ) {
 
-						veyron.bodyGeometry.materials[ 1 ][ 0 ] = mlib[ "Chrome" ];
-						veyron.bodyGeometry.materials[ 2 ][ 0 ] = mlib[ "Chrome" ];
+						veyron.bodyGeometry.materials[ 1 ] = mlib[ "Chrome" ];
+						veyron.bodyGeometry.materials[ 2 ] = mlib[ "Chrome" ];
 
-						veyron.wheelGeometry.materials[ 0 ][ 0 ] = mlib[ "Chrome" ];
+						veyron.wheelGeometry.materials[ 0 ] = mlib[ "Chrome" ];
 
 					}
 
 					if ( gallardo.loaded ) {
 
-						gallardo.wheelGeometry.materials[ 0 ][ 0 ] = mlib[ "Chrome" ];
+						gallardo.wheelGeometry.materials[ 0 ] = mlib[ "Chrome" ];
 
 					}
 

examples/webgl_materials_grass.html

@@ -47,7 +47,7 @@
 				for ( var i = 0; i < 15; i ++ ) {
 
 					mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( bitmap ) ), transparent: true, depthTest: false } ) );
-					mesh.materials[0].map.needsUpdate = true;
+					mesh.material.map.needsUpdate = true;
 
 					mesh.rotation.x = - 90 * ( Math.PI / 180 );
 					mesh.position.y = i * 0.25;

examples/webgl_materials_normalmap.html

@@ -222,6 +222,8 @@
 
 				geometry.computeTangents();
 
+				geometry.materials = [ material1 ];
+
 				mesh1 = new THREE.Mesh( geometry, material1 );
 				mesh1.position.x = - scale * 12;
 				mesh1.scale.set( scale, scale, scale );
@@ -238,6 +240,8 @@
 
 				loader.statusDomElement.style.display = "none";
 
+				console.log( mesh1 );
+
 			}
 
 			function onDocumentMouseMove(event) {

examples/webgl_shader_lava.html

@@ -170,7 +170,7 @@
 
 				} );
 
-				mesh = new THREE.Mesh( new THREE.TorusGeometry( size, 0.3, 30, 30 ), [ material /*, new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2 } ) */ ] );
+				mesh = new THREE.Mesh( new THREE.TorusGeometry( size, 0.3, 30, 30 ), material );
 				mesh.rotation.x = 0.3;
 				scene.add( mesh );
 

examples/webgl_shading_physical.html

@@ -346,7 +346,7 @@
 
 					var tmpMesh = new THREE.Mesh( geometry, material );
 
-					THREE.ColorUtils.adjustHSV( tmpMesh.materials[ 0 ].color, 0.1, -0.1, 0 );
+					THREE.ColorUtils.adjustHSV( tmpMesh.material.color, 0.1, -0.1, 0 );
 
 					tmpMesh.position.set( x, y, z );
 

examples/webgl_shadowmap.html

@@ -247,6 +247,8 @@
 
 					var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
 
+					geometry.materials[ 0 ] = material;
+
 					if ( fudgeColor ) {
 
 						THREE.ColorUtils.adjustHSV( material.color, 0, 0.5 - Math.random(), 0.5 - Math.random() );

src/core/Face3.js

@@ -3,9 +3,9 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.Face3 = function ( a, b, c, normal, color, materials ) {
+THREE.Face3 = function ( a, b, c, normal, color, materialIndex ) {
 
-	this.a = a; 
+	this.a = a;
 	this.b = b;
 	this.c = c;
 
@@ -17,7 +17,7 @@ THREE.Face3 = function ( a, b, c, normal, color, materials ) {
 
 	this.vertexTangents = [];
 
-	this.materials = materials instanceof Array ? materials : [ materials ];
+	this.materialIndex = materialIndex;
 
 	this.centroid = new THREE.Vector3();
 

src/core/Face4.js

@@ -3,9 +3,9 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.Face4 = function ( a, b, c, d, normal, color, materials ) {
+THREE.Face4 = function ( a, b, c, d, normal, color, materialIndex ) {
 
-	this.a = a; 
+	this.a = a;
 	this.b = b;
 	this.c = c;
 	this.d = d;
@@ -18,7 +18,7 @@ THREE.Face4 = function ( a, b, c, d, normal, color, materials ) {
 
 	this.vertexTangents = [];
 
-	this.materials = materials instanceof Array ? materials : [ materials ];
+	this.materialIndex = materialIndex;
 
 	this.centroid = new THREE.Vector3();
 

src/core/Geometry.js

@@ -13,6 +13,8 @@ THREE.Geometry = function () {
 	this.vertices = [];
 	this.colors = []; // one-to-one vertex colors, used in ParticleSystem, Line and Ribbon
 
+	this.materials = [];
+
 	this.faces = [];
 
 	this.faceUvs = [[]];
@@ -435,27 +437,27 @@ THREE.Geometry.prototype = {
 		this.boundingSphere = { radius: radius };
 
 	},
-	
-	/* 
-	 * Checks for duplicate vertices with hashmap. 
+
+	/*
+	 * Checks for duplicate vertices with hashmap.
 	 * Duplicated vertices are removed
-	 * and faces' vertices are updated. 
+	 * and faces' vertices are updated.
 	 */
 	mergeVertices: function() {
-		
+
 		var verticesMap = {}; // Hashmap for looking up vertice by position coordinates (and making sure they are unique)
 		var unique = [], changes = [];
-		
+
 		var v, key;
-		var precisionPoints = 4; // number of decimal points, eg. 4 for epsilon of 0.0001 
+		var precisionPoints = 4; // number of decimal points, eg. 4 for epsilon of 0.0001
 		var precision = Math.pow(10, precisionPoints)
 		var i,il, face;
-		
+
 		for (i=0,il=this.vertices.length;i<il;i++) {
-			
+
 			v = this.vertices[i].position;
 			key = [Math.round(v.x * precision), Math.round(v.y* precision), Math.round(v.z* precision)].join('_');
-			
+
 			if (verticesMap[key]===undefined) {
 				verticesMap[key] = i;
 				unique.push(this.vertices[i]);
@@ -464,10 +466,10 @@ THREE.Geometry.prototype = {
 				//console.log('Duplicate vertex found. ', i, ' could be using ', verticesMap[key]);
 				changes[i] = changes[verticesMap[key]];
 			}
-			
+
 		};
-		
-		
+
+
 		// Start to patch face indices.
 		for( i = 0, il = this.faces.length; i < il; i ++ ) {
 
@@ -477,20 +479,20 @@ THREE.Geometry.prototype = {
 				face.a = changes[face.a];
 				face.b = changes[face.b];
 				face.c = changes[face.c];
-			
+
 			} if ( face instanceof THREE.Face4 ) {
 
 				face.a = changes[face.a];
 				face.b = changes[face.b];
 				face.c = changes[face.c];
 				face.d = changes[face.d];
-			
+
 			}
 		}
-		
+
 		// Use unique set of vertices
 		this.vertices = unique;
-		
+
 	}
 
 };

src/extras/GeometryUtils.js

@@ -18,6 +18,17 @@ THREE.GeometryUtils = {
 		uvs1 = geometry1.faceVertexUvs[ 0 ],
 		uvs2 = geometry2.faceVertexUvs[ 0 ];
 
+		var geo1MaterialsMap = {};
+
+		for ( var i = 0; i < geometry1.materials.length; i ++ ) {
+
+			var id = geometry1.materials[ i ].id;
+
+			geo1MaterialsMap[ id ] = i;
+
+		}
+
+
 		if ( object2 instanceof THREE.Mesh ) {
 
 			object2.matrixAutoUpdate && object2.updateMatrix();
@@ -83,7 +94,23 @@ THREE.GeometryUtils = {
 
 			}
 
-			faceCopy.materials = face.materials.slice();
+			if ( face.materialIndex !== undefined ) {
+
+				var material2 = geometry2.materials[ face.materialIndex ];
+				var materialId2 = material2.id;
+
+				var materialIndex = geo1MaterialsMap[ materialId2 ];
+
+				if ( materialIndex === undefined ) {
+
+					materialIndex = geometry1.materials.length;
+					geometry1.materials.push( material2 );
+
+				}
+
+				faceCopy.materialIndex = materialIndex;
+
+			}
 
 			faceCopy.centroid.copy( face.centroid );
 			if ( matrix ) matrix.multiplyVector3( faceCopy.centroid );
@@ -120,6 +147,14 @@ THREE.GeometryUtils = {
 			faces = geometry.faces,
 			uvs = geometry.faceVertexUvs[ 0 ];
 
+		// materials
+
+		if ( geometry.materials ) {
+
+			cloneGeo.materials = geometry.materials.slice();
+
+		}
+
 		// vertices
 
 		for ( i = 0, il = vertices.length; i < il; i ++ ) {
@@ -167,7 +202,7 @@ THREE.GeometryUtils = {
 
 			}
 
-			faceCopy.materials = face.materials.slice();
+			faceCopy.materialIndex = face.materialIndex;
 
 			faceCopy.centroid.copy( face.centroid );
 

src/extras/geometries/CubeGeometry.js

@@ -12,6 +12,8 @@ THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHei
 	height_half = height / 2,
 	depth_half = depth / 2;
 
+	var mpx, mpy, mpz, mnx, mny, mnz;
+
 	if ( materials !== undefined ) {
 
 		if ( materials instanceof Array ) {
@@ -24,12 +26,14 @@ THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHei
 
 			for ( var i = 0; i < 6; i ++ ) {
 
-				this.materials.push( [ materials ] );
+				this.materials.push( materials );
 
 			}
 
 		}
 
+		mpx = 0; mnx = 1; mpy = 2; mny = 3; mpz = 4; mnz = 5;
+
 	} else {
 
 		this.materials = [];
@@ -52,12 +56,12 @@ THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHei
 
 	}
 
-	this.sides.px && buildPlane( 'z', 'y', - 1, - 1, depth, height, width_half, this.materials[ 0 ] ); // px
-	this.sides.nx && buildPlane( 'z', 'y',   1, - 1, depth, height, - width_half, this.materials[ 1 ] );   // nx
-	this.sides.py && buildPlane( 'x', 'z',   1,   1, width, depth, height_half, this.materials[ 2 ] );   // py
-	this.sides.ny && buildPlane( 'x', 'z',   1, - 1, width, depth, - height_half, this.materials[ 3 ] ); // ny
-	this.sides.pz && buildPlane( 'x', 'y',   1, - 1, width, height, depth_half, this.materials[ 4 ] );   // pz
-	this.sides.nz && buildPlane( 'x', 'y', - 1, - 1, width, height, - depth_half, this.materials[ 5 ] ); // nz
+	this.sides.px && buildPlane( 'z', 'y', - 1, - 1, depth, height, width_half, mpx ); 	 // px
+	this.sides.nx && buildPlane( 'z', 'y',   1, - 1, depth, height, - width_half, mnx ); // nx
+	this.sides.py && buildPlane( 'x', 'z',   1,   1, width, depth, height_half, mpy );   // py
+	this.sides.ny && buildPlane( 'x', 'z',   1, - 1, width, depth, - height_half, mny ); // ny
+	this.sides.pz && buildPlane( 'x', 'y',   1, - 1, width, height, depth_half, mpz );   // pz
+	this.sides.nz && buildPlane( 'x', 'y', - 1, - 1, width, height, - depth_half, mnz ); // nz
 
 	this.mergeVertices();
 
@@ -91,9 +95,9 @@ THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHei
 		segment_width = width / gridX,
 		segment_height = height / gridY;
 
-		for( iy = 0; iy < gridY1; iy++ ) {
+		for( iy = 0; iy < gridY1; iy ++ ) {
 
-			for( ix = 0; ix < gridX1; ix++ ) {
+			for( ix = 0; ix < gridX1; ix ++ ) {
 
 				var vector = new THREE.Vector3();
 				vector[ u ] = ( ix * segment_width - width_half ) * udir;

src/extras/loaders/BinaryLoader.js

@@ -687,22 +687,19 @@ THREE.BinaryLoader.prototype.createBinModel = function ( data, callback, texture
 
 	function f3 ( scope, a, b, c, mi ) {
 
-		var material = scope.materials[ mi ];
-		scope.faces.push( new THREE.Face3( a, b, c, null, null, material ) );
+		scope.faces.push( new THREE.Face3( a, b, c, null, null, mi ) );
 
 	};
 
 	function f4 ( scope, a, b, c, d, mi ) {
 
-		var material = scope.materials[ mi ];
-		scope.faces.push( new THREE.Face4( a, b, c, d, null, null, material ) );
+		scope.faces.push( new THREE.Face4( a, b, c, d, null, null, mi ) );
 
 	};
 
 	function f3n ( scope, normals, a, b, c, mi, na, nb, nc ) {
 
-		var material = scope.materials[ mi ],
-			nax = normals[ na*3     ],
+		var nax = normals[ na*3     ],
 			nay = normals[ na*3 + 1 ],
 			naz = normals[ na*3 + 2 ],
 
@@ -719,14 +716,13 @@ THREE.BinaryLoader.prototype.createBinModel = function ( data, callback, texture
 						   new THREE.Vector3( nbx, nby, nbz ),
 						   new THREE.Vector3( ncx, ncy, ncz )],
 						  null,
-						  material ) );
+						  mi ) );
 
 	};
 
 	function f4n ( scope, normals, a, b, c, d, mi, na, nb, nc, nd ) {
 
-		var material = scope.materials[ mi ],
-			nax = normals[ na*3     ],
+		var nax = normals[ na*3     ],
 			nay = normals[ na*3 + 1 ],
 			naz = normals[ na*3 + 2 ],
 
@@ -748,7 +744,7 @@ THREE.BinaryLoader.prototype.createBinModel = function ( data, callback, texture
 						   new THREE.Vector3( ncx, ncy, ncz ),
 						   new THREE.Vector3( ndx, ndy, ndz )],
 						  null,
-						  material ) );
+						  mi ) );
 
 	};
 

src/extras/loaders/JSONLoader.js

@@ -177,7 +177,7 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
 			if ( hasMaterial ) {
 
 				materialIndex = faces[ offset ++ ];
-				face.materials = geometry.materials[ materialIndex ];
+				face.materialIndex = materialIndex;
 
 			}
 

src/extras/loaders/Loader.js

@@ -71,7 +71,7 @@ THREE.Loader.prototype = {
 
 		for ( var i = 0; i < materials.length; ++ i ) {
 
-			scope.materials[ i ] = [ THREE.Loader.prototype.createMaterial( materials[ i ], texture_path ) ];
+			scope.materials[ i ] = THREE.Loader.prototype.createMaterial( materials[ i ], texture_path );
 
 		}
 
@@ -81,9 +81,9 @@ THREE.Loader.prototype = {
 
 		var m, i, il = scope.materials.length;
 
-		for( i = 0; i < il; i++ ) {
+		for( i = 0; i < il; i ++ ) {
 
-			m = scope.materials[ i ][ 0 ];
+			m = scope.materials[ i ];
 
 			if ( m instanceof THREE.ShaderMaterial ) return true;
 

src/objects/Line.js

@@ -2,12 +2,12 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.Line = function ( geometry, materials, type ) {
+THREE.Line = function ( geometry, material, type ) {
 
 	THREE.Object3D.call( this );
 
 	this.geometry = geometry;
-	this.materials = materials instanceof Array ? materials : [ materials ];
+	this.material = material;
 
 	this.type = ( type != undefined ) ? type : THREE.LineStrip;
 

src/objects/Mesh.js

@@ -4,12 +4,12 @@
  * @author mikael emtinger / http://gomo.se/
  */
 
-THREE.Mesh = function ( geometry, materials ) {
+THREE.Mesh = function ( geometry, material ) {
 
 	THREE.Object3D.call( this );
 
 	this.geometry = geometry;
-	this.materials = materials && materials.length ? materials : [ materials ];
+	this.material = material;
 
 	this.overdraw = false; // TODO: Move to material?
 

src/objects/MorphAnimMesh.js

@@ -2,9 +2,9 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.MorphAnimMesh = function( geometry, materials ) {
+THREE.MorphAnimMesh = function( geometry, material ) {
 
-	THREE.Mesh.call( this, geometry, materials );
+	THREE.Mesh.call( this, geometry, material );
 
 	// API
 

src/objects/Particle.js

@@ -2,11 +2,11 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.Particle = function ( materials ) {
+THREE.Particle = function ( material ) {
 
 	THREE.Object3D.call( this );
 
-	this.materials = materials instanceof Array ? materials : [ materials ];
+	this.material = material;
 
 };
 

src/objects/ParticleSystem.js

@@ -2,12 +2,12 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.ParticleSystem = function ( geometry, materials ) {
+THREE.ParticleSystem = function ( geometry, material ) {
 
 	THREE.Object3D.call( this );
 
 	this.geometry = geometry;
-	this.materials = materials instanceof Array ? materials : [ materials ];
+	this.material = material;
 
 	this.sortParticles = false;
 

src/objects/Ribbon.js

@@ -2,12 +2,12 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.Ribbon = function ( geometry, materials ) {
+THREE.Ribbon = function ( geometry, material ) {
 
 	THREE.Object3D.call( this );
 
 	this.geometry = geometry;
-	this.materials = materials instanceof Array ? materials : [ materials ];
+	this.material = material;
 
 };
 

src/objects/SkinnedMesh.js

@@ -2,9 +2,9 @@
  * @author mikael emtinger / http://gomo.se/
  */
 
-THREE.SkinnedMesh = function( geometry, materials ) {
+THREE.SkinnedMesh = function( geometry, material ) {
 
-	THREE.Mesh.call( this, geometry, materials );
+	THREE.Mesh.call( this, geometry, material );
 
 	// init bones
 

src/renderers/WebGLRenderer.js

@@ -688,68 +688,60 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		geometry.__webglParticleCount = nvertices;
 
-		geometry.__materials = object.materials;
-
 		// custom attributes
 
-		var m, ml, material;
-
-		for ( m = 0, ml = object.materials.length; m < ml; m ++ ) {
-
-			material = object.materials[ m ];
-
-			if ( material.attributes ) {
-
-				if ( geometry.__webglCustomAttributesList === undefined ) {
+		var material = object.material;
 
-					geometry.__webglCustomAttributesList = [];
+		if ( material.attributes ) {
 
-				}
+			if ( geometry.__webglCustomAttributesList === undefined ) {
 
-				for ( a in material.attributes ) {
+				geometry.__webglCustomAttributesList = [];
 
-					// Do a shallow copy of the attribute object so different geometryGroup chunks use different
-					// attribute buffers which are correctly indexed in the setMeshBuffers function
+			}
 
-					// Not sure how to best translate this into non-indexed arrays
-					// used for particles, as there are no geometry chunks here
-					// Probably could be simplified
+			for ( var a in material.attributes ) {
 
-					originalAttribute = material.attributes[ a ];
+				// Do a shallow copy of the attribute object so different geometryGroup chunks use different
+				// attribute buffers which are correctly indexed in the setMeshBuffers function
 
-					attribute = {};
+				// Not sure how to best translate this into non-indexed arrays
+				// used for particles, as there are no geometry chunks here
+				// Probably could be simplified
 
-					for ( property in originalAttribute ) {
+				originalAttribute = material.attributes[ a ];
 
-						attribute[ property ] = originalAttribute[ property ];
+				attribute = {};
 
-					}
+				for ( property in originalAttribute ) {
 
-					if( !attribute.__webglInitialized || attribute.createUniqueBuffers ) {
+					attribute[ property ] = originalAttribute[ property ];
 
-						attribute.__webglInitialized = true;
+				}
 
-						size = 1;		// "f" and "i"
+				if( !attribute.__webglInitialized || attribute.createUniqueBuffers ) {
 
-						if ( attribute.type === "v2" ) size = 2;
-						else if ( attribute.type === "v3" ) size = 3;
-						else if ( attribute.type === "v4" ) size = 4;
-						else if ( attribute.type === "c"  ) size = 3;
+					attribute.__webglInitialized = true;
 
-						attribute.size = size;
-						attribute.array = new Float32Array( nvertices * size );
-						attribute.buffer = _gl.createBuffer();
-						attribute.buffer.belongsToAttribute = a;
+					size = 1;		// "f" and "i"
 
-						originalAttribute.needsUpdate = true;
-						attribute.__original = originalAttribute;
+					if ( attribute.type === "v2" ) size = 2;
+					else if ( attribute.type === "v3" ) size = 3;
+					else if ( attribute.type === "v4" ) size = 4;
+					else if ( attribute.type === "c"  ) size = 3;
 
-					}
+					attribute.size = size;
+					attribute.array = new Float32Array( nvertices * size );
+					attribute.buffer = _gl.createBuffer();
+					attribute.buffer.belongsToAttribute = a;
 
-					geometry.__webglCustomAttributesList.push( attribute );
+					originalAttribute.needsUpdate = true;
+					attribute.__original = originalAttribute;
 
 				}
 
+				geometry.__webglCustomAttributesList.push( attribute );
+
 			}
 
 		}
@@ -765,14 +757,14 @@ THREE.WebGLRenderer = function ( parameters ) {
 		uvType,
 		vertexColorType,
 		normalType,
-		materials, material,
+		material,
 		attribute, property, originalAttribute,
 
 		geometry = object.geometry,
 		obj_faces = geometry.faces,
 		chunk_faces = geometryGroup.faces;
 
-		for ( f = 0, fl = chunk_faces.length; f < fl; f++ ) {
+		for ( f = 0, fl = chunk_faces.length; f < fl; f ++ ) {
 
 			fi = chunk_faces[ f ];
 			face = obj_faces[ fi ];
@@ -793,21 +785,13 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		}
 
-		materials = unrollGroupMaterials( geometryGroup, object );
-
-		// this will not work if materials would change in run-time
-		// it should be refreshed every frame
-		// but need to do unrollGroupMaterials
-		// more properly without push to array
-		// like unrollBufferMaterials
+		material = ( geometryGroup.materialIndex >= 0 ) ? geometry.materials[ geometryGroup.materialIndex ] : object.material;
 
-		geometryGroup.__materials = materials;
+		uvType = bufferGuessUVType( material );
+		normalType = bufferGuessNormalType( material );
+		vertexColorType = bufferGuessVertexColorType( material );
 
-		uvType = bufferGuessUVType( materials, geometryGroup, object );
-		normalType = bufferGuessNormalType( materials, geometryGroup, object );
-		vertexColorType = bufferGuessVertexColorType( materials, geometryGroup, object );
-
-		//console.log("uvType",uvType, "normalType",normalType, "vertexColorType",vertexColorType, object, geometryGroup, materials );
+		//console.log( "uvType", uvType, "normalType", normalType, "vertexColorType", vertexColorType, object, geometryGroup, material );
 
 		geometryGroup.__vertexArray = new Float32Array( nvertices * 3 );
 
@@ -881,58 +865,52 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		// custom attributes
 
-		for ( m = 0, ml = materials.length; m < ml; m ++ ) {
-
-			material = materials[ m ];
-
-			if ( material.attributes ) {
-
-				if ( geometryGroup.__webglCustomAttributesList === undefined ) {
-
-					geometryGroup.__webglCustomAttributesList = [];
+		if ( material.attributes ) {
 
-				}
+			if ( geometryGroup.__webglCustomAttributesList === undefined ) {
 
-				for ( a in material.attributes ) {
+				geometryGroup.__webglCustomAttributesList = [];
 
-					// Do a shallow copy of the attribute object so different geometryGroup chunks use different
-					// attribute buffers which are correctly indexed in the setMeshBuffers function
+			}
 
-					originalAttribute = material.attributes[ a ];
+			for ( var a in material.attributes ) {
 
-					attribute = {};
+				// Do a shallow copy of the attribute object so different geometryGroup chunks use different
+				// attribute buffers which are correctly indexed in the setMeshBuffers function
 
-					for ( property in originalAttribute ) {
+				originalAttribute = material.attributes[ a ];
 
-						attribute[ property ] = originalAttribute[ property ];
+				attribute = {};
 
-					}
+				for ( property in originalAttribute ) {
 
-					if( !attribute.__webglInitialized || attribute.createUniqueBuffers ) {
+					attribute[ property ] = originalAttribute[ property ];
 
-						attribute.__webglInitialized = true;
+				}
 
-						size = 1;		// "f" and "i"
+				if( !attribute.__webglInitialized || attribute.createUniqueBuffers ) {
 
-						if( attribute.type === "v2" ) size = 2;
-						else if( attribute.type === "v3" ) size = 3;
-						else if( attribute.type === "v4" ) size = 4;
-						else if( attribute.type === "c"  ) size = 3;
+					attribute.__webglInitialized = true;
 
-						attribute.size = size;
-						attribute.array = new Float32Array( nvertices * size );
-						attribute.buffer = _gl.createBuffer();
-						attribute.buffer.belongsToAttribute = a;
+					size = 1;		// "f" and "i"
 
-						originalAttribute.needsUpdate = true;
-						attribute.__original = originalAttribute;
+					if( attribute.type === "v2" ) size = 2;
+					else if( attribute.type === "v3" ) size = 3;
+					else if( attribute.type === "v4" ) size = 4;
+					else if( attribute.type === "c"  ) size = 3;
 
-					}
+					attribute.size = size;
+					attribute.array = new Float32Array( nvertices * size );
+					attribute.buffer = _gl.createBuffer();
+					attribute.buffer.belongsToAttribute = a;
 
-					geometryGroup.__webglCustomAttributesList.push( attribute );
+					originalAttribute.needsUpdate = true;
+					attribute.__original = originalAttribute;
 
 				}
 
+				geometryGroup.__webglCustomAttributesList.push( attribute );
+
 			}
 
 		}
@@ -2551,6 +2529,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 		}
 
 		uniforms.map.texture = material.map;
+
 		if ( material.map ) {
 
 			uniforms.offsetRepeat.value.set( material.map.offset.x, material.map.offset.y, material.map.repeat.x, material.map.repeat.y );
@@ -3491,9 +3470,9 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	function unrollImmediateBufferMaterials( globject ) {
+	function unrollImmediateBufferMaterial( globject ) {
 
-		var i, l, m, ml, material,
+		var material,
 			object = globject.object,
 			opaque = globject.opaque,
 			transparent = globject.transparent;
@@ -3501,16 +3480,12 @@ THREE.WebGLRenderer = function ( parameters ) {
 		transparent.count = 0;
 		opaque.count = 0;
 
-		for ( m = 0, ml = object.materials.length; m < ml; m ++ ) {
-
-			material = object.materials[ m ];
-			material.transparent ? addToFixedArray( transparent, material ) : addToFixedArray( opaque, material );
-
-		}
+		material = object.material;
+		material.transparent ? addToFixedArray( transparent, material ) : addToFixedArray( opaque, material );
 
 	};
 
-	function unrollBufferMaterials( globject ) {
+	function unrollBufferMaterial( globject ) {
 
 		var i, l, m, ml, material, meshMaterial,
 			object = globject.object,
@@ -3521,25 +3496,23 @@ THREE.WebGLRenderer = function ( parameters ) {
 		transparent.count = 0;
 		opaque.count = 0;
 
-		for ( m = 0, ml = object.materials.length; m < ml; m ++ ) {
+		meshMaterial = object.material;
 
-			meshMaterial = object.materials[ m ];
+		if ( meshMaterial instanceof THREE.MeshFaceMaterial ) {
 
-			if ( meshMaterial instanceof THREE.MeshFaceMaterial ) {
+			materialIndex = buffer.materialIndex;
 
-				for ( i = 0, l = buffer.materials.length; i < l; i ++ ) {
+			if ( materialIndex >= 0 ) {
 
-					material = buffer.materials[ i ];
-					if ( material ) material.transparent ? addToFixedArray( transparent, material ) : addToFixedArray( opaque, material );
-
-				}
+				material = object.geometry.materials[ materialIndex ];
+				material.transparent ? addToFixedArray( transparent, material ) : addToFixedArray( opaque, material );
 
-			} else {
+			}
 
-				material = meshMaterial;
-				if ( material ) material.transparent ? addToFixedArray( transparent, material ) : addToFixedArray( opaque, material );
+		} else {
 
-			}
+			material = meshMaterial;
+			if ( material ) material.transparent ? addToFixedArray( transparent, material ) : addToFixedArray( opaque, material );
 
 		}
 
@@ -3827,7 +3800,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 					setupMatrices( object, camera, true );
 
-					unrollBufferMaterials( webglObject );
+					unrollBufferMaterial( webglObject );
 
 					webglObject.render = true;
 
@@ -3885,7 +3858,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 				setupMatrices( object, camera, true );
 
-				unrollImmediateBufferMaterials( webglObject );
+				unrollImmediateBufferMaterial( webglObject );
 
 			}
 
@@ -4433,23 +4406,15 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	function areCustomAttributesDirty( geometryGroup ) {
+	function areCustomAttributesDirty( geometryGroup, object ) {
 
-		var a, m, ml, material, materials;
+		var material = ( geometryGroup.materialIndex >= 0 ) ? object.geometry.materials[ geometryGroup.materialIndex ] : object.material;
 
-		materials = geometryGroup.__materials;
-
-		for ( m = 0, ml = materials.length; m < ml; m ++ ) {
-
-			material = materials[ m ];
-
-			if ( material.attributes ) {
+		if ( material.attributes ) {
 
-				for ( a in material.attributes ) {
+			for ( var a in material.attributes ) {
 
-					if ( material.attributes[ a ].needsUpdate ) return true;
-
-				}
+				if ( material.attributes[ a ].needsUpdate ) return true;
 
 			}
 
@@ -4459,23 +4424,15 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	function clearCustomAttributes( geometryGroup ) {
-
-		var a, m, ml, material, materials;
-
-		materials = geometryGroup.__materials;
-
-		for ( m = 0, ml = materials.length; m < ml; m ++ ) {
+	function clearCustomAttributes( geometryGroup, object ) {
 
-			material = materials[ m ];
+		var material = ( geometryGroup.materialIndex >= 0 ) ? object.geometry.materials[ geometryGroup.materialIndex ] : object.material;
 
-			if ( material.attributes ) {
-
-				for ( a in material.attributes ) {
+		if ( material.attributes ) {
 
-					material.attributes[ a ].needsUpdate = false;
+			for ( var a in material.attributes ) {
 
-				}
+				material.attributes[ a ].needsUpdate = false;
 
 			}
 
@@ -4497,7 +4454,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 				geometryGroup = geometry.geometryGroupsList[ i ];
 
-				customAttributeDirty = areCustomAttributesDirty( geometryGroup );
+				customAttributeDirty = areCustomAttributesDirty( geometryGroup, object );
 
 				if ( geometry.__dirtyVertices || geometry.__dirtyMorphTargets || geometry.__dirtyElements ||
 					 geometry.__dirtyUvs || geometry.__dirtyNormals ||
@@ -4517,7 +4474,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			geometry.__dirtyTangents = false;
 			geometry.__dirtyColors = false;
 
-			clearCustomAttributes( geometryGroup );
+			clearCustomAttributes( geometryGroup, object );
 
 		} else if ( object instanceof THREE.Ribbon ) {
 
@@ -4549,7 +4506,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			geometry = object.geometry;
 
-			customAttributeDirty = areCustomAttributesDirty( geometry );
+			customAttributeDirty = areCustomAttributesDirty( geometry, object );
 
 			if ( geometry.__dirtyVertices || geometry.__dirtyColors || object.sortParticles || customAttributeDirty ) {
 
@@ -4560,7 +4517,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			geometry.__dirtyVertices = false;
 			geometry.__dirtyColors = false;
 
-			clearCustomAttributes( geometry );
+			clearCustomAttributes( geometry, object );
 
 		}/* else if ( THREE.MarchingCubes !== undefined && object instanceof THREE.MarchingCubes ) {
 
@@ -4634,44 +4591,17 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	function sortFacesByMaterial( geometry ) {
 
-		// TODO
-		// Should optimize by grouping faces with ColorFill / ColorStroke materials
-		// which could then use vertex color attributes instead of each being
-		// in its separate VBO
-
-		var i, l, f, fl, face, material, materials, vertices, mhash, ghash, hash_map = {};
+		var i, l, f, fl, face, materialIndex, vertices, mhash, ghash, hash_map = {};
 		var numMorphTargets = geometry.morphTargets !== undefined ? geometry.morphTargets.length : 0;
 
 		geometry.geometryGroups = {};
 
-		function materialHash( material ) {
-
-			var hash_array = [];
-
-			for ( i = 0, l = material.length; i < l; i ++ ) {
-
-				if ( material[ i ] == undefined ) {
-
-					hash_array.push( "undefined" );
-
-				} else {
-
-					hash_array.push( material[ i ].id );
-
-				}
-
-			}
-
-			return hash_array.join( '_' );
-
-		}
-
 		for ( f = 0, fl = geometry.faces.length; f < fl; f ++ ) {
 
 			face = geometry.faces[ f ];
-			materials = face.materials;
+			materialIndex = face.materialIndex;
 
-			mhash = materialHash( materials );
+			mhash = ( materialIndex !== undefined ) ? materialIndex : -1;
 
 			if ( hash_map[ mhash ] == undefined ) {
 
@@ -4683,7 +4613,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			if ( geometry.geometryGroups[ ghash ] == undefined ) {
 
-				geometry.geometryGroups[ ghash ] = { 'faces': [], 'materials': materials, 'vertices': 0, 'numMorphTargets': numMorphTargets };
+				geometry.geometryGroups[ ghash ] = { 'faces': [], 'materialIndex': materialIndex, 'vertices': 0, 'numMorphTargets': numMorphTargets };
 
 			}
 
@@ -4696,7 +4626,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 				if ( geometry.geometryGroups[ ghash ] == undefined ) {
 
-					geometry.geometryGroups[ ghash ] = { 'faces': [], 'materials': materials, 'vertices': 0, 'numMorphTargets': numMorphTargets };
+					geometry.geometryGroups[ ghash ] = { 'faces': [], 'materialIndex': materialIndex, 'vertices': 0, 'numMorphTargets': numMorphTargets };
 
 				}
 
@@ -4721,21 +4651,25 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	function addBuffer( objlist, buffer, object ) {
 
-		objlist.push( {
-			buffer: buffer, object: object,
-			opaque: { list: [], count: 0 },
-			transparent: { list: [], count: 0 }
-		} );
+		objlist.push(
+			{
+				buffer: buffer, object: object,
+				opaque: { list: [], count: 0 },
+				transparent: { list: [], count: 0 }
+			}
+		);
 
 	};
 
 	function addBufferImmediate( objlist, object ) {
 
-		objlist.push( {
-			object: object,
-			opaque: { list: [], count: 0 },
-			transparent: { list: [], count: 0 }
-		} );
+		objlist.push(
+			{
+				object: object,
+				opaque: { list: [], count: 0 },
+				transparent: { list: [], count: 0 }
+			}
+		);
 
 	};
 
@@ -5652,103 +5586,11 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	function bufferNeedsSmoothNormals( geometryGroup, object ) {
-
-		var m, ml, i, l, meshMaterial, needsSmoothNormals = false;
-
-		for ( m = 0, ml = object.materials.length; m < ml; m++ ) {
-
-			meshMaterial = object.materials[ m ];
+	function bufferGuessVertexColorType( material ) {
 
-			if ( meshMaterial instanceof THREE.MeshFaceMaterial ) {
+		if ( material.vertexColors ) {
 
-				for ( i = 0, l = geometryGroup.materials.length; i < l; i++ ) {
-
-					if ( materialNeedsSmoothNormals( geometryGroup.materials[ i ] ) ) {
-
-						needsSmoothNormals = true;
-						break;
-
-					}
-
-				}
-
-			} else {
-
-				if ( materialNeedsSmoothNormals( meshMaterial ) ) {
-
-					needsSmoothNormals = true;
-					break;
-
-				}
-
-			}
-
-			if ( needsSmoothNormals ) break;
-
-		}
-
-		return needsSmoothNormals;
-
-	};
-
-	function unrollGroupMaterials( geometryGroup, object ) {
-
-		var m, ml, i, il,
-			material, meshMaterial,
-			materials = [];
-
-		for ( m = 0, ml = object.materials.length; m < ml; m ++ ) {
-
-			meshMaterial = object.materials[ m ];
-
-			if ( meshMaterial instanceof THREE.MeshFaceMaterial ) {
-
-				for ( i = 0, l = geometryGroup.materials.length; i < l; i ++ ) {
-
-					material = geometryGroup.materials[ i ];
-
-					if ( material ) {
-
-						materials.push( material );
-
-					}
-
-				}
-
-			} else {
-
-				material = meshMaterial;
-
-				if ( material ) {
-
-					materials.push( material );
-
-				}
-
-			}
-
-		}
-
-		return materials;
-
-	};
-
-	function bufferGuessVertexColorType( materials, geometryGroup, object ) {
-
-		var i, m, ml = materials.length;
-
-		// use vertexColor type from the first material in unrolled materials
-
-		for ( i = 0; i < ml; i ++ ) {
-
-			m = materials[ i ];
-
-			if ( m.vertexColors ) {
-
-				return m.vertexColors;
-
-			}
+			return material.vertexColors;
 
 		}
 
@@ -5756,49 +5598,35 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	function bufferGuessNormalType( materials, geometryGroup, object ) {
-
-		var i, m, ml = materials.length;
+	function bufferGuessNormalType( material ) {
 
 		// only MeshBasicMaterial and MeshDepthMaterial don't need normals
 
-		for ( i = 0; i < ml; i ++ ) {
+		if ( ( material instanceof THREE.MeshBasicMaterial && !material.envMap ) || material instanceof THREE.MeshDepthMaterial ) {
 
-			m = materials[ i ];
+			return false;
 
-			if ( ( m instanceof THREE.MeshBasicMaterial && !m.envMap ) || m instanceof THREE.MeshDepthMaterial ) continue;
+		}
 
-			if ( materialNeedsSmoothNormals( m ) ) {
+		if ( materialNeedsSmoothNormals( material ) ) {
 
-				return THREE.SmoothShading;
+			return THREE.SmoothShading;
 
-			} else {
+		} else {
 
-				return THREE.FlatShading;
-
-			}
+			return THREE.FlatShading;
 
 		}
 
-		return false;
-
 	};
 
-	function bufferGuessUVType( materials, geometryGroup, object ) {
-
-		var i, m, ml = materials.length;
+	function bufferGuessUVType( material ) {
 
 		// material must use some texture to require uvs
 
-		for ( i = 0; i < ml; i++ ) {
+		if ( material.map || material.lightMap || material instanceof THREE.ShaderMaterial ) {
 
-			m = materials[ i ];
-
-			if ( m.map || m.lightMap || m instanceof THREE.ShaderMaterial ) {
-
-				return true;
-
-			}
+			return true;
 
 		}