Merge remote-tracking branch 'refs/remotes/mrdoob/dev' into dev

build/three.js

@@ -40077,7 +40077,7 @@
 
 			matrixWorldInv.getInverse( this.root.matrixWorld );
 
-			for ( var i = 0, j = 0; i < this.bones.length; i ++, j += 2 ) {
+			for ( var i = 0, j = 0; i < this.bones.length; i ++ ) {
 
 				var bone = this.bones[ i ];
 
@@ -40091,6 +40091,8 @@
 					vector.setFromMatrixPosition( boneMatrix );
 					position.setXYZ( j + 1, vector.x, vector.y, vector.z );
 
+					j += 2;
+
 				}
 
 			}
@@ -40276,9 +40278,10 @@
 	/**
 	 * @author alteredq / http://alteredqualia.com/
 	 * @author mrdoob / http://mrdoob.com/
+	 * @author Mugen87 / https://github.com/Mugen87
 	 */
 
-	function HemisphereLightHelper( light, sphereSize ) {
+	function HemisphereLightHelper( light, size ) {
 
 		Object3D.call( this );
 
@@ -40288,21 +40291,17 @@
 		this.matrix = light.matrixWorld;
 		this.matrixAutoUpdate = false;
 
-		this.colors = [ new Color(), new Color() ];
+		var geometry = new OctahedronBufferGeometry( size );
+		geometry.rotateY( Math.PI * 0.5 );
 
-		var geometry = new SphereGeometry( sphereSize, 4, 2 );
-		geometry.rotateX( - Math.PI / 2 );
+		var material = new MeshBasicMaterial( { vertexColors: VertexColors, wireframe: true } );
 
-		for ( var i = 0, il = 8; i < il; i ++ ) {
+		var position = geometry.getAttribute( 'position' );
+		var colors = new Float32Array( position.count * 3 );
 
-			geometry.faces[ i ].color = this.colors[ i < 4 ? 0 : 1 ];
-
-		}
+		geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
 
-		var material = new MeshBasicMaterial( { vertexColors: FaceColors, wireframe: true } );
-
-		this.lightSphere = new Mesh( geometry, material );
-		this.add( this.lightSphere );
+		this.add( new Mesh( geometry, material ) );
 
 		this.update();
 
@@ -40313,8 +40312,8 @@
 
 	HemisphereLightHelper.prototype.dispose = function () {
 
-		this.lightSphere.geometry.dispose();
-		this.lightSphere.material.dispose();
+		this.children[ 0 ].geometry.dispose();
+		this.children[ 0 ].material.dispose();
 
 	};
 
@@ -40322,13 +40321,29 @@
 
 		var vector = new Vector3();
 
+		var color1 = new Color();
+		var color2 = new Color();
+
 		return function update() {
 
-			this.colors[ 0 ].copy( this.light.color ).multiplyScalar( this.light.intensity );
-			this.colors[ 1 ].copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
+			var mesh = this.children[ 0 ];
+
+			var colors = mesh.geometry.getAttribute( 'color' );
+
+			color1.copy( this.light.color ).multiplyScalar( this.light.intensity );
+			color2.copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
+
+			for ( var i = 0, l = colors.count; i < l; i ++ ) {
+
+				var color = ( i < ( l / 2 ) ) ? color1 : color2;
+
+				colors.setXYZ( i, color.r, color.g, color.b );
+
+			}
+
+			mesh.lookAt( vector.setFromMatrixPosition( this.light.matrixWorld ).negate() );
 
-			this.lightSphere.lookAt( vector.setFromMatrixPosition( this.light.matrixWorld ).negate() );
-			this.lightSphere.geometry.colorsNeedUpdate = true;
+			colors.needsUpdate = true;
 
 		};
 

build/three.modules.js

@@ -40071,7 +40071,7 @@ SkeletonHelper.prototype.update = function () {
 
 		matrixWorldInv.getInverse( this.root.matrixWorld );
 
-		for ( var i = 0, j = 0; i < this.bones.length; i ++, j += 2 ) {
+		for ( var i = 0, j = 0; i < this.bones.length; i ++ ) {
 
 			var bone = this.bones[ i ];
 
@@ -40085,6 +40085,8 @@ SkeletonHelper.prototype.update = function () {
 				vector.setFromMatrixPosition( boneMatrix );
 				position.setXYZ( j + 1, vector.x, vector.y, vector.z );
 
+				j += 2;
+
 			}
 
 		}
@@ -40270,9 +40272,10 @@ RectAreaLightHelper.prototype.update = function () {
 /**
  * @author alteredq / http://alteredqualia.com/
  * @author mrdoob / http://mrdoob.com/
+ * @author Mugen87 / https://github.com/Mugen87
  */
 
-function HemisphereLightHelper( light, sphereSize ) {
+function HemisphereLightHelper( light, size ) {
 
 	Object3D.call( this );
 
@@ -40282,21 +40285,17 @@ function HemisphereLightHelper( light, sphereSize ) {
 	this.matrix = light.matrixWorld;
 	this.matrixAutoUpdate = false;
 
-	this.colors = [ new Color(), new Color() ];
+	var geometry = new OctahedronBufferGeometry( size );
+	geometry.rotateY( Math.PI * 0.5 );
 
-	var geometry = new SphereGeometry( sphereSize, 4, 2 );
-	geometry.rotateX( - Math.PI / 2 );
+	var material = new MeshBasicMaterial( { vertexColors: VertexColors, wireframe: true } );
 
-	for ( var i = 0, il = 8; i < il; i ++ ) {
+	var position = geometry.getAttribute( 'position' );
+	var colors = new Float32Array( position.count * 3 );
 
-		geometry.faces[ i ].color = this.colors[ i < 4 ? 0 : 1 ];
-
-	}
+	geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
 
-	var material = new MeshBasicMaterial( { vertexColors: FaceColors, wireframe: true } );
-
-	this.lightSphere = new Mesh( geometry, material );
-	this.add( this.lightSphere );
+	this.add( new Mesh( geometry, material ) );
 
 	this.update();
 
@@ -40307,8 +40306,8 @@ HemisphereLightHelper.prototype.constructor = HemisphereLightHelper;
 
 HemisphereLightHelper.prototype.dispose = function () {
 
-	this.lightSphere.geometry.dispose();
-	this.lightSphere.material.dispose();
+	this.children[ 0 ].geometry.dispose();
+	this.children[ 0 ].material.dispose();
 
 };
 
@@ -40316,13 +40315,29 @@ HemisphereLightHelper.prototype.update = function () {
 
 	var vector = new Vector3();
 
+	var color1 = new Color();
+	var color2 = new Color();
+
 	return function update() {
 
-		this.colors[ 0 ].copy( this.light.color ).multiplyScalar( this.light.intensity );
-		this.colors[ 1 ].copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
+		var mesh = this.children[ 0 ];
+
+		var colors = mesh.geometry.getAttribute( 'color' );
+
+		color1.copy( this.light.color ).multiplyScalar( this.light.intensity );
+		color2.copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
+
+		for ( var i = 0, l = colors.count; i < l; i ++ ) {
+
+			var color = ( i < ( l / 2 ) ) ? color1 : color2;
+
+			colors.setXYZ( i, color.r, color.g, color.b );
+
+		}
+
+		mesh.lookAt( vector.setFromMatrixPosition( this.light.matrixWorld ).negate() );
 
-		this.lightSphere.lookAt( vector.setFromMatrixPosition( this.light.matrixWorld ).negate() );
-		this.lightSphere.geometry.colorsNeedUpdate = true;
+		colors.needsUpdate = true;
 
 	};
 

docs/api/constants/DrawModes.html

@@ -10,13 +10,72 @@
 	<body>
 		<h1>Draw Mode Constants</h1>
 
-		<h2>Draw Mode</h2>
+		<div class="desc">
+			These are valid values for [page:Mesh.drawMode], and control how the list of vertices is interpeted once sent to the GPU.<br /><br />
+
+			Note that these only work when [page:Mesh.geometry] is a [page:BufferGeometry]. Changing this
+			when [page:Mesh.geometry] is a [page:Geometry] will have no effect.<br /><br />
+
+
+
+		</div>
+
+		<h2>Draw Modes</h2>
+
+		<code>
+			THREE.TrianglesDrawMode
+		</code>
+		<div>
+			This is the default, and results in every three consecutive vertices (v0, v1, v2), (v2, v3, v5), ...
+			being interpreted as a separate triangle. <br />
+			If the number of vertices is not a multiple of 3, excess vertices are ignored.
+		</div>
+
+		<code>
+			THREE.TriangleStripDrawMode
+		</code>
 		<div>
-		THREE.TrianglesDrawMode<br />
-		THREE.TriangleStripDrawMode<br />
-		THREE.TriangleFanDrawMode
+			This will result in a series of triangles connected in a strip, given by (v0, v1, v2), (v2, v1, v3), (v2, v3, v4), ...
+			so that every subsequent triangle shares two vertices with the previous triangle.
 		</div>
 
+		<code>
+			THREE.TriangleFanDrawMode
+		</code>
+		<div>
+			This will result in a series of triangles each sharing the first vertex (like a fan),
+			given by (v0, v1, v2), (v0, v2, v3), (v0, v3, v4), ... <br /><br />
+
+			<em>Note:</em> As of [link:https://en.wikipedia.org/wiki/DirectX#DirectX_10 DirectX10], this mode is not supported. As Chrome and Firefox
+			render WebGL using [link:https://en.wikipedia.org/wiki/ANGLE_(software) ANGLE] on Windows,
+			internally this mode will be converted to a supported mode, which will likely lead to lowered
+			performance on those browsers.
+		</div>
+
+
+		<h2>Usage</h2>
+
+		<code>
+		var geometry = new THREE.Geometry();
+
+		geometry.vertices.push(
+			new THREE.Vector3( -10,  10, 0 ),
+			new THREE.Vector3( -10, -10, 0 ),
+			new THREE.Vector3(  10, -10, 0 ),
+			...
+		);
+		geometry.faces.push( new THREE.Face3( 0, 1, 2 ), ... );
+
+		var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
+
+		var mesh = new THREE.Mesh( geometry, material );
+		mesh.drawMode = THREE.TrianglesDrawMode; //default
+
+		scene.add( mesh );
+		</code>
+
+
+
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]

docs/api/extras/helpers/HemisphereLightHelper.html

@@ -32,7 +32,7 @@ scene.add( helper );
 		<h3>[name]([page:HemisphereLight light], [page:Number sphereSize])</h3>
 		<div>
 		[page:HemisphereLight light] -- The light being visualized. <br />
-		[page:Number sphereSize] -- The size of the sphere used to visualize te light.
+		[page:Number size] -- The size of the mesh used to visualize the light.
 		</div>
 
 
@@ -42,9 +42,6 @@ scene.add( helper );
 		<h3>[property:HemisphereLight light]</h3>
 		<div>Reference to the HemisphereLight being visualized.</div>
 
-		<h3>[property:Mesh lightSphere]</h3>
-		<div>The sphere mesh that shows the location of the hemispherelight.</div>
-
 		<h3>[property:object matrix]</h3>
 		<div>Reference to the hemisphereLight's [page:Object3D.matrixWorld matrixWorld].</div>
 

examples/js/Mirror.js

@@ -5,9 +5,9 @@
 THREE.ShaderLib[ 'mirror' ] = {
 
 	uniforms: {
-		"mirrorColor": { value: new THREE.Color( 0x7F7F7F ) },
-		"mirrorSampler": { value: null },
-		"textureMatrix" : { value: new THREE.Matrix4() }
+		"mirrorColor": new THREE.Uniform( new THREE.Color( 0x7F7F7F ) ),
+		"mirrorSampler": new THREE.Uniform( null ),
+		"textureMatrix" : new THREE.Uniform( new THREE.Matrix4() )
 	},
 
 	vertexShader: [
@@ -129,9 +129,9 @@ THREE.Mirror = function ( renderer, camera, options ) {
 
 	} );
 
-	this.material.uniforms.mirrorSampler.value = this.renderTarget.texture;
-	this.material.uniforms.mirrorColor.value = mirrorColor;
-	this.material.uniforms.textureMatrix.value = this.textureMatrix;
+	this.material.uniforms.mirrorSampler = new THREE.Uniform( this.renderTarget.texture );
+	this.material.uniforms.mirrorColor = new THREE.Uniform( mirrorColor );
+	this.material.uniforms.textureMatrix = new THREE.Uniform( this.textureMatrix );
 
 	if ( ! THREE.Math.isPowerOfTwo( width ) || ! THREE.Math.isPowerOfTwo( height ) ) {
 

examples/js/loaders/VRMLLoader.js

@@ -416,8 +416,8 @@ THREE.VRMLLoader.prototype = {
 
 							break;
 							
-+						case 'location':
-+						case 'direction':
+						case 'location':
+						case 'direction':
 						case 'translation':
 						case 'scale':
 						case 'size':

examples/js/postprocessing/FilmPass.js

@@ -21,10 +21,13 @@ THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount,
 
 	} );
 
-	if ( grayscale !== undefined )	this.uniforms.grayscale.value = grayscale;
-	if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
-	if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
-	if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
+	this.uniforms[ "tDiffuse" ] = new THREE.Uniform();
+	this.uniforms[ "time" ] = new THREE.Uniform( 0 );
+
+	if ( grayscale !== undefined )	this.uniforms.grayscale = new THREE.Uniform( grayscale );
+	if ( noiseIntensity !== undefined ) this.uniforms.nIntensity = new THREE.Uniform( noiseIntensity );
+	if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity = new THREE.Uniform( scanlinesIntensity );
+	if ( scanlinesCount !== undefined ) this.uniforms.sCount = new THREE.Uniform( scanlinesCount );
 
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene  = new THREE.Scene();

examples/js/postprocessing/ManualMSAARenderPass.js

@@ -87,7 +87,7 @@ THREE.ManualMSAARenderPass.prototype = Object.assign( Object.create( THREE.Pass.
 
 		var baseSampleWeight = 1.0 / jitterOffsets.length;
 		var roundingRange = 1 / 32;
-		this.copyUniforms[ "tDiffuse" ].value = this.sampleRenderTarget.texture;
+		this.copyUniforms[ "tDiffuse" ] = new THREE.Uniform( this.sampleRenderTarget.texture );
 
 		var width = readBuffer.width, height = readBuffer.height;
 
@@ -110,7 +110,7 @@ THREE.ManualMSAARenderPass.prototype = Object.assign( Object.create( THREE.Pass.
 				sampleWeight += roundingRange * uniformCenteredDistribution;
 			}
 
-			this.copyUniforms[ "opacity" ].value = sampleWeight;
+			this.copyUniforms[ "opacity" ] = new THREE.Uniform( sampleWeight );
 			renderer.setClearColor( this.clearColor, this.clearAlpha );
 			renderer.render( this.scene, this.camera, this.sampleRenderTarget, true );
 			if (i === 0) {

examples/js/postprocessing/OutlinePass.js

@@ -59,11 +59,11 @@ THREE.OutlinePass = function ( resolution, scene, camera, selectedObjects ) {
 	var MAX_EDGE_GLOW = 4;
 
 	this.separableBlurMaterial1 = this.getSeperableBlurMaterial(MAX_EDGE_THICKNESS);
-	this.separableBlurMaterial1.uniforms[ "texSize" ].value = new THREE.Vector2(resx, resy);
-	this.separableBlurMaterial1.uniforms[ "kernelRadius" ].value = 1;
+	this.separableBlurMaterial1.uniforms[ "texSize" ] = new THREE.Uniform( new THREE.Vector2(resx, resy) );
+	this.separableBlurMaterial1.uniforms[ "kernelRadius" ] = new THREE.Uniform( 1 );
 	this.separableBlurMaterial2 = this.getSeperableBlurMaterial(MAX_EDGE_GLOW);
-	this.separableBlurMaterial2.uniforms[ "texSize" ].value = new THREE.Vector2(Math.round(resx/2), Math.round(resy/2));
-	this.separableBlurMaterial2.uniforms[ "kernelRadius" ].value = MAX_EDGE_GLOW;
+	this.separableBlurMaterial2.uniforms[ "texSize" ] = new THREE.Uniform(new THREE.Vector2(Math.round(resx/2), Math.round(resy/2) ) );
+	this.separableBlurMaterial2.uniforms[ "kernelRadius" ] = new THREE.Uniform( MAX_EDGE_GLOW) ;
 
 	// Overlay material
 	this.overlayMaterial = this.getOverlayMaterial();
@@ -127,15 +127,15 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 		this.renderTargetMaskDownSampleBuffer.setSize(resx, resy );
 		this.renderTargetBlurBuffer1.setSize(resx, resy );
 		this.renderTargetEdgeBuffer1.setSize(resx, resy );
-		this.separableBlurMaterial1.uniforms[ "texSize" ].value = new THREE.Vector2(resx, resy);
+		this.separableBlurMaterial1.uniforms[ "texSize" ] = new THREE.Uniform( new THREE.Vector2(resx, resy) );
 
-	  resx = Math.round(resx/2);
-	  resy = Math.round(resy/2);
+		resx = Math.round(resx/2);
+		resy = Math.round(resy/2);
 
 		this.renderTargetBlurBuffer2.setSize(resx, resy );
 		this.renderTargetEdgeBuffer2.setSize(resx, resy );
 
-		this.separableBlurMaterial2.uniforms[ "texSize" ].value = new THREE.Vector2(resx, resy);
+		this.separableBlurMaterial2.uniforms[ "texSize" ] = new THREE.Uniform( new THREE.Vector2(resx, resy) );
 	},
 
 	changeVisibilityOfSelectedObjects: function( bVisible ) {

examples/webgl_postprocessing_advanced.html

@@ -188,8 +188,8 @@
 
 				var effectColorify1 = new THREE.ShaderPass( THREE.ColorifyShader );
 				var effectColorify2 = new THREE.ShaderPass( THREE.ColorifyShader );
-				effectColorify1.uniforms[ 'color' ].value.setRGB( 1, 0.8, 0.8 );
-				effectColorify2.uniforms[ 'color' ].value.setRGB( 1, 0.75, 0.5 );
+				effectColorify1.uniforms[ 'color' ] = new THREE.Uniform( new THREE.Color( 1, 0.8, 0.8 ) );
+				effectColorify2.uniforms[ 'color' ] = new THREE.Uniform( new THREE.Color( 1, 0.75, 0.5 ) );
 
 				var clearMask = new THREE.ClearMaskPass();
 				var renderMask = new THREE.MaskPass( sceneModel, cameraPerspective );

src/extras/helpers/HemisphereLightHelper.js

@@ -1,17 +1,19 @@
 import { Vector3 } from '../../math/Vector3';
+import { Color } from '../../math/Color';
 import { Object3D } from '../../core/Object3D';
 import { Mesh } from '../../objects/Mesh';
-import { FaceColors } from '../../constants';
+import { VertexColors } from '../../constants';
 import { MeshBasicMaterial } from '../../materials/MeshBasicMaterial';
-import { SphereGeometry } from '../../geometries/SphereGeometry';
-import { Color } from '../../math/Color';
+import { OctahedronBufferGeometry } from '../../geometries/OctahedronBufferGeometry';
+import { BufferAttribute } from '../../core/BufferAttribute';
 
 /**
  * @author alteredq / http://alteredqualia.com/
  * @author mrdoob / http://mrdoob.com/
+ * @author Mugen87 / https://github.com/Mugen87
  */
 
-function HemisphereLightHelper( light, sphereSize ) {
+function HemisphereLightHelper( light, size ) {
 
 	Object3D.call( this );
 
@@ -21,21 +23,17 @@ function HemisphereLightHelper( light, sphereSize ) {
 	this.matrix = light.matrixWorld;
 	this.matrixAutoUpdate = false;
 
-	this.colors = [ new Color(), new Color() ];
-
-	var geometry = new SphereGeometry( sphereSize, 4, 2 );
-	geometry.rotateX( - Math.PI / 2 );
+	var geometry = new OctahedronBufferGeometry( size );
+	geometry.rotateY( Math.PI * 0.5 );
 
-	for ( var i = 0, il = 8; i < il; i ++ ) {
+	var material = new MeshBasicMaterial( { vertexColors: VertexColors, wireframe: true } );
 
-		geometry.faces[ i ].color = this.colors[ i < 4 ? 0 : 1 ];
+	var position = geometry.getAttribute( 'position' );
+	var colors = new Float32Array( position.count * 3 );
 
-	}
+	geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
 
-	var material = new MeshBasicMaterial( { vertexColors: FaceColors, wireframe: true } );
-
-	this.lightSphere = new Mesh( geometry, material );
-	this.add( this.lightSphere );
+	this.add( new Mesh( geometry, material ) );
 
 	this.update();
 
@@ -46,8 +44,8 @@ HemisphereLightHelper.prototype.constructor = HemisphereLightHelper;
 
 HemisphereLightHelper.prototype.dispose = function () {
 
-	this.lightSphere.geometry.dispose();
-	this.lightSphere.material.dispose();
+	this.children[ 0 ].geometry.dispose();
+	this.children[ 0 ].material.dispose();
 
 };
 
@@ -55,13 +53,29 @@ HemisphereLightHelper.prototype.update = function () {
 
 	var vector = new Vector3();
 
+	var color1 = new Color();
+	var color2 = new Color();
+
 	return function update() {
 
-		this.colors[ 0 ].copy( this.light.color ).multiplyScalar( this.light.intensity );
-		this.colors[ 1 ].copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
+		var mesh = this.children[ 0 ];
+
+		var colors = mesh.geometry.getAttribute( 'color' );
+
+		color1.copy( this.light.color ).multiplyScalar( this.light.intensity );
+		color2.copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
+
+		for ( var i = 0, l = colors.count; i < l; i ++ ) {
+
+			var color = ( i < ( l / 2 ) ) ? color1 : color2;
+
+			colors.setXYZ( i, color.r, color.g, color.b );
+
+		}
+
+		mesh.lookAt( vector.setFromMatrixPosition( this.light.matrixWorld ).negate() );
 
-		this.lightSphere.lookAt( vector.setFromMatrixPosition( this.light.matrixWorld ).negate() );
-		this.lightSphere.geometry.colorsNeedUpdate = true;
+		colors.needsUpdate = true;
 
 	};
 

src/extras/helpers/SkeletonHelper.js

@@ -96,7 +96,7 @@ SkeletonHelper.prototype.update = function () {
 
 		matrixWorldInv.getInverse( this.root.matrixWorld );
 
-		for ( var i = 0, j = 0; i < this.bones.length; i ++, j += 2 ) {
+		for ( var i = 0, j = 0; i < this.bones.length; i ++ ) {
 
 			var bone = this.bones[ i ];
 
@@ -110,6 +110,8 @@ SkeletonHelper.prototype.update = function () {
 				vector.setFromMatrixPosition( boneMatrix );
 				position.setXYZ( j + 1, vector.x, vector.y, vector.z );
 
+				j += 2;
+
 			}
 
 		}