Merge remote-tracking branch 'origin/dev'

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/Editor.js

@@ -19,9 +19,6 @@ var Editor = function () {
 
 		// actions
 
-		playAnimation: new SIGNALS.Signal(),
-		stopAnimation: new SIGNALS.Signal(),
-
 		// showDialog: new SIGNALS.Signal(),
 
 		// notifications
@@ -244,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 ) {
 
@@ -285,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

@@ -190,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.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

@@ -505,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/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/loaders/AWDLoader.js

@@ -763,10 +763,8 @@
 					else if ( str_type === 2 ) {
 
 						buffer = new Uint16Array( str_len / 2 );
-						attrib = new THREE.IndexBufferAttribute( buffer, 1 );
-						geom.addAttribute( 'index', attrib );
-
-						geom.addDrawCall( 0, str_len / 2 );
+						attrib = new THREE.BufferAttribute( buffer, 1 );
+						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.IndexBufferAttribute( 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/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.IndexBufferAttribute( 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.IndexBufferAttribute( 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.IndexBufferAttribute( indices, 1 ) );
+		this.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 		this.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
 		if ( normals !== undefined ) {

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

@@ -430,9 +430,9 @@ THREE.Projector = function () {
 
 					}
 
-					if ( attributes.index !== undefined ) {
+					if ( geometry.index !== null ) {
 
-						var indices = attributes.index.array;
+						var indices = geometry.index.array;
 
 						if ( groups.length > 0 ) {
 

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/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/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;
+	<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;
-
-        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.IndexBufferAttribute( 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
+		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();
 
-            // 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
 
-                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 }
+			} );
 
-            } );
+			var mesh = new THREE.Mesh( geometry, material );
+			scene.add( mesh );
 
-            var mesh = new THREE.Mesh( geometry, material );
-            scene.add( mesh );
 
+			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === false ) {
+				document.getElementById( "notSupported" ).style.display = "";
+				return;
+			}
 
-            if ( !renderer.supportsInstancedArrays ) {
-                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];
 
+			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 );
 
-            var delta = ( time - lastTime ) / 5000;
-            tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
+				orientations.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
 
-            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.needsUpdate = true;
+			lastTime = time;
+		}
 
-                orientations.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
-
-            }
-            orientations.needsUpdate = true;
-            lastTime = time;
-        }
-
-        init();
-        animate();
-    </script>
+		init();
+		animate();
+	</script>
 
 </body>
 

examples/webgl_buffergeometry_instancing_interleaved_dynamic.html

@@ -1,310 +1,309 @@
 <!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.IndexBufferAttribute( 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>
 

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.IndexBufferAttribute( 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;
 			}
 
@@ -188,7 +187,7 @@
 
 				}
 
-				geometry.addAttribute( 'index', new THREE.IndexBufferAttribute( 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_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.IndexBufferAttribute( 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.IndexBufferAttribute( 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/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,6 +12,7 @@ THREE.BufferGeometry = function () {
 	this.name = '';
 	this.type = 'BufferGeometry';
 
+	this.index = null;
 	this.attributes = {};
 
 	this.morphAttributes = {};
@@ -27,22 +28,28 @@ 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' && attribute instanceof THREE.IndexBufferAttribute === false ) {
+		if ( name === 'index' ) {
 
-			console.warn( 'THREE.BufferGeometry.addAttribute: Use THREE.IndexBufferAttribute for index attribute.' );
-			attribute = new THREE.IndexBufferAttribute( attribute.array, attribute.itemSize );
+			console.warn( 'THREE.BufferGeometry.addAttribute: Use .addIndex() for index attribute.' );
+			this.addIndex( attribute );
 
 		}
 
@@ -347,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;
 
@@ -433,6 +442,15 @@ THREE.BufferGeometry.prototype = {
 
 		}
 
+		if ( geometry.groupsNeedUpdate ) {
+
+			geometry.computeGroups( object.geometry );
+			this.groups = geometry.groups;
+
+			geometry.groupsNeedUpdate = false;
+
+		}
+
 		return this;
 
 	},
@@ -489,7 +507,7 @@ THREE.BufferGeometry.prototype = {
 
 			var TypeArray = geometry.vertices.length > 65535 ? Uint32Array : Uint16Array;
 			var indices = new TypeArray( geometry.indices.length * 3 );
-			this.addAttribute( 'index', new THREE.IndexBufferAttribute( indices, 1 ).copyIndicesArray( geometry.indices ) );
+			this.addIndex( new THREE.BufferAttribute( indices, 1 ).copyIndicesArray( geometry.indices ) );
 
 		}
 
@@ -661,6 +679,7 @@ THREE.BufferGeometry.prototype = {
 
 	computeVertexNormals: function () {
 
+		var index = this.index;
 		var attributes = this.attributes;
 		var groups = this.groups;
 
@@ -699,9 +718,9 @@ THREE.BufferGeometry.prototype = {
 
 			// indexed elements
 
-			if ( attributes.index ) {
+			if ( index ) {
 
-				var indices = attributes.index.array;
+				var indices = index.array;
 
 				if ( groups.length === 0 ) {
 
@@ -789,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 ) {
@@ -799,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;
@@ -1111,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 groups = source.groups;
 
 		for ( var name in attributes ) {
 
@@ -1121,10 +1147,11 @@ THREE.BufferGeometry.prototype = {
 
 		}
 
+		var groups = source.groups;
+
 		for ( var i = 0, l = groups.length; i < l; i ++ ) {
 
 			var group = groups[ i ];
-
 			this.addGroup( group.start, group.count );
 
 		}

src/core/DirectGeometry.js

@@ -38,6 +38,7 @@ THREE.DirectGeometry = function () {
 	this.colorsNeedUpdate = false;
 	this.uvsNeedUpdate = false;
 	this.tangentsNeedUpdate = false;
+	this.groupsNeedUpdate = false;
 
 };
 
@@ -69,6 +70,51 @@ 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 ) {
 
 		var faces = geometry.faces;
@@ -80,9 +126,6 @@ THREE.DirectGeometry.prototype = {
 
 		var hasTangents = geometry.hasTangents;
 
-		var group;
-		var materialIndex;
-
 		// morphs
 
 		var morphTargets = geometry.morphTargets;
@@ -129,7 +172,7 @@ THREE.DirectGeometry.prototype = {
 
 		//
 
-		for ( var i = 0, i3 = 0; i < faces.length; i ++, i3 += 3 ) {
+		for ( var i = 0; i < faces.length; i ++ ) {
 
 			var face = faces[ i ];
 
@@ -199,26 +242,6 @@ THREE.DirectGeometry.prototype = {
 
 			}
 
-			// materials
-
-			if ( face.materialIndex !== materialIndex ) {
-
-				materialIndex = face.materialIndex;
-
-				if ( group !== undefined ) {
-
-					group.count = i3 - group.start;
-					this.groups.push( group );
-
-				}
-
-				group = {
-					start: i3,
-					materialIndex: materialIndex
-				};
-
-			}
-
 			// tangents
 
 			if ( hasTangents === true ) {
@@ -273,20 +296,14 @@ THREE.DirectGeometry.prototype = {
 
 		}
 
-		//
-
-		if ( group !== undefined ) {
-
-			group.count = i3 - group.start;
-			this.groups.push( group );
-
-		}
+		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;
@@ -1235,14 +1236,6 @@ THREE.Geometry.prototype = {
 
 		this.dispatchEvent( { type: 'dispose' } );
 
-	},
-
-	// Backwards compatibility
-
-	set groupsNeedUpdate ( value ) {
-
-		if ( value === true ) this.dispose();
-
 	}
 
 };

src/core/IndexBufferAttribute.js

@@ -1,12 +0,0 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- */
-
-THREE.IndexBufferAttribute = function ( array, itemSize ) {
-
-	THREE.BufferAttribute.call( this, array, itemSize );
-
-};
-
-THREE.IndexBufferAttribute.prototype = Object.create( THREE.BufferAttribute.prototype );
-THREE.IndexBufferAttribute.prototype.constructor = THREE.IndexBufferAttribute;

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/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.IndexBufferAttribute( 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/PlaneBufferGeometry.js

@@ -85,7 +85,7 @@ THREE.PlaneBufferGeometry = function ( width, height, widthSegments, heightSegme
 
 	}
 
-	this.addAttribute( 'index', new THREE.IndexBufferAttribute( 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/SphereBufferGeometry.js

@@ -88,7 +88,7 @@ THREE.SphereBufferGeometry = function ( radius, widthSegments, heightSegments, p
 
 	}
 
-	this.addAttribute( 'index', new THREE.IndexBufferAttribute( 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/materials/ShaderMaterial.js

@@ -36,7 +36,6 @@ THREE.ShaderMaterial = function ( parameters ) {
 
 	this.defines = {};
 	this.uniforms = {};
-	this.attributes = [];
 
 	this.vertexShader = 'void main() {\n\tgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}';
 	this.fragmentShader = 'void main() {\n\tgl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );\n}';
@@ -73,10 +72,9 @@ THREE.ShaderMaterial = function ( parameters ) {
 
 	if ( parameters !== undefined ) {
 
-		if ( parameters.attributes !== undefined && Array.isArray( parameters.attributes ) === false ) {
+		if ( parameters.attributes !== undefined ) {
 
-			console.warn( 'THREE.ShaderMaterial: attributes should now be an array of attribute names.' );
-			parameters.attributes = Object.keys( parameters.attributes );
+			console.error( 'THREE.ShaderMaterial: attributes should now be defined in THREE.BufferGeometry instead.' );
 
 		}
 
@@ -117,6 +115,8 @@ THREE.ShaderMaterial.prototype.copy = function ( source ) {
 	this.morphTargets = source.morphTargets;
 	this.morphNormals = source.morphNormals;
 
+	this.derivatives = source.derivatives;
+
 	return this;
 
 };

src/objects/Line.js

@@ -6,7 +6,8 @@ THREE.Line = function ( geometry, material, mode ) {
 
 	if ( mode === 1 ) {
 
-		console.error( 'THREE.Line: THREE.LinePieces mode has been removed. Use THREE.LineSegments instead.' );
+		console.warn( 'THREE.Line: parameter THREE.LinePieces no longer supported. Created THREE.LineSegments instead.' );
+		return new THREE.LineSegments( geometry, material );
 
 	}
 
@@ -59,17 +60,21 @@ THREE.Line.prototype.raycast = ( function () {
 
 		if ( geometry instanceof THREE.BufferGeometry ) {
 
+			var index = geometry.index;
 			var attributes = geometry.attributes;
 
-			if ( attributes.index !== undefined ) {
+			if ( index !== null ) {
 
-				var indices = attributes.index.array;
+				var indices = index.array;
 				var positions = attributes.position.array;
-				var offsets = geometry.drawcalls;
+				var offsets = geometry.groups;
 
 				if ( offsets.length === 0 ) {
 
-					geometry.addDrawCall( 0, indices.length );
+					offsets = [ {
+						start: 0,
+						count: indices.length
+					} ];
 
 				}
 

src/objects/Mesh.js

@@ -26,7 +26,6 @@ THREE.Mesh.prototype.updateMorphTargets = function () {
 	if ( this.geometry.morphTargets !== undefined && this.geometry.morphTargets.length > 0 ) {
 
 		this.morphTargetBase = - 1;
-		this.morphTargetForcedOrder = [];
 		this.morphTargetInfluences = [];
 		this.morphTargetDictionary = {};
 
@@ -109,17 +108,21 @@ THREE.Mesh.prototype.raycast = ( function () {
 
 		if ( geometry instanceof THREE.BufferGeometry ) {
 
+			var index = geometry.index;
 			var attributes = geometry.attributes;
 
-			if ( attributes.index !== undefined ) {
+			if ( index !== null ) {
 
-				var indices = attributes.index.array;
+				var indices = index.array;
 				var positions = attributes.position.array;
-				var offsets = geometry.drawcalls;
+				var offsets = geometry.groups;
 
 				if ( offsets.length === 0 ) {
 
-					geometry.addDrawCall( 0, indices.length );
+					offsets = [ {
+						start: 0,
+						count: indices.length
+					} ];
 
 				}
 

src/objects/MorphAnimMesh.js

@@ -85,7 +85,7 @@ THREE.MorphAnimMesh.prototype.interpolateTargets = function ( a, b, t ) {
 
 THREE.MorphAnimMesh.prototype.copy = function ( source ) {
 
-	THREE.Object3D.prototype.copy.call( this, source );
+	THREE.Mesh.prototype.copy.call( this, source );
 
 	this.mixer = new THREE.AnimationMixer( this );
 	this.animationClips = source.animationClips;

src/objects/PointCloud.js

@@ -74,17 +74,21 @@ THREE.PointCloud.prototype.raycast = ( function () {
 
 		if ( geometry instanceof THREE.BufferGeometry ) {
 
+			var index = geometry.index;
 			var attributes = geometry.attributes;
 			var positions = attributes.position.array;
 
-			if ( attributes.index !== undefined ) {
+			if ( index !== null ) {
 
-				var indices = attributes.index.array;
-				var offsets = geometry.drawcalls;
+				var indices = index.array;
+				var offsets = geometry.groups;
 
 				if ( offsets.length === 0 ) {
 
-					geometry.addDrawCall( 0, indices.length );
+					offsets = [ {
+						start: 0,
+						count: indices.length
+					} ];
 
 				}
 

src/objects/Skeleton.js

@@ -38,10 +38,6 @@ THREE.Skeleton = function ( bones, boneInverses, useVertexTexture ) {
 
 		this.boneMatrices = new Float32Array( this.boneTextureWidth * this.boneTextureHeight * 4 ); // 4 floats per RGBA pixel
 		this.boneTexture = new THREE.DataTexture( this.boneMatrices, this.boneTextureWidth, this.boneTextureHeight, THREE.RGBAFormat, THREE.FloatType );
-		this.boneTexture.minFilter = THREE.NearestFilter;
-		this.boneTexture.magFilter = THREE.NearestFilter;
-		this.boneTexture.generateMipmaps = false;
-		this.boneTexture.flipY = false;
 
 	} else {
 

src/objects/Sprite.js

@@ -10,7 +10,7 @@ THREE.Sprite = ( function () {
 	var uvs = new Float32Array( [ 0, 0,   1, 0,   1, 1,   0, 1 ] );
 
 	var geometry = new THREE.BufferGeometry();
-	geometry.addAttribute( 'index', new THREE.IndexBufferAttribute( indices, 1 ) );
+	geometry.addIndex( new THREE.BufferAttribute( indices, 1 ) );
 	geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
 	geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
 

src/renderers/WebGLRenderer.js

@@ -278,13 +278,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	var _supportsVertexTextures = _maxVertexTextures > 0;
 	var _supportsBoneTextures = _supportsVertexTextures && extensions.get( 'OES_texture_float' );
-	var _supportsInstancedArrays = extensions.get( 'ANGLE_instanced_arrays' );
-
-	//
-
-
-
-	//
 
 	var _maxPrecision = state.getMaxPrecision( _precision );
 
@@ -320,18 +313,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	this.supportsVertexTextures = function () {
-
-		return _supportsVertexTextures;
-
-	};
-
-	this.supportsInstancedArrays = function () {
-
-		return _supportsInstancedArrays;
-
-	};
-
 	this.getMaxAnisotropy = ( function () {
 
 		var value;
@@ -760,8 +741,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	this.renderBufferDirect = function ( camera, lights, fog, geometry, material, object, group ) {
 
-		if ( material.visible === false ) return;
-
 		setMaterial( material );
 
 		var program = setProgram( camera, lights, fog, material, object );
@@ -810,8 +789,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 					var index = influence[ 1 ];
 
-					if ( material.morphTargets === true ) geometry.addAttribute( 'morphTarget' + i, morphAttributes.position[ index ] );
-					if ( material.morphNormals === true ) geometry.addAttribute( 'morphNormal' + i, morphAttributes.normal[ index ] );
+					if ( material.morphTargets === true && morphAttributes.position ) geometry.addAttribute( 'morphTarget' + i, morphAttributes.position[ index ] );
+					if ( material.morphNormals === true && morphAttributes.normal ) geometry.addAttribute( 'morphNormal' + i, morphAttributes.normal[ index ] );
 
 				} else {
 
@@ -836,7 +815,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		//
 
-		var index = geometry.attributes.index;
+		var index = geometry.index;
 		var position = geometry.attributes.position;
 
 		if ( material.wireframe === true ) {
@@ -847,7 +826,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		var renderer;
 
-		if ( index !== undefined ) {
+		if ( index !== null ) {
 
 			renderer = indexedBufferRenderer;
 			renderer.setIndex( index );
@@ -862,7 +841,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			setupVertexAttributes( material, program, geometry );
 
-			if ( index !== undefined ) {
+			if ( index !== null ) {
 
 				_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, objects.getAttributeBuffer( index ) );
 
@@ -874,7 +853,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			var count;
 
-			if ( index !== undefined ) {
+			if ( index !== null ) {
 
 				count = index.array.length;
 
@@ -1255,6 +1234,43 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
+	function pushImmediateRenderItem( object ) {
+
+		if ( object.material.transparent ) {
+
+			transparentImmediateObjects.push( object );
+
+		} else {
+
+			opaqueImmediateObjects.push( object );
+
+		}
+
+	}
+
+	function pushRenderItem( object, geometry, material, z, group ) {
+
+		var renderItem = {
+			id: object.id,
+			object: object,
+			geometry: geometry,
+			material: material,
+			z: _vector3.z,
+			group: group
+		};
+
+		if ( material.transparent ) {
+
+			transparentObjects.push( renderItem );
+
+		} else {
+
+			opaqueObjects.push( renderItem );
+
+		}
+
+	}
+
 	function projectObject( object ) {
 
 		if ( object.visible === false ) return;
@@ -1273,17 +1289,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		} else if ( object instanceof THREE.ImmediateRenderObject ) {
 
-			var material = object.material;
-
-			if ( material.transparent ) {
-
-				transparentImmediateObjects.push( object );
-
-			} else {
-
-				opaqueImmediateObjects.push( object );
-
-			}
+			pushImmediateRenderItem( object );
 
 		} else if ( object instanceof THREE.Mesh || object instanceof THREE.Line || object instanceof THREE.PointCloud ){
 
@@ -1306,36 +1312,29 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 					}
 
+					var geometry = objects.update( object );
+
 					if ( material instanceof THREE.MeshFaceMaterial ) {
 
+						var groups = geometry.groups;
 						var materials = material.materials;
 
-						for ( var i = 0, l = materials.length; i < l; i ++ ) {
+						for ( var i = 0, l = groups.length; i < l; i ++ ) {
 
-							materials[ i ].program = properties.get( materials[ i ] ).program;
+							var group = groups[ i ];
+							var groupMaterial = materials[ group.materialIndex ];
 
-						}
-
-					} else {
-
-						material.program = properties.get( material ).program;
-
-					}
+							if ( groupMaterial.visible === true ) {
 
-					var renderItem = {
-						id: object.id,
-						object: object,
-						material: object.material,
-						z: _vector3.z
-					};
+								pushRenderItem( object, geometry, groupMaterial, _vector3.z, group );
 
-					if ( material.transparent ) {
+							}
 
-						transparentObjects.push( renderItem );
+						}
 
 					} else {
 
-						opaqueObjects.push( renderItem );
+						pushRenderItem( object, geometry, material, _vector3.z );
 
 					}
 
@@ -1357,42 +1356,19 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	function renderObjects( renderList, camera, lights, fog, overrideMaterial ) {
 
-		var material = overrideMaterial;
-
 		for ( var i = 0, l = renderList.length; i < l; i ++ ) {
 
 			var renderItem = renderList[ i ];
+
 			var object = renderItem.object;
-			var geometry = objects.update( object );
+			var geometry = renderItem.geometry;
+			var material = overrideMaterial === undefined ? renderItem.material : overrideMaterial;
+			var group = renderItem.group;
 
 			object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
 			object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
 
-			if ( overrideMaterial === undefined ) material = object.material;
-
-			if ( material instanceof THREE.MeshFaceMaterial ) {
-
-				var groups = geometry.groups;
-				var materials = material.materials;
-
-				for ( var j = 0, jl = groups.length; j < jl; j ++ ) {
-
-					var group = groups[ j ];
-					var groupMaterial = materials[ group.materialIndex ];
-
-					if ( groupMaterial !== undefined ) {
-
-						_this.renderBufferDirect( camera, lights, fog, geometry, groupMaterial, object, group );
-
-					}
-
-				}
-
-			} else {
-
-				_this.renderBufferDirect( camera, lights, fog, geometry, material, object );
-
-			}
+			_this.renderBufferDirect( camera, lights, fog, geometry, material, object, group );
 
 		}
 
@@ -1636,6 +1612,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 		}
 
 		materialProperties.program = program;
+		material.program = program;
 
 		var attributes = program.getAttributes();
 
@@ -1674,6 +1651,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 		materialProperties.uniformsList = [];
 
 		var uniformLocations = materialProperties.program.getUniforms();
+
 		for ( var u in materialProperties.__webglShader.uniforms ) {
 
 			var location = uniformLocations[ u ];
@@ -2241,7 +2219,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	function loadUniformsGeneric ( uniforms ) {
 
-		var texture, textureUnit, offset;
+		var texture, textureUnit;
 
 		for ( var j = 0, jl = uniforms.length; j < jl; j ++ ) {
 
@@ -2390,12 +2368,10 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 					}
 
-					for ( var i = 0, il = value.length; i < il; i ++ ) {
-
-						offset = i * 2;
+					for ( var i = 0, i2 = 0, il = value.length; i < il; i ++, i2 += 2 ) {
 
-						uniform._array[ offset + 0 ] = value[ i ].x;
-						uniform._array[ offset + 1 ] = value[ i ].y;
+						uniform._array[ i2 + 0 ] = value[ i ].x;
+						uniform._array[ i2 + 1 ] = value[ i ].y;
 
 					}
 
@@ -2413,13 +2389,11 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 					}
 
-					for ( var i = 0, il = value.length; i < il; i ++ ) {
-
-						offset = i * 3;
+					for ( var i = 0, i3 = 0, il = value.length; i < il; i ++, i3 += 3 ) {
 
-						uniform._array[ offset + 0 ] = value[ i ].x;
-						uniform._array[ offset + 1 ] = value[ i ].y;
-						uniform._array[ offset + 2 ] = value[ i ].z;
+						uniform._array[ i3 + 0 ] = value[ i ].x;
+						uniform._array[ i3 + 1 ] = value[ i ].y;
+						uniform._array[ i3 + 2 ] = value[ i ].z;
 
 					}
 
@@ -2437,14 +2411,12 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 					}
 
-					for ( var i = 0, il = value.length; i < il; i ++ ) {
-
-						offset = i * 4;
+					for ( var i = 0, i4 = 0, il = value.length; i < il; i ++, i4 += 4 ) {
 
-						uniform._array[ offset + 0 ] = value[ i ].x;
-						uniform._array[ offset + 1 ] = value[ i ].y;
-						uniform._array[ offset + 2 ] = value[ i ].z;
-						uniform._array[ offset + 3 ] = value[ i ].w;
+						uniform._array[ i4 + 0 ] = value[ i ].x;
+						uniform._array[ i4 + 1 ] = value[ i ].y;
+						uniform._array[ i4 + 2 ] = value[ i ].z;
+						uniform._array[ i4 + 3 ] = value[ i ].w;
 
 					}
 
@@ -3659,6 +3631,21 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
+	this.supportsVertexTextures = function () {
+
+		return _supportsVertexTextures;
+
+	};
+
+	this.supportsInstancedArrays = function () {
+
+		console.warn( 'THREE.WebGLRenderer: .supportsInstancedArrays() is now .extensions.get( \'ANGLE_instanced_arrays\' ).' );
+		return extensions.get( 'ANGLE_instanced_arrays' );
+
+	};
+
+	//
+
 	this.initMaterial = function () {
 
 		console.warn( 'THREE.WebGLRenderer: .initMaterial() has been removed.' );

src/renderers/webgl/WebGLIndexedBufferRenderer.js

@@ -51,7 +51,7 @@ THREE.WebGLIndexedBufferRenderer = function ( _gl, extensions, _infoRender ) {
 
 		}
 
-		var index = geometry.attributes.index;
+		var index = geometry.index;
 
 		extension.drawElementsInstancedANGLE( mode, index.array.length, type, 0, geometry.maxInstancedCount );
 

src/renderers/webgl/WebGLObjects.js

@@ -20,11 +20,18 @@ THREE.WebGLObjects = function ( gl, properties, info ) {
 
 		}
 
+		var index = geometry.index;
 		var attributes = geometry.attributes;
 
+		if ( index !== null ) {
+
+			updateAttribute( index, gl.ELEMENT_ARRAY_BUFFER );
+
+		}
+
 		for ( var name in attributes ) {
 
-			updateAttribute( attributes[ name ] );
+			updateAttribute( attributes[ name ], gl.ARRAY_BUFFER );
 
 		}
 
@@ -38,7 +45,7 @@ THREE.WebGLObjects = function ( gl, properties, info ) {
 
 			for ( var i = 0, l = array.length; i < l; i ++ ) {
 
-				updateAttribute( array[ i ] );
+				updateAttribute( array[ i ], gl.ARRAY_BUFFER );
 
 			}
 
@@ -48,19 +55,7 @@ THREE.WebGLObjects = function ( gl, properties, info ) {
 
 	}
 
-	function updateAttribute( attribute ) {
-
-		var bufferType;
-
-		if ( attribute instanceof THREE.IndexBufferAttribute ) {
-
-			bufferType = gl.ELEMENT_ARRAY_BUFFER;
-
-		} else {
-
-			bufferType = gl.ARRAY_BUFFER;
-
-		}
+	function updateAttribute( attribute, bufferType ) {
 
 		var data = ( attribute instanceof THREE.InterleavedBufferAttribute ) ? attribute.data : attribute;
 
@@ -83,15 +78,7 @@ THREE.WebGLObjects = function ( gl, properties, info ) {
 		attributeProperties.__webglBuffer = gl.createBuffer();
 		gl.bindBuffer( bufferType, attributeProperties.__webglBuffer );
 
-		var usage = gl.STATIC_DRAW;
-
-		if ( data instanceof THREE.DynamicBufferAttribute
-			 || ( data instanceof THREE.InstancedBufferAttribute && data.dynamic === true )
-			 || ( data instanceof THREE.InterleavedBuffer && data.dynamic === true ) ) {
-
-			usage = gl.DYNAMIC_DRAW;
-
-		}
+		var usage = data.dynamic ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW;
 
 		gl.bufferData( bufferType, data.array, usage );
 
@@ -103,7 +90,7 @@ THREE.WebGLObjects = function ( gl, properties, info ) {
 
 		gl.bindBuffer( bufferType, attributeProperties.__webglBuffer );
 
-		if ( data.updateRange === undefined || data.updateRange.count === - 1 ) {
+		if ( data.dynamic === false || data.updateRange.count === - 1 ) {
 
 			// Not using update ranges
 
@@ -111,7 +98,7 @@ THREE.WebGLObjects = function ( gl, properties, info ) {
 
 		} else if ( data.updateRange.count === 0 ) {
 
-			console.error( 'THREE.WebGLObjects.updateBuffer: using updateRange for THREE.DynamicBufferAttribute and marked as needsUpdate but count is 0, ensure you are using set methods or updating manually.' );
+			console.error( 'THREE.WebGLObjects.updateBuffer: dynamic THREE.BufferAttribute marked as needsUpdate but updateRange.count is 0, ensure you are using set methods or updating manually.' );
 
 		} else {
 
@@ -150,14 +137,13 @@ THREE.WebGLObjects = function ( gl, properties, info ) {
 
 		var indices = [];
 
+		var index = geometry.index;
 		var attributes = geometry.attributes;
-
-		var index = attributes.index;
 		var position = attributes.position;
 
 		// console.time( 'wireframe' );
 
-		if ( index !== undefined ) {
+		if ( index !== null ) {
 
 			var edges = {};
 			var array = index.array;
@@ -176,7 +162,7 @@ THREE.WebGLObjects = function ( gl, properties, info ) {
 
 		} else {
 
-			var array = position.array;
+			var array = attributes.position.array;
 
 			for ( var i = 0, l = ( array.length / 3 ) - 1; i < l; i += 3 ) {
 
@@ -193,9 +179,9 @@ THREE.WebGLObjects = function ( gl, properties, info ) {
 		// console.timeEnd( 'wireframe' );
 
 		var TypeArray = position.count > 65535 ? Uint32Array : Uint16Array;
-		var attribute = new THREE.IndexBufferAttribute( new TypeArray( indices ), 1 );
+		var attribute = new THREE.BufferAttribute( new TypeArray( indices ), 1 );
 
-		updateAttribute( attribute );
+		updateAttribute( attribute, gl.ELEMENT_ARRAY_BUFFER );
 
 		property.wireframe = attribute;
 

src/renderers/webgl/WebGLShadowMap.js

@@ -214,7 +214,7 @@ THREE.WebGLShadowMap = function ( _renderer, _lights, _objects ) {
 						var group = groups[ j ];
 						var groupMaterial = materials[ group.materialIndex ];
 
-						if ( groupMaterial !== undefined ) {
+						if ( groupMaterial.visible === true ) {
 
 							_renderer.renderBufferDirect( shadowCamera, _lights, null, geometry, getDepthMaterial( object, groupMaterial ), object, group );
 

src/textures/DataTexture.js

@@ -3,10 +3,25 @@
  */
 
 THREE.DataTexture = function ( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy ) {
+	
+	if ( magFilter === undefined ) {
+		
+		magFilter = THREE.NearestFilter;
+		
+	}
+	
+	if ( minFilter === undefined ) {
+		
+		minFilter = THREE.NearestFilter;
+		
+	}
 
 	THREE.Texture.call( this, null, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
 
 	this.image = { data: data, width: width, height: height };
+	
+	this.flipY = false;
+	this.generateMipmaps  = false;
 
 };
 

utils/build/includes/common.json

@@ -25,8 +25,6 @@
 	"src/core/Face3.js",
 	"src/core/Face4.js",
 	"src/core/BufferAttribute.js",
-	"src/core/DynamicBufferAttribute.js",
-	"src/core/IndexBufferAttribute.js",
 	"src/core/InstancedBufferAttribute.js",
 	"src/core/InterleavedBuffer.js",
 	"src/core/InstancedInterleavedBuffer.js",