Merge pull request #3 from jackcaron/sceneAnimations

Scene animations

docs/api/objects/Mesh.html

@@ -44,29 +44,22 @@
 
 		<div>An instance of [page:Material], defining the object's appearance. Default is a [page:MeshBasicMaterial] with wireframe mode enabled and randomised colour.</div>
 		
-		<h3>[property:Array morphTargetForcedOrder]</h3>
-		
-		<div>
-		An array of indices specifying the order that the morphs will be applied. Undefined by
-		default, but reset to a blank array by [page:Mesh.updateMorphTargets updateMorphTargets].
-		</div>
-		
 		<h3>[property:Array morphTargetInfluences]</h3>
-		
+
 		<div>
 		An array of weights typically from 0-1 that specify how much of the morph is applied.
 		Undefined by default, but reset to a blank array by [page:Mesh.updateMorphTargets updateMorphTargets].
 		</div>
-		
+
 		<h3>[property:Array morphTargetDictionary]</h3>
-		
+
 		<div>
 		A dictionary of morphTargets based on the morphTarget.name property.
 		Undefined by default, but rebuilt [page:Mesh.updateMorphTargets updateMorphTargets].
 		</div>
 
 		<h3>[property:Integer morphTargetBase]</h3>
-		
+
 		<div>
 		Specify the index of the morph that should be used as the base morph. Replaces the positions.
 		Undefined by default, but reset to -1 (non set) by [page:Mesh.updateMorphTargets updateMorphTargets].
@@ -97,7 +90,7 @@
 		<div>
 		Get intersections between a casted ray and this mesh. [page:Raycaster.intersectObject] will call this method.
 		</div>
-		
+
 		<h3>[method:Object3D clone]([page:Object3D object])</h3>
 		<div>
 		object -- (optional) Object3D which needs to be cloned. If undefined, clone method will create a new cloned Mesh Object.

docs/api/textures/DataTexture.html

@@ -12,44 +12,36 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">
-		Creates a texture directly from bitmapdata, width and height.
-		</div>
+		<div class="desc">Creates a texture directly from raw data, width and height.</div>
 
 
 		<h2>Constructor</h2>
 
-
-		<h3>[name]([page:ArraybufferView data], [page:Integer width], [page:Integer height], [page:number format], [page:number type], [page:number mapping], [page:number wrapS], [page:number wrapT], [page:number magFilter], [page:number minFilter], [page:number anisotropy])</h3>
+		<h3>[name]( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy )</h3>
 		<div>
-		data -- The data should be arraybufferview. It contains the data of image based on the type and format.<br />
-		width -- The width of the image. <br />
-		height -- The height of the image. <br />
-		format -- The default is THREE.RGBAFormat for the texture. Other formats are: THREE.AlphaFormat, THREE.RGBFormat, THREE.LuminanceFormat, and THREE.LuminanceAlphaFormat. There are also compressed texture formats, if the S3TC extension is supported: THREE.RGB_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT3_Format, and THREE.RGBA_S3TC_DXT5_Format.<br />
-		type -- The default is THREE.UnsignedByteType. Other valid types (as WebGL allows) are THREE.ByteType, THREE.ShortType, THREE.UnsignedShortType, THREE.IntType, THREE.UnsignedIntType, THREE.FloatType, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type, and THREE.UnsignedShort565Type.<br />
-		mapping -- How the image is applied to the object. An object type of THREE.UVMapping is the default, where the U,V coordinates are used to apply the map, and a single texture is expected. The other types are THREE.CubeReflectionMapping, for cube maps used as a reflection map; THREE.CubeRefractionMapping, refraction mapping; and THREE.SphericalReflectionMapping, a spherical reflection map projection.<br />
-		wrapS -- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.<br />
-		wrapT -- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.<br />
-		magFilter -- How the texture is sampled when a texel covers more than one pixel. The default is THREE.LinearFilter, which takes the four closest texels and bilinearly interpolates among them. The other option is THREE.NearestFilter, which uses the value of the closest texel.<br />
-		minFilter -- How the texture is sampled when a texel covers less than one pixel. The default is THREE.LinearMipMapLinearFilter, which uses mipmapping and a trilinear filter. Other choices are THREE.NearestFilter, THREE.NearestMipMapNearestFilter, THREE.NearestMipMapLinearFilter, THREE.LinearFilter, and THREE.LinearMipMapNearestFilter. These vary whether the nearest texel or nearest four texels are retrieved on the nearest mipmap or nearest two mipmaps. Interpolation occurs among the samples retrieved.<br />
-		anisotropy -- The number of samples taken along the axis through the pixel that has the highest density of texels. By default, this value is 1. A higher value gives a less blurry result than a basic mipmap, at the cost of more texture samples being used. Use renderer.getMaxAnisotropy() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.
+			The data argument must be an ArrayBuffer or a typed array view.
+			Further parameters correspond to the properties inherited from [page:Texture], where both magFilter and minFilter default to THREE.NearestFilter. The properties flipY and generateMipmaps are intially set to false.
 		</div>
 		<div>
-		This loads a image through the bitmap values. The values are dependant on the type and format.
-	 	If the type is THREE.UnsignedByteType, a Uint8Array must be supplied. If it is THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type or THREE.UnsignedShort565Type, a Uint16Array must be supplied.<br />
-	 	If the format is THREE.RGBAFormat, data needs 4 values for 1 pixel. These are supplied in the Red,Green,Blue and alpha sequence. <br />
-	 	Except if the type is THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type or THREE.UnsignedShort565Type.
-		</div>
+			The interpretation of the data depends on type and format:
+			If the type is THREE.UnsignedByteType, a Uint8Array will be useful for addressing the texel data.
+			If the format is THREE.RGBAFormat, data needs four values for one texel; Red, Green, Blue and Alpha (typically the opacity). Similarly, THREE.RGBFormat specifies a format where only three values are used for each texel.<br />
 
+			For the packed types, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type or THREE.UnsignedShort565Type, all color components of one texel can be addressed as bitfields within an integer element of a Uint16Array.<br />
 
-		<h2>Properties</h2>
+			In order to use the types THREE.FloatType and THREE.HalfFloatType, the WebGL implementation must support the respective extensions OES_texture_float and OES_texture_half_float. In order to use THREE.LinearFilter for component-wise, bilinear interpolation of the texels based on these types, the WebGL extensions OES_texture_float_linear or OES_texture_half_float_linear must also be present.
+		</div>
 
+		<h2>Properties</h2>
 
+		<h3>[property:Image image]</h3>
+		<div>
+		Overridden with a record type holding data, width and height.
+		</div>
 
 		<h2>Methods</h2>
 
 
-
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

docs/scenes/bones-browser.html

@@ -61,7 +61,7 @@
 				document.body.appendChild( renderer.domElement );
 
 				orbit = new THREE.OrbitControls( camera, renderer.domElement );
-				orbit.noZoom = true;
+				orbit.enableZoom = false;
 
 				ambientLight = new THREE.AmbientLight( 0x000000 );
 				scene.add( ambientLight );

docs/scenes/geometry-browser.html

@@ -62,7 +62,7 @@
 			document.body.appendChild( renderer.domElement );
 			
 			var orbit = new THREE.OrbitControls( camera, renderer.domElement );
-			orbit.noZoom = true;
+			orbit.enableZoom = false;
 
 			var ambientLight = new THREE.AmbientLight( 0x000000 );
 			scene.add( ambientLight );

editor/js/Config.js

@@ -14,9 +14,6 @@ var Config = function () {
 		'project/renderer/antialias': true,
 		'project/vr': false,
 
-		'camera/position': [ 500, 250, 500 ],
-		'camera/target': [ 0, 0, 0 ],
-
 		'ui/sidebar/animation/collapsed': true,
 		'ui/sidebar/geometry/collapsed': true,
 		'ui/sidebar/material/collapsed': true,

editor/js/Editor.js

@@ -19,9 +19,6 @@ var Editor = function () {
 
 		// actions
 
-		playAnimation: new SIGNALS.Signal(),
-		stopAnimation: new SIGNALS.Signal(),
-
 		// showDialog: new SIGNALS.Signal(),
 
 		// notifications
@@ -75,6 +72,8 @@ var Editor = function () {
 	this.loader = new Loader( this );
 
 	this.camera = new THREE.PerspectiveCamera( 50, 1, 1, 100000 );
+	this.camera.position.set( 500, 250, 500 );
+	this.camera.lookAt( new THREE.Vector3() );
 	this.camera.name = 'Camera';
 
 	this.scene = new THREE.Scene();
@@ -242,8 +241,8 @@ Editor.prototype = {
 
 	addHelper: function () {
 
-		var geometry = new THREE.SphereGeometry( 20, 4, 2 );
-		var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
+		var geometry = new THREE.SphereBufferGeometry( 20, 4, 2 );
+		var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
 
 		return function ( object ) {
 
@@ -283,7 +282,6 @@ Editor.prototype = {
 			var picker = new THREE.Mesh( geometry, material );
 			picker.name = 'picker';
 			picker.userData.object = object;
-			picker.visible = false;
 			helper.add( picker );
 
 			this.sceneHelpers.add( helper );

editor/js/Loader.js

@@ -113,14 +113,12 @@ var Loader = function ( editor ) {
 					var xml = parser.parseFromString( contents, 'text/xml' );
 
 					var loader = new THREE.ColladaLoader();
-					loader.parse( xml, function ( collada ) {
+					var collada = loader.parse( xml );
 
-						collada.scene.name = filename;
+					collada.scene.name = filename;
 
-						editor.addObject( collada.scene );
-						editor.select( collada.scene );
-
-					} );
+					editor.addObject( collada.scene );
+					editor.select( collada.scene );
 
 				}, false );
 				reader.readAsText( file );
@@ -192,9 +190,13 @@ var Loader = function ( editor ) {
 						var contents = event.target.result;
 
 						var geometry = new THREE.MD2Loader().parse( contents );
-						geometry.name = filename;
+						var material = new THREE.MeshPhongMaterial( {
+							morphTargets: true,
+							morphNormals: true
+						} );
 
-						var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
+						var object = new THREE.MorphAnimMesh( geometry, material );
+						object.name = filename;
 
 						editor.addObject( object );
 						editor.select( object );

editor/js/Sidebar.Animation.js

@@ -50,6 +50,25 @@ Sidebar.Animation = function ( editor ) {
 
 				animations[ child.id ] = new THREE.Animation( child, child.geometry.animation );
 
+			} else if ( child instanceof THREE.MorphAnimMesh ) {
+
+				var animation = new THREE.MorphAnimation( child );
+				animation.duration = 30;
+
+				// temporal hack for THREE.AnimationHandler
+				animation._play = animation.play;
+				animation.play = function () {
+					this._play();
+					THREE.AnimationHandler.play( this );
+				};
+				animation.resetBlendWeights = function () {};
+				animation.stop = function () {
+					this.pause();
+					THREE.AnimationHandler.stop( this );
+				};
+
+				animations[ child.id ] = animation;
+
 			}
 
 		} );
@@ -60,27 +79,23 @@ Sidebar.Animation = function ( editor ) {
 
 		container.setDisplay( 'none' );
 
-		if ( object instanceof THREE.SkinnedMesh ) {
+		if ( object instanceof THREE.SkinnedMesh || object instanceof THREE.MorphAnimMesh ) {
 
 			animationsRow.clear();
 
 			var animation = animations[ object.id ];
 
-			var playButton = new UI.Button().setLabel( 'Play' ).onClick( function () {
+			var playButton = new UI.Button( 'Play' ).onClick( function () {
 
 				animation.play();
 
-				signals.playAnimation.dispatch( animation );
-
 			} );
 			animationsRow.add( playButton );
 
-			var pauseButton = new UI.Button().setLabel( 'Stop' ).onClick( function () {
+			var pauseButton = new UI.Button( 'Stop' ).onClick( function () {
 
 				animation.stop();
 
-				signals.stopAnimation.dispatch( animation );
-
 			} );
 			animationsRow.add( pauseButton );
 

editor/js/Sidebar.Geometry.BufferGeometry.js

@@ -6,47 +6,25 @@ Sidebar.Geometry.BufferGeometry = function ( signals ) {
 
 	var container = new UI.Panel();
 
-	// vertices
-
-	var verticesRow = new UI.Panel();
-	var vertices = new UI.Text().setFontSize( '12px' );
-
-	verticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ) );
-	verticesRow.add( vertices );
-
-	container.add( verticesRow );
-
-	// faces
-
-	var facesRow = new UI.Panel();
-	var faces = new UI.Text().setFontSize( '12px' );
-
-	facesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ) );
-	facesRow.add( faces );
-
-	container.add( facesRow );
-
-	//
-
-	var update = function ( object ) {
+	function update( object ) {
 
 		if ( object === null ) return;
 
 		var geometry = object.geometry;
 
-		if ( geometry instanceof THREE.BufferGeometry ) { 
+		if ( geometry instanceof THREE.BufferGeometry ) {
 
+			container.clear();
 			container.setDisplay( 'block' );
 
-			vertices.setValue( ( geometry.attributes.position.array.length / 3 ).format() );
-
-			if ( geometry.attributes.index !== undefined ) {
-
-				faces.setValue( ( geometry.attributes.index.array.length / 3 ).format() );
+			var attributes = geometry.attributes;
 
-			} else {
+			for ( var name in attributes ) {
 
-				faces.setValue( ( geometry.attributes.position.array.length / 9 ).format() );
+				var panel = new UI.Panel();
+				panel.add( new UI.Text( name ).setWidth( '90px' ) );
+				panel.add( new UI.Text( ( attributes[ name ].count ).format() ).setFontSize( '12px' ) );
+				container.add( panel );
 
 			}
 

editor/js/Sidebar.Material.js

@@ -435,12 +435,6 @@ Sidebar.Material = function ( editor ) {
 
 				if ( material.vertexColors !== vertexColors ) {
 
-					if ( geometry instanceof THREE.Geometry ) {
-
-						geometry.groupsNeedUpdate = true;
-
-					}
-
 					material.vertexColors = vertexColors;
 					material.needsUpdate = true;
 

editor/js/Sidebar.Object3D.js

@@ -132,7 +132,7 @@ Sidebar.Object3D = function ( editor ) {
 	// scale
 
 	var objectScaleRow = new UI.Panel();
-	var objectScaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' );
+	var objectScaleLock = new UI.Checkbox( true ).setPosition( 'absolute' ).setLeft( '75px' );
 	var objectScaleX = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleX );
 	var objectScaleY = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleY );
 	var objectScaleZ = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleZ );

editor/js/Viewport.js

@@ -25,8 +25,6 @@ var Viewport = function ( editor ) {
 	//
 
 	var camera = editor.camera;
-	camera.position.fromArray( editor.config.getKey( 'camera/position' ) );
-	camera.lookAt( new THREE.Vector3().fromArray( editor.config.getKey( 'camera/target' ) ) );
 
 	//
 
@@ -238,7 +236,6 @@ var Viewport = function ( editor ) {
 	// otherwise controls.enabled doesn't work.
 
 	var controls = new THREE.EditorControls( camera, container.dom );
-	controls.center.fromArray( editor.config.getKey( 'camera/target' ) );
 	controls.addEventListener( 'change', function () {
 
 		transformControls.update();
@@ -328,21 +325,6 @@ var Viewport = function ( editor ) {
 
 	signals.cameraChanged.add( function () {
 
-		if ( saveTimeout !== undefined ) {
-
-			clearTimeout( saveTimeout );
-
-		}
-
-		saveTimeout = setTimeout( function () {
-
-			editor.config.setKey(
-				'camera/position', camera.position.toArray(),
-				'camera/target', controls.center.toArray()
-			);
-
-		}, 1000 );
-
 		render();
 
 	} );
@@ -523,26 +505,6 @@ var Viewport = function ( editor ) {
 
 	} );
 
-	var animations = [];
-
-	signals.playAnimation.add( function ( animation ) {
-
-		animations.push( animation );
-
-	} );
-
-	signals.stopAnimation.add( function ( animation ) {
-
-		var index = animations.indexOf( animation );
-
-		if ( index !== -1 ) {
-
-			animations.splice( index, 1 );
-
-		}
-
-	} );
-
 	//
 
 	var renderer = null;

examples/index.html

@@ -287,7 +287,6 @@
 				"webgl_materials_bumpmap",
 				"webgl_materials_bumpmap_skin",
 				"webgl_materials_cars",
-				"webgl_materials_cars_camaro",
 				"webgl_materials_cubemap",
 				"webgl_materials_cubemap_balls_reflection",
 				"webgl_materials_cubemap_balls_refraction",

examples/js/GPUParticleSystem.js

@@ -225,16 +225,6 @@ THREE.GPUParticleSystem = function(options) {
         value: self.particleSpriteTex
       }
     },
-    attributes: {
-      "particlePositionsStartTime": {
-        type: "v4",
-        value: []
-      },
-      "particleVelColSizeLife": {
-        type: "v4",
-        value: []
-      }
-    },
     blending: THREE.AdditiveBlending,
     vertexShader: GPUParticleShader.vertexShader,
     fragmentShader: GPUParticleShader.fragmentShader
@@ -371,8 +361,8 @@ THREE.GPUParticleContainer = function(maxParticles, particleSystem) {
   }
 
   self.particleShaderGeo.addAttribute('position', new THREE.BufferAttribute(self.particleVertices, 3));
-  self.particleShaderGeo.addAttribute('particlePositionsStartTime', new THREE.DynamicBufferAttribute(self.particlePositionsStartTime, 4));
-  self.particleShaderGeo.addAttribute('particleVelColSizeLife', new THREE.DynamicBufferAttribute(self.particleVelColSizeLife, 4));
+  self.particleShaderGeo.addAttribute('particlePositionsStartTime', new THREE.BufferAttribute(self.particlePositionsStartTime, 4).setDynamic(true));
+  self.particleShaderGeo.addAttribute('particleVelColSizeLife', new THREE.BufferAttribute(self.particleVelColSizeLife, 4).setDynamic(true));
 
   self.posStart = self.particleShaderGeo.getAttribute('particlePositionsStartTime')
   self.velCol = self.particleShaderGeo.getAttribute('particleVelColSizeLife');

examples/js/Ocean.js

@@ -3,19 +3,19 @@
 	// flag used to trigger parameter changes
 	this.changed = true;
 	this.initial = true;
-	
+
 	// Assign required parameters as object properties
 	this.oceanCamera = new THREE.OrthographicCamera(); //camera.clone();
 	this.oceanCamera.position.z = 1;
 	this.renderer = renderer;
 	this.renderer.clearColor( 0xffffff );
-	
+
 	this.scene = new THREE.Scene();
-	
+
 	// Enable necessary extensions
 	this.renderer.context.getExtension( 'OES_texture_float' );
 	this.renderer.context.getExtension( 'OES_texture_float_linear' );
-	
+
 	// Assign optional parameters as variables and object properties
 	function optionalParameter( value, defaultValue ) {
 
@@ -39,10 +39,10 @@
 	this.windY = optionalParameter( options.INITIAL_WIND[ 1 ], 10.0 ),
 	this.size = optionalParameter( options.INITIAL_SIZE, 250.0 ),
 	this.choppiness = optionalParameter( options.INITIAL_CHOPPINESS, 1.5 );
-	
-	// 
+
+	//
 	this.matrixNeedsUpdate = false;
-	
+
 	// Setup framebuffer pipeline
 	var renderTargetType = optionalParameter( options.USE_HALF_FLOAT, false ) ? THREE.HalfFloatType : THREE.FloatType;
 	var LinearClampParams = {
@@ -86,13 +86,13 @@
 	this.pongTransformFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, NearestClampParams );
 	this.displacementMapFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, LinearClampParams );
 	this.normalMapFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, LinearClampParams );
-	
+
 	// Define shaders and constant uniforms
 	////////////////////////////////////////
-	
+
 	// 0 - The vertex shader used in all of the simulation steps
 	var fullscreeenVertexShader = THREE.ShaderLib[ "ocean_sim_vertex" ];
-		
+
 	// 1 - Horizontal wave vertices used for FFT
 	var oceanHorizontalShader = THREE.ShaderLib[ "ocean_subtransform" ];
 	var oceanHorizontalUniforms = THREE.UniformsUtils.clone( oceanHorizontalShader.uniforms );
@@ -105,7 +105,7 @@
 	this.materialOceanHorizontal.uniforms.u_subtransformSize = { type: "f", value: null };
 	this.materialOceanHorizontal.uniforms.u_input = { type: "t", value: null };
 	this.materialOceanHorizontal.depthTest = false;
-	
+
 	// 2 - Vertical wave vertices used for FFT
 	var oceanVerticalShader = THREE.ShaderLib[ "ocean_subtransform" ];
 	var oceanVerticalUniforms = THREE.UniformsUtils.clone( oceanVerticalShader.uniforms );
@@ -118,7 +118,7 @@
 	this.materialOceanVertical.uniforms.u_subtransformSize = { type: "f", value: null };
 	this.materialOceanVertical.uniforms.u_input = { type: "t", value: null };
 	this.materialOceanVertical.depthTest = false;
-	
+
 	// 3 - Initial spectrum used to generate height map
 	var initialSpectrumShader = THREE.ShaderLib[ "ocean_initial_spectrum" ];
 	var initialSpectrumUniforms = THREE.UniformsUtils.clone( initialSpectrumShader.uniforms );
@@ -130,7 +130,7 @@
 	this.materialInitialSpectrum.uniforms.u_wind = { type: "v2", value: new THREE.Vector2() };
 	this.materialInitialSpectrum.uniforms.u_resolution = { type: "f", value: this.resolution };
 	this.materialInitialSpectrum.depthTest = false;
-	
+
 	// 4 - Phases used to animate heightmap
 	var phaseShader = THREE.ShaderLib[ "ocean_phase" ];
 	var phaseUniforms = THREE.UniformsUtils.clone( phaseShader.uniforms );
@@ -141,7 +141,7 @@
 	} );
 	this.materialPhase.uniforms.u_resolution = { type: "f", value: this.resolution };
 	this.materialPhase.depthTest = false;
-	
+
 	// 5 - Shader used to update spectrum
 	var spectrumShader = THREE.ShaderLib[ "ocean_spectrum" ];
 	var spectrumUniforms = THREE.UniformsUtils.clone( spectrumShader.uniforms );
@@ -169,9 +169,7 @@
 	// 7 - Shader used to update normals
 	var oceanShader = THREE.ShaderLib[ "ocean_main" ];
 	var oceanUniforms = THREE.UniformsUtils.clone( oceanShader.uniforms );
-	var oceanAttributes = THREE.UniformsUtils.clone( oceanShader.attributes );
 	this.materialOcean = new THREE.ShaderMaterial( {
-		attributes: oceanAttributes,
 		uniforms: oceanUniforms,
 		vertexShader: oceanShader.vertexShader,
 		fragmentShader: oceanShader.fragmentShader
@@ -179,8 +177,8 @@
 	// this.materialOcean.wireframe = true;
 	this.materialOcean.uniforms.u_geometrySize = { type: "f", value: this.resolution };
 	this.materialOcean.uniforms.u_displacementMap = { type: "t", value: this.displacementMapFramebuffer };
-	this.materialOcean.uniforms.u_normalMap = { type: "t", value: this.normalMapFramebuffer }; 
-	this.materialOcean.uniforms.u_oceanColor = { type: "v3", value: this.oceanColor }; 
+	this.materialOcean.uniforms.u_normalMap = { type: "t", value: this.normalMapFramebuffer };
+	this.materialOcean.uniforms.u_oceanColor = { type: "v3", value: this.oceanColor };
 	this.materialOcean.uniforms.u_skyColor = { type: "v3", value: this.skyColor };
 	this.materialOcean.uniforms.u_sunDirection = { type: "v3", value: new THREE.Vector3( this.sunDirectionX, this.sunDirectionY, this.sunDirectionZ ) };
 	this.materialOcean.uniforms.u_exposure = { type: "f", value: this.exposure };
@@ -219,10 +217,10 @@ THREE.Ocean.prototype.generateMesh = function () {
 THREE.Ocean.prototype.render = function () {
 
 	this.scene.overrideMaterial = null;
-	
+
 	if ( this.changed )
 		this.renderInitialSpectrum();
-	
+
 	this.renderWavePhase();
 	this.renderSpectrum();
 	this.renderSpectrumFFT();
@@ -248,10 +246,8 @@ THREE.Ocean.prototype.generateSeedPhaseTexture = function() {
 		}
 
 	}
-	
+
 	this.pingPhaseTexture = new THREE.DataTexture( phaseArray, this.resolution, this.resolution, THREE.RGBAFormat );
-	this.pingPhaseTexture.minFilter = THREE.NearestFilter;
-	this.pingPhaseTexture.magFilter = THREE.NearestFilter;
 	this.pingPhaseTexture.wrapS = THREE.ClampToEdgeWrapping;
 	this.pingPhaseTexture.wrapT = THREE.ClampToEdgeWrapping;
 	this.pingPhaseTexture.type = THREE.FloatType;
@@ -304,7 +300,7 @@ THREE.Ocean.prototype.renderSpectrumFFT = function() {
 
 	// GPU FFT using Stockham formulation
 	var iterations = Math.log( this.resolution ) / Math.log( 2 ); // log2
-	
+
 	this.scene.overrideMaterial = this.materialOceanHorizontal;
 
 	for ( var i = 0; i < iterations; i ++ ) {

examples/js/ShaderDeferred.js

@@ -364,8 +364,6 @@ THREE.ShaderDeferred = {
 
 			"#ifdef USE_BUMPMAP",
 
-				"#extension GL_OES_standard_derivatives : enable\n",
-
 				"varying vec2 vUv;",
 				"varying vec3 vViewPosition;",
 

examples/js/ShaderSkin.js

@@ -197,9 +197,7 @@ THREE.ShaderSkin = {
 
 					"for ( int i = 0; i < MAX_POINT_LIGHTS; i ++ ) {",
 
-						"vec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );",
-
-						"vec3 lVector = lPosition.xyz + vViewPosition.xyz;",
+						"vec3 lVector = pointLightPosition[ i ] + vViewPosition.xyz;",
 
 						"float attenuation = calcLightAttenuation( length( lVector ), pointLightDistance[ i ], pointLightDecay[i] );",
 
@@ -628,9 +626,7 @@ THREE.ShaderSkin = {
 
 					"for( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {",
 
-						"vec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );",
-
-						"vec3 lVector = lPosition.xyz - mvPosition.xyz;",
+						"vec3 lVector = pointLightPosition[ i ] - mvPosition.xyz;",
 
 						"float attenuation = calcLightAttenuation( length( lVector ), pointLightDistance[ i ], pointLightDecay[i] );",
 
@@ -717,9 +713,7 @@ THREE.ShaderSkin = {
 
 					"for( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {",
 
-						"vec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );",
-
-						"vec3 lVector = lPosition.xyz - mvPosition.xyz;",
+						"vec3 lVector = pointLightPosition[ i ] - mvPosition.xyz;",
 
 						"float attenuation = calcLightAttenuation( length( lVector ), pointLightDistance[ i ], pointLightDecay[i] );",
 

examples/js/ShaderTerrain.js

@@ -168,8 +168,7 @@ THREE.ShaderTerrain = {
 
 					"for ( int i = 0; i < MAX_POINT_LIGHTS; i ++ ) {",
 
-						"vec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );",
-						"vec3 lVector = lPosition.xyz + vViewPosition.xyz;",
+						"vec3 lVector = pointLightPosition[ i ] + vViewPosition.xyz;",
 
 						"float attenuation = calcLightAttenuation( length( lVector ), pointLightDistance[ i ], pointLightDecay[i] );",
 
@@ -198,7 +197,7 @@ THREE.ShaderTerrain = {
 
 					"for( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {",
 
-						"vec3 dirVector = transformDirection( directionalLightDirection[ i ], viewMatrix );",
+						"vec3 dirVector = directionalLightDirection[ i ];",
 						"vec3 dirHalfVector = normalize( dirVector + viewPosition );",
 
 						"float dirDotNormalHalf = max( dot( normal, dirHalfVector ), 0.0 );",
@@ -222,7 +221,7 @@ THREE.ShaderTerrain = {
 
 					"for( int i = 0; i < MAX_HEMI_LIGHTS; i ++ ) {",
 
-						"vec3 lVector = transformDirection( hemisphereLightDirection[ i ], viewMatrix );",
+						"vec3 lVector = hemisphereLightDirection[ i ];",
 
 						// diffuse
 

examples/js/SimulationRenderer.js

@@ -203,10 +203,7 @@ function SimulationRenderer( WIDTH, renderer ) {
 		}
 
 		var texture = new THREE.DataTexture( a, WIDTH, WIDTH, THREE.RGBAFormat, THREE.FloatType );
-		texture.minFilter = THREE.NearestFilter;
-		texture.magFilter = THREE.NearestFilter;
 		texture.needsUpdate = true;
-		texture.flipY = false;
 
 		return texture;
 
@@ -229,10 +226,7 @@ function SimulationRenderer( WIDTH, renderer ) {
 		}
 
 		var texture = new THREE.DataTexture( a, WIDTH, WIDTH, THREE.RGBFormat, THREE.FloatType );
-		texture.minFilter = THREE.NearestFilter;
-		texture.magFilter = THREE.NearestFilter;
 		texture.needsUpdate = true;
-		texture.flipY = false;
 
 		return texture;
 

examples/js/SkyShader.js

@@ -62,9 +62,6 @@ THREE.ShaderLib[ 'sky' ] = {
 		"uniform float mieCoefficient;",
 		"uniform float mieDirectionalG;",
 
-		"vec3 sunDirection = normalize(sunPosition);",
-		"float reileighCoefficient = reileigh;",
-
 		"// constants for atmospheric scattering",
 		"const float e = 2.71828182845904523536028747135266249775724709369995957;",
 		"const float pi = 3.141592653589793238462643383279502884197169;",
@@ -160,7 +157,9 @@ THREE.ShaderLib[ 'sky' ] = {
 
 			 "// gl_FragColor = vec4(sunfade, sunfade, sunfade, 1.0);",
 
-			"reileighCoefficient = reileighCoefficient - (1.0* (1.0-sunfade));",
+			"float reileighCoefficient = reileigh - (1.0* (1.0-sunfade));",
+
+			"vec3 sunDirection = normalize(sunPosition);",
 
 			"float sunE = sunIntensity(dot(sunDirection, up));",
 

examples/js/controls/OrbitControls.js

@@ -35,6 +35,11 @@
 		this.minAzimuthAngle = - Infinity; // radians
 		this.maxAzimuthAngle = Infinity; // radians
 
+		// Set to true to enable damping (inertia)
+		// If damping is enabled, you must call controls.update() in your animation loop
+		this.enableDamping = false;
+		this.dampingFactor = 0.25;
+
 		////////////
 		// internals
 
@@ -249,8 +254,18 @@
 
 				this.object.lookAt( this.target );
 
-				thetaDelta = 0;
-				phiDelta = 0;
+				if ( this.enableDamping === true ) {
+
+					thetaDelta *= ( 1 - this.dampingFactor );
+					phiDelta *= ( 1 - this.dampingFactor );
+
+				} else {
+
+					thetaDelta = 0;
+					phiDelta = 0;
+
+				}
+
 				scale = 1;
 				panOffset.set( 0, 0, 0 );
 
@@ -307,13 +322,13 @@
 
 		this.getPolarAngle = function () {
 
-			return constraint.phi;
+			return constraint.getPolarAngle();
 
 		};
 
 		this.getAzimuthalAngle = function () {
 
-			return constraint.theta;
+			return constraint.getAzimuthalAngle();
 
 		};
 
@@ -324,24 +339,26 @@
 		this.center = this.target;
 
 		// This option actually enables dollying in and out; left as "zoom" for
-		// backwards compatibility
-		this.noZoom = false;
+		// backwards compatibility.
+		// Set to false to disable zooming
+		this.enableZoom = true;
 		this.zoomSpeed = 1.0;
 
-		// Set to true to disable this control
-		this.noRotate = false;
+		// Set to false to disable rotating
+		this.enableRotate = true;
 		this.rotateSpeed = 1.0;
 
-		// Set to true to disable this control
-		this.noPan = false;
+		// Set to false to disable panning
+		this.enablePan = true;
 		this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
 
 		// Set to true to automatically rotate around the target
+		// If auto-rotate is enabled, you must call controls.update() in your animation loop
 		this.autoRotate = false;
 		this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
 
-		// Set to true to disable use of the keys
-		this.noKeys = false;
+		// Set to false to disable use of the keys
+		this.enableKeys = true;
 
 		// The four arrow keys
 		this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
@@ -443,7 +460,7 @@
 
 			if ( event.button === scope.mouseButtons.ORBIT ) {
 
-				if ( scope.noRotate === true ) return;
+				if ( scope.enableRotate === false ) return;
 
 				state = STATE.ROTATE;
 
@@ -451,7 +468,7 @@
 
 			} else if ( event.button === scope.mouseButtons.ZOOM ) {
 
-				if ( scope.noZoom === true ) return;
+				if ( scope.enableZoom === false ) return;
 
 				state = STATE.DOLLY;
 
@@ -459,7 +476,7 @@
 
 			} else if ( event.button === scope.mouseButtons.PAN ) {
 
-				if ( scope.noPan === true ) return;
+				if ( scope.enablePan === false ) return;
 
 				state = STATE.PAN;
 
@@ -487,7 +504,7 @@
 
 			if ( state === STATE.ROTATE ) {
 
-				if ( scope.noRotate === true ) return;
+				if ( scope.enableRotate === false ) return;
 
 				rotateEnd.set( event.clientX, event.clientY );
 				rotateDelta.subVectors( rotateEnd, rotateStart );
@@ -502,7 +519,7 @@
 
 			} else if ( state === STATE.DOLLY ) {
 
-				if ( scope.noZoom === true ) return;
+				if ( scope.enableZoom === false ) return;
 
 				dollyEnd.set( event.clientX, event.clientY );
 				dollyDelta.subVectors( dollyEnd, dollyStart );
@@ -521,7 +538,7 @@
 
 			} else if ( state === STATE.PAN ) {
 
-				if ( scope.noPan === true ) return;
+				if ( scope.enablePan === false ) return;
 
 				panEnd.set( event.clientX, event.clientY );
 				panDelta.subVectors( panEnd, panStart );
@@ -549,7 +566,7 @@
 
 		function onMouseWheel( event ) {
 
-			if ( scope.enabled === false || scope.noZoom === true || state !== STATE.NONE ) return;
+			if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
 
 			event.preventDefault();
 			event.stopPropagation();
@@ -588,7 +605,7 @@
 
 		function onKeyDown( event ) {
 
-			if ( scope.enabled === false || scope.noKeys === true || scope.noPan === true ) return;
+			if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
 
 			switch ( event.keyCode ) {
 
@@ -624,7 +641,7 @@
 
 				case 1:	// one-fingered touch: rotate
 
-					if ( scope.noRotate === true ) return;
+					if ( scope.enableRotate === false ) return;
 
 					state = STATE.TOUCH_ROTATE;
 
@@ -633,7 +650,7 @@
 
 				case 2:	// two-fingered touch: dolly
 
-					if ( scope.noZoom === true ) return;
+					if ( scope.enableZoom === false ) return;
 
 					state = STATE.TOUCH_DOLLY;
 
@@ -645,7 +662,7 @@
 
 				case 3: // three-fingered touch: pan
 
-					if ( scope.noPan === true ) return;
+					if ( scope.enablePan === false ) return;
 
 					state = STATE.TOUCH_PAN;
 
@@ -675,7 +692,7 @@
 
 				case 1: // one-fingered touch: rotate
 
-					if ( scope.noRotate === true ) return;
+					if ( scope.enableRotate === false ) return;
 					if ( state !== STATE.TOUCH_ROTATE ) return;
 
 					rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
@@ -693,7 +710,7 @@
 
 				case 2: // two-fingered touch: dolly
 
-					if ( scope.noZoom === true ) return;
+					if ( scope.enableZoom === false ) return;
 					if ( state !== STATE.TOUCH_DOLLY ) return;
 
 					var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
@@ -720,7 +737,7 @@
 
 				case 3: // three-fingered touch: pan
 
-					if ( scope.noPan === true ) return;
+					if ( scope.enablePan === false ) return;
 					if ( state !== STATE.TOUCH_PAN ) return;
 
 					panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
@@ -949,6 +966,148 @@
 
 			}
 
+		},
+
+		enableDamping : {
+
+			get: function () {
+
+				return this.constraint.enableDamping;
+
+			},
+
+			set: function ( value ) {
+
+				this.constraint.enableDamping = value;
+
+			}
+
+		},
+
+		dampingFactor : {
+
+			get: function () {
+
+				return this.constraint.dampingFactor;
+
+			},
+
+			set: function ( value ) {
+
+				this.constraint.dampingFactor = value;
+
+			}
+
+		},
+
+		// backward compatibility
+
+		noZoom: {
+
+			get: function () {
+
+				console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
+				return ! this.enableZoom;
+
+			},
+
+			set: function ( value ) {
+
+				console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
+				this.enableZoom = ! value;
+
+			}
+
+		},
+
+		noRotate: {
+
+			get: function () {
+
+				console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
+				return ! this.enableRotate;
+
+			},
+
+			set: function ( value ) {
+
+				console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
+				this.enableRotate = ! value;
+
+			}
+
+		},
+
+		noPan: {
+
+			get: function () {
+
+				console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
+				return ! this.enablePan;
+
+			},
+
+			set: function ( value ) {
+
+				console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
+				this.enablePan = ! value;
+
+			}
+
+		},
+
+		noKeys: {
+
+			get: function () {
+
+				console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
+				return ! this.enableKeys;
+
+			},
+
+			set: function ( value ) {
+
+				console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
+				this.enableKeys = ! value;
+
+			}
+
+		},
+
+		staticMoving : {
+
+			get: function () {
+
+				console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
+				return ! this.constraint.enableDamping;
+
+			},
+
+			set: function ( value ) {
+
+				console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
+				this.constraint.enableDamping = ! value;
+
+			}
+
+		},
+
+		dynamicDampingFactor : {
+
+			get: function () {
+
+				console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
+				return this.constraint.dampingFactor;
+
+			},
+
+			set: function ( value ) {
+
+				console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
+				this.constraint.dampingFactor = value;
+
+			}
+
 		}
 
 	} );

examples/js/loaders/AWDLoader.js

@@ -764,9 +764,7 @@
 
 						buffer = new Uint16Array( str_len / 2 );
 						attrib = new THREE.BufferAttribute( buffer, 1 );
-						geom.addAttribute( 'index', attrib );
-
-						geom.addDrawCall( 0, str_len / 2 );
+						geom.addIndex( attrib );
 
 						idx = 0;
 

examples/js/loaders/BabylonLoader.js

@@ -87,7 +87,7 @@ THREE.BabylonLoader.prototype = {
 
 		var indices = new Uint16Array( json.indices );
 
-		geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+		geometry.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 
 		// positions
 
@@ -137,14 +137,10 @@ THREE.BabylonLoader.prototype = {
 
 				var subMesh = subMeshes[ j ];
 
-				geometry.addDrawCall( subMesh.indexStart, subMesh.indexCount );
+				geometry.addGroup( subMesh.indexStart, subMesh.indexCount );
 
 			}
 
-		} else {
-
-			geometry.addDrawCall( 0, json.indices.length );
-
 		}
 
 		return geometry;

examples/js/loaders/ColladaLoader.js

@@ -96,6 +96,10 @@
 				loader.setCrossOrigin( this.crossOrigin );
 				loader.load( url, function ( text ) {
 
+					var parts = url.split( '/' );
+					parts.pop();
+					baseUrl = ( parts.length < 1 ? '.' : parts.join( '/' ) ) + '/';
+
 					var xmlParser = new DOMParser();
 					var responseXML = xmlParser.parseFromString( text, "application/xml" );
 					onLoad( scope.parse( responseXML, url ) );
@@ -116,18 +120,10 @@
 
 		},
 
-		parse: function( doc, url ) {
+		parse: function( doc ) {
 
 			COLLADA = doc;
 
-			if ( url !== undefined ) {
-
-				var parts = url.split( '/' );
-				parts.pop();
-				baseUrl = ( parts.length < 1 ? '.' : parts.join( '/' ) ) + '/';
-
-			}
-
 			this.parseAsset();
 			this.setUpConversion();
 			images = this.parseLib( "library_images image", _Image, "image" );
@@ -2816,7 +2812,7 @@
 
 									var image = images[ surface.init_from ];
 
-									if ( image ) {
+									if ( image && baseUrl ) {
 
 										var url = baseUrl + image.init_from;
 

examples/js/loaders/MD2Loader.js

@@ -121,6 +121,8 @@ THREE.MD2Loader.prototype = {
 
 		return function ( buffer ) {
 
+			console.time( 'MD2Loader' );
+
 			var data = new DataView( buffer );
 
 			// http://tfc.duke.free.fr/coding/md2-specs-en.html
@@ -163,14 +165,14 @@ THREE.MD2Loader.prototype = {
 			var uvs = [];
 			var offset = header.offset_st;
 
-			for ( var i = 0; i < header.num_st; i ++, offset += 4 ) {
+			for ( var i = 0, l = header.num_st; i < l; i ++ ) {
 
 				var u = data.getInt16( offset + 0, true );
 				var v = data.getInt16( offset + 2, true );
 
-				var uv = new THREE.Vector2( u / header.skinwidth, 1 - ( v / header.skinheight ) );
+				uvs.push( new THREE.Vector2( u / header.skinwidth, 1 - ( v / header.skinheight ) ) );
 
-				uvs.push( uv );
+				offset += 4;
 
 			}
 
@@ -178,15 +180,13 @@ THREE.MD2Loader.prototype = {
 
 			var offset = header.offset_tris;
 
-			for ( var i = 0; i < header.num_tris; i ++ ) {
+			for ( var i = 0, l = header.num_tris; i < l; i ++ ) {
 
 				var a = data.getUint16( offset + 0, true );
 				var b = data.getUint16( offset + 2, true );
 				var c = data.getUint16( offset + 4, true );
 
-				var face = new THREE.Face3( a, b, c );
-
-				geometry.faces.push( face );
+				geometry.faces.push( new THREE.Face3( a, b, c ) );
 
 				geometry.faceVertexUvs[ 0 ].push( [
 					uvs[ data.getUint16( offset + 6, true ) ],
@@ -202,10 +202,11 @@ THREE.MD2Loader.prototype = {
 
 			var translation = new THREE.Vector3();
 			var scale = new THREE.Vector3();
+			var string = [];
 
 			var offset = header.offset_frames;
 
-			for ( var i = 0; i < header.num_frames; i ++ ) {
+			for ( var i = 0, l = header.num_frames; i < l; i ++ ) {
 
 				scale.set(
 					data.getFloat32( offset + 0, true ),
@@ -221,8 +222,6 @@ THREE.MD2Loader.prototype = {
 
 				offset += 24;
 
-				var string = [];
-
 				for ( var j = 0; j < 16; j ++ ) {
 
 					string[ j ] = data.getUint8( offset + j, true );
@@ -242,7 +241,7 @@ THREE.MD2Loader.prototype = {
 					var x = data.getUint8( offset ++, true );
 					var y = data.getUint8( offset ++, true );
 					var z = data.getUint8( offset ++, true );
-					var n = data.getUint8( offset ++, true );
+					var n = normals[ data.getUint8( offset ++, true ) ];
 
 					var vertex = new THREE.Vector3(
 						x * scale.x + translation.x,
@@ -250,9 +249,7 @@ THREE.MD2Loader.prototype = {
 						y * scale.y + translation.y
 					);
 
-					var normal = new THREE.Vector3(
-						normals[ n ][ 0 ], normals[ n ][ 2 ], normals[ n ][ 1 ]
-					);
+					var normal = new THREE.Vector3( n[ 0 ], n[ 2 ], n[ 1 ] );
 
 					frame.vertices.push( vertex );
 					frame.normals.push( normal );
@@ -305,6 +302,8 @@ THREE.MD2Loader.prototype = {
 
 			}
 
+			console.timeEnd( 'MD2Loader' );
+
 			return geometry;
 
 		}

examples/js/loaders/UTF8Loader.js

@@ -94,13 +94,11 @@ THREE.UTF8Loader.BufferGeometryCreator.prototype.create = function ( attribArray
 
 	}
 
-	geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+	geometry.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 	geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 	geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
 	geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
 
-	geometry.addDrawCall( 0, indices.length );
-
 	geometry.computeBoundingSphere();
 
 	return geometry;

examples/js/loaders/VTKLoader.js

@@ -101,7 +101,7 @@ THREE.VTKLoader.prototype = {
 		}
 
 		var geometry = new THREE.BufferGeometry();
-		geometry.addAttribute( 'index', new THREE.BufferAttribute( new ( indices.length > 65535 ? Uint32Array : Uint16Array )( indices ), 1 ) );
+		geometry.addIndex( new THREE.BufferAttribute( new ( indices.length > 65535 ? Uint32Array : Uint16Array )( indices ), 1 ) );
 		geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( positions ), 3 ) );
 
 		return geometry;

examples/js/loaders/ctm/CTMLoader.js

@@ -219,7 +219,7 @@ THREE.CTMLoader.prototype.createModel = function ( file, callback ) {
 
 		}
 
-		this.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+		this.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 		this.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
 		if ( normals !== undefined ) {
@@ -246,7 +246,7 @@ THREE.CTMLoader.prototype.createModel = function ( file, callback ) {
 	Model.prototype.constructor = Model;
 
 	var geometry = new Model();
-	
+
 	// compute vertex normals if not present in the CTM model
 	if ( geometry.attributes.normal === undefined ) {
 		geometry.computeVertexNormals();

examples/js/postprocessing/GlitchPass.js

@@ -110,10 +110,7 @@ THREE.GlitchPass.prototype = {
 		var texture = new THREE.DataTexture( data_arr, dt_size, dt_size, THREE.RGBFormat, THREE.FloatType );
 		console.log( texture );
 		console.log( dt_size );
-		texture.minFilter = THREE.NearestFilter;
-		texture.magFilter = THREE.NearestFilter;
 		texture.needsUpdate = true;
-		texture.flipY = false;
 		return texture;
 
 	}

examples/js/renderers/Projector.js

@@ -394,7 +394,7 @@ THREE.Projector = function () {
 				if ( geometry instanceof THREE.BufferGeometry ) {
 
 					var attributes = geometry.attributes;
-					var offsets = geometry.drawcalls;
+					var groups = geometry.groups;
 
 					if ( attributes.position === undefined ) continue;
 
@@ -430,17 +430,17 @@ THREE.Projector = function () {
 
 					}
 
-					if ( attributes.index !== undefined ) {
+					if ( geometry.index !== null ) {
 
-						var indices = attributes.index.array;
+						var indices = geometry.index.array;
 
-						if ( offsets.length > 0 ) {
+						if ( groups.length > 0 ) {
 
-							for ( var o = 0; o < offsets.length; o ++ ) {
+							for ( var o = 0; o < groups.length; o ++ ) {
 
-								var offset = offsets[ o ];
+								var group = groups[ o ];
 
-								for ( var i = offset.start, l = offset.start + offset.count; i < l; i += 3 ) {
+								for ( var i = group.start, l = group.start + group.count; i < l; i += 3 ) {
 
 									renderList.pushTriangle( indices[ i ], indices[ i + 1 ], indices[ i + 2 ] );
 

examples/js/renderers/WebGLDeferredRenderer.js

@@ -96,7 +96,8 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		uniforms:       THREE.UniformsUtils.clone( normalDepthShader.uniforms ),
 		vertexShader:   normalDepthShader.vertexShader,
 		fragmentShader: normalDepthShader.fragmentShader,
-		blending:		THREE.NoBlending
+		blending:       THREE.NoBlending,
+		derivatives:    true
 
 	} );
 
@@ -200,9 +201,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		if ( originalMaterial.envMap ) {
 
 			uniforms.envMap.value = originalMaterial.envMap;
-			uniforms.useRefract.value = originalMaterial.envMap.mapping instanceof THREE.CubeRefractionMapping;
 			uniforms.refractionRatio.value = originalMaterial.refractionRatio;
-			uniforms.combine.value = originalMaterial.combine;
 			uniforms.reflectivity.value = originalMaterial.reflectivity;
 			uniforms.flipEnvMap.value = ( originalMaterial.envMap instanceof THREE.WebGLRenderTargetCube ) ? 1 : - 1;
 
@@ -277,9 +276,10 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 				uniforms:       uniforms,
 				vertexShader:   normalDepthShader.vertexShader,
 				fragmentShader: normalDepthShader.fragmentShader,
-				shading:		originalMaterial.shading,
-				defines:		defines,
-				blending:		THREE.NoBlending
+				shading:        originalMaterial.shading,
+				defines:        defines,
+				blending:       THREE.NoBlending,
+				derivatives:    true
 
 			} );
 

examples/js/shaders/BokehShader2.js

@@ -73,11 +73,6 @@ THREE.BokehShader = {
 
 		"const float PI = 3.14159265;",
 
-		"float width = textureWidth; //texture width",
-		"float height = textureHeight; //texture height",
-
-		"vec2 texel = vec2(1.0/width,1.0/height);",
-
 		"uniform float focalDepth;  //focal distance value in meters, but you may use autofocus option below",
 		"uniform float focalLength; //focal length in mm",
 		"uniform float fstop; //f-stop value",
@@ -113,9 +108,6 @@ THREE.BokehShader = {
 		"float vignfade = 22.0; // f-stops till vignete fades",
 
 		"uniform bool shaderFocus;",
-
-		"bool autofocus = shaderFocus;",
-		"//use autofocus in shader - use with focusCoords",
 		"// disable if you use external focalDepth value",
 
 		"uniform vec2 focusCoords;",
@@ -134,7 +126,6 @@ THREE.BokehShader = {
 		"uniform bool noise; //use noise instead of pattern for sample dithering",
 
 		"uniform float dithering;",
-		"float namount = dithering; //dither amount",
 
 		"uniform bool depthblur; // blur the depth buffer",
 		"float dbsize = 1.25; // depth blur size",
@@ -191,7 +182,7 @@ THREE.BokehShader = {
 			"float kernel[9];",
 			"vec2 offset[9];",
 
-			"vec2 wh = vec2(texel.x, texel.y) * dbsize;",
+			"vec2 wh = vec2(1.0/textureWidth,1.0/textureHeight) * dbsize;",
 
 			"offset[0] = vec2(-wh.x,-wh.y);",
 			"offset[1] = vec2( 0.0, -wh.y);",
@@ -223,6 +214,7 @@ THREE.BokehShader = {
 			"//processing the sample",
 
 			"vec3 col = vec3(0.0);",
+			"vec2 texel = vec2(1.0/textureWidth,1.0/textureHeight);",
 
 			"col.r = texture2D(tColor,coords + vec2(0.0,1.0)*texel*fringe*blur).r;",
 			"col.g = texture2D(tColor,coords + vec2(-0.866,-0.5)*texel*fringe*blur).g;",
@@ -237,8 +229,8 @@ THREE.BokehShader = {
 		"vec2 rand(vec2 coord) {",
 			"// generating noise / pattern texture for dithering",
 
-			"float noiseX = ((fract(1.0-coord.s*(width/2.0))*0.25)+(fract(coord.t*(height/2.0))*0.75))*2.0-1.0;",
-			"float noiseY = ((fract(1.0-coord.s*(width/2.0))*0.75)+(fract(coord.t*(height/2.0))*0.25))*2.0-1.0;",
+			"float noiseX = ((fract(1.0-coord.s*(textureWidth/2.0))*0.25)+(fract(coord.t*(textureHeight/2.0))*0.75))*2.0-1.0;",
+			"float noiseY = ((fract(1.0-coord.s*(textureWidth/2.0))*0.75)+(fract(coord.t*(textureHeight/2.0))*0.25))*2.0-1.0;",
 
 			"if (noise) {",
 				"noiseX = clamp(fract(sin(dot(coord ,vec2(12.9898,78.233))) * 43758.5453),0.0,1.0)*2.0-1.0;",
@@ -297,7 +289,7 @@ THREE.BokehShader = {
 
 			"float fDepth = focalDepth;",
 
-			"if (autofocus) {",
+			"if (shaderFocus) {",
 
 				"fDepth = linearize(texture2D(tDepth,focusCoords).x);",
 
@@ -328,12 +320,12 @@ THREE.BokehShader = {
 
 			"// calculation of pattern for dithering",
 
-			"vec2 noise = rand(vUv.xy)*namount*blur;",
+			"vec2 noise = rand(vUv.xy)*dithering*blur;",
 
 			"// getting blur x and y step factor",
 
-			"float w = (1.0/width)*blur*maxblur+noise.x;",
-			"float h = (1.0/height)*blur*maxblur+noise.y;",
+			"float w = (1.0/textureWidth)*blur*maxblur+noise.x;",
+			"float h = (1.0/textureHeight)*blur*maxblur+noise.y;",
 
 			"// calculation of final color",
 

examples/js/shaders/NormalDisplacementShader.js

@@ -186,8 +186,7 @@ THREE.NormalDisplacementShader = {
 
 		"		for ( int i = 0; i < MAX_POINT_LIGHTS; i ++ ) {",
 
-		"			vec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );",
-		"			vec3 pointVector = lPosition.xyz + vViewPosition.xyz;",
+		"			vec3 pointVector = pointLightPosition[ i ] + vViewPosition.xyz;",
 
 		"			float pointDistance = 1.0;",
 		"			if ( pointLightDistance[ i ] > 0.0 )",
@@ -222,8 +221,7 @@ THREE.NormalDisplacementShader = {
 
 		"		for ( int i = 0; i < MAX_SPOT_LIGHTS; i ++ ) {",
 
-		"			vec4 lPosition = viewMatrix * vec4( spotLightPosition[ i ], 1.0 );",
-		"			vec3 spotVector = lPosition.xyz + vViewPosition.xyz;",
+		"			vec3 spotVector = spotLightPosition[ i ] + vViewPosition.xyz;",
 
 		"			float spotDistance = 1.0;",
 		"			if ( spotLightDistance[ i ] > 0.0 )",
@@ -231,7 +229,7 @@ THREE.NormalDisplacementShader = {
 
 		"			spotVector = normalize( spotVector );",
 
-		"			float spotEffect = dot( spotLightDirection[ i ], normalize( spotLightPosition[ i ] - vWorldPosition ) );",
+		"			float spotEffect = dot( spotLightDirection[ i ], spotVector );",
 
 		"			if ( spotEffect > spotLightAngleCos[ i ] ) {",
 
@@ -267,8 +265,7 @@ THREE.NormalDisplacementShader = {
 
 		"		for( int i = 0; i < MAX_DIR_LIGHTS; i ++ ) {",
 
-		"			vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );",
-		"			vec3 dirVector = normalize( lDirection.xyz );",
+		"			vec3 dirVector = directionalLightDirection[ i ];",
 
 					// diffuse
 
@@ -297,8 +294,7 @@ THREE.NormalDisplacementShader = {
 
 		"		for( int i = 0; i < MAX_HEMI_LIGHTS; i ++ ) {",
 
-		"			vec4 lDirection = viewMatrix * vec4( hemisphereLightDirection[ i ], 0.0 );",
-		"			vec3 lVector = normalize( lDirection.xyz );",
+		"			vec3 lVector = hemisphereLightDirection[ i ];",
 
 					// diffuse
 

examples/js/shaders/OceanShaders.js

@@ -55,7 +55,7 @@ THREE.ShaderLib[ 'ocean_subtransform' ] = {
 		'uniform float u_subtransformSize;',
 
 		'varying vec2 vUV;',
-		
+
 		'vec2 multiplyComplex (vec2 a, vec2 b) {',
 			'return vec2(a[0] * b[0] - a[1] * b[1], a[1] * b[0] + a[0] * b[1]);',
 		'}',
@@ -105,7 +105,7 @@ THREE.ShaderLib[ 'ocean_initial_spectrum' ] = {
 		'uniform vec2 u_wind;',
 		'uniform float u_resolution;',
 		'uniform float u_size;',
-		
+
 		'float square (float x) {',
 			'return x * x;',
 		'}',
@@ -120,13 +120,13 @@ THREE.ShaderLib[ 'ocean_initial_spectrum' ] = {
 
 		'void main (void) {',
 			'vec2 coordinates = gl_FragCoord.xy - 0.5;',
-			
+
 			'float n = (coordinates.x < u_resolution * 0.5) ? coordinates.x : coordinates.x - u_resolution;',
 			'float m = (coordinates.y < u_resolution * 0.5) ? coordinates.y : coordinates.y - u_resolution;',
-			
+
 			'vec2 K = (2.0 * PI * vec2(n, m)) / u_size;',
 			'float k = length(K);',
-			
+
 			'float l_wind = length(u_wind);',
 
 			'float Omega = 0.84;',
@@ -206,7 +206,7 @@ THREE.ShaderLib[ 'ocean_phase' ] = {
 			'float phase = texture2D(u_phases, vUV).r;',
 			'float deltaPhase = omega(length(waveVector)) * u_deltaTime;',
 			'phase = mod(phase + deltaPhase, 2.0 * PI);',
-		
+
 			'gl_FragColor = vec4(phase, 0.0, 0.0, 0.0);',
 		'}'
 	].join( '\n' )
@@ -273,7 +273,7 @@ THREE.ShaderLib[ 'ocean_spectrum' ] = {
 				'hX = vec2(0.0);',
 				'hZ = vec2(0.0);',
 			'}',
-		
+
 			'gl_FragColor = vec4(hX + multiplyByI(h), hZ);',
 		'}'
 	].join( '\n' )
@@ -291,7 +291,7 @@ THREE.ShaderLib[ 'ocean_normals' ] = {
 		'precision highp float;',
 
 		'varying vec2 vUV;',
-		
+
 		'uniform sampler2D u_displacementMap;',
 		'uniform float u_resolution;',
 		'uniform float u_size;',
@@ -310,7 +310,7 @@ THREE.ShaderLib[ 'ocean_normals' ] = {
 			'vec3 topLeft = cross(top, left);',
 			'vec3 bottomLeft = cross(left, bottom);',
 			'vec3 bottomRight = cross(bottom, right);',
-		
+
 			'gl_FragColor = vec4(normalize(topRight + topLeft + bottomLeft + bottomRight), 1.0);',
 		'}'
 	].join( '\n' )
@@ -335,7 +335,7 @@ THREE.ShaderLib[ 'ocean_main' ] = {
 	},
 	vertexShader: [
 		'precision highp float;',
-		
+
 		'varying vec3 vPos;',
 		'varying vec2 vUV;',
 

examples/js/shaders/SSAOShader.js

@@ -61,15 +61,6 @@ THREE.SSAOShader = {
 		"#define DL 2.399963229728653",  // PI * ( 3.0 - sqrt( 5.0 ) )
 		"#define EULER 2.718281828459045",
 
-		// helpers
-
-		"float width = size.x;",   // texture width
-		"float height = size.y;",  // texture height
-
-		"float cameraFarPlusNear = cameraFar + cameraNear;",
-		"float cameraFarMinusNear = cameraFar - cameraNear;",
-		"float cameraCoef = 2.0 * cameraNear;",
-
 		// user variables
 
 		"const int samples = 8;",     // ao sample count
@@ -107,8 +98,8 @@ THREE.SSAOShader = {
 
 			"} else {",
 
-				"float ff = fract( 1.0 - coord.s * ( width / 2.0 ) );",
-				"float gg = fract( coord.t * ( height / 2.0 ) );",
+				"float ff = fract( 1.0 - coord.s * ( size.x / 2.0 ) );",
+				"float gg = fract( coord.t * ( size.y / 2.0 ) );",
 
 				"noise = vec2( 0.25, 0.75 ) * vec2( ff ) + vec2( 0.75, 0.25 ) * gg;",
 
@@ -120,6 +111,10 @@ THREE.SSAOShader = {
 
 		"float readDepth( const in vec2 coord ) {",
 
+			"float cameraFarPlusNear = cameraFar + cameraNear;",
+			"float cameraFarMinusNear = cameraFar - cameraNear;",
+			"float cameraCoef = 2.0 * cameraNear;",
+
 			// "return ( 2.0 * cameraNear ) / ( cameraFar + cameraNear - unpackDepth( texture2D( tDepth, coord ) ) * ( cameraFar - cameraNear ) );",
 			"return cameraCoef / ( cameraFarPlusNear - unpackDepth( texture2D( tDepth, coord ) ) * cameraFarMinusNear );",
 
@@ -183,8 +178,8 @@ THREE.SSAOShader = {
 
 			"float tt = clamp( depth, aoClamp, 1.0 );",
 
-			"float w = ( 1.0 / width )  / tt + ( noise.x * ( 1.0 - noise.x ) );",
-			"float h = ( 1.0 / height ) / tt + ( noise.y * ( 1.0 - noise.y ) );",
+			"float w = ( 1.0 / size.x )  / tt + ( noise.x * ( 1.0 - noise.x ) );",
+			"float h = ( 1.0 / size.y ) / tt + ( noise.y * ( 1.0 - noise.y ) );",
 
 			"float ao = 0.0;",
 

examples/misc_controls_orbit.html

@@ -48,31 +48,34 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
+			var stats;
 
 			var camera, controls, scene, renderer;
 
 			init();
-			render();
+			animate();
 
-			function animate() {
+			function init() {
 
-				requestAnimationFrame(animate);
-				controls.update();
+				scene = new THREE.Scene();
+				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
-			}
+				renderer = new THREE.WebGLRenderer();
+				renderer.setClearColor( scene.fog.color );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-			function init() {
+				var container = document.getElementById( 'container' );
+				container.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 500;
 
-				controls = new THREE.OrbitControls( camera );
-				controls.damping = 0.2;
-				controls.addEventListener( 'change', render );
-
-				scene = new THREE.Scene();
-				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				//controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
+				controls.enableDamping = true;
+				controls.dampingFactor = 0.25;
+				controls.enableZoom = false;
 
 				// world
 
@@ -91,7 +94,6 @@
 
 				}
 
-
 				// lights
 
 				light = new THREE.DirectionalLight( 0xffffff );
@@ -105,16 +107,7 @@
 				light = new THREE.AmbientLight( 0x222222 );
 				scene.add( light );
 
-
-				// renderer
-
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				container = document.getElementById( 'container' );
-				container.appendChild( renderer.domElement );
+				//
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
@@ -126,8 +119,6 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				animate();
-
 			}
 
 			function onWindowResize() {
@@ -137,6 +128,16 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
+
+				stats.update();
+
 				render();
 
 			}
@@ -144,11 +145,9 @@
 			function render() {
 
 				renderer.render( scene, camera );
-				stats.update();
 
 			}
 
-
 		</script>
 
 	</body>

examples/webgl_buffergeometry.html

@@ -23,7 +23,6 @@
 			}
 
 			a {
-
 				color: #0080ff;
 			}
 

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -98,13 +98,6 @@
 
 			scene = new THREE.Scene();
 
-			var attributes = {
-
-				size:        { type: 'f', value: null },
-				customColor: { type: 'c', value: null }
-
-			};
-
 			uniforms = {
 
 				color:     { type: "c", value: new THREE.Color( 0xffffff ) },
@@ -115,7 +108,6 @@
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
 				uniforms:       uniforms,
-				attributes:     attributes,
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
@@ -131,30 +123,30 @@
 			geometry = new THREE.BufferGeometry();
 
 			var positions = new Float32Array( particles * 3 );
-			var values_color = new Float32Array( particles * 3 );
-			var values_size = new Float32Array( particles );
+			var colors = new Float32Array( particles * 3 );
+			var sizes = new Float32Array( particles );
 
 			var color = new THREE.Color();
 
-			for( var v = 0; v < particles; v++ ) {
+			for ( var i = 0, i3 = 0; i < particles; i ++, i3 += 3 ) {
 
-				values_size[ v ] = 20;
+				positions[ i3 + 0 ] = ( Math.random() * 2 - 1 ) * radius;
+				positions[ i3 + 1 ] = ( Math.random() * 2 - 1 ) * radius;
+				positions[ i3 + 2 ] = ( Math.random() * 2 - 1 ) * radius;
 
-				positions[ v * 3 + 0 ] = ( Math.random() * 2 - 1 ) * radius;
-				positions[ v * 3 + 1 ] = ( Math.random() * 2 - 1 ) * radius;
-				positions[ v * 3 + 2 ] = ( Math.random() * 2 - 1 ) * radius;
+				color.setHSL( i / particles, 1.0, 0.5 );
 
-				color.setHSL( v / particles, 1.0, 0.5 );
+				colors[ i3 + 0 ] = color.r;
+				colors[ i3 + 1 ] = color.g;
+				colors[ i3 + 2 ] = color.b;
 
-				values_color[ v * 3 + 0 ] = color.r;
-				values_color[ v * 3 + 1 ] = color.g;
-				values_color[ v * 3 + 2 ] = color.b;
+				sizes[ i ] = 20;
 
 			}
 
 			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( values_color, 3 ) );
-			geometry.addAttribute( 'size', new THREE.BufferAttribute( values_size, 1 ) );
+			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
 
 			particleSystem = new THREE.PointCloud( geometry, shaderMaterial );
 
@@ -202,11 +194,11 @@
 
 			particleSystem.rotation.z = 0.01 * time;
 
-			var size = geometry.attributes.size.array;
+			var sizes = geometry.attributes.size.array;
 
-			for( var i = 0; i < particles; i++ ) {
+			for ( var i = 0; i < particles; i++ ) {
 
-				size[ i ] = 10 * ( 1 + Math.sin( 0.1 * i + time ) );
+				sizes[ i ] = 10 * ( 1 + Math.sin( 0.1 * i + time ) );
 
 			}
 
@@ -216,9 +208,7 @@
 
 		}
 
-
 	</script>
 
 </body>
-
 </html>

examples/webgl_buffergeometry_drawcalls.html

@@ -23,7 +23,6 @@
 			}
 
 			a {
-
 				color: #0080ff;
 			}
 
@@ -82,7 +81,7 @@
 				gui.add( effectController, "particleCount", 0, maxParticleCount, 1 ).onChange( function( value ) {
 
 					particleCount = parseInt( value );
-					particles.drawcalls[ 0 ].count = particleCount;
+					particles.groups[ 0 ].count = particleCount;
 
 				});
 
@@ -147,21 +146,21 @@
 
 				}
 
-				particles.addDrawCall( 0, particleCount );
-				particles.addAttribute( 'position', new THREE.DynamicBufferAttribute( particlePositions, 3 ) );
+				particles.addGroup( 0, particleCount );
+				particles.addAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ).setDynamic( true ) );
 
 				// create the particle system
-				pointCloud = new THREE.PointCloud( particles, pMaterial );
+				pointCloud = new THREE.PointCloud( particles, new THREE.MultiMaterial( [ pMaterial ] ) );
 				group.add( pointCloud );
 
 				var geometry = new THREE.BufferGeometry();
 
-				geometry.addAttribute( 'position', new THREE.DynamicBufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new THREE.DynamicBufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setDynamic( true ) );
+				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
 
 				geometry.computeBoundingSphere();
 
-				geometry.addDrawCall( 0, 0 );
+				geometry.addGroup( 0, 0 );
 
 				var material = new THREE.LineBasicMaterial( {
 					vertexColors: THREE.VertexColors,
@@ -169,7 +168,7 @@
 					transparent: true
 				} );
 
-				linesMesh = new THREE.LineSegments( geometry, material );
+				linesMesh = new THREE.LineSegments( geometry, new THREE.MultiMaterial( [ material ] ) );
 				group.add( linesMesh );
 
 				//
@@ -274,7 +273,7 @@
 				}
 
 
-				linesMesh.geometry.drawcalls[ 0 ].count = numConnected * 2;
+				linesMesh.geometry.groups[ 0 ].count = numConnected * 2;
 				linesMesh.geometry.attributes.position.needsUpdate = true;
 				linesMesh.geometry.attributes.color.needsUpdate = true;
 

examples/webgl_buffergeometry_instancing.html

@@ -1,276 +1,272 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>three.js webgl - instancing test (single triangle)</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <style>
-        body {
-            color: #ffffff;
-            font-family: Monospace;
-            font-size: 13px;
-            text-align: center;
-            font-weight: bold;
-            background-color: #000000;
-            margin: 0px;
-            overflow: hidden;
-        }
-
-        #info {
-            position: absolute;
-            top: 0px;
-            width: 100%;
-            padding: 5px;
-        }
-
-        a {
-            color: #ffffff;
-        }
-
-        #oldie a {
-            color: #da0;
-        }
-        #notSupported {
-          width: 50%;
-          margin: auto;
-          border: 2px red solid;
-          margin-top: 20px;
-          padding: 10px;
-        }
-    </style>
+	<title>three.js webgl - instancing test (single triangle)</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<style>
+		body {
+			color: #ffffff;
+			font-family: Monospace;
+			font-size: 13px;
+			text-align: center;
+			font-weight: bold;
+			background-color: #000000;
+			margin: 0px;
+			overflow: hidden;
+		}
+
+		#info {
+			position: absolute;
+			top: 0px;
+			width: 100%;
+			padding: 5px;
+		}
+
+		a {
+			color: #ffffff;
+		}
+
+		#oldie a {
+			color: #da0;
+		}
+
+		#notSupported {
+			width: 50%;
+			margin: auto;
+			border: 2px red solid;
+			margin-top: 20px;
+			padding: 10px;
+		}
+	</style>
 </head>
 <body>
 
-    <div id="container"></div>
-    <div id="info">
-        <a href="http://threejs.org" target="_blank">three.js</a> - instancing demo (single triangle)
-        <div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
-    </div>
+	<div id="container"></div>
+	<div id="info">
+		<a href="http://threejs.org" target="_blank">three.js</a> - instancing demo (single triangle)
+		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
+	</div>
 
-    <script src="js/libs/dat.gui.min.js"></script>
-    <script src="../build/three.min.js"></script>
-    <script src="js/Detector.js"></script>
-    <script src="js/libs/stats.min.js"></script>
+	<script src="js/libs/dat.gui.min.js"></script>
+	<script src="../build/three.min.js"></script>
+	<script src="js/Detector.js"></script>
+	<script src="js/libs/stats.min.js"></script>
 
-    <script id="vertexShader" type="x-shader/x-vertex">
-        precision highp float;
+	<script id="vertexShader" type="x-shader/x-vertex">
+		precision highp float;
 
-        uniform float sineTime;
+		uniform float sineTime;
 
-        uniform mat4 modelViewMatrix; 
-        uniform mat4 projectionMatrix; 
+		uniform mat4 modelViewMatrix;
+		uniform mat4 projectionMatrix;
 
-        attribute vec3 position;
-        attribute vec3 offset;
-        attribute vec4 color;
-        attribute vec4 orientationStart;
-        attribute vec4 orientationEnd;
+		attribute vec3 position;
+		attribute vec3 offset;
+		attribute vec4 color;
+		attribute vec4 orientationStart;
+		attribute vec4 orientationEnd;
 
-        varying vec3 vPosition;
-        varying vec4 vColor;
+		varying vec3 vPosition;
+		varying vec4 vColor;
 
-        void main()	{
+		void main(){
 
-        vPosition = offset * max(abs(sineTime * 2.0 + 1.0), 0.5) + position;
-        vec4 orientation = normalize(mix(orientationStart, orientationEnd, sineTime));
-        vec3 vcV = cross(orientation.xyz, vPosition);
-        vPosition = vcV * (2.0 * orientation.w) + (cross(orientation.xyz, vcV) * 2.0 + vPosition);
+			vPosition = offset * max(abs(sineTime * 2.0 + 1.0), 0.5) + position;
+			vec4 orientation = normalize(mix(orientationStart, orientationEnd, sineTime));
+			vec3 vcV = cross(orientation.xyz, vPosition);
+			vPosition = vcV * (2.0 * orientation.w) + (cross(orientation.xyz, vcV) * 2.0 + vPosition);
 
-        vColor = color;
+			vColor = color;
 
-        gl_Position = projectionMatrix * modelViewMatrix * vec4( vPosition, 1.0 );
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( vPosition, 1.0 );
 
-        }
+		}
 
-    </script>
+	</script>
 
-    <script id="fragmentShader" type="x-shader/x-fragment">
+	<script id="fragmentShader" type="x-shader/x-fragment">
 
-        precision highp float;
+		precision highp float;
 
-        uniform float time;
+		uniform float time;
 
-        varying vec3 vPosition;
-        varying vec4 vColor;
+		varying vec3 vPosition;
+		varying vec4 vColor;
 
-        void main()	{
+		void main() {
 
-        vec4 color = vec4( vColor );
-        color.r += sin( vPosition.x * 10.0 + time ) * 0.5;
+			vec4 color = vec4( vColor );
+			color.r += sin( vPosition.x * 10.0 + time ) * 0.5;
 
-        gl_FragColor = color;
+			gl_FragColor = color;
 
-        }
+		}
 
-    </script>
+	</script>
 
-    <script>
+	<script>
 
-        if ( !Detector.webgl ) Detector.addGetWebGLMessage();
+		if ( !Detector.webgl ) Detector.addGetWebGLMessage();
 
-        var container, stats;
+		var container, stats;
 
-        var camera, scene, renderer;
+		var camera, scene, renderer;
 
-        init();
-        animate();
+		init();
+		animate();
 
-        function init() {
+		function init() {
 
-            container = document.getElementById( 'container' );
+			container = document.getElementById( 'container' );
 
-            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
-            camera.position.z = 2;
+			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
+			camera.position.z = 2;
 
-            scene = new THREE.Scene();
+			scene = new THREE.Scene();
 
-            // geometry
+			// geometry
 
-            var triangles = 1;
-            var instances = 65000;
+			var triangles = 1;
+			var instances = 65000;
 
-            var geometry = new THREE.InstancedBufferGeometry();
+			var geometry = new THREE.InstancedBufferGeometry();
 
-            geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
-            var gui = new dat.GUI();
-            gui.add( geometry, "maxInstancedCount", 0, 65000 );
+			geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
+			var gui = new dat.GUI();
+			gui.add( geometry, "maxInstancedCount", 0, instances );
 
-            var vertices = new THREE.BufferAttribute( new Float32Array( triangles * 3 * 3 ), 3 );
+			var vertices = new THREE.BufferAttribute( new Float32Array( triangles * 3 * 3 ), 3 );
 
-            vertices.setXYZ( 0, 0.025, -0.025, 0 );
-            vertices.setXYZ( 1, -0.025, 0.025, 0 );
-            vertices.setXYZ( 2, 0, 0, 0.025 );
+			vertices.setXYZ( 0, 0.025, -0.025, 0 );
+			vertices.setXYZ( 1, -0.025, 0.025, 0 );
+			vertices.setXYZ( 2, 0, 0, 0.025 );
 
-            geometry.addAttribute( 'position', vertices );
+			geometry.addAttribute( 'position', vertices );
 
-            var offsets = new THREE.InstancedBufferAttribute( new Float32Array( instances * 3 ), 3, 1, false );
+			var offsets = new THREE.InstancedBufferAttribute( new Float32Array( instances * 3 ), 3, 1 );
 
-            for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
+			for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
 
-                offsets.setXYZ( i, Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
+				offsets.setXYZ( i, Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
 
-            }
+			}
 
-            geometry.addAttribute( 'offset', offsets );
+			geometry.addAttribute( 'offset', offsets );
 
-            var colors = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1, false );
+			var colors = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
 
-            for ( var i = 0, ul = colors.count; i < ul; i++ ) {
+			for ( var i = 0, ul = colors.count; i < ul; i++ ) {
 
-                colors.setXYZW( i, Math.random(), Math.random(), Math.random(), Math.random() );
+				colors.setXYZW( i, Math.random(), Math.random(), Math.random(), Math.random() );
 
-            }
+			}
 
-            geometry.addAttribute( 'color', colors );
+			geometry.addAttribute( 'color', colors );
 
-            var vector = new THREE.Vector4();
+			var vector = new THREE.Vector4();
 
-            var orientationsStart = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1, false );
+			var orientationsStart = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
 
-            for ( var i = 0, ul = orientationsStart.count; i < ul; i++ ) {
+			for ( var i = 0, ul = orientationsStart.count; i < ul; i++ ) {
 
-                vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
-                vector.normalize();
+				vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
+				vector.normalize();
 
-                orientationsStart.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
+				orientationsStart.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
 
-            }
+			}
 
-            geometry.addAttribute( 'orientationStart', orientationsStart );
+			geometry.addAttribute( 'orientationStart', orientationsStart );
 
-            var orientationsEnd = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1, false );
+			var orientationsEnd = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 );
 
-            for ( var i = 0, ul = orientationsEnd.count; i < ul; i++ ) {
+			for ( var i = 0, ul = orientationsEnd.count; i < ul; i++ ) {
 
-                vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
-                vector.normalize();
+				vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
+				vector.normalize();
 
-                orientationsEnd.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
+				orientationsEnd.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
 
-            }
+			}
 
-            geometry.addAttribute( 'orientationEnd', orientationsEnd );
+			geometry.addAttribute( 'orientationEnd', orientationsEnd );
 
-            // material
+			// material
 
-            var material = new THREE.RawShaderMaterial( {
+			var material = new THREE.RawShaderMaterial( {
 
-                uniforms: {
-                    time: { type: "f", value: 1.0 },
-                    sineTime: { type: "f", value: 1.0 }
-                },
-                vertexShader: document.getElementById( 'vertexShader' ).textContent,
-                fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-                side: THREE.DoubleSide,
-                transparent: true,
-                attributes: { 'position': 0, 'offset': 1, 'color': 2, 'orientationStart': 3, 'orientationEnd': 4 }
+				uniforms: {
+					time: { type: "f", value: 1.0 },
+					sineTime: { type: "f", value: 1.0 }
+				},
+				vertexShader: document.getElementById( 'vertexShader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+				side: THREE.DoubleSide,
+				transparent: true
 
-            } );
+			} );
 
-            var mesh = new THREE.Mesh( geometry, material );
-            scene.add( mesh );
+			var mesh = new THREE.Mesh( geometry, material );
+			scene.add( mesh );
 
-            renderer = new THREE.WebGLRenderer();
+			renderer = new THREE.WebGLRenderer();
 
-            if ( !renderer.supportsInstancedArrays ) {
-                document.getElementById( "notSupported" ).style.display = "";
-                return;
-            }
+			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === false ) {
+				document.getElementById( "notSupported" ).style.display = "";
+				return;
+			}
 
-            renderer.setClearColor( 0x101010 );
-            renderer.setPixelRatio( window.devicePixelRatio );
-            renderer.setSize( window.innerWidth, window.innerHeight );
-            container.appendChild( renderer.domElement );
+			renderer.setClearColor( 0x101010 );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			container.appendChild( renderer.domElement );
 
-            stats = new Stats();
-            stats.domElement.style.position = 'absolute';
-            stats.domElement.style.top = '0px';
-            container.appendChild( stats.domElement );
+			stats = new Stats();
+			stats.domElement.style.position = 'absolute';
+			stats.domElement.style.top = '0px';
+			container.appendChild( stats.domElement );
 
-            window.addEventListener( 'resize', onWindowResize, false );
+			window.addEventListener( 'resize', onWindowResize, false );
 
-        }
+		}
 
-        function onWindowResize( event ) {
+		function onWindowResize( event ) {
 
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
 
-            renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
-        }
+		}
 
-        //
+		//
 
-        function animate() {
+		function animate() {
 
-            requestAnimationFrame( animate );
+			requestAnimationFrame( animate );
 
-            render();
-            stats.update();
+			render();
+			stats.update();
 
-        }
+		}
 
-        var lastTime = 0;
+		function render() {
 
-        function render() {
+			var time = performance.now();
 
-            var time = performance.now();
+			var object = scene.children[0];
 
+			object.rotation.y = time * 0.0005;
+			object.material.uniforms.time.value = time * 0.005;
+			object.material.uniforms.sineTime.value = Math.sin( object.material.uniforms.time.value * 0.05 );
 
-            var object = scene.children[0];
+			renderer.render( scene, camera );
 
-            object.rotation.y = time * 0.0005;
-            object.material.uniforms.time.value = time * 0.005;
-            object.material.uniforms.sineTime.value = Math.sin( object.material.uniforms.time.value * 0.05 );
+		}
 
-            renderer.render( scene, camera );
-
-            lastTime = time;
-        }
-
-    </script>
+	</script>
 
 </body>
 
-</html>
+</html>

examples/webgl_buffergeometry_instancing_billboards.html

@@ -51,7 +51,6 @@
 	<script src="js/Detector.js"></script>
 	<script src="js/libs/stats.min.js"></script>
 
-
 	<script id="vshader" type="x-shader/x-vertex">
 		precision highp float;
 		uniform mat4 modelViewMatrix;
@@ -61,18 +60,18 @@
 		attribute vec2 uv;
 		attribute vec3 normal;
 
-		attribute vec4 translateScale;
+		attribute vec3 translate;
+		attribute float scale;
 		attribute vec3 color;
 
 		varying vec2 vUv;
 		varying vec3 vColor;
 
-		void main()	{
+		void main() {
 
-			vec4 positionAdj = vec4( translateScale.xyz, 1.0 );
-			vec4 mvPosition = modelViewMatrix * positionAdj;
+			vec4 mvPosition = modelViewMatrix * vec4( translate, 1.0 );
 
-			mvPosition.xyz += position * translateScale.w;
+			mvPosition.xyz += position * scale;
 
 			vUv = uv;
 			vColor = color;
@@ -90,12 +89,12 @@
 		varying vec2 vUv;
 		varying vec3 vColor;
 
-		void main()	{
+		void main() {
 
 			vec4 diffuseColor = texture2D( map, vUv );
 			gl_FragColor = vec4( diffuseColor.xyz * vColor, diffuseColor.w );
 
-			if ( diffuseColor.w < 0.5 ) discard; 
+			if ( diffuseColor.w < 0.5 ) discard;
 
 		}
 	</script>
@@ -105,11 +104,7 @@
 		var container, stats;
 
 		var camera, scene, renderer;
-		var particles, geometry, material, sprite;
-		var mouseX = 0, mouseY = 0;
-
-		var windowHalfX = window.innerWidth / 2;
-		var windowHalfY = window.innerHeight / 2;
+		var geometry, material, mesh;
 
 		function init() {
 
@@ -122,7 +117,7 @@
 
 			renderer = new THREE.WebGLRenderer();
 
-			if ( !renderer.supportsInstancedArrays ) {
+			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === false ) {
 				document.getElementById( "notSupported" ).style.display = "";
 				return false;
 			}
@@ -130,54 +125,45 @@
 			container = document.createElement( 'div' );
 			document.body.appendChild( container );
 
-			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
+			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 			camera.position.z = 1400;
 
 			scene = new THREE.Scene();
 
-			geometry = new THREE.InstancedBufferGeometry().copy( new THREE.CircleBufferGeometry( 1, 16 ) );
-
-			sprite = THREE.ImageUtils.loadTexture( "textures/sprites/ball.png" );
+			geometry = new THREE.InstancedBufferGeometry();
+			geometry.copy( new THREE.CircleBufferGeometry( 1, 6 ) );
 
-			var particleCount = 5000;
-
-			var translateScaleArray = new Float32Array( 4 * particleCount );
-			var colorsArray = new Float32Array( 3 * particleCount );
-
-			var color = new THREE.Color( 0xffffff );
-			for ( i = 0, ii = 0, ul = particleCount * 4; i < ul; i += 4, ii += 3 ) {
+			var particleCount = 75000;
 
-				translateScaleArray[i] = 2000 * Math.random() - 1000;
-				translateScaleArray[i + 1] = 2000 * Math.random() - 1000;
-				translateScaleArray[i + 2] = 2000 * Math.random() - 1000;
-				translateScaleArray[i + 3] = 24;
+			var translateArray = new Float32Array( particleCount * 3 );
+			var scaleArray = new Float32Array( particleCount );
+			var colorsArray = new Float32Array( particleCount * 3 );
 
-				color.setHSL(( translateScaleArray[i] + 1000 ) / 2000, 1, 0.5 );
+			for ( var i = 0, i3 = 0, l = particleCount; i < l; i ++, i3 += 3 ) {
 
-				colorsArray[ii] = color.r;
-				colorsArray[ii + 1] = color.g;
-				colorsArray[ii + 2] = color.b;
+				translateArray[ i3 + 0 ] = Math.random() * 2 - 1;
+				translateArray[ i3 + 1 ] = Math.random() * 2 - 1;
+				translateArray[ i3 + 2 ] = Math.random() * 2 - 1;
 
 			}
 
-			geometry.addAttribute( "translateScale", new THREE.InstancedBufferAttribute( translateScaleArray, 4, 1 ) );
-			geometry.addAttribute( "color", new THREE.InstancedBufferAttribute( colorsArray, 3, 1 ) );
+			geometry.addAttribute( "translate", new THREE.InstancedBufferAttribute( translateArray, 3, 1 ) );
+			geometry.addAttribute( "scale", new THREE.InstancedBufferAttribute( scaleArray, 1, 1 ).setDynamic( true ) );
+			geometry.addAttribute( "color", new THREE.InstancedBufferAttribute( colorsArray, 3, 1 ).setDynamic( true ) );
 
 			material = new THREE.RawShaderMaterial( {
 				uniforms: {
-					map: { type: "t", value: sprite }
+					map: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/circle.png" ) }
 				},
 				vertexShader: document.getElementById( 'vshader' ).textContent,
 				fragmentShader: document.getElementById( 'fshader' ).textContent,
 				depthTest: true,
-				depthWrite: true,
-				attributes: { 'translateScale': 1, 'color': 2 }
-
+				depthWrite: true
 			} );
 
-			scene.add( new THREE.Mesh( geometry, material ) );
-
-
+			mesh = new THREE.Mesh( geometry, material );
+			mesh.scale.set( 500, 500, 500 );
+			scene.add( mesh );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
@@ -190,55 +176,14 @@
 			stats.domElement.style.top = '0px';
 			container.appendChild( stats.domElement );
 
-			//
-
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-			document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-			document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-
 			window.addEventListener( 'resize', onWindowResize, false );
 
 			return true;
-		}
-
-		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 onWindowResize( event ) {
 
-			windowHalfX = window.innerWidth / 2;
-			windowHalfY = window.innerHeight / 2;
-
 			camera.aspect = window.innerWidth / window.innerHeight;
 			camera.updateProjectionMatrix();
 
@@ -257,17 +202,43 @@
 
 		}
 
-		var lastTime = 0;
-
 		function render() {
 
-			var time = Date.now() * 0.00005;
+			var time = performance.now() * 0.0005;
 
-			camera.position.x += ( mouseX - camera.position.x ) * 0.05;
-			camera.position.y += ( -mouseY - camera.position.y ) * 0.05;
+			mesh.rotation.x = time * 0.2;
+			mesh.rotation.y = time * 0.4;
 
-			camera.lookAt( scene.position );
+			var translates = geometry.getAttribute( 'translate' );
+			var translatesArray = translates.array;
+
+			var scales = geometry.getAttribute( 'scale' );
+			var scalesArray = scales.array;
+
+			var colors = geometry.getAttribute( 'color' );
+			var colorsArray = colors.array;
+
+			var color = new THREE.Color( 0xffffff );
+
+			for ( var i = 0, i3 = 0, l = scalesArray.length; i < l; i ++, i3 += 3 ) {
+
+				var x = translatesArray[ i3 + 0 ] + time;
+				var y = translatesArray[ i3 + 1 ] + time;
+				var z = translatesArray[ i3 + 2 ] + time;
+				var scale = Math.sin( x * 2.1 ) + Math.sin( y * 3.2 ) + Math.sin( z * 4.3 );
+
+				scalesArray[ i ] = scale * 10 + 10;
+
+				color.setHSL( scale / 5, 1, 0.5 );
+
+				colorsArray[ i3 + 0 ] = color.r;
+				colorsArray[ i3 + 1 ] = color.g;
+				colorsArray[ i3 + 2 ] = color.b;
+
+			}
 
+			scales.needsUpdate = true;
+			colors.needsUpdate = true;
 
 			renderer.render( scene, camera );
 

examples/webgl_buffergeometry_instancing_dynamic.html

@@ -1,338 +1,337 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>three.js webgl - indexed instancing (single box), dynamic updates</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <style>
-        body {
-            color: #ffffff;
-            font-family: Monospace;
-            font-size: 13px;
-            text-align: center;
-            font-weight: bold;
-            background-color: #000000;
-            margin: 0px;
-            overflow: hidden;
-        }
-
-        #info {
-            position: absolute;
-            top: 0px;
-            width: 100%;
-            padding: 5px;
-        }
-
-        a {
-            color: #ffffff;
-        }
-
-        #oldie a {
-            color: #da0;
-        }
-        #notSupported {
-          width: 50%;
-          margin: auto;
-          border: 2px red solid;
-          margin-top: 20px;
-          padding: 10px;
-        }
-    </style>
+	<title>three.js webgl - indexed instancing (single box), dynamic updates</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<style>
+		body {
+			color: #ffffff;
+			font-family: Monospace;
+			font-size: 13px;
+			text-align: center;
+			font-weight: bold;
+			background-color: #000000;
+			margin: 0px;
+			overflow: hidden;
+		}
+
+		#info {
+			position: absolute;
+			top: 0px;
+			width: 100%;
+			padding: 5px;
+		}
+
+		a {
+			color: #ffffff;
+		}
+
+		#oldie a {
+			color: #da0;
+		}
+
+		#notSupported {
+			width: 50%;
+			margin: auto;
+			border: 2px red solid;
+			margin-top: 20px;
+			padding: 10px;
+		}
+	</style>
 </head>
 <body>
 
-    <div id="container"></div>
-    <div id="info">
-        <a href="http://threejs.org" target="_blank">three.js</a> - indexed instancing (single box), dynamic updates
-        <div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
-    </div>
+	<div id="container"></div>
+	<div id="info">
+		<a href="http://threejs.org" target="_blank">three.js</a> - indexed instancing (single box), dynamic updates
+		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
+	</div>
 
-    <script src="../build/three.min.js"></script>
+	<script src="../build/three.min.js"></script>
 
-    <script src="js/Detector.js"></script>
-    <script src="js/libs/stats.min.js"></script>
+	<script src="js/Detector.js"></script>
+	<script src="js/libs/stats.min.js"></script>
 
-    <script id="vertexShader" type="x-shader/x-vertex">
-        precision highp float;
-        
-        uniform mat4 modelViewMatrix; 
-        uniform mat4 projectionMatrix; 
+	<script id="vertexShader" type="x-shader/x-vertex">
+		precision highp float;
 
-        attribute vec3 position;
-        attribute vec3 offset;
-        attribute vec2 uv;
-        attribute vec4 orientation;
+		uniform mat4 modelViewMatrix;
+		uniform mat4 projectionMatrix;
 
-        varying vec2 vUv;
+		attribute vec3 position;
+		attribute vec3 offset;
+		attribute vec2 uv;
+		attribute vec4 orientation;
 
-        void main()	{
+		varying vec2 vUv;
 
-        vec3 vPosition = position;
-        vec3 vcV = cross(orientation.xyz, vPosition);
-        vPosition = vcV * (2.0 * orientation.w) + (cross(orientation.xyz, vcV) * 2.0 + vPosition);
+		void main() {
 
-        vUv = uv;
+			vec3 vPosition = position;
+			vec3 vcV = cross(orientation.xyz, vPosition);
+			vPosition = vcV * (2.0 * orientation.w) + (cross(orientation.xyz, vcV) * 2.0 + vPosition);
 
-        gl_Position = projectionMatrix * modelViewMatrix * vec4( offset + vPosition, 1.0 );
+			vUv = uv;
 
-        }
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( offset + vPosition, 1.0 );
 
-    </script>
+		}
 
-    <script id="fragmentShader" type="x-shader/x-fragment">
-        precision highp float;
-
-        uniform sampler2D map;
-
-        varying vec2 vUv;
-
-        void main()	{
-
-        gl_FragColor = texture2D(map, vUv);
-
-        }
-
-    </script>
-
-    <script>
-
-        if ( !Detector.webgl ) Detector.addGetWebGLMessage();
-
-        var container, stats;
-
-        var camera, scene, renderer;
-        var orientations;
-
-
-        function init() {
-
-            container = document.getElementById( 'container' );
-
-            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-            //camera.position.z = 20;
-
-            renderer = new THREE.WebGLRenderer();
-            scene = new THREE.Scene();
-
-            // geometry
-
-            var instances = 5000;
-
-            var geometry = new THREE.InstancedBufferGeometry();
-
-            // per mesh data
-            var vertices = new THREE.BufferAttribute( new Float32Array( [
-                // Front
-                -1, 1, 1,
-                1, 1, 1,
-                -1, -1, 1,
-                1, -1, 1,
-                // Back
-                1, 1, -1,
-                -1, 1, -1,
-                1, -1, -1,
-                -1, -1, -1,
-                // Left
-                -1, 1, -1,
-                -1, 1, 1,
-                -1, -1, -1,
-                -1, -1, 1,
-                // Right
-                1, 1, 1,
-                1, 1, -1,
-                1, -1, 1,
-                1, -1, -1,
-                // Top
-                -1, 1, 1,
-                1, 1, 1,
-                -1, 1, -1,
-                1, 1, -1,
-                // Bottom
-                1, -1, 1,
-                -1, -1, 1,
-                1, -1, -1,
-                -1, -1, -1
-            ] ), 3 );
-
-            geometry.addAttribute( 'position', vertices );
-
-            var uvs = new THREE.BufferAttribute( new Float32Array( [
-                        //x    y    z
-                        // Front
-                        0, 0,
-                        1, 0,
-                        0, 1,
-                        1, 1,
-                        // Back
-                        1, 0,
-                        0, 0,
-                        1, 1,
-                        0, 1,
-                        // Left
-                        1, 1,
-                        1, 0,
-                        0, 1,
-                        0, 0,
-                        // Right
-                        1, 0,
-                        1, 1,
-                        0, 0,
-                        0, 1,
-                        // Top
-                        0, 0,
-                        1, 0,
-                        0, 1,
-                        1, 1,
-                        // Bottom
-                        1, 0,
-                        0, 0,
-                        1, 1,
-                        0, 1
-            ] ), 2 );
-
-            geometry.addAttribute( 'uv', uvs );
-
-            var indices = new Uint16Array( [
-                0, 1, 2,
-                2, 1, 3,
-                4, 5, 6,
-                6, 5, 7,
-                8, 9, 10,
-                10, 9, 11,
-                12, 13, 14,
-                14, 13, 15,
-                16, 17, 18,
-                18, 17, 19,
-                20, 21, 22,
-                22, 21, 23
-            ] );
-
-            geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
-
-            // per instance data
-            var offsets = new THREE.InstancedBufferAttribute( new Float32Array( instances * 3 ), 3, 1, false );
-
-            var vector = new THREE.Vector4();
-            for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
-                var x = Math.random() * 100 - 50;
-                var y = Math.random() * 100 - 50;
-                var z = Math.random() * 100 - 50;
-                vector.set( x, y, z, 0 ).normalize();
-                // move out at least 5 units from center in current direction
-                offsets.setXYZ( i, x + vector.x * 5, y + vector.y * 5, z + vector.z * 5 );
-
-            }
-
-            geometry.addAttribute( 'offset', offsets ); // per mesh translation
-
-
-            orientations = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1, true );
-
-            for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
-
-                vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
-                vector.normalize();
-
-                orientations.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
-
-            }
-
-            geometry.addAttribute( 'orientation', orientations ); // per mesh orientation
-
-            // material
-            var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
-            texture.anisotropy = renderer.getMaxAnisotropy();
+	</script>
 
-            var material = new THREE.RawShaderMaterial( {
+	<script id="fragmentShader" type="x-shader/x-fragment">
+		precision highp float;
 
-                uniforms: {
-                    map: { type: "t", value: texture }
-                },
-                vertexShader: document.getElementById( 'vertexShader' ).textContent,
-                fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-                side: THREE.DoubleSide,
-                transparent: false,
-                attributes: { 'position': 0, 'offset': 1, 'orientation': 2, 'uv': 3 }
+		uniform sampler2D map;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			gl_FragColor = texture2D(map, vUv);
+
+		}
+
+	</script>
+
+	<script>
+
+		if ( !Detector.webgl ) Detector.addGetWebGLMessage();
+
+		var container, stats;
+
+		var camera, scene, renderer;
+		var orientations;
+
+
+		function init() {
+
+			container = document.getElementById( 'container' );
+
+			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+			//camera.position.z = 20;
+
+			renderer = new THREE.WebGLRenderer();
+			scene = new THREE.Scene();
+
+			// geometry
+
+			var instances = 5000;
+
+			var geometry = new THREE.InstancedBufferGeometry();
+
+			// per mesh data
+			var vertices = new THREE.BufferAttribute( new Float32Array( [
+				// Front
+				-1, 1, 1,
+				1, 1, 1,
+				-1, -1, 1,
+				1, -1, 1,
+				// Back
+				1, 1, -1,
+				-1, 1, -1,
+				1, -1, -1,
+				-1, -1, -1,
+				// Left
+				-1, 1, -1,
+				-1, 1, 1,
+				-1, -1, -1,
+				-1, -1, 1,
+				// Right
+				1, 1, 1,
+				1, 1, -1,
+				1, -1, 1,
+				1, -1, -1,
+				// Top
+				-1, 1, 1,
+				1, 1, 1,
+				-1, 1, -1,
+				1, 1, -1,
+				// Bottom
+				1, -1, 1,
+				-1, -1, 1,
+				1, -1, -1,
+				-1, -1, -1
+			] ), 3 );
+
+			geometry.addAttribute( 'position', vertices );
+
+			var uvs = new THREE.BufferAttribute( new Float32Array( [
+						//x	y	z
+						// Front
+						0, 0,
+						1, 0,
+						0, 1,
+						1, 1,
+						// Back
+						1, 0,
+						0, 0,
+						1, 1,
+						0, 1,
+						// Left
+						1, 1,
+						1, 0,
+						0, 1,
+						0, 0,
+						// Right
+						1, 0,
+						1, 1,
+						0, 0,
+						0, 1,
+						// Top
+						0, 0,
+						1, 0,
+						0, 1,
+						1, 1,
+						// Bottom
+						1, 0,
+						0, 0,
+						1, 1,
+						0, 1
+			] ), 2 );
+
+			geometry.addAttribute( 'uv', uvs );
+
+			var indices = new Uint16Array( [
+				0, 1, 2,
+				2, 1, 3,
+				4, 5, 6,
+				6, 5, 7,
+				8, 9, 10,
+				10, 9, 11,
+				12, 13, 14,
+				14, 13, 15,
+				16, 17, 18,
+				18, 17, 19,
+				20, 21, 22,
+				22, 21, 23
+			] );
+
+			geometry.addIndex( new THREE.BufferAttribute( indices, 1 ) );
+
+			// per instance data
+			var offsets = new THREE.InstancedBufferAttribute( new Float32Array( instances * 3 ), 3, 1 );
+
+			var vector = new THREE.Vector4();
+			for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
+				var x = Math.random() * 100 - 50;
+				var y = Math.random() * 100 - 50;
+				var z = Math.random() * 100 - 50;
+				vector.set( x, y, z, 0 ).normalize();
+				// move out at least 5 units from center in current direction
+				offsets.setXYZ( i, x + vector.x * 5, y + vector.y * 5, z + vector.z * 5 );
+
+			}
+
+			geometry.addAttribute( 'offset', offsets ); // per mesh translation
+
+
+			orientations = new THREE.InstancedBufferAttribute( new Float32Array( instances * 4 ), 4, 1 ).setDynamic( true );
+
+			for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
+
+				vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
+				vector.normalize();
+
+				orientations.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
+
+			}
+
+			geometry.addAttribute( 'orientation', orientations ); // per mesh orientation
+
+			// material
+			var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
+			texture.anisotropy = renderer.getMaxAnisotropy();
 
-            } );
+			var material = new THREE.RawShaderMaterial( {
 
-            var mesh = new THREE.Mesh( geometry, material );
-            scene.add( mesh );
+				uniforms: {
+					map: { type: "t", value: texture }
+				},
+				vertexShader: document.getElementById( 'vertexShader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+				side: THREE.DoubleSide,
+				transparent: false
 
+			} );
 
-            if ( !renderer.supportsInstancedArrays ) {
-                document.getElementById( "notSupported" ).style.display = "";
-                return;
-            }
+			var mesh = new THREE.Mesh( geometry, material );
+			scene.add( mesh );
 
-            renderer.setClearColor( 0x101010 );
-            renderer.setPixelRatio( window.devicePixelRatio );
-            renderer.setSize( window.innerWidth, window.innerHeight );
-            container.appendChild( renderer.domElement );
 
-            stats = new Stats();
-            stats.domElement.style.position = 'absolute';
-            stats.domElement.style.top = '0px';
-            container.appendChild( stats.domElement );
+			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === false ) {
+				document.getElementById( "notSupported" ).style.display = "";
+				return;
+			}
 
-            window.addEventListener( 'resize', onWindowResize, false );
+			renderer.setClearColor( 0x101010 );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			container.appendChild( renderer.domElement );
 
-        }
+			stats = new Stats();
+			stats.domElement.style.position = 'absolute';
+			stats.domElement.style.top = '0px';
+			container.appendChild( stats.domElement );
 
-        function onWindowResize( event ) {
+			window.addEventListener( 'resize', onWindowResize, false );
 
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
+		}
 
-            renderer.setSize( window.innerWidth, window.innerHeight );
+		function onWindowResize( event ) {
 
-        }
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
 
-        //
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
-        function animate() {
+		}
 
-            requestAnimationFrame( animate );
+		//
 
-            render();
-            stats.update();
+		function animate() {
 
-        }
+			requestAnimationFrame( animate );
 
-        var lastTime = 0;
+			render();
+			stats.update();
 
-        var moveQ = ( new THREE.Quaternion( .5, .5, .5, 0.0 ) ).normalize();
-        var tmpQ = new THREE.Quaternion();
-        var currentQ = new THREE.Quaternion();
-        function render() {
+		}
 
-            var time = performance.now();
+		var lastTime = 0;
 
+		var moveQ = ( new THREE.Quaternion( .5, .5, .5, 0.0 ) ).normalize();
+		var tmpQ = new THREE.Quaternion();
+		var currentQ = new THREE.Quaternion();
+		function render() {
 
-            var object = scene.children[0];
+			var time = performance.now();
 
-            object.rotation.y = time * 0.00005;
+			var object = scene.children[0];
 
-            renderer.render( scene, camera );
+			object.rotation.y = time * 0.00005;
 
-            var delta = ( time - lastTime ) / 5000;
-            tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
+			renderer.render( scene, camera );
 
-            for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
-                var index = i * 4;
-                currentQ.set( orientations.array[index], orientations.array[index + 1], orientations.array[index + 2], orientations.array[index + 3] );
-                currentQ.multiply( tmpQ );
-                
-                orientations.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
+			var delta = ( time - lastTime ) / 5000;
+			tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
 
-            }
-            orientations.needsUpdate = true;
-            lastTime = time;
-        }
+			for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
+				var index = i * 4;
+				currentQ.set( orientations.array[index], orientations.array[index + 1], orientations.array[index + 2], orientations.array[index + 3] );
+				currentQ.multiply( tmpQ );
 
-        init();
-        animate();
-    </script>
+				orientations.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
+
+			}
+			orientations.needsUpdate = true;
+			lastTime = time;
+		}
+
+		init();
+		animate();
+	</script>
 
 </body>
 

examples/webgl_buffergeometry_instancing_interleaved_dynamic.html

@@ -1,313 +1,312 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>three.js webgl - indexed instancing (single box), interleaved buffers, dynamic updates</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <style>
-        body {
-            color: #ffffff;
-            font-family: Monospace;
-            font-size: 13px;
-            text-align: center;
-            font-weight: bold;
-            background-color: #000000;
-            margin: 0px;
-            overflow: hidden;
-        }
-
-        #info {
-            position: absolute;
-            top: 0px;
-            width: 100%;
-            padding: 5px;
-        }
-
-        a {
-            color: #ffffff;
-        }
-
-        #oldie a {
-            color: #da0;
-        }
-
-        #notSupported {
-            width: 50%;
-            margin: auto;
-            border: 2px red solid;
-            margin-top: 20px;
-            padding: 10px;
-        }
-    </style>
+	<title>three.js webgl - indexed instancing (single box), interleaved buffers, dynamic updates</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<style>
+		body {
+			color: #ffffff;
+			font-family: Monospace;
+			font-size: 13px;
+			text-align: center;
+			font-weight: bold;
+			background-color: #000000;
+			margin: 0px;
+			overflow: hidden;
+		}
+
+		#info {
+			position: absolute;
+			top: 0px;
+			width: 100%;
+			padding: 5px;
+		}
+
+		a {
+			color: #ffffff;
+		}
+
+		#oldie a {
+			color: #da0;
+		}
+
+		#notSupported {
+			width: 50%;
+			margin: auto;
+			border: 2px red solid;
+			margin-top: 20px;
+			padding: 10px;
+		}
+	</style>
 </head>
 <body>
 
-    <div id="container"></div>
-    <div id="info">
-        <a href="http://threejs.org" target="_blank">three.js</a> - indexed instancing (single box), interleaved buffers, dynamic updates
-        <div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
-    </div>
+	<div id="container"></div>
+	<div id="info">
+		<a href="http://threejs.org" target="_blank">three.js</a> - indexed instancing (single box), interleaved buffers, dynamic updates
+		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
+	</div>
 
-    <script src="../build/three.min.js"></script>
+	<script src="../build/three.min.js"></script>
 
-    <script src="js/Detector.js"></script>
-    <script src="js/libs/stats.min.js"></script>
+	<script src="js/Detector.js"></script>
+	<script src="js/libs/stats.min.js"></script>
 
-    <script id="vertexShader" type="x-shader/x-vertex">
-        precision highp float;
+	<script id="vertexShader" type="x-shader/x-vertex">
+		precision highp float;
 
-        uniform mat4 modelViewMatrix; 
-        uniform mat4 projectionMatrix; 
+		uniform mat4 modelViewMatrix;
+		uniform mat4 projectionMatrix;
 
-        attribute vec3 position;
-        attribute vec3 offset;
-        attribute vec2 uv;
-        attribute vec4 orientation;
+		attribute vec3 position;
+		attribute vec3 offset;
+		attribute vec2 uv;
+		attribute vec4 orientation;
 
-        varying vec2 vUv;
+		varying vec2 vUv;
 
-        void main()	{
+		void main() {
 
-        vec3 vPosition = position;
-        vec3 vcV = cross(orientation.xyz, vPosition);
-        vPosition = vcV * (2.0 * orientation.w) + (cross(orientation.xyz, vcV) * 2.0 + vPosition);
+			vec3 vPosition = position;
+			vec3 vcV = cross(orientation.xyz, vPosition);
+			vPosition = vcV * (2.0 * orientation.w) + (cross(orientation.xyz, vcV) * 2.0 + vPosition);
 
-        vUv = uv;
+			vUv = uv;
 
-        gl_Position = projectionMatrix * modelViewMatrix * vec4( offset + vPosition, 1.0 );
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( offset + vPosition, 1.0 );
 
-        }
+		}
 
-    </script>
+	</script>
 
-    <script id="fragmentShader" type="x-shader/x-fragment">
-        precision highp float;
+	<script id="fragmentShader" type="x-shader/x-fragment">
+		precision highp float;
 
-        uniform sampler2D map;
+		uniform sampler2D map;
 
-        varying vec2 vUv;
+		varying vec2 vUv;
 
-        void main()	{
+		void main() {
 
-        gl_FragColor = texture2D(map, vUv);
+			gl_FragColor = texture2D(map, vUv);
 
-        }
+		}
 
-    </script>
+	</script>
 
-    <script>
+	<script>
 
-    if ( !Detector.webgl ) Detector.addGetWebGLMessage();
+	if ( !Detector.webgl ) Detector.addGetWebGLMessage();
 
-    var container, stats;
+	var container, stats;
 
-    var camera, scene, renderer;
-    var orientations, instanceBuffer;
+	var camera, scene, renderer;
+	var orientations, instanceBuffer;
 
 
-    function init() {
+	function init() {
 
-        container = document.getElementById( 'container' );
+		container = document.getElementById( 'container' );
 
-        camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
-        //camera.position.z = 20;
+		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+		//camera.position.z = 20;
 
-        renderer = new THREE.WebGLRenderer();
-        scene = new THREE.Scene();
+		renderer = new THREE.WebGLRenderer();
+		scene = new THREE.Scene();
 
-        // geometry
+		// geometry
 
-        var instances = 5000;
+		var instances = 5000;
 
-        var geometry = new THREE.InstancedBufferGeometry();
+		var geometry = new THREE.InstancedBufferGeometry();
 
-        // per mesh data x,y,z,w,u,v,s,t for 4-element alignment
-        // only use x,y,z and u,v; but x, y, z, nx, ny, nz, u, v would be a good layout
-        var vertexBuffer = new THREE.InterleavedBuffer( new Float32Array( [
-            // Front
-            -1, 1, 1, 0, 0, 0, 0, 0,
-            1, 1, 1, 0, 1, 0, 0, 0,
-            -1, -1, 1, 0, 0, 1, 0, 0,
-            1, -1, 1, 0, 1, 1, 0, 0,
-            // Back
-            1, 1, -1, 0, 1, 0, 0, 0,
-            -1, 1, -1, 0, 0, 0, 0, 0,
-            1, -1, -1, 0, 1, 1, 0, 0,
-            -1, -1, -1, 0, 0, 1, 0, 0,
-            // Left
-            -1, 1, -1, 0, 1, 1, 0, 0,
-            -1, 1, 1, 0, 1, 0, 0, 0,
-            -1, -1, -1, 0, 0, 1, 0, 0,
-            -1, -1, 1, 0, 0, 0, 0, 0,
-            // Right
-            1, 1, 1, 0, 1, 0, 0, 0,
-            1, 1, -1, 0, 1, 1, 0, 0,
-            1, -1, 1, 0, 0, 0, 0, 0,
-            1, -1, -1, 0, 0, 1, 0, 0,
-            // Top
-            -1, 1, 1, 0, 0, 0, 0, 0,
-            1, 1, 1, 0, 1, 0, 0, 0,
-            -1, 1, -1, 0, 0, 1, 0, 0,
-            1, 1, -1, 0, 1, 1, 0, 0,
-            // Bottom
-            1, -1, 1, 0, 1, 0, 0, 0,
-            -1, -1, 1, 0, 0, 0, 0, 0,
-            1, -1, -1, 0, 1, 1, 0, 0,
-            -1, -1, -1, 0, 0, 1, 0, 0,
-        ] ), 8, false );
+		// per mesh data x,y,z,w,u,v,s,t for 4-element alignment
+		// only use x,y,z and u,v; but x, y, z, nx, ny, nz, u, v would be a good layout
+		var vertexBuffer = new THREE.InterleavedBuffer( new Float32Array( [
+			// Front
+			-1, 1, 1, 0, 0, 0, 0, 0,
+			1, 1, 1, 0, 1, 0, 0, 0,
+			-1, -1, 1, 0, 0, 1, 0, 0,
+			1, -1, 1, 0, 1, 1, 0, 0,
+			// Back
+			1, 1, -1, 0, 1, 0, 0, 0,
+			-1, 1, -1, 0, 0, 0, 0, 0,
+			1, -1, -1, 0, 1, 1, 0, 0,
+			-1, -1, -1, 0, 0, 1, 0, 0,
+			// Left
+			-1, 1, -1, 0, 1, 1, 0, 0,
+			-1, 1, 1, 0, 1, 0, 0, 0,
+			-1, -1, -1, 0, 0, 1, 0, 0,
+			-1, -1, 1, 0, 0, 0, 0, 0,
+			// Right
+			1, 1, 1, 0, 1, 0, 0, 0,
+			1, 1, -1, 0, 1, 1, 0, 0,
+			1, -1, 1, 0, 0, 0, 0, 0,
+			1, -1, -1, 0, 0, 1, 0, 0,
+			// Top
+			-1, 1, 1, 0, 0, 0, 0, 0,
+			1, 1, 1, 0, 1, 0, 0, 0,
+			-1, 1, -1, 0, 0, 1, 0, 0,
+			1, 1, -1, 0, 1, 1, 0, 0,
+			// Bottom
+			1, -1, 1, 0, 1, 0, 0, 0,
+			-1, -1, 1, 0, 0, 0, 0, 0,
+			1, -1, -1, 0, 1, 1, 0, 0,
+			-1, -1, -1, 0, 0, 1, 0, 0,
+		] ), 8 );
 
-        // Use vertexBuffer, starting at offset 0, 3 items in position attribute
-        var positions = new THREE.InterleavedBufferAttribute( vertexBuffer, 3, 0 );
-        geometry.addAttribute( 'position', positions );
-        // Use vertexBuffer, starting at offset 4, 2 items in uv attribute
-        var uvs = new THREE.InterleavedBufferAttribute( vertexBuffer, 2, 4 );
-        geometry.addAttribute( 'uv', uvs );
+		// Use vertexBuffer, starting at offset 0, 3 items in position attribute
+		var positions = new THREE.InterleavedBufferAttribute( vertexBuffer, 3, 0 );
+		geometry.addAttribute( 'position', positions );
+		// Use vertexBuffer, starting at offset 4, 2 items in uv attribute
+		var uvs = new THREE.InterleavedBufferAttribute( vertexBuffer, 2, 4 );
+		geometry.addAttribute( 'uv', uvs );
 
-        var indices = new Uint16Array( [
-            0, 1, 2,
-            2, 1, 3,
-            4, 5, 6,
-            6, 5, 7,
-            8, 9, 10,
-            10, 9, 11,
-            12, 13, 14,
-            14, 13, 15,
-            16, 17, 18,
-            18, 17, 19,
-            20, 21, 22,
-            22, 21, 23
-        ] );
+		var indices = new Uint16Array( [
+			0, 1, 2,
+			2, 1, 3,
+			4, 5, 6,
+			6, 5, 7,
+			8, 9, 10,
+			10, 9, 11,
+			12, 13, 14,
+			14, 13, 15,
+			16, 17, 18,
+			18, 17, 19,
+			20, 21, 22,
+			22, 21, 23
+		] );
 
-        geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+		geometry.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 
-        // per instance data
-        instanceBuffer = new THREE.InstancedInterleavedBuffer( new Float32Array( instances * 8 ), 8, true, 1 );
-        var offsets = new THREE.InterleavedBufferAttribute( instanceBuffer, 3, 0 );
+		// per instance data
+		instanceBuffer = new THREE.InstancedInterleavedBuffer( new Float32Array( instances * 8 ), 8, 1 ).setDynamic( true );
+		var offsets = new THREE.InterleavedBufferAttribute( instanceBuffer, 3, 0 );
 
-        var vector = new THREE.Vector4();
-        for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
-            var x = Math.random() * 100 - 50;
-            var y = Math.random() * 100 - 50;
-            var z = Math.random() * 100 - 50;
-            vector.set( x, y, z, 0 ).normalize();
-            // move out at least 5 units from center in current direction
-            offsets.setXYZ( i, x + vector.x * 5, y + vector.y * 5, z + vector.z * 5 );
+		var vector = new THREE.Vector4();
+		for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
+			var x = Math.random() * 100 - 50;
+			var y = Math.random() * 100 - 50;
+			var z = Math.random() * 100 - 50;
+			vector.set( x, y, z, 0 ).normalize();
+			// move out at least 5 units from center in current direction
+			offsets.setXYZ( i, x + vector.x * 5, y + vector.y * 5, z + vector.z * 5 );
 
-        }
+		}
 
-        geometry.addAttribute( 'offset', offsets ); // per mesh translation
+		geometry.addAttribute( 'offset', offsets ); // per mesh translation
 
-        orientations = new THREE.InterleavedBufferAttribute( instanceBuffer, 4, 4 );
+		orientations = new THREE.InterleavedBufferAttribute( instanceBuffer, 4, 4 );
 
-        for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
+		for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
 
-            vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
-            vector.normalize();
+			vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
+			vector.normalize();
 
-            orientations.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
+			orientations.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
 
-        }
+		}
 
-        geometry.addAttribute( 'orientation', orientations ); // per mesh orientation
+		geometry.addAttribute( 'orientation', orientations ); // per mesh orientation
 
-        // material
-        var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
-        texture.anisotropy = renderer.getMaxAnisotropy();
+		// material
+		var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
+		texture.anisotropy = renderer.getMaxAnisotropy();
 
-        var material = new THREE.RawShaderMaterial( {
+		var material = new THREE.RawShaderMaterial( {
 
-            uniforms: {
-                map: { type: "t", value: texture }
-            },
-            vertexShader: document.getElementById( 'vertexShader' ).textContent,
-            fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-            side: THREE.DoubleSide,
-            transparent: false,
-            attributes: { 'position': 0, 'offset': 1, 'orientation': 2, 'uv': 3 }
+			uniforms: {
+				map: { type: "t", value: texture }
+			},
+			vertexShader: document.getElementById( 'vertexShader' ).textContent,
+			fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+			side: THREE.DoubleSide,
+			transparent: false
 
-        } );
+		} );
 
-        var mesh = new THREE.Mesh( geometry, material );
-        mesh.frustumCulled = false;
-        scene.add( mesh );
+		var mesh = new THREE.Mesh( geometry, material );
+		mesh.frustumCulled = false;
+		scene.add( mesh );
 
 
-        if ( !renderer.supportsInstancedArrays ) {
-            document.getElementById( "notSupported" ).style.display = "";
-            return;
-        }
+		if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === false ) {
+			document.getElementById( "notSupported" ).style.display = "";
+			return;
+		}
 
-        renderer.setClearColor( 0x101010 );
-        renderer.setPixelRatio( window.devicePixelRatio );
-        renderer.setSize( window.innerWidth, window.innerHeight );
-        container.appendChild( renderer.domElement );
+		renderer.setClearColor( 0x101010 );
+		renderer.setPixelRatio( window.devicePixelRatio );
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		container.appendChild( renderer.domElement );
 
-        stats = new Stats();
-        stats.domElement.style.position = 'absolute';
-        stats.domElement.style.top = '0px';
-        container.appendChild( stats.domElement );
+		stats = new Stats();
+		stats.domElement.style.position = 'absolute';
+		stats.domElement.style.top = '0px';
+		container.appendChild( stats.domElement );
 
-        window.addEventListener( 'resize', onWindowResize, false );
+		window.addEventListener( 'resize', onWindowResize, false );
 
-    }
+	}
 
-    function onWindowResize( event ) {
+	function onWindowResize( event ) {
 
-        camera.aspect = window.innerWidth / window.innerHeight;
-        camera.updateProjectionMatrix();
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
 
-        renderer.setSize( window.innerWidth, window.innerHeight );
+		renderer.setSize( window.innerWidth, window.innerHeight );
 
-    }
+	}
 
-    //
+	//
 
-    function animate() {
+	function animate() {
 
-        requestAnimationFrame( animate );
+		requestAnimationFrame( animate );
 
-        render();
-        stats.update();
+		render();
+		stats.update();
 
-    }
+	}
 
-    var lastTime = 0;
+	var lastTime = 0;
 
-    var moveQ = ( new THREE.Quaternion( .5, .5, .5, 0.0 ) ).normalize();
-    var tmpQ = new THREE.Quaternion();
-    var currentQ = new THREE.Quaternion();
-    function render() {
+	var moveQ = ( new THREE.Quaternion( .5, .5, .5, 0.0 ) ).normalize();
+	var tmpQ = new THREE.Quaternion();
+	var currentQ = new THREE.Quaternion();
+	function render() {
 
-        var time = performance.now();
+		var time = performance.now();
 
 
-        var object = scene.children[0];
+		var object = scene.children[0];
 
-        object.rotation.y = time * 0.00005;
+		object.rotation.y = time * 0.00005;
 
-        renderer.render( scene, camera );
+		renderer.render( scene, camera );
 
-        var delta = ( time - lastTime ) / 5000;
-        tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
+		var delta = ( time - lastTime ) / 5000;
+		tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
 
-        for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
-            var index = i * instanceBuffer.stride + orientations.offset;
-            currentQ.set( instanceBuffer.array[index], instanceBuffer.array[index + 1], instanceBuffer.array[index + 2], instanceBuffer.array[index + 3] );
-            currentQ.multiply( tmpQ );
+		for ( var i = 0, ul = orientations.count; i < ul; i++ ) {
+			var index = i * instanceBuffer.stride + orientations.offset;
+			currentQ.set( instanceBuffer.array[index], instanceBuffer.array[index + 1], instanceBuffer.array[index + 2], instanceBuffer.array[index + 3] );
+			currentQ.multiply( tmpQ );
 
-            orientations.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
+			orientations.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
 
-        }
-        instanceBuffer.needsUpdate = true;
-        lastTime = time;
-    }
+		}
+		instanceBuffer.needsUpdate = true;
+		lastTime = time;
+	}
 
-    init();
-    animate();
-    </script>
+	init();
+	animate();
+	</script>
 
 </body>
 
 
 
-</html>
+</html>

examples/webgl_buffergeometry_lines.html

@@ -23,7 +23,6 @@
 			}
 
 			a {
-
 				color: #0080ff;
 			}
 

examples/webgl_buffergeometry_lines_indexed.html

@@ -23,7 +23,6 @@
 			}
 
 			a {
-
 				color: #0080ff;
 			}
 
@@ -182,7 +181,7 @@
 				);
 				// --------------------------------
 
-				geometry.addAttribute( 'index', new THREE.BufferAttribute( new Uint16Array( indices_array ), 1 ) );
+				geometry.addIndex( new THREE.BufferAttribute( new Uint16Array( indices_array ), 1 ) );
 				geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( positions ), 3 ) );
 				geometry.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( colors ), 3 ) );
 				geometry.computeBoundingSphere();

examples/webgl_buffergeometry_particles.html

@@ -23,7 +23,6 @@
 			}
 
 			a {
-
 				color: #0080ff;
 			}
 		</style>

examples/webgl_buffergeometry_rawshader.html

@@ -24,7 +24,6 @@
 			}
 
 			a {
-
 				color: #ffffff;
 			}
 
@@ -140,7 +139,6 @@
 					uniforms: {
 						time: { type: "f", value: 1.0 }
 					},
-					attributes: [ 'position', 'color' ],
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
 					side: THREE.DoubleSide,

examples/webgl_buffergeometry_uint.html

@@ -23,7 +23,6 @@
 			}
 
 			a {
-
 				color: #0080ff;
 			}
 
@@ -78,12 +77,10 @@
 
 				//
 
-				var triangles = 160000;
+				var triangles = 500000;
 
 				var geometry = new THREE.BufferGeometry();
 
-
-
 				var indices = new Uint32Array( triangles * 3 );
 
 				for ( var i = 0; i < indices.length; i ++ ) {
@@ -190,7 +187,7 @@
 
 				}
 
-				geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+				geometry.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 				geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
 				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

examples/webgl_camera.html

@@ -102,22 +102,22 @@
 
 				//
 
-				mesh = new THREE.LineSegments(
-					new THREE.WireframeGeometry( new THREE.SphereBufferGeometry( 100, 16, 8 ) ),
-					new THREE.LineBasicMaterial( { color: 0xffffff } )
+				mesh = new THREE.Mesh(
+					new THREE.SphereBufferGeometry( 100, 16, 8 ),
+					new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } )
 				);
 				scene.add( mesh );
 
-				var mesh2 = new THREE.LineSegments(
-					new THREE.WireframeGeometry( new THREE.SphereBufferGeometry( 50, 16, 8 ) ),
-					new THREE.LineBasicMaterial( { color: 0x00ff00 } )
+				var mesh2 = new THREE.Mesh(
+					new THREE.SphereBufferGeometry( 50, 16, 8 ),
+					new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } )
 				);
 				mesh2.position.y = 150;
 				mesh.add( mesh2 );
 
-				var mesh3 = new THREE.LineSegments(
-					new THREE.WireframeGeometry( new THREE.SphereBufferGeometry( 5, 16, 8 ) ),
-					new THREE.LineBasicMaterial( { color: 0x0000ff } )
+				var mesh3 = new THREE.Mesh(
+					new THREE.SphereBufferGeometry( 5, 16, 8 ),
+					new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } )
 				);
 				mesh3.position.z = 150;
 				cameraRig.add( mesh3 );

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -137,9 +137,11 @@
 
 				container = document.getElementById( 'container' );
 
+				var scene = initScene();
+
 				// Initialize two copies of the same scene, one with normal z-buffer and one with logarithmic z-buffer
-				objects.normal = initScene('normal', false);
-				objects.logzbuf = initScene('logzbuf', true);
+				objects.normal = initView( scene, 'normal', false );
+				objects.logzbuf = initView( scene, 'logzbuf', true );
 
 				stats = new Stats();
 				container.appendChild(stats.domElement);
@@ -156,14 +158,28 @@
 				render();
 			}
 
-			function initScene(name, logDepthBuf) {
+			function initView( scene, name, logDepthBuf ) {
 
-				var scene = new THREE.Scene();
 				var framecontainer = document.getElementById('container_' + name);
 
 				var camera = new THREE.PerspectiveCamera( 50, screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
 				scene.add(camera);
 
+				var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: logDepthBuf });
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize(SCREEN_WIDTH/2, SCREEN_HEIGHT);
+				renderer.domElement.style.position = "relative";
+				renderer.domElement.id = 'renderer_' + name;
+				framecontainer.appendChild(renderer.domElement);
+
+				return { container: framecontainer, renderer: renderer, scene: scene, camera: camera }
+
+			}
+
+			function initScene() {
+
+				var scene = new THREE.Scene();
+
 				var light = new THREE.DirectionalLight(0xffffff, 1);
 				light.position.set(100,100,100);
 				scene.add(light);
@@ -220,14 +236,8 @@
 
 				}
 
-				var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: logDepthBuf });
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize(SCREEN_WIDTH/2, SCREEN_HEIGHT);
-				renderer.domElement.style.position = "relative";
-				renderer.domElement.id = 'renderer_' + name;
-				framecontainer.appendChild(renderer.domElement);
+				return scene;
 
-				return { container: framecontainer, renderer: renderer, scene: scene, camera: camera }
 			}
 
 			function updateRendererSizes() {

examples/webgl_custom_attributes.html

@@ -115,7 +115,6 @@
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
 				uniforms: uniforms,
-				attributes: [ 'displacement' ],
 				vertexShader:document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 

examples/webgl_custom_attributes_lines.html

@@ -104,7 +104,6 @@
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
 				uniforms:       uniforms,
-				attributes:     [ 'displacement', 'customColor' ],
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 				blending:       THREE.AdditiveBlending,

examples/webgl_custom_attributes_particles.html

@@ -82,7 +82,7 @@
 
 		var renderer, scene, camera, stats;
 
-		var sphere, uniforms, attributes;
+		var sphere;
 
 		var noise = [];
 
@@ -99,70 +99,69 @@
 
 			scene = new THREE.Scene();
 
-			attributes = {
-
-				size: {	type: 'f', value: [] },
-				customColor: { type: 'c', value: [] }
-
-			};
-
-			uniforms = {
+			var amount = 100000;
+			var radius = 200;
 
-				amplitude: { type: "f", value: 1.0 },
-				color:     { type: "c", value: new THREE.Color( 0xffffff ) },
-				texture:   { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/spark1.png" ) },
+			var positions = new Float32Array( amount * 3 );
+			var colors = new Float32Array( amount * 3 );
+			var sizes = new Float32Array( amount );
 
-			};
+			var vertex = new THREE.Vector3();
+			var color = new THREE.Color( 0xffffff );
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
+			for ( var i = 0; i < amount; i ++ ) {
 
-				uniforms:       uniforms,
-				attributes:     attributes,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
+				vertex.x = ( Math.random() * 2 - 1 ) * radius;
+				vertex.y = ( Math.random() * 2 - 1 ) * radius;
+				vertex.z = ( Math.random() * 2 - 1 ) * radius;
+				vertex.toArray( positions, i * 3 );
 
-				blending:       THREE.AdditiveBlending,
-				depthTest:      false,
-				transparent:    true
+				if ( vertex.x < 0 ) {
 
-			});
+					color.setHSL( 0.5 + 0.1 * ( i / amount ), 0.7, 0.5 );
 
+				} else {
 
-			var radius = 200;
-			var geometry = new THREE.Geometry();
+					color.setHSL( 0.0 + 0.1 * ( i / amount ), 0.9, 0.5 );
 
-			for ( var i = 0; i < 100000; i ++ ) {
+				}
 
-				var vertex = new THREE.Vector3();
-				vertex.x = Math.random() * 2 - 1;
-				vertex.y = Math.random() * 2 - 1;
-				vertex.z = Math.random() * 2 - 1;
-				vertex.multiplyScalar( radius );
+				color.toArray( colors, i * 3 );
 
-				geometry.vertices.push( vertex );
+				sizes[ i ] = 10;
 
 			}
 
-			sphere = new THREE.PointCloud( geometry, shaderMaterial );
+			var geometry = new THREE.BufferGeometry();
+			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+
+			//
 
-			var vertices = sphere.geometry.vertices;
-			var values_size = attributes.size.value;
-			var values_color = attributes.customColor.value;
+			var material = new THREE.ShaderMaterial( {
 
-			for ( var v = 0; v < vertices.length; v++ ) {
+				uniforms: {
+					amplitude: { type: "f", value: 1.0 },
+					color:     { type: "c", value: new THREE.Color( 0xffffff ) },
+					texture:   { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/spark1.png" ) }
+				},
+				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-				values_size[ v ] = 10;
-				values_color[ v ] = new THREE.Color( 0xffaa00 );
+				blending:       THREE.AdditiveBlending,
+				depthTest:      false,
+				transparent:    true
 
-				if ( vertices[ v ].x < 0 )
-					values_color[ v ].setHSL( 0.5 + 0.1 * ( v / vertices.length ), 0.7, 0.5 );
-				else
-					values_color[ v ].setHSL( 0.0 + 0.1 * ( v / vertices.length ), 0.9, 0.5 );
+			});
 
-			}
+			//
 
+			sphere = new THREE.PointCloud( geometry, material );
 			scene.add( sphere );
 
+			//
+
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( WIDTH, HEIGHT );
@@ -205,10 +204,12 @@
 
 			sphere.rotation.z = 0.01 * time;
 
-			for( var i = 0; i < attributes.size.value.length; i++ ) {
+			var geometry = sphere.geometry;
+			var attributes = geometry.attributes;
 
-				attributes.size.value[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );
+			for ( var i = 0; i < attributes.size.array.length; i++ ) {
 
+				attributes.size.array[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );
 
 			}
 
@@ -218,7 +219,6 @@
 
 		}
 
-
 	</script>
 
 </body>

examples/webgl_custom_attributes_particles2.html

@@ -77,16 +77,12 @@
 
 		</script>
 
-
 		<script>
 
 		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 		var renderer, scene, camera, stats;
-
-		var sphere, uniforms, attributes;
-
-		var vc1;
+		var sphere, vertices1;
 
 		var WIDTH = window.innerWidth;
 		var HEIGHT = window.innerHeight;
@@ -101,68 +97,74 @@
 
 			scene = new THREE.Scene();
 
-			attributes = {
+			var radius = 100, segments = 68, rings = 38;
 
-				size: {	type: 'f', value: [] },
-				ca:   {	type: 'c', value: [] }
+			var geometry1 = new THREE.SphereGeometry( radius, segments, rings );
+			var geometry2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 );
 
-			};
+			vertices1 = geometry1.vertices.length;
 
-			uniforms = {
+			var vertices = geometry1.vertices.concat( geometry2.vertices );
 
-				amplitude: { type: "f", value: 1.0 },
-				color:     { type: "c", value: new THREE.Color( 0xffffff ) },
-				texture:   { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ) },
+			var positions = new Float32Array( vertices.length * 3 );
+			var colors = new Float32Array( vertices.length * 3 );
+			var sizes = new Float32Array( vertices.length );
 
-			};
+			var vertex;
+			var color = new THREE.Color();
 
-			uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
+			for ( var i = 0, l = vertices.length; i < l; i ++ ) {
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
+				vertex = vertices[ i ];
+				vertex.toArray( positions, i * 3 );
 
-				uniforms:       uniforms,
-				attributes:     attributes,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-				transparent:    true
-
-			});
+				if ( i < vertices1 ) {
 
+					color.setHSL( 0.01 + 0.1 * ( i / vertices1 ), 0.99, ( vertex.y + radius ) / ( 4 * radius ) );
 
-			var radius = 100, segments = 68, rings = 38;
-			var geometry = new THREE.SphereGeometry( radius, segments, rings );
+				} else {
 
-			vc1 = geometry.vertices.length;
+					color.setHSL( 0.6, 0.75, 0.25 + vertex.y / ( 2 * radius ) );
 
-			var geometry2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 );
-			geometry.merge( geometry2 );
+				}
 
-			sphere = new THREE.PointCloud( geometry, shaderMaterial );
+				color.toArray( colors, i * 3 );
 
-			var vertices = sphere.geometry.vertices;
-			var values_size = attributes.size.value;
-			var values_color = attributes.ca.value;
+				sizes[ i ] = i < vertices1 ? 10 : 40;
 
-			for ( var v = 0; v < vertices.length; v ++ ) {
+			}
 
-				values_size[ v ] = 10;
-				values_color[ v ] = new THREE.Color( 0xffffff );
+			var geometry = new THREE.BufferGeometry();
+			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+			geometry.addAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
 
-				if ( v < vc1 ) {
+			//
 
-					values_color[ v ].setHSL( 0.01 + 0.1 * ( v / vc1 ), 0.99, ( vertices[ v ].y + radius ) / ( 4 * radius ) );
+			var texture = THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" );
+			texture.wrapS = THREE.RepeatWrapping;
+			texture.wrapT = THREE.RepeatWrapping;
 
-				} else {
+			var material = new THREE.ShaderMaterial( {
 
-					values_size[ v ] = 40;
-					values_color[ v ].setHSL( 0.6, 0.75, 0.25 + vertices[ v ].y / ( 2 * radius ) );
+				uniforms: {
+					amplitude: { type: "f", value: 1.0 },
+					color:     { type: "c", value: new THREE.Color( 0xffffff ) },
+					texture:   { type: "t", value: texture }
+				},
+				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
+				transparent:    true
 
-				}
+			});
 
-			}
+			//
 
+			sphere = new THREE.PointCloud( geometry, material );
 			scene.add( sphere );
 
+			//
+
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( WIDTH, HEIGHT );
@@ -206,11 +208,16 @@
 			sphere.rotation.y = 0.02 * time;
 			sphere.rotation.z = 0.02 * time;
 
-			for( var i = 0; i < attributes.size.value.length; i ++ ) {
+			var geometry = sphere.geometry;
+			var attributes = geometry.attributes;
+
+			for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
-				if ( i < vc1 )
-					attributes.size.value[ i ] = 16 + 12 * Math.sin( 0.1 * i + time );
+				if ( i < vertices1 ) {
 
+					attributes.size.array[ i ] = 16 + 12 * Math.sin( 0.1 * i + time );
+
+				}
 
 			}
 
@@ -220,7 +227,6 @@
 
 		}
 
-
 	</script>
 
 </body>

examples/webgl_custom_attributes_particles3.html

@@ -28,7 +28,7 @@
 	</head>
 
 	<body>
-		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - custom attributes example - particles - billboards - alphatest</div>
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - custom attributes example - billboards - alphatest</div>
 		<div id="container"></div>
 
 		<script src="../build/three.min.js"></script>
@@ -91,7 +91,7 @@
 
 		var object, uniforms, attributes;
 
-		var vc1;
+		var vertices1;
 
 		var WIDTH = window.innerWidth;
 		var HEIGHT = window.innerHeight;
@@ -106,35 +106,8 @@
 
 			scene = new THREE.Scene();
 
-			attributes = {
-
-				size: {	type: 'f', value: [] },
-				ca:   {	type: 'c', value: [] }
-
-			};
-
-			uniforms = {
-
-				amplitude: { type: "f", value: 1.0 },
-				color:     { type: "c", value: new THREE.Color( 0xffffff ) },
-				texture:   { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/ball.png" ) },
-
-			};
-
-			uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
-
-			var shaderMaterial = new THREE.ShaderMaterial( {
-
-				uniforms:       uniforms,
-				attributes:     attributes,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
-
-			});
-
-
 			var radius = 100, inner = 0.6 * radius;
-			var geometry = new THREE.Geometry();
+			var vertices = [];
 
 			for ( var i = 0; i < 100000; i ++ ) {
 
@@ -148,23 +121,34 @@
 				     ( vertex.y > inner || vertex.y < -inner ) ||
 				     ( vertex.z > inner || vertex.z < -inner )  )
 
-				geometry.vertices.push( vertex );
+				vertices.push( vertex );
 
 			}
 
-			vc1 = geometry.vertices.length;
+			vertices1 = vertices.length;
 
 			radius = 200;
 			var geometry2 = new THREE.BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
 
+			var matrix = new THREE.Matrix4();
+			var position = new THREE.Vector3();
+			var rotation = new THREE.Euler();
+			var quaternion = new THREE.Quaternion();
+			var scale = new THREE.Vector3( 1, 1, 1 );
+
 			function addGeo( geo, x, y, z, ry ) {
 
-				var mesh = new THREE.Mesh( geo );
-				mesh.position.set( x, y, z );
-				mesh.rotation.y = ry;
-				mesh.updateMatrix();
+				position.set( x, y, z );
+				rotation.set( 0, ry, 0 );
+
+				matrix.compose( position, quaternion.setFromEuler( rotation ), scale );
 
-				geometry.merge( mesh.geometry, mesh.matrix );
+				for ( var i = 0, l = geo.vertices.length; i < l; i ++ ) {
+
+					var vertex = geo.vertices[ i ];
+					vertices.push( vertex.clone().applyMatrix4( matrix ) );
+
+				}
 
 			}
 
@@ -191,39 +175,64 @@
 			addGeo( geometry3, -110, 0,  110, 0 );
 			addGeo( geometry3, -110, 0, -110, 0 );
 
-			// particle system
-
-			object = new THREE.PointCloud( geometry, shaderMaterial );
-
-			// custom attributes
+			var positions = new Float32Array( vertices.length * 3 );
+			var colors = new Float32Array( vertices.length * 3 );
+			var sizes = new Float32Array( vertices.length );
 
-			var vertices = object.geometry.vertices;
+			var vertex;
+			var color = new THREE.Color();
 
-			var values_size = attributes.size.value;
-			var values_color = attributes.ca.value;
+			for ( var i = 0; i < vertices.length; i ++ ) {
 
-			for ( var v = 0; v < vertices.length; v ++ ) {
+				vertex = vertices[ i ];
+				vertex.toArray( positions, i * 3 );
 
-				values_size[ v ] = 10;
-				values_color[ v ] = new THREE.Color( 0xffffff );
+				if ( i < vertices1 ) {
 
-				if ( v < vc1 ) {
-
-					values_color[ v ].setHSL( 0.5 + 0.2 * ( v / vc1 ), 1, 0.5 );
+					color.setHSL( 0.5 + 0.2 * ( i / vertices1 ), 1, 0.5 );
 
 				} else {
 
-					values_size[ v ] = 55;
-					values_color[ v ].setHSL( 0.1, 1, 0.5 );
+					color.setHSL( 0.1, 1, 0.5 );
 
 				}
 
+				color.toArray( colors, i * 3 );
+
+				sizes[ i ] = i < vertices1 ? 10 : 40;
+
 			}
 
-			//console.log( vertices.length );
+			var geometry = new THREE.BufferGeometry();
+			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			geometry.addAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+
+			//
+
+			var texture = THREE.ImageUtils.loadTexture( "textures/sprites/ball.png" );
+			texture.wrapS = THREE.RepeatWrapping;
+			texture.wrapT = THREE.RepeatWrapping;
+
+			var material = new THREE.ShaderMaterial( {
+
+				uniforms: {
+					amplitude: { type: "f", value: 1.0 },
+					color:     { type: "c", value: new THREE.Color( 0xffffff ) },
+					texture:   { type: "t", value: texture },
+				},
+				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
+
+			});
 
+			//
+
+			object = new THREE.PointCloud( geometry, material );
 			scene.add( object );
 
+			//
+
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( WIDTH, HEIGHT );
@@ -266,11 +275,16 @@
 
 			object.rotation.y = object.rotation.z = 0.02 * time;
 
-			for( var i = 0; i < attributes.size.value.length; i ++ ) {
+			var geometry = object.geometry;
+			var attributes = geometry.attributes;
+
+			for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
-				if ( i < vc1 )
-					attributes.size.value[ i ] = Math.max(0, 26 + 32 * Math.sin( 0.1 * i + 0.6 * time ));
+				if ( i < vertices1 ) {
 
+					attributes.size.array[ i ] = Math.max(0, 26 + 32 * Math.sin( 0.1 * i + 0.6 * time ));
+
+				}
 
 			}
 
@@ -280,7 +294,6 @@
 
 		}
 
-
 	</script>
 
 </body>

examples/webgl_effects_anaglyph.html

@@ -75,7 +75,7 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
+				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
 				var path = "textures/cube/pisa/";
 				var format = '.png';

examples/webgl_effects_stereo.html

@@ -76,7 +76,7 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
+				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
 				var path = "textures/cube/skybox/";
 				var format = '.jpg';

examples/webgl_gpgpu_birds.html

@@ -563,39 +563,25 @@
 
 				var geometry = new THREE.BirdGeometry();
 
-				// For Vertex Shaders
-				birdAttributes = {
-					// index: { type: 'i', value: [] },
-					birdColor: { type: 'c', value: null },
-					reference: { type: 'v2', value: null },
-					birdVertex: { type: 'f', value: null }
-				};
-
 				// For Vertex and Fragment
 				birdUniforms = {
-
 					color: { type: "c", value: new THREE.Color( 0xff2200 ) },
 					texturePosition: { type: "t", value: null },
 					textureVelocity: { type: "t", value: null },
 					time: { type: "f", value: 1.0 },
-					delta: { type: "f", value: 0.0 },
-
+					delta: { type: "f", value: 0.0 }
 				};
 
 				// ShaderMaterial
-				var shaderMaterial = new THREE.ShaderMaterial( {
-
-					uniforms: 		birdUniforms,
-					attributes:     birdAttributes,
+				var material = new THREE.ShaderMaterial( {
+					uniforms:       birdUniforms,
 					vertexShader:   document.getElementById( 'birdVS' ).textContent,
 					fragmentShader: document.getElementById( 'birdFS' ).textContent,
 					side: THREE.DoubleSide
 
 				});
 
-
-				// var
-				birdMesh = new THREE.Mesh( geometry, shaderMaterial );
+				birdMesh = new THREE.Mesh( geometry, material );
 				birdMesh.rotation.y = Math.PI / 2;
 				birdMesh.matrixAutoUpdate = false;
 				birdMesh.updateMatrix();

examples/webgl_interactive_particles.html

@@ -83,7 +83,7 @@
 
 			var renderer, scene, camera, stats;
 
-			var particles, uniforms, attributes;
+			var particles, uniforms;
 
 			var PARTICLE_SIZE = 20;
 
@@ -104,48 +104,51 @@
 
 				//
 
-				attributes = {
+				var geometry1 = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 );
+				var vertices = geometry1.vertices;
 
-					size:        { type: 'f', value: [] },
-					customColor: { type: 'c', value: [] }
+				var positions = new Float32Array( vertices.length * 3 );
+				var colors = new Float32Array( vertices.length * 3 );
+				var sizes = new Float32Array( vertices.length );
 
-				};
+				var vertex;
+				var color = new THREE.Color();
 
-				uniforms = {
+				for ( var i = 0, l = vertices.length; i < l; i ++ ) {
 
-					color:   { type: "c", value: new THREE.Color( 0xffffff ) },
-					texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ) }
+					vertex = vertices[ i ];
+					vertex.toArray( positions, i * 3 );
 
-				};
+					color.setHSL( 0.01 + 0.1 * ( i / l ), 1.0, 0.5 )
+					color.toArray( colors, i * 3 );
 
-				var shaderMaterial = new THREE.ShaderMaterial( {
+					sizes[ i ] = PARTICLE_SIZE * 0.5;
 
-					uniforms: uniforms,
-					attributes: attributes,
-					vertexShader: document.getElementById( 'vertexshader' ).textContent,
-					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-
-					alphaTest: 0.9,
-
-				} );
-
-				var geometry = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 );
+				}
 
-				particles = new THREE.PointCloud( geometry, shaderMaterial );
+				var geometry = new THREE.BufferGeometry();
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
 
-				var values_size = attributes.size.value;
-				var values_color = attributes.customColor.value;
+				//
 
-				var vertices = particles.geometry.vertices;
+				var material = new THREE.ShaderMaterial( {
 
-				for( var v = 0,  vl = vertices.length; v < vl; v++ ) {
+					uniforms: {
+						color:   { type: "c", value: new THREE.Color( 0xffffff ) },
+						texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ) }
+					},
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-					values_size[ v ] = PARTICLE_SIZE * 0.5;
+					alphaTest: 0.9,
 
-					values_color[ v ] = new THREE.Color().setHSL( 0.01 + 0.1 * ( v / vl ), 1.0, 0.5 );
+				} );
 
-				}
+				//
 
+				particles = new THREE.PointCloud( geometry, material );
 				scene.add( particles );
 
 				//
@@ -206,6 +209,9 @@
 				particles.rotation.x += 0.0005;
 				particles.rotation.y += 0.001;
 
+				var geometry = particles.geometry;
+				var attributes = geometry.attributes;
+
 				raycaster.setFromCamera( mouse, camera );
 
 				intersects = raycaster.intersectObject( particles );
@@ -214,18 +220,18 @@
 
 					if ( INTERSECTED != intersects[ 0 ].index ) {
 
-						attributes.size.value[ INTERSECTED ] = PARTICLE_SIZE;
+						attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE;
 
 						INTERSECTED = intersects[ 0 ].index;
 
-						attributes.size.value[ INTERSECTED ] = PARTICLE_SIZE * 1.25;
+						attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE * 1.25;
 						attributes.size.needsUpdate = true;
 
 					}
 
 				} else if ( INTERSECTED !== null ) {
 
-					attributes.size.value[ INTERSECTED ] = PARTICLE_SIZE;
+					attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE;
 					attributes.size.needsUpdate = true;
 					INTERSECTED = null;
 

examples/webgl_interactive_raycasting_pointcloud.html

@@ -131,7 +131,7 @@
 
 				}
 
-				geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+				geometry.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 
 				var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
 				var pointcloud = new THREE.PointCloud( geometry, material );
@@ -159,7 +159,7 @@
 
 				}
 
-				geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+				geometry.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 				geometry.addDrawCall( 0, indices.length );
 
 				var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );

examples/webgl_loader_md2_control.html

@@ -108,14 +108,12 @@
 				light.shadowMapWidth = 1024;
 				light.shadowMapHeight = 1024;
 				light.shadowMapDarkness = 0.95;
-				// by turning on the frustum, you can see where the light's
-				// shadow volume is located:
-				//light.shadowCameraVisible = true;
+				// light.shadowCameraVisible = true;
 				light.shadowCameraNear = 100;
 				light.shadowCameraFar = 1200;
-				light.shadowCameraTop = 400;
-				light.shadowCameraBottom = -250;
-				light.shadowCameraRight = 900;
+				light.shadowCameraTop = 350;
+				light.shadowCameraBottom = -350;
+				light.shadowCameraRight = 1000;
 				light.shadowCameraLeft = -1000;
 
 				scene.add( light );
@@ -130,7 +128,8 @@
 				var ground = new THREE.Mesh( gg, gm );
 				ground.rotation.x = - Math.PI / 2;
 				ground.material.map.repeat.set( 64, 64 );
-				ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
+				ground.material.map.wrapS = THREE.RepeatWrapping;
+				ground.material.map.wrapT = THREE.RepeatWrapping;
 				// note that because the ground does not cast a shadow, .castShadow is left false
 				ground.receiveShadow = true;
 
@@ -150,8 +149,8 @@
 				renderer.gammaOutput = true;
 				renderer.shadowMap.enabled = true;
 
-				//renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-				//renderer.shadowMap.debug = true;
+				// renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				// renderer.shadowMap.debug = true;
 
 				// STATS
 
@@ -205,10 +204,8 @@
 					var character = new THREE.MD2CharacterComplex();
 					character.scale = 3;
 					character.controls = controls;
-
 					characters.push( character );
 
-
 				}
 
 				var baseCharacter = new THREE.MD2CharacterComplex();
@@ -245,8 +242,9 @@
 
 					var gyro = new THREE.Gyroscope();
 					gyro.add( camera );
+					gyro.add( light, light.target );
 
-					characters[ Math.floor( nSkins/2 ) ].root.add( gyro );
+					characters[ Math.floor( nSkins / 2 ) ].root.add( gyro );
 
 				};
 

examples/webgl_loader_sea3d_hierarchy.html

@@ -96,8 +96,8 @@
 				camera.rotation.copy( cam.rotation );
 
 				controls = new THREE.OrbitControls( camera );
-				controls.noZoom = true;
-				controls.noPan = true;
+				controls.enableZoom = false;
+				controls.enablePan = false;
 
 				animate();
 

examples/webgl_materials_cars_camaro.html

@@ -1,323 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - materials - cube reflection [camaro]</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<style>
-			body {
-				background:#000;
-				color:#fff;
-				padding:0;
-				margin:0;
-				overflow:hidden;
-				font-family:georgia;
-				text-align:center;
-			}
-			h1 { }
-			a { color:skyblue }
-			canvas { pointer-events:none; z-index:10; position:relative; }
-
-			#d { text-align:center; margin:1em 0 2.5em 0; z-index:0; position:relative; display:block }
-			#buttons { margin:0.5em 0 0 0 }
-			button { font-family:georgia; border:0; background:#222; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px }
-			button:hover { background:#333 }
-		</style>
-	</head>
-
-	<body>
-		<div id="d">
-			<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - webgl cube reflection demo. chevrolet camaro by <a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank">dskfnwn</a></div>
-
-			<div id="buttons"></div>
-		</div>
-
-		<script src="../build/three.min.js"></script>
-
-		<script src="js/loaders/BinaryLoader.js"></script>
-
-		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
-
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-
-			var container, stats;
-
-			var camera, scene, renderer;
-
-			var directionalLight, pointLight;
-
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				// CAMERA
-
-				camera = new THREE.PerspectiveCamera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
-				camera.position.z = 1000;
-
-				scene = new THREE.Scene();
-
-				// LIGHTS
-
-				var ambient = new THREE.AmbientLight( 0x020202 );
-				scene.add( ambient );
-
-				directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.set( 1, 1, 0.5 ).normalize();
-				scene.add( directionalLight );
-
-				pointLight = new THREE.PointLight( 0xffaa00 );
-				scene.add( pointLight );
-
-				var sphere = new THREE.SphereGeometry( 100, 16, 8 );
-				
-				var mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-				mesh.scale.set( 0.05, 0.05, 0.05 );
-				pointLight.add( mesh );
-
-				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				renderer.setFaceCulling( THREE.CullFaceNone );
-
-				container.appendChild( renderer.domElement );
-
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				stats.domElement.style.zIndex = 100;
-
-				container.appendChild( stats.domElement );
-
-				document.addEventListener('mousemove', onDocumentMouseMove, false);
-
-				var r = "textures/cube/SwedishRoyalCastle/";
-				var urls = [ r + "px.jpg", r + "nx.jpg",
-							 r + "py.jpg", r + "ny.jpg",
-							 r + "pz.jpg", r + "nz.jpg" ];
-
-				var textureCube = THREE.ImageUtils.loadTextureCube( urls );
-
-				var camaroMaterials = {
-
-					body: {
-
-						Orange: new THREE.MeshLambertMaterial( {
-							color: 0xff6600,
-							envMap: textureCube,
-							combine: THREE.MixOperation,
-							reflectivity: 0.3
-						} ),
-
-						Blue: new THREE.MeshLambertMaterial( {
-							color: 0x226699,
-							envMap: textureCube,
-							combine: THREE.MixOperation,
-							reflectivity: 0.3
-						} ),
-
-						Red: new THREE.MeshLambertMaterial( {
-							color: 0x660000,
-							envMap: textureCube,
-							combine: THREE.MixOperation,
-							reflectivity: 0.5
-						} ),
-
-						Black: new THREE.MeshLambertMaterial( {
-							color: 0x000000,
-							envMap: textureCube,
-							combine: THREE.MixOperation,
-							reflectivity: 0.5
-						} ),
-
-						White: new THREE.MeshLambertMaterial( {
-							color: 0xffffff,
-							envMap: textureCube,
-							combine: THREE.MixOperation,
-							reflectivity: 0.5
-						} ),
-
-						Carmine: new THREE.MeshPhongMaterial( {
-							color: 0x770000,
-							specular: 0xffaaaa,
-							envMap: textureCube,
-							combine: THREE.MultiplyOperation
-						} ),
-
-						Gold: new THREE.MeshPhongMaterial( {
-							color: 0xaa9944,
-							specular: 0xbbaa99,
-							shininess: 50,
-							envMap: textureCube,
-							combine: THREE.MultiplyOperation
-						} ),
-
-						Bronze: new THREE.MeshPhongMaterial( {
-							color: 0x150505,
-							specular: 0xee6600,
-							shininess: 10,
-							envMap: textureCube,
-							combine: THREE.MixOperation,
-							reflectivity: 0.5
-						} ),
-
-						Chrome: new THREE.MeshPhongMaterial( {
-							color: 0xffffff,
-							specular:0xffffff,
-							envMap: textureCube,
-							combine: THREE.MultiplyOperation
-						} )
-
-					},
-
-					chrome: new THREE.MeshLambertMaterial( {
-						color: 0xffffff,
-						envMap: textureCube
-					} ),
-
-					darkchrome: new THREE.MeshLambertMaterial( {
-						color: 0x444444,
-						envMap: textureCube
-					} ),
-
-					glass: new THREE.MeshBasicMaterial( {
-						color: 0x223344,
-						envMap: textureCube,
-						opacity: 0.25,
-						combine: THREE.MixOperation,
-						reflectivity: 0.25,
-						transparent: true
-					} ),
-
-					tire: new THREE.MeshLambertMaterial( {
-						color: 0x050505
-					} ),
-
-					interior: new THREE.MeshPhongMaterial( {
-						color: 0x050505,
-						shininess: 20
-					} ),
-
-					black: new THREE.MeshLambertMaterial( {
-						color: 0x000000
-					} )
-
-				};
-
-				var loader = new THREE.BinaryLoader();
-				loader.load( "obj/camaro/CamaroNoUv_bin.js", function( geometry ) { createScene( geometry, camaroMaterials ) } );
-
-				//
-
-				window.addEventListener( 'resize', onWindowResize, false );
-
-			}
-
-			function onWindowResize() {
-
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			function createButtons( materials, faceMaterial ) {
-
-				var buttons = document.getElementById( "buttons" );
-
-				for ( var key in materials ) {
-
-					var button = document.createElement( 'button' );
-					button.textContent = key;
-					button.addEventListener( 'click', function ( event ) {
-
-						faceMaterial.materials[ 0 ] = materials[ this.textContent ];
-
-					}, false );
-					buttons.appendChild( button );
-
-				}
-
-			}
-
-			function createScene( geometry, materials ) {
-
-				var s = 75, m = new THREE.MeshFaceMaterial();
-
-				m.materials[ 0 ] = materials.body[ "Orange" ]; // car body
-				m.materials[ 1 ] = materials.chrome; // wheels chrome
-				m.materials[ 2 ] = materials.chrome; // grille chrome
-				m.materials[ 3 ] = materials.darkchrome; // door lines
-				m.materials[ 4 ] = materials.glass; // windshield
-				m.materials[ 5 ] = materials.interior; // interior
-				m.materials[ 6 ] = materials.tire; // tire
-				m.materials[ 7 ] = materials.black; // tireling
-				m.materials[ 8 ] = materials.black; // behind grille
-
-				var mesh = new THREE.Mesh( geometry, m );
-				mesh.rotation.y = 1;
-				mesh.scale.set( s, s, s );
-				scene.add( mesh );
-
-				createButtons( materials.body, m );
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = ( event.clientX - windowHalfX );
-				mouseY = ( event.clientY - windowHalfY );
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
-				var timer = -0.0002 * Date.now();
-
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
-				camera.lookAt( scene.position );
-
-				pointLight.position.x = 1500 * Math.cos( timer );
-				pointLight.position.z = 1500 * Math.sin( timer );
-
-				renderer.render( scene, camera );
-
-			}
-
-
-		</script>
-
-	</body>
-</html>

examples/webgl_materials_cubemap_balls_reflection.html

@@ -77,7 +77,7 @@
 				scene = new THREE.Scene();
 				sceneCube = new THREE.Scene();
 
-				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
+				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
 				var path = "textures/cube/pisa/";
 				var format = '.png';

examples/webgl_materials_cubemap_balls_refraction.html

@@ -76,7 +76,7 @@
 				scene = new THREE.Scene();
 				sceneCube = new THREE.Scene();
 
-				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
+				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
 				var path = "textures/cube/skybox/";
 				var format = '.jpg';

examples/webgl_materials_wireframe.html

@@ -31,8 +31,6 @@
 
 		<script type="x-shader/x-fragment" id="fragmentShader">
 
-			#extension GL_OES_standard_derivatives : enable
-
 			varying vec3 vCenter;
 
 			float edgeFactorTri() {
@@ -54,7 +52,6 @@
 		<script>
 
 			var camera, scene, renderer;
-			var meshTris, meshLines, meshMixed;
 
 			init();
 			animate();
@@ -68,50 +65,48 @@
 
 				var size = 150;
 
-				var geometryLines = new THREE.BoxGeometry( size, size, size );
-				var geometryTris = new THREE.BoxGeometry( size, size, size );
-
-				// wireframe using gl.LINES
-
-				var materialLines = new THREE.MeshBasicMaterial( { wireframe: true } );
-
-				meshLines = new THREE.Mesh( geometryLines, materialLines );
-				meshLines.position.x = -150;
-				scene.add( meshLines );
-
 				//
 
-				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
-				var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
-
-				// wireframe using gl.TRIANGLES (interpreted as triangles)
+				var geometry = new THREE.BoxGeometry( size, size, size );
+				var material = new THREE.MeshBasicMaterial( { wireframe: true } );
 
-				var attributesTris = { center: { type: 'v3', boundTo: 'faceVertices', value: [] } };
-				var valuesTris = attributesTris.center.value;
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = -150;
+				scene.add( mesh );
 
-				setupAttributes( geometryTris, valuesTris );
+				//
 
-				var materialTris = new THREE.ShaderMaterial( { uniforms: {}, attributes: attributesTris, vertexShader: vertexShader, fragmentShader: fragmentShader } );
+				var geometry = new THREE.BufferGeometry().fromGeometry( new THREE.BoxGeometry( size, size, size ) );
 
-				meshTris = new THREE.Mesh( geometryTris, materialTris );
-				meshTris.position.x = 150;
-				scene.add( meshTris );
+				setupAttributes( geometry );
 
-				// wireframe using gl.TRIANGLES (mixed triangles and quads)
+				var material = new THREE.ShaderMaterial( {
+					uniforms: {},
+					vertexShader: document.getElementById( 'vertexShader' ).textContent,
+					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+					derivatives: true
+				} );
 
-				var mixedGeometry = new THREE.SphereGeometry( size / 2, 32, 16 );
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = 150;
+				scene.add( mesh );
 
-				var attributesMixed = { center: { type: 'v3', boundTo: 'faceVertices', value: [] } };
-				var valuesMixed = attributesMixed.center.value;
+				//
 
-				setupAttributes( mixedGeometry, valuesMixed );
+				var geometry = new THREE.BufferGeometry().fromGeometry( new THREE.SphereGeometry( size / 2, 32, 16 ) );
 
-				var materialMixed = new THREE.ShaderMaterial( { uniforms: {}, attributes: attributesMixed, vertexShader: vertexShader, fragmentShader: fragmentShader } );
+				setupAttributes( geometry );
 
-				meshMixed = new THREE.Mesh( mixedGeometry, materialMixed );
-				meshMixed.position.x = -150;
-				scene.add( meshMixed );
+				var material = new THREE.ShaderMaterial( {
+					uniforms: {},
+					vertexShader: document.getElementById( 'vertexShader' ).textContent,
+					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+					derivatives: true
+				} );
 
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = -150;
+				scene.add( mesh );
 
 				// renderer
 
@@ -126,14 +121,27 @@
 
 			}
 
-			function setupAttributes( geometry, values ) {
+			function setupAttributes( geometry ) {
+
+				// TODO: Bring back quads
+
+				var vectors = [
+					new THREE.Vector3( 1, 0, 0 ),
+					new THREE.Vector3( 0, 1, 0 ),
+					new THREE.Vector3( 0, 0, 1 )
+				];
+
+				var position = geometry.attributes.position;
+				var centers = new Float32Array( position.count * 3 );
 
-				for( var f = 0; f < geometry.faces.length; f ++ ) {
+				for ( var i = 0, l = position.count; i < l; i ++ ) {
 
-					values[ f ] = [ new THREE.Vector3( 1, 0, 0 ), new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 1 ) ];
+					vectors[ i % 3 ].toArray( centers, i * 3 );
 
 				}
 
+				geometry.addAttribute( 'center', new THREE.BufferAttribute( centers, 3 ) );
+
 			}
 
 			function onWindowResize() {
@@ -149,16 +157,11 @@
 
 				requestAnimationFrame( animate );
 
-				meshLines.rotation.x += 0.005;
-				meshLines.rotation.y += 0.01;
-
-				meshTris.rotation.x += 0.005;
-				meshTris.rotation.y += 0.01;
-
-				if ( meshMixed ) {
+				for ( var i = 0; i < scene.children.length; i ++ ) {
 
-					meshMixed.rotation.x += 0.005;
-					meshMixed.rotation.y += 0.01;
+					var object = scene.children[ i ];
+					object.rotation.x += 0.005;
+					object.rotation.y += 0.01;
 
 				}
 

examples/webgl_modifier_tessellation.html

@@ -98,7 +98,7 @@
 
 		var renderer, scene, camera, stats;
 
-		var mesh, uniforms, attributes;
+		var mesh, uniforms;
 
 		var WIDTH = window.innerWidth,
 			HEIGHT = window.innerHeight;
@@ -188,8 +188,6 @@
 
 			//
 
-			attributes = [ `displacement`, `customColor` ];
-
 			uniforms = {
 
 				amplitude: { type: "f", value: 0.0 }
@@ -198,8 +196,7 @@
 
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
-				uniforms: 		uniforms,
-				attributes:     attributes,
+				uniforms:       uniforms,
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 

examples/webgl_morphnormals.html

@@ -108,6 +108,7 @@
 				loader.load( "models/animated/flamingo.js", function( geometry ) {
 
 					morphColorsToFaceColors( geometry );
+					geometry.computeVertexNormals();
 					geometry.computeMorphNormals();
 
 					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading } );

examples/webgl_nearestneighbour.html

@@ -25,24 +25,24 @@
 		</style>
 	</head>
 	<body>
-		
+
 		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - typed arrays - nearest neighbour for 500,000 sprites</div>
-		
+
 		<script src="../build/three.min.js"></script>
 		<script src="js/TypedArrayUtils.js"></script>
 		<script src="js/controls/FirstPersonControls.js"></script>
 		<script type="x-shader/x-vertex" id="vertexshader">
-			
+
 			//uniform float zoom;
-		
+
 			attribute float alpha;
 
 			varying float vAlpha;
 
 			void main() {
-			
+
 				vAlpha = 1.0 - alpha;
-				
+
 				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
 				gl_PointSize = 4.0 * ( 300.0 / length( mvPosition.xyz ) );
@@ -67,8 +67,8 @@
 			}
 
 		</script>
-		<script>		
-		
+		<script>
+
 			var camera, scene, renderer;
 			var geometry, mesh;
 			var controls;
@@ -82,11 +82,11 @@
 
 			var blocker = document.getElementById( 'blocker' );
 			var instructions = document.getElementById( 'instructions' );
-			
-			
+
+
 			function init() {
 
-			    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000000);
+				camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000000);
 
 				scene = new THREE.Scene();
 
@@ -108,7 +108,7 @@
 				mesh = new THREE.Mesh( new THREE.BoxGeometry( 10000, 10000, 10000, 7, 7, 7 ), new THREE.MeshFaceMaterial( materials ) );
 				mesh.scale.x = - 1;
 				scene.add(mesh);
-				
+
 				//
 
 				renderer = new THREE.WebGLRenderer(); // Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer()
@@ -120,21 +120,18 @@
 				var imagePreviewTexture = THREE.ImageUtils.loadTexture( 'textures/crate.gif');
 				imagePreviewTexture.minFilter = THREE.LinearMipMapLinearFilter;
 				imagePreviewTexture.magFilter = THREE.LinearFilter;
-				
+
 				pointShaderMaterial = new THREE.ShaderMaterial( {
 					uniforms: {
 						tex1: { type: "t", value: imagePreviewTexture },
 						zoom: { type: 'f', value: 9.0 },
 					},
-					attributes: {
-						alpha: { type: 'f', value: null },
-					},
 					vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 					transparent: true
 				});
-				
-				
+
+
 				//create particles with buffer geometry
 				var distanceFunction = function(a, b){
 					return Math.pow(a[0] - b[0], 2) +  Math.pow(a[1] - b[1], 2) +  Math.pow(a[2] - b[2], 2);
@@ -142,28 +139,28 @@
 
 				positions = new Float32Array( amountOfParticles * 3 );
 				alphas = new Float32Array( amountOfParticles );
-				
+
 				_particleGeom = new THREE.BufferGeometry();
 				_particleGeom.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 				_particleGeom.addAttribute( 'alpha', new THREE.BufferAttribute( alphas, 1 ) );
-				
+
 				particles = new THREE.PointCloud( _particleGeom, pointShaderMaterial );
-				
+
 				for (var x = 0; x < amountOfParticles; x++) {
 					positions[ x * 3 + 0 ] = Math.random() * 1000;
 					positions[ x * 3 + 1 ] = Math.random() * 1000;
 					positions[ x * 3 + 2 ] = Math.random() * 1000;
 					alphas[x] = 1.0;
 				}
-				
-				
+
+
 				var measureStart = new Date().getTime();
-				
+
 				// creating the kdtree takes a lot of time to execute, in turn the nearest neighbour search will be much faster
 				kdtree = new THREE.TypedArrayUtils.Kdtree( positions, distanceFunction, 3 );
-				
+
 				console.log('TIME building kdtree', new Date().getTime() - measureStart);
-				
+
 				// display particles after the kd-tree was generated and the sorting of the positions-array is done
 				scene.add(particles);
 
@@ -193,12 +190,12 @@
 				renderer.render( scene, camera );
 
 			}
-			
+
 			function displayNearest(position) {
-				
+
 				// take the nearest 200 around him. distance^2 'cause we use the manhattan distance and no square is applied in the distance function
 				var imagePositionsInRange = kdtree.nearest([position.x, position.y, position.z], 100, maxDistance);
-								
+
 				// We combine the nearest neighbour with a view frustum. Doesn't make sense if we change the sprites not in our view... well maybe it does. Whatever you want.
 				var _frustum = new THREE.Frustum();
 				var _projScreenMatrix = new THREE.Matrix4();
@@ -206,15 +203,15 @@
 
 				_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 				_frustum.setFromMatrix( _projScreenMatrix );
-				
+
 				for ( i = 0, il = imagePositionsInRange.length; i < il; i ++ ) {
 					var object = imagePositionsInRange[i];
 					var objectPoint = new THREE.Vector3().fromArray( object[ 0 ].obj );
-					
+
 					if (_frustum.containsPoint(objectPoint)){
-					
+
 						var objectIndex = object[0].pos;
-						
+
 						// set the alpha according to distance
 						alphas[ objectIndex ] = 1.0 / maxDistance * object[1];
 						// update the attribute
@@ -222,8 +219,8 @@
 					}
 				}
 			}
-			
-			
+
+
 			init();
 			animate();
 		</script>

examples/webgl_shaders_vector.html

@@ -38,7 +38,7 @@
 			varying vec2 vUv;
 			varying float flip;
 			uniform vec3 color;
-			
+
 			float inCurve(vec2 uv) {
 				return uv.x * uv.x - uv.y;
 			}
@@ -104,14 +104,14 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 100, 500 );
 
 				controls = new THREE.OrbitControls( camera );
 				controls.center.set( 0, 100, 0 );
 
 				scene = new THREE.Scene();
-				
+
 				var theText = "&"; // i % & j b 8
 
 				var options = {
@@ -126,7 +126,11 @@
 				scene.add( group );
 
 
-				var textMaterial = new THREE.MeshBasicMaterial( { color: new THREE.Color(0, 0, 1 ), overdraw: 0.5, wireframe: true, side: THREE.DoubleSide } );
+				var textMaterial = new THREE.MeshBasicMaterial( {
+					color: new THREE.Color(0, 0, 1 ),
+					side: THREE.DoubleSide,
+					wireframe: true
+				} );
 
 				textShapes = THREE.FontUtils.generateShapes( theText, options );
 
@@ -140,7 +144,7 @@
 				group.add( text );
 
 				//
-				
+
 				vA = new THREE.Vector2();
 				vB = new THREE.Vector2();
 				vDot = new THREE.Vector2();
@@ -217,7 +221,7 @@
 
 					convexhullShape = new THREE.Shape( pts );
 					solidShape = new THREE.Shape( pts2 );
-					
+
 					convexhullShapeGroup.push( convexhullShape );
 					solidShapeGroup.push( solidShape );
 
@@ -243,7 +247,7 @@
 
 				for (var i=0;i<beziers.length;i++) {
 					p = beziers[i];
-					bezierGeometry.vertices.push( new THREE.Vector3(p.x, p.y, 0) );			
+					bezierGeometry.vertices.push( new THREE.Vector3(p.x, p.y, 0) );
 				}
 
 				for (i=0;i<beziers.length;i+=3) {
@@ -258,7 +262,7 @@
 				text3d = new THREE.ShapeGeometry( convexhullShapeGroup );
 				text3d.computeBoundingBox();
 				var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
-				
+
 				text1 = new THREE.Mesh( text3d, textMaterial );
 
 				text1.position.x = centerOffset + 150;
@@ -268,39 +272,32 @@
 				text3d = new THREE.ShapeGeometry( solidShapeGroup );
 				text3d.computeBoundingBox();
 				var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
-				
-				text2 = new THREE.Mesh( text3d, new THREE.MeshBasicMaterial( { color: new THREE.Color(1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) ); 
 
+				text2 = new THREE.Mesh( text3d, new THREE.MeshBasicMaterial( { color: new THREE.Color(1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) );
 				text2.position.x = centerOffset + 150;
-
 				group.add( text2 );
 
 				//
 				bezierGeometry.computeBoundingBox();
 				bezierGeometry.computeFaceNormals();
 				bezierGeometry.computeVertexNormals();
-				
-				// 
 
-				var uniforms = {
-					color: { type: 'c', value: new THREE.Color(0.45 * 0xffffff) }
-				};
-				var vertexShader = document.getElementById( 'vs' ).textContent;
-				var fragmentShader = document.getElementById( 'fs' ).textContent;
+				bezierGeometry = new THREE.BufferGeometry().fromGeometry( bezierGeometry );
+				bezierGeometry.addAttribute( 'invert', new THREE.Float32Attribute( invert, 1 ) );
 
+				//
 
-				
 				newMaterial = new THREE.ShaderMaterial({
-					attributes: { invert: { type: 'f', value: invert } },
-					uniforms: uniforms,
-					vertexShader: vertexShader,
-					fragmentShader: fragmentShader,
+					uniforms: {
+						color: { type: 'c', value: new THREE.Color(0.45 * 0xffffff) }
+					},
+					vertexShader: document.getElementById( 'vs' ).textContent,
+					fragmentShader: document.getElementById( 'fs' ).textContent,
 					side: THREE.DoubleSide
 				});
 
 
 				text = new THREE.Mesh( bezierGeometry, newMaterial );
-
 				text.position.x = centerOffset;
 				text.position.y = 0;
 				text.position.z = 0;
@@ -315,7 +312,7 @@
 
 				text3d = new THREE.ShapeGeometry( solidShapeGroup );
 				text3d.computeBoundingBox();
-				
+
 				text = new THREE.Mesh( text3d, new THREE.MeshBasicMaterial( { color: 0.45 * 0xffffff, side: THREE.DoubleSide } ) );
 				text.position.x = centerOffset;
 				text.position.y = 0;

examples/webgl_terrain_dynamic.html

@@ -286,9 +286,6 @@
 				controls.zoomSpeed = 1.2;
 				controls.panSpeed = 0.8;
 
-				controls.noZoom = false;
-				controls.noPan = false;
-
 				controls.keys = [ 65, 83, 68 ];
 
 				// SCENE (FINAL)

examples/webgldeferred_animation.html

@@ -313,7 +313,7 @@
 				mapHeight3.format = THREE.RGBFormat;
 
 				var geoPlane = new THREE.PlaneBufferGeometry( 40, 20 );
-				
+
 				var matPlaneSide   = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight2, bumpScale: 0.5 } );
 				var matPlaneBottom = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight3, bumpScale: 0.5 } );
 				var matPlaneTop    = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight3, bumpScale: 1 } );
@@ -372,7 +372,7 @@
 				windowHalfY = window.innerHeight / 2;
 
 				WIDTH = window.innerWidth;
-				HEIGHT = window.innerHeight - 2 * MARGIN;
+				HEIGHT = window.innerHeight;
 
 				renderer.setSize( WIDTH, HEIGHT );
 

src/animation/KeyframeTrack.js

@@ -1,7 +1,7 @@
 /**
  *
- * A Track that returns a keyframe interpolated value, currently linearly interpolated 
- * 
+ * A Track that returns a keyframe interpolated value, currently linearly interpolated
+ *
  * @author Ben Houston / http://clara.io/
  * @author David Sarno / http://lighthaus.us/
  */
@@ -35,7 +35,7 @@ THREE.KeyframeTrack.prototype = {
 
 		// this can not go lower than 0.
 		while( ( this.lastIndex > 0 ) && ( time < this.keys[this.lastIndex - 1].time ) ) {
-			this.lastIndex --;			
+			this.lastIndex --;
 		}
 
 		if( this.lastIndex >= this.keys.length ) {
@@ -59,7 +59,7 @@ THREE.KeyframeTrack.prototype = {
 
 		// if true, means that prev/current keys are identical, thus no interpolation required.
 		if( prevKey.constantToNext ) {
-			
+
 			return this.result;
 
 		}
@@ -106,14 +106,14 @@ THREE.KeyframeTrack.prototype = {
 	// removes keyframes before and after animation without changing any values within the range [startTime, endTime].
 	// IMPORTANT: We do not shift around keys to the start of the track time, because for interpolated keys this will change their values
  	trim: function( startTime, endTime ) {
-		
+
 		var firstKeysToRemove = 0;
 		for( var i = 1; i < this.keys.length; i ++ ) {
 			if( this.keys[i] <= startTime ) {
 				firstKeysToRemove ++;
 			}
 		}
- 
+
 		var lastKeysToRemove = 0;
 		for( var i = this.keys.length - 2; i > 0; i ++ ) {
 			if( this.keys[i] >= endTime ) {
@@ -123,7 +123,7 @@ THREE.KeyframeTrack.prototype = {
 				break;
 			}
 		}
- 
+
 		// remove last keys first because it doesn't affect the position of the first keys (the otherway around doesn't work as easily)
 		if( ( firstKeysToRemove + lastKeysToRemove ) > 0 ) {
 			this.keys = this.keys.splice( firstKeysToRemove, this.keys.length - lastKeysToRemove - firstKeysToRemove );;
@@ -131,7 +131,7 @@ THREE.KeyframeTrack.prototype = {
 
 		return this;
 
-	},	
+	},
 
 	/* NOTE: This is commented out because we really shouldn't have to handle unsorted key lists
 	         Tracks with out of order keys should be considered to be invalid.  - bhouston
@@ -238,7 +238,7 @@ THREE.KeyframeTrack.prototype = {
 
 };
 
-THREE.KeyframeTrack.parse( json ) {
+THREE.KeyframeTrack.parse = function( json ) {
 
 	if( json.type === undefined ) throw new Error( "track type undefined, can not parse" );
 

src/core/BufferAttribute.js

@@ -9,6 +9,9 @@ THREE.BufferAttribute = function ( array, itemSize ) {
 	this.array = array;
 	this.itemSize = itemSize;
 
+	this.dynamic = false;
+	this.updateRange = { offset: 0, count: - 1 };
+
 	this.version = 0;
 
 };
@@ -36,6 +39,25 @@ THREE.BufferAttribute.prototype = {
 
 	},
 
+	setDynamic: function ( value ) {
+
+		this.dynamic = value;
+
+		return this;
+
+	},
+
+	copy: function ( source ) {
+
+		this.array = new source.array.constructor( source.array );
+		this.itemSize = source.itemSize;
+
+		this.dynamic = source.dynamic;
+
+		return this;
+
+	},
+
 	copyAt: function ( index1, attribute, index2 ) {
 
 		index1 *= this.itemSize;
@@ -281,7 +303,7 @@ THREE.BufferAttribute.prototype = {
 
 	clone: function () {
 
-		return new this.constructor( new this.array.constructor( this.array ), this.itemSize );
+		return new this.constructor().copy( this );
 
 	}
 

src/core/BufferGeometry.js

@@ -12,11 +12,12 @@ THREE.BufferGeometry = function () {
 	this.name = '';
 	this.type = 'BufferGeometry';
 
+	this.index = null;
 	this.attributes = {};
 
 	this.morphAttributes = {};
 
-	this.drawcalls = [];
+	this.groups = [];
 
 	this.boundingBox = null;
 	this.boundingSphere = null;
@@ -27,18 +28,31 @@ THREE.BufferGeometry.prototype = {
 
 	constructor: THREE.BufferGeometry,
 
+	addIndex: function ( attribute ) {
+
+		this.index = attribute;
+
+	},
+
 	addAttribute: function ( name, attribute ) {
 
 		if ( attribute instanceof THREE.BufferAttribute === false && attribute instanceof THREE.InterleavedBufferAttribute === false ) {
 
 			console.warn( 'THREE.BufferGeometry: .addAttribute() now expects ( name, attribute ).' );
 
-			this.attributes[ name ] = { array: arguments[ 1 ], itemSize: arguments[ 2 ] };
+			this.addAttribute( name, new THREE.BufferAttribute( arguments[ 1 ], arguments[ 2 ] ) );
 
 			return;
 
 		}
 
+		if ( name === 'index' ) {
+
+			console.warn( 'THREE.BufferGeometry.addAttribute: Use .addIndex() for index attribute.' );
+			this.addIndex( attribute );
+
+		}
+
 		this.attributes[ name ] = attribute;
 
 	},
@@ -55,10 +69,17 @@ THREE.BufferGeometry.prototype = {
 
 	},
 
+	get drawcalls() {
+
+		console.error( 'THREE.BufferGeometry: .drawcalls has been renamed to .groups.' );
+		return this.groups;
+
+	},
+
 	get offsets() {
 
-		console.warn( 'THREE.BufferGeometry: .offsets has been renamed to .drawcalls.' );
-		return this.drawcalls;
+		console.warn( 'THREE.BufferGeometry: .offsets has been renamed to .groups.' );
+		return this.groups;
 
 	},
 
@@ -70,18 +91,33 @@ THREE.BufferGeometry.prototype = {
 
 		}
 
-		this.drawcalls.push( {
+		console.warn( 'THREE.BufferGeometry: .addDrawCall() is now .addGroup().' );
+		this.addGroup( start, count );
+
+	},
+
+	clearDrawCalls: function () {
+
+		console.warn( 'THREE.BufferGeometry: .clearDrawCalls() is now .clearGroups().' );
+		this.clearGroups();
+
+	},
+
+	addGroup: function ( start, count, materialIndex ) {
+
+		this.groups.push( {
 
 			start: start,
-			count: count
+			count: count,
+			materialIndex: materialIndex !== undefined ? materialIndex : 0
 
 		} );
 
 	},
 
-	clearDrawCalls: function () {
+	clearGroups: function () {
 
-		this.drawcalls = [];
+		this.groups = [];
 
 	},
 
@@ -318,12 +354,14 @@ THREE.BufferGeometry.prototype = {
 			direct.colorsNeedUpdate = geometry.colorsNeedUpdate;
 			direct.uvsNeedUpdate = geometry.uvsNeedUpdate;
 			direct.tangentsNeedUpdate = geometry.tangentsNeedUpdate;
+			direct.groupsNeedUpdate = geometry.groupsNeedUpdate;
 
 			geometry.verticesNeedUpdate = false;
 			geometry.normalsNeedUpdate = false;
 			geometry.colorsNeedUpdate = false;
 			geometry.uvsNeedUpdate = false;
 			geometry.tangentsNeedUpdate = false;
+			geometry.groupsNeedUpdate = false;
 
 			geometry = direct;
 
@@ -404,6 +442,15 @@ THREE.BufferGeometry.prototype = {
 
 		}
 
+		if ( geometry.groupsNeedUpdate ) {
+
+			geometry.computeGroups( object.geometry );
+			this.groups = geometry.groups;
+
+			geometry.groupsNeedUpdate = false;
+
+		}
+
 		return this;
 
 	},
@@ -458,11 +505,16 @@ THREE.BufferGeometry.prototype = {
 
 		if ( geometry.indices.length > 0 ) {
 
-			var indices = new Uint16Array( geometry.indices.length * 3 );
-			this.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ).copyIndicesArray( geometry.indices ) );
+			var TypeArray = geometry.vertices.length > 65535 ? Uint32Array : Uint16Array;
+			var indices = new TypeArray( geometry.indices.length * 3 );
+			this.addIndex( new THREE.BufferAttribute( indices, 1 ).copyIndicesArray( geometry.indices ) );
 
 		}
 
+		// groups
+
+		this.groups = geometry.groups;
+
 		// morphs
 
 		for ( var name in geometry.morphTargets ) {
@@ -627,8 +679,9 @@ THREE.BufferGeometry.prototype = {
 
 	computeVertexNormals: function () {
 
+		var index = this.index;
 		var attributes = this.attributes;
-		var drawcalls = this.drawcalls;
+		var groups = this.groups;
 
 		if ( attributes.position ) {
 
@@ -665,22 +718,22 @@ THREE.BufferGeometry.prototype = {
 
 			// indexed elements
 
-			if ( attributes.index ) {
+			if ( index ) {
 
-				var indices = attributes.index.array;
+				var indices = index.array;
 
-				if ( drawcalls.length === 0 ) {
+				if ( groups.length === 0 ) {
 
-					this.addDrawCall( 0, indices.length );
+					this.addGroup( 0, indices.length );
 
 				}
 
-				for ( var j = 0, jl = drawcalls.length; j < jl; ++ j ) {
+				for ( var j = 0, jl = groups.length; j < jl; ++ j ) {
 
-					var drawcall = drawcalls[ j ];
+					var group = groups[ j ];
 
-					var start = drawcall.start;
-					var count = drawcall.count;
+					var start = group.start;
+					var count = group.count;
 
 					for ( var i = start, il = start + count; i < il; i += 3 ) {
 
@@ -755,7 +808,7 @@ THREE.BufferGeometry.prototype = {
 		// based on http://www.terathon.com/code/tangent.html
 		// (per vertex tangents)
 
-		if ( this.attributes.index === undefined ||
+		if ( this.index === undefined ||
 			 this.attributes.position === undefined ||
 			 this.attributes.normal === undefined ||
 			 this.attributes.uv === undefined ) {
@@ -765,7 +818,7 @@ THREE.BufferGeometry.prototype = {
 
 		}
 
-		var indices = this.attributes.index.array;
+		var indices = this.index.array;
 		var positions = this.attributes.position.array;
 		var normals = this.attributes.normal.array;
 		var uvs = this.attributes.uv.array;
@@ -855,20 +908,20 @@ THREE.BufferGeometry.prototype = {
 		var j, jl;
 		var iA, iB, iC;
 
-		if ( this.drawcalls.length === 0 ) {
+		if ( this.groups.length === 0 ) {
 
-			this.addDrawCall( 0, indices.length );
+			this.addGroup( 0, indices.length );
 
 		}
 
-		var drawcalls = this.drawcalls;
+		var groups = this.groups;
 
-		for ( j = 0, jl = drawcalls.length; j < jl; ++ j ) {
+		for ( j = 0, jl = groups.length; j < jl; ++ j ) {
 
-			var drawcall = drawcalls[ j ];
+			var group = groups[ j ];
 
-			var start = drawcall.start;
-			var count = drawcall.count;
+			var start = group.start;
+			var count = group.count;
 
 			for ( i = start, il = start + count; i < il; i += 3 ) {
 
@@ -911,12 +964,12 @@ THREE.BufferGeometry.prototype = {
 
 		}
 
-		for ( j = 0, jl = drawcalls.length; j < jl; ++ j ) {
+		for ( j = 0, jl = groups.length; j < jl; ++ j ) {
 
-			var drawcall = drawcalls[ j ];
+			var group = groups[ j ];
 
-			var start = drawcall.start;
-			var count = drawcall.count;
+			var start = group.start;
+			var count = group.count;
 
 			for ( i = start, il = start + count; i < il; i += 3 ) {
 
@@ -999,57 +1052,6 @@ THREE.BufferGeometry.prototype = {
 
 	},
 
-	/*
-		reoderBuffers:
-		Reorder attributes based on a new indexBuffer and indexMap.
-		indexBuffer - Uint16Array of the new ordered indices.
-		indexMap - Int32Array where the position is the new vertex ID and the value the old vertex ID for each vertex.
-		vertexCount - Amount of total vertices considered in this reordering (in case you want to grow the vertex stack).
-	*/
-	reorderBuffers: function ( indexBuffer, indexMap, vertexCount ) {
-
-		/* Create a copy of all attributes for reordering. */
-		var sortedAttributes = {};
-		for ( var attr in this.attributes ) {
-
-			if ( attr === 'index' )
-				continue;
-			var sourceArray = this.attributes[ attr ].array;
-			sortedAttributes[ attr ] = new sourceArray.constructor( this.attributes[ attr ].itemSize * vertexCount );
-
-		}
-
-		/* Move attribute positions based on the new index map */
-		for ( var new_vid = 0; new_vid < vertexCount; new_vid ++ ) {
-
-			var vid = indexMap[ new_vid ];
-			for ( var attr in this.attributes ) {
-
-				if ( attr === 'index' )
-					continue;
-				var attrArray = this.attributes[ attr ].array;
-				var attrSize = this.attributes[ attr ].itemSize;
-				var sortedAttr = sortedAttributes[ attr ];
-				for ( var k = 0; k < attrSize; k ++ )
-					sortedAttr[ new_vid * attrSize + k ] = attrArray[ vid * attrSize + k ];
-
-			}
-
-		}
-
-		/* Carry the new sorted buffers locally */
-		this.attributes[ 'index' ].array = indexBuffer;
-		for ( var attr in this.attributes ) {
-
-			if ( attr === 'index' )
-				continue;
-			this.attributes[ attr ].array = sortedAttributes[ attr ];
-			this.attributes[ attr ].numItems = this.attributes[ attr ].itemSize * vertexCount;
-
-		}
-
-	},
-
 	toJSON: function () {
 
 		var data = {
@@ -1083,7 +1085,8 @@ THREE.BufferGeometry.prototype = {
 		data.data = { attributes: {} };
 
 		var attributes = this.attributes;
-		var drawcalls = this.drawcalls;
+		var groups = this.groups;
+
 		var boundingSphere = this.boundingSphere;
 
 		for ( var key in attributes ) {
@@ -1100,9 +1103,9 @@ THREE.BufferGeometry.prototype = {
 
 		}
 
-		if ( drawcalls.length > 0 ) {
+		if ( groups.length > 0 ) {
 
-			data.data.drawcalls = JSON.parse( JSON.stringify( drawcalls ) );
+			data.data.groups = JSON.parse( JSON.stringify( groups ) );
 
 		}
 
@@ -1127,8 +1130,15 @@ THREE.BufferGeometry.prototype = {
 
 	copy: function ( source ) {
 
+		var index = source.index;
+
+		if ( index !== null ) {
+
+			this.addIndex( index.clone() );
+
+		}
+
 		var attributes = source.attributes;
-		var drawcalls = source.drawcalls;
 
 		for ( var name in attributes ) {
 
@@ -1137,10 +1147,12 @@ THREE.BufferGeometry.prototype = {
 
 		}
 
-		for ( var i = 0, l = drawcalls.length; i < l; i ++ ) {
+		var groups = source.groups;
+
+		for ( var i = 0, l = groups.length; i < l; i ++ ) {
 
-			var drawcall = drawcalls[ i ];
-			this.addDrawCall( drawcall.start, drawcall.count );
+			var group = groups[ i ];
+			this.addGroup( group.start, group.count );
 
 		}
 

src/core/DirectGeometry.js

@@ -19,6 +19,8 @@ THREE.DirectGeometry = function () {
 	this.uvs2 = [];
 	this.tangents = [];
 
+	this.groups = [];
+
 	this.morphTargets = {};
 
 	this.skinWeights = [];
@@ -36,6 +38,7 @@ THREE.DirectGeometry = function () {
 	this.colorsNeedUpdate = false;
 	this.uvsNeedUpdate = false;
 	this.tangentsNeedUpdate = false;
+	this.groupsNeedUpdate = false;
 
 };
 
@@ -67,6 +70,50 @@ THREE.DirectGeometry.prototype = {
 
 	},
 
+	computeGroups: function ( geometry ) {
+
+		var group;
+		var groups = [];
+		var materialIndex;
+
+		var faces = geometry.faces;
+
+		for ( var i = 0; i < faces.length; i ++ ) {
+
+			var face = faces[ i ];
+
+			// materials
+
+			if ( face.materialIndex !== materialIndex ) {
+
+				materialIndex = face.materialIndex;
+
+				if ( group !== undefined ) {
+
+					group.count = ( i * 3 ) - group.start;
+					groups.push( group );
+
+				}
+
+				group = {
+					start: i * 3,
+					materialIndex: materialIndex
+				};
+
+			}
+
+		}
+
+		if ( group !== undefined ) {
+
+			group.count = ( i * 3 ) - group.start;
+			groups.push( group );
+
+		}
+
+		this.groups = groups;
+
+	},
 
 	fromGeometry: function ( geometry ) {
 
@@ -195,6 +242,8 @@ THREE.DirectGeometry.prototype = {
 
 			}
 
+			// tangents
+
 			if ( hasTangents === true ) {
 
 				var vertexTangents = face.vertexTangents;
@@ -247,11 +296,14 @@ THREE.DirectGeometry.prototype = {
 
 		}
 
+		this.computeGroups( geometry );
+
 		this.verticesNeedUpdate = geometry.verticesNeedUpdate;
 		this.normalsNeedUpdate = geometry.normalsNeedUpdate;
 		this.colorsNeedUpdate = geometry.colorsNeedUpdate;
 		this.uvsNeedUpdate = geometry.uvsNeedUpdate;
 		this.tangentsNeedUpdate = geometry.tangentsNeedUpdate;
+		this.groupsNeedUpdate = geometry.groupsNeedUpdate;
 
 		return this;
 

src/core/DynamicBufferAttribute.js

@@ -1,15 +0,0 @@
-/**
- * @author benaadams / https://twitter.com/ben_a_adams
- * @author mrdoob / http://mrdoob.com/
- */
-
-THREE.DynamicBufferAttribute = function ( array, itemSize ) {
-
-	THREE.BufferAttribute.call( this, array, itemSize );
-
-	this.updateRange = { offset: 0, count: - 1 };
-
-};
-
-THREE.DynamicBufferAttribute.prototype = Object.create( THREE.BufferAttribute.prototype );
-THREE.DynamicBufferAttribute.prototype.constructor = THREE.DynamicBufferAttribute;

src/core/Geometry.js

@@ -44,6 +44,7 @@ THREE.Geometry = function () {
 	this.tangentsNeedUpdate = false;
 	this.colorsNeedUpdate = false;
 	this.lineDistancesNeedUpdate = false;
+	this.groupsNeedUpdate = false;
 
 };
 
@@ -214,10 +215,10 @@ THREE.Geometry.prototype = {
 
 		var scope = this;
 
+		var indices = geometry.index !== null ? geometry.index.array : undefined;
 		var attributes = geometry.attributes;
 
 		var vertices = attributes.position.array;
-		var indices = attributes.index !== undefined ? attributes.index.array : undefined;
 		var normals = attributes.normal !== undefined ? attributes.normal.array : undefined;
 		var colors = attributes.color !== undefined ? attributes.color.array : undefined;
 		var uvs = attributes.uv !== undefined ? attributes.uv.array : undefined;
@@ -299,16 +300,16 @@ THREE.Geometry.prototype = {
 
 		if ( indices !== undefined ) {
 
-			var drawcalls = geometry.drawcalls;
+			var groups = geometry.groups;
 
-			if ( drawcalls.length > 0 ) {
+			if ( groups.length > 0 ) {
 
-				for ( var i = 0; i < drawcalls.length; i ++ ) {
+				for ( var i = 0; i < groups.length; i ++ ) {
 
-					var drawcall = drawcalls[ i ];
+					var group = groups[ i ];
 
-					var start = drawcall.start;
-					var count = drawcall.count;
+					var start = group.start;
+					var count = group.count;
 
 					for ( var j = start, jl = start + count; j < jl; j += 3 ) {
 
@@ -1235,14 +1236,6 @@ THREE.Geometry.prototype = {
 
 		this.dispatchEvent( { type: 'dispose' } );
 
-	},
-
-	// Backwards compatibility
-
-	set groupsNeedUpdate ( value ) {
-
-		if ( value === true ) this.dispose();
-
 	}
 
 };

src/core/InstancedBufferAttribute.js

@@ -2,20 +2,23 @@
  * @author benaadams / https://twitter.com/ben_a_adams
  */
 
-THREE.InstancedBufferAttribute = function ( array, itemSize, meshPerAttribute, dynamic ) {
+THREE.InstancedBufferAttribute = function ( array, itemSize, meshPerAttribute ) {
 
-	THREE.DynamicBufferAttribute.call( this, array, itemSize );
+	THREE.BufferAttribute.call( this, array, itemSize );
 
-	this.dynamic = dynamic || false;
 	this.meshPerAttribute = meshPerAttribute || 1;
 
 };
 
-THREE.InstancedBufferAttribute.prototype = Object.create( THREE.DynamicBufferAttribute.prototype );
+THREE.InstancedBufferAttribute.prototype = Object.create( THREE.BufferAttribute.prototype );
 THREE.InstancedBufferAttribute.prototype.constructor = THREE.InstancedBufferAttribute;
 
-THREE.InstancedBufferAttribute.prototype.clone = function () {
+THREE.InstancedBufferAttribute.prototype.copy = function ( source ) {
 
-	return new THREE.InstancedBufferAttribute( new this.array.constructor( this.array ), this.itemSize, this.meshPerAttribute, this.dynamic );
+	THREE.BufferAttribute.prototype.copy.call( this, source );
+
+	this.meshPerAttribute = source.meshPerAttribute;
+
+	return this;
 
 };

src/core/InstancedBufferGeometry.js

@@ -14,9 +14,9 @@ THREE.InstancedBufferGeometry = function () {
 THREE.InstancedBufferGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
 THREE.InstancedBufferGeometry.prototype.constructor = THREE.InstancedBufferGeometry;
 
-THREE.InstancedBufferGeometry.prototype.addDrawCall = function ( start, count, instances ) {
+THREE.InstancedBufferGeometry.prototype.addGroup = function ( start, count, instances ) {
 
-	this.drawcalls.push( {
+	this.groups.push( {
 
 		start: start,
 		count: count,
@@ -28,17 +28,29 @@ THREE.InstancedBufferGeometry.prototype.addDrawCall = function ( start, count, i
 
 THREE.InstancedBufferGeometry.prototype.copy = function ( source ) {
 
-	for ( var attr in source.attributes ) {
+	var index = source.index;
 
-		var sourceAttr = source.attributes[ attr ];
-		this.addAttribute( attr, sourceAttr.clone() );
+	if ( index !== null ) {
+
+		this.addIndex( index.clone() );
 
 	}
 
-	for ( var i = 0, il = source.drawcalls.length; i < il; i ++ ) {
+	var attributes = source.attributes;
+
+	for ( var name in attributes ) {
+
+		var attribute = attributes[ name ];
+		this.addAttribute( name, attribute.clone() );
+
+	}
+
+	var groups = source.groups;
+
+	for ( var i = 0, l = groups.length; i < l; i ++ ) {
 
-		var offset = source.drawcalls[ i ];
-		this.addDrawCall( offset.start, offset.count, offset.instances );
+		var group = groups[ i ];
+		this.addGroup( group.start, group.count, group.instances );
 
 	}
 

src/core/InstancedInterleavedBuffer.js

@@ -2,9 +2,9 @@
  * @author benaadams / https://twitter.com/ben_a_adams
  */
 
-THREE.InstancedInterleavedBuffer = function ( array, stride, dynamic, meshPerAttribute ) {
+THREE.InstancedInterleavedBuffer = function ( array, stride, meshPerAttribute ) {
 
-	THREE.InterleavedBuffer.call( this, array, stride, dynamic );
+	THREE.InterleavedBuffer.call( this, array, stride );
 
 	this.meshPerAttribute = meshPerAttribute || 1;
 
@@ -13,8 +13,12 @@ THREE.InstancedInterleavedBuffer = function ( array, stride, dynamic, meshPerAtt
 THREE.InstancedInterleavedBuffer.prototype = Object.create( THREE.InterleavedBuffer.prototype );
 THREE.InstancedInterleavedBuffer.prototype.constructor = THREE.InstancedInterleavedBuffer;
 
-THREE.InstancedInterleavedBuffer.prototype.clone = function () {
+THREE.InstancedInterleavedBuffer.prototype.copy = function ( source ) {
 
-	return new this.constructor( new this.array.constructor( this.array ), this.stride, this.dynamic, this.meshPerAttribute );
+	THREE.InterleavedBuffer.prototype.copy.call( this, source );
+
+	this.meshPerAttribute = source.meshPerAttribute;
+
+	return this;
 
 };

src/core/InterleavedBuffer.js

@@ -2,18 +2,18 @@
  * @author benaadams / https://twitter.com/ben_a_adams
  */
 
-THREE.InterleavedBuffer = function ( array, stride, dynamic ) {
+THREE.InterleavedBuffer = function ( array, stride ) {
 
 	this.uuid = THREE.Math.generateUUID();
 
 	this.array = array;
 	this.stride = stride;
 
-	this.version = 0;
-
-	this.dynamic = dynamic || false;
+	this.dynamic = false;
 	this.updateRange = { offset: 0, count: - 1 };
 
+	this.version = 0;
+
 };
 
 THREE.InterleavedBuffer.prototype = {
@@ -38,6 +38,22 @@ THREE.InterleavedBuffer.prototype = {
 
 	},
 
+	setDynamic: function ( value ) {
+
+		this.dynamic = value;
+
+		return this;
+
+	},
+
+	copy: function ( source ) {
+
+		this.array = new source.array.constructor( source.array );
+		this.stride = source.stride;
+		this.dynamic = source.dynamic;
+
+	},
+
 	copyAt: function ( index1, attribute, index2 ) {
 
 		index1 *= this.stride;
@@ -65,7 +81,7 @@ THREE.InterleavedBuffer.prototype = {
 
 	clone: function () {
 
-		return new this.constructor( new this.array.constructor( this.array ), this.stride, this.dynamic );
+		return new this.constructor().copy( this );
 
 	}
 

src/core/Object3D.js

@@ -56,6 +56,12 @@ THREE.Object3D = function () {
 		scale: {
 			enumerable: true,
 			value: scale
+		},
+		modelViewMatrix: {
+			value: new THREE.Matrix4()
+		},
+		normalMatrix: {
+			value: new THREE.Matrix3()
 		}
 	} );
 

src/extras/animation/AnimationHandler.js

@@ -205,7 +205,7 @@ THREE.AnimationHandler = {
 
 		for ( var i = 0; i < this.animations.length; i ++ ) {
 
-			this.animations[ i ].resetBlendWeights( );
+			this.animations[ i ].resetBlendWeights();
 
 		}
 

src/extras/geometries/CircleBufferGeometry.js

@@ -56,7 +56,7 @@ THREE.CircleBufferGeometry = function ( radius, segments, thetaStart, thetaLengt
 
 	}
 
-	this.addAttribute( 'index', new THREE.BufferAttribute( new Uint16Array( indices ), 1 ) );
+	this.addIndex( new THREE.BufferAttribute( new Uint16Array( indices ), 1 ) );
 	this.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 	this.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
 	this.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );

src/extras/geometries/CylinderGeometry.js

@@ -130,7 +130,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radialSegme
 			var uv2 = uvs[ 0 ][ x + 1 ].clone();
 			var uv3 = new THREE.Vector2( uv2.x, 0 );
 
-			this.faces.push( new THREE.Face3( v1, v2, v3, [ n1, n2, n3 ] ) );
+			this.faces.push( new THREE.Face3( v1, v2, v3, [ n1, n2, n3 ], undefined, 1 ) );
 			this.faceVertexUvs[ 0 ].push( [ uv1, uv2, uv3 ] );
 
 		}
@@ -157,7 +157,7 @@ THREE.CylinderGeometry = function ( radiusTop, radiusBottom, height, radialSegme
 			var uv2 = uvs[ heightSegments ][ x ].clone();
 			var uv3 = new THREE.Vector2( uv2.x, 1 );
 
-			this.faces.push( new THREE.Face3( v1, v2, v3, [ n1, n2, n3 ] ) );
+			this.faces.push( new THREE.Face3( v1, v2, v3, [ n1, n2, n3 ], undefined, 2 ) );
 			this.faceVertexUvs[ 0 ].push( [ uv1, uv2, uv3 ] );
 
 		}

src/extras/geometries/PlaneBufferGeometry.js

@@ -85,7 +85,7 @@ THREE.PlaneBufferGeometry = function ( width, height, widthSegments, heightSegme
 
 	}
 
-	this.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+	this.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 	this.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
 	this.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
 	this.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );

src/extras/geometries/PolyhedronGeometry.js

@@ -38,7 +38,7 @@ THREE.PolyhedronGeometry = function ( vertices, indices, radius, detail ) {
 		var v2 = p[ indices[ i + 1 ] ];
 		var v3 = p[ indices[ i + 2 ] ];
 
-		faces[ j ] = new THREE.Face3( v1.index, v2.index, v3.index, [ v1.clone(), v2.clone(), v3.clone() ] );
+		faces[ j ] = new THREE.Face3( v1.index, v2.index, v3.index, [ v1.clone(), v2.clone(), v3.clone() ], undefined, j );
 
 	}
 
@@ -115,9 +115,9 @@ THREE.PolyhedronGeometry = function ( vertices, indices, radius, detail ) {
 
 	// Approximate a curved face with recursively sub-divided triangles.
 
-	function make( v1, v2, v3 ) {
+	function make( v1, v2, v3, materialIndex ) {
 
-		var face = new THREE.Face3( v1.index, v2.index, v3.index, [ v1.clone(), v2.clone(), v3.clone() ] );
+		var face = new THREE.Face3( v1.index, v2.index, v3.index, [ v1.clone(), v2.clone(), v3.clone() ], undefined, materialIndex );
 		that.faces.push( face );
 
 		centroid.copy( v1 ).add( v2 ).add( v3 ).divideScalar( 3 );
@@ -143,6 +143,8 @@ THREE.PolyhedronGeometry = function ( vertices, indices, radius, detail ) {
 		var c = prepare( that.vertices[ face.c ] );
 		var v = [];
 
+		var materialIndex = face.materialIndex;
+
 		// Construct all of the vertices for this subdivision.
 
 		for ( var i = 0 ; i <= cols; i ++ ) {
@@ -182,7 +184,8 @@ THREE.PolyhedronGeometry = function ( vertices, indices, radius, detail ) {
 					make(
 						v[ i ][ k + 1 ],
 						v[ i + 1 ][ k ],
-						v[ i ][ k ]
+						v[ i ][ k ],
+						materialIndex
 					);
 
 				} else {
@@ -190,7 +193,8 @@ THREE.PolyhedronGeometry = function ( vertices, indices, radius, detail ) {
 					make(
 						v[ i ][ k + 1 ],
 						v[ i + 1 ][ k + 1 ],
-						v[ i + 1 ][ k ]
+						v[ i + 1 ][ k ],
+						materialIndex
 					);
 
 				}

src/extras/geometries/SphereBufferGeometry.js

@@ -88,7 +88,7 @@ THREE.SphereBufferGeometry = function ( radius, widthSegments, heightSegments, p
 
 	}
 
-	this.addAttribute( 'index', new THREE.BufferAttribute( new Uint16Array( indices ), 1 ) );
+	this.addIndex( new THREE.BufferAttribute( new Uint16Array( indices ), 1 ) );
 	this.addAttribute( 'position', positions );
 	this.addAttribute( 'normal', normals );
 	this.addAttribute( 'uv', uvs );

src/extras/geometries/WireframeGeometry.js

@@ -70,12 +70,12 @@ THREE.WireframeGeometry = function ( geometry ) {
 
 	} else if ( geometry instanceof THREE.BufferGeometry ) {
 
-		if ( geometry.attributes.index !== undefined ) {
+		if ( geometry.index !== null ) {
 
 			// Indexed BufferGeometry
 
+			var indices = geometry.index.array;
 			var vertices = geometry.attributes.position;
-			var indices = geometry.attributes.index.array;
 			var drawcalls = geometry.drawcalls;
 			var numEdges = 0;
 

src/extras/helpers/BoxHelper.js

@@ -4,8 +4,12 @@
 
 THREE.BoxHelper = function ( object ) {
 
+	var indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] );
+	var positions = new Float32Array( 8 * 3 );
+
 	var geometry = new THREE.BufferGeometry();
-	geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( 72 ), 3 ) );
+	geometry.addIndex( new THREE.BufferAttribute( indices, 1 ) );
+	geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
 	THREE.LineSegments.call( this, geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
 
@@ -49,49 +53,19 @@ THREE.BoxHelper.prototype.update = ( function () {
 		7: max.x, min.y, min.z
 		*/
 
-		var vertices = this.geometry.attributes.position.array;
-
-		vertices[ 0 ] = max.x; vertices[ 1 ] = max.y; vertices[ 2 ] = max.z;
-		vertices[ 3 ] = min.x; vertices[ 4 ] = max.y; vertices[ 5 ] = max.z;
-
-		vertices[ 6 ] = min.x; vertices[ 7 ] = max.y; vertices[ 8 ] = max.z;
-		vertices[ 9 ] = min.x; vertices[ 10 ] = min.y; vertices[ 11 ] = max.z;
-
-		vertices[ 12 ] = min.x; vertices[ 13 ] = min.y; vertices[ 14 ] = max.z;
-		vertices[ 15 ] = max.x; vertices[ 16 ] = min.y; vertices[ 17 ] = max.z;
-
-		vertices[ 18 ] = max.x; vertices[ 19 ] = min.y; vertices[ 20 ] = max.z;
-		vertices[ 21 ] = max.x; vertices[ 22 ] = max.y; vertices[ 23 ] = max.z;
-
-		//
-
-		vertices[ 24 ] = max.x; vertices[ 25 ] = max.y; vertices[ 26 ] = min.z;
-		vertices[ 27 ] = min.x; vertices[ 28 ] = max.y; vertices[ 29 ] = min.z;
-
-		vertices[ 30 ] = min.x; vertices[ 31 ] = max.y; vertices[ 32 ] = min.z;
-		vertices[ 33 ] = min.x; vertices[ 34 ] = min.y; vertices[ 35 ] = min.z;
-
-		vertices[ 36 ] = min.x; vertices[ 37 ] = min.y; vertices[ 38 ] = min.z;
-		vertices[ 39 ] = max.x; vertices[ 40 ] = min.y; vertices[ 41 ] = min.z;
-
-		vertices[ 42 ] = max.x; vertices[ 43 ] = min.y; vertices[ 44 ] = min.z;
-		vertices[ 45 ] = max.x; vertices[ 46 ] = max.y; vertices[ 47 ] = min.z;
-
-		//
-
-		vertices[ 48 ] = max.x; vertices[ 49 ] = max.y; vertices[ 50 ] = max.z;
-		vertices[ 51 ] = max.x; vertices[ 52 ] = max.y; vertices[ 53 ] = min.z;
-
-		vertices[ 54 ] = min.x; vertices[ 55 ] = max.y; vertices[ 56 ] = max.z;
-		vertices[ 57 ] = min.x; vertices[ 58 ] = max.y; vertices[ 59 ] = min.z;
-
-		vertices[ 60 ] = min.x; vertices[ 61 ] = min.y; vertices[ 62 ] = max.z;
-		vertices[ 63 ] = min.x; vertices[ 64 ] = min.y; vertices[ 65 ] = min.z;
+		var position = this.geometry.attributes.position;
+		var array = position.array;
 
-		vertices[ 66 ] = max.x; vertices[ 67 ] = min.y; vertices[ 68 ] = max.z;
-		vertices[ 69 ] = max.x; vertices[ 70 ] = min.y; vertices[ 71 ] = min.z;
+		array[  0 ] = max.x; array[  1 ] = max.y; array[  2 ] = max.z;
+		array[  3 ] = min.x; array[  4 ] = max.y; array[  5 ] = max.z;
+		array[  6 ] = min.x; array[  7 ] = min.y; array[  8 ] = max.z;
+		array[  9 ] = max.x; array[ 10 ] = min.y; array[ 11 ] = max.z;
+		array[ 12 ] = max.x; array[ 13 ] = max.y; array[ 14 ] = min.z;
+		array[ 15 ] = min.x; array[ 16 ] = max.y; array[ 17 ] = min.z;
+		array[ 18 ] = min.x; array[ 19 ] = min.y; array[ 20 ] = min.z;
+		array[ 21 ] = max.x; array[ 22 ] = min.y; array[ 23 ] = min.z;
 
-		this.geometry.attributes.position.needsUpdate = true;
+		position.needsUpdate = true;
 
 		this.geometry.computeBoundingSphere();
 

src/extras/helpers/FaceNormalsHelper.js

@@ -44,9 +44,6 @@ THREE.FaceNormalsHelper = function ( object, size, hex, linewidth ) {
 	//
 
 	this.matrixAutoUpdate = false;
-
-	this.normalMatrix = new THREE.Matrix3();
-
 	this.update();
 
 };
@@ -58,12 +55,13 @@ THREE.FaceNormalsHelper.prototype.update = ( function () {
 
 	var v1 = new THREE.Vector3();
 	var v2 = new THREE.Vector3();
+	var normalMatrix = new THREE.Matrix3();
 
 	return function update() {
 
 		this.object.updateMatrixWorld( true );
 
-		this.normalMatrix.getNormalMatrix( this.object.matrixWorld );
+		normalMatrix.getNormalMatrix( this.object.matrixWorld );
 
 		var matrixWorld = this.object.matrixWorld;
 
@@ -91,7 +89,7 @@ THREE.FaceNormalsHelper.prototype.update = ( function () {
 				.divideScalar( 3 )
 				.applyMatrix4( matrixWorld );
 
-			v2.copy( normal ).applyMatrix3( this.normalMatrix ).normalize().multiplyScalar( this.size ).add( v1 );
+			v2.copy( normal ).applyMatrix3( normalMatrix ).normalize().multiplyScalar( this.size ).add( v1 );
 
 			position.setXYZ( idx, v1.x, v1.y, v1.z );
 

src/extras/helpers/VertexNormalsHelper.js

@@ -43,8 +43,6 @@ THREE.VertexNormalsHelper = function ( object, size, hex, linewidth ) {
 
 	this.matrixAutoUpdate = false;
 
-	this.normalMatrix = new THREE.Matrix3();
-
 	this.update();
 
 };
@@ -56,6 +54,7 @@ THREE.VertexNormalsHelper.prototype.update = ( function () {
 
 	var v1 = new THREE.Vector3();
 	var v2 = new THREE.Vector3();
+	var normalMatrix = new THREE.Matrix3();
 
 	return function update() {
 
@@ -63,7 +62,7 @@ THREE.VertexNormalsHelper.prototype.update = ( function () {
 
 		this.object.updateMatrixWorld( true );
 
-		this.normalMatrix.getNormalMatrix( this.object.matrixWorld );
+		normalMatrix.getNormalMatrix( this.object.matrixWorld );
 
 		var matrixWorld = this.object.matrixWorld;
 
@@ -93,7 +92,7 @@ THREE.VertexNormalsHelper.prototype.update = ( function () {
 
 					v1.copy( vertex ).applyMatrix4( matrixWorld );
 
-					v2.copy( normal ).applyMatrix3( this.normalMatrix ).normalize().multiplyScalar( this.size ).add( v1 );
+					v2.copy( normal ).applyMatrix3( normalMatrix ).normalize().multiplyScalar( this.size ).add( v1 );
 
 					position.setXYZ( idx, v1.x, v1.y, v1.z );
 
@@ -123,7 +122,7 @@ THREE.VertexNormalsHelper.prototype.update = ( function () {
 
 				v2.set( objNorm.getX( j ), objNorm.getY( j ), objNorm.getZ( j ) );
 
-				v2.applyMatrix3( this.normalMatrix ).normalize().multiplyScalar( this.size ).add( v1 );
+				v2.applyMatrix3( normalMatrix ).normalize().multiplyScalar( this.size ).add( v1 );
 
 				position.setXYZ( idx, v1.x, v1.y, v1.z );
 

src/extras/objects/MorphBlendMesh.js

@@ -299,8 +299,16 @@ THREE.MorphBlendMesh.prototype.update = function ( delta ) {
 
 		if ( animation.directionBackwards ) mix = 1 - mix;
 
-		this.morphTargetInfluences[ animation.currentFrame ] = mix * weight;
-		this.morphTargetInfluences[ animation.lastFrame ] = ( 1 - mix ) * weight;
+		if ( animation.currentFrame !== animation.lastFrame ) {
+
+			this.morphTargetInfluences[ animation.currentFrame ] = mix * weight;
+			this.morphTargetInfluences[ animation.lastFrame ] = ( 1 - mix ) * weight;
+
+		} else {
+
+			this.morphTargetInfluences[ animation.currentFrame ] = weight;
+
+		}
 
 	}
 

src/loaders/BufferGeometryLoader.js

@@ -47,14 +47,15 @@ THREE.BufferGeometryLoader.prototype = {
 
 		}
 
-		var drawcalls = json.data.drawcalls || json.data.offsets;
+		var groups = json.data.groups || json.data.drawcalls || json.data.offsets;
 
-		if ( drawcalls !== undefined ) {
+		if ( groups !== undefined ) {
 
-			for ( var i = 0, n = drawcalls.length; i !== n; ++ i ) {
+			for ( var i = 0, n = groups.length; i !== n; ++ i ) {
 
-				var drawcall = drawcalls[ i ];
-				geometry.addDrawcall( drawcall.start, drawcall.count );
+				var group = groups[ i ];
+
+				geometry.addGroup( group.start, group.count );
 
 			}
 

src/loaders/GeometryLoader.js

@@ -1,64 +0,0 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- */
-
-THREE.GeometryLoader = function ( manager ) {
-
-	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
-
-};
-
-THREE.GeometryLoader.prototype = {
-
-	constructor: THREE.GeometryLoader,
-
-	load: function ( url, onLoad, onProgress, onError ) {
-
-		var scope = this;
-
-		var loader = new THREE.XHRLoader( this.manager );
-		loader.setCrossOrigin( this.crossOrigin );
-		loader.load( url, function ( text ) {
-
-			onLoad( scope.parse( JSON.parse( text ) ) );
-
-		}, onProgress, onError );
-
-	},
-
-	setCrossOrigin: function ( value ) {
-
-		this.crossOrigin = value;
-
-	},
-
-	parse: function ( json ) {
-
-		var geometry = new THREE.Geometry();
-
-		geometry.indices = json.indices;
-		geometry.vertices = json.vertices;
-		geometry.normals = json.normals;
-		geometry.uvs = json.uvs;
-
-		var boundingSphere = json.boundingSphere;
-
-		if ( boundingSphere !== undefined ) {
-
-			var center = new THREE.Vector3();
-
-			if ( boundingSphere.center !== undefined ) {
-
-				center.fromArray( boundingSphere.center );
-
-			}
-
-			geometry.boundingSphere = new THREE.Sphere( center, boundingSphere.radius );
-
-		}
-
-		return geometry;
-
-	}
-
-};

src/materials/MeshFaceMaterial.js → src/materials/MultiMaterial.js

@@ -2,11 +2,11 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.MeshFaceMaterial = function ( materials ) {
+THREE.MultiMaterial = function ( materials ) {
 
 	this.uuid = THREE.Math.generateUUID();
 
-	this.type = 'MeshFaceMaterial';
+	this.type = 'MultiMaterial';
 
 	this.materials = materials instanceof Array ? materials : [];
 
@@ -14,9 +14,9 @@ THREE.MeshFaceMaterial = function ( materials ) {
 
 };
 
-THREE.MeshFaceMaterial.prototype = {
+THREE.MultiMaterial.prototype = {
 
-	constructor: THREE.MeshFaceMaterial,
+	constructor: THREE.MultiMaterial,
 
 	toJSON: function () {
 
@@ -60,3 +60,7 @@ THREE.MeshFaceMaterial.prototype = {
 	}
 
 };
+
+// backwards compatibility
+
+THREE.MeshFaceMaterial = THREE.MultiMaterial;