Updated examples builds.

examples/js/controls/TrackballControls.js

@@ -685,7 +685,7 @@
 					case 2:
 						_state = STATE.TOUCH_ZOOM_PAN;
 
-						_moveCurr.copy( getMouseOnCircle( event.pageX - _movePrev.pageX, event.pageY - _movePrev.pageY ) );
+						_moveCurr.copy( getMouseOnCircle( event.pageX - _movePrev.x, event.pageY - _movePrev.y ) );
 
 						_movePrev.copy( _moveCurr );
 

examples/js/loaders/GLTFLoader.js

@@ -518,7 +518,7 @@
 
 				if ( metallicRoughness.baseColorTexture !== undefined ) {
 
-					pending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture ) );
+					pending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture, THREE.sRGBEncoding ) );
 
 				}
 
@@ -666,7 +666,7 @@
 
 			if ( extension.sheenColorTexture !== undefined ) {
 
-				pending.push( parser.assignTexture( materialParams, 'sheenColorMap', extension.sheenColorTexture ) );
+				pending.push( parser.assignTexture( materialParams, 'sheenColorMap', extension.sheenColorTexture, THREE.sRGBEncoding ) );
 
 			}
 
@@ -886,11 +886,7 @@
 
 			if ( extension.specularColorTexture !== undefined ) {
 
-				pending.push( parser.assignTexture( materialParams, 'specularColorMap', extension.specularColorTexture ).then( function ( texture ) {
-
-					texture.encoding = THREE.sRGBEncoding;
-
-				} ) );
+				pending.push( parser.assignTexture( materialParams, 'specularColorMap', extension.specularColorTexture, THREE.sRGBEncoding ) );
 
 			}
 
@@ -1488,7 +1484,7 @@
 
 			if ( pbrSpecularGlossiness.diffuseTexture !== undefined ) {
 
-				pending.push( parser.assignTexture( materialParams, 'map', pbrSpecularGlossiness.diffuseTexture ) );
+				pending.push( parser.assignTexture( materialParams, 'map', pbrSpecularGlossiness.diffuseTexture, THREE.sRGBEncoding ) );
 
 			}
 
@@ -1506,7 +1502,7 @@
 
 				const specGlossMapDef = pbrSpecularGlossiness.specularGlossinessTexture;
 				pending.push( parser.assignTexture( materialParams, 'glossinessMap', specGlossMapDef ) );
-				pending.push( parser.assignTexture( materialParams, 'specularMap', specGlossMapDef ) );
+				pending.push( parser.assignTexture( materialParams, 'specularMap', specGlossMapDef, THREE.sRGBEncoding ) );
 
 			}
 
@@ -2623,15 +2619,7 @@
 
 			if ( this.sourceCache[ sourceIndex ] !== undefined ) {
 
-				return this.sourceCache[ sourceIndex ].then( function ( texture ) {
-
-					return texture.clone();
-
-				} ).catch( function ( error ) {
-
-					throw error;
-
-				} );
+				return this.sourceCache[ sourceIndex ].then( texture => texture.clone() );
 
 			}
 
@@ -2713,7 +2701,7 @@
    */
 
 
-		assignTexture( materialParams, mapName, mapDef ) {
+		assignTexture( materialParams, mapName, mapDef, encoding ) {
 
 			const parser = this;
 			return this.getDependency( 'texture', mapDef.index ).then( function ( texture ) {
@@ -2740,6 +2728,12 @@
 
 				}
 
+				if ( encoding !== undefined ) {
+
+					texture.encoding = encoding;
+
+				}
+
 				materialParams[ mapName ] = texture;
 				return texture;
 
@@ -2898,7 +2892,7 @@
 
 				if ( metallicRoughness.baseColorTexture !== undefined ) {
 
-					pending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture ) );
+					pending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture, THREE.sRGBEncoding ) );
 
 				}
 
@@ -2985,7 +2979,7 @@
 
 			if ( materialDef.emissiveTexture !== undefined && materialType !== THREE.MeshBasicMaterial ) {
 
-				pending.push( parser.assignTexture( materialParams, 'emissiveMap', materialDef.emissiveTexture ) );
+				pending.push( parser.assignTexture( materialParams, 'emissiveMap', materialDef.emissiveTexture, THREE.sRGBEncoding ) );
 
 			}
 
@@ -3003,10 +2997,7 @@
 
 				}
 
-				if ( materialDef.name ) material.name = materialDef.name; // baseColorTexture, emissiveTexture, and specularGlossinessTexture use sRGB encoding.
-
-				if ( material.map ) material.map.encoding = THREE.sRGBEncoding;
-				if ( material.emissiveMap ) material.emissiveMap.encoding = THREE.sRGBEncoding;
+				if ( materialDef.name ) material.name = materialDef.name;
 				assignExtrasToUserData( material, materialDef );
 				parser.associations.set( material, {
 					materials: materialIndex

examples/js/postprocessing/AdaptiveToneMappingPass.js

@@ -185,21 +185,17 @@
 
 			}
 
-			const pars = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			}; // was RGB format. changed to RGBA format. see discussion in #8415 / #8450
-
-			this.luminanceRT = new THREE.WebGLRenderTarget( this.resolution, this.resolution, pars );
+			this.luminanceRT = new THREE.WebGLRenderTarget( this.resolution, this.resolution );
 			this.luminanceRT.texture.name = 'AdaptiveToneMappingPass.l';
 			this.luminanceRT.texture.generateMipmaps = false;
-			this.previousLuminanceRT = new THREE.WebGLRenderTarget( this.resolution, this.resolution, pars );
+			this.previousLuminanceRT = new THREE.WebGLRenderTarget( this.resolution, this.resolution );
 			this.previousLuminanceRT.texture.name = 'AdaptiveToneMappingPass.pl';
 			this.previousLuminanceRT.texture.generateMipmaps = false; // We only need mipmapping for the current luminosity because we want a down-sampled version to sample in our adaptive shader
 
-			pars.minFilter = THREE.LinearMipmapLinearFilter;
-			pars.generateMipmaps = true;
+			const pars = {
+				minFilter: THREE.LinearMipmapLinearFilter,
+				generateMipmaps: true
+			};
 			this.currentLuminanceRT = new THREE.WebGLRenderTarget( this.resolution, this.resolution, pars );
 			this.currentLuminanceRT.texture.name = 'AdaptiveToneMappingPass.cl';
 

examples/js/postprocessing/AfterimagePass.js

@@ -10,14 +10,10 @@
 			this.uniforms = THREE.UniformsUtils.clone( this.shader.uniforms );
 			this.uniforms[ 'damp' ].value = damp;
 			this.textureComp = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} );
 			this.textureOld = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} );
 			this.shaderMaterial = new THREE.ShaderMaterial( {
 				uniforms: this.uniforms,

examples/js/postprocessing/BloomPass.js

@@ -6,24 +6,17 @@
 
 			super(); // render targets
 
-			const pars = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			};
-			this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution, pars );
+			this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution );
 			this.renderTargetX.texture.name = 'BloomPass.x';
-			this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution, pars );
-			this.renderTargetY.texture.name = 'BloomPass.y'; // copy material
-
-			if ( THREE.CopyShader === undefined ) console.error( 'THREE.BloomPass relies on THREE.CopyShader' );
-			const copyShader = THREE.CopyShader;
-			this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
-			this.copyUniforms[ 'opacity' ].value = strength;
-			this.materialCopy = new THREE.ShaderMaterial( {
-				uniforms: this.copyUniforms,
-				vertexShader: copyShader.vertexShader,
-				fragmentShader: copyShader.fragmentShader,
+			this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution );
+			this.renderTargetY.texture.name = 'BloomPass.y'; // combine material
+
+			this.combineUniforms = THREE.UniformsUtils.clone( CombineShader.uniforms );
+			this.combineUniforms[ 'strength' ].value = strength;
+			this.materialCombine = new THREE.ShaderMaterial( {
+				uniforms: this.combineUniforms,
+				vertexShader: CombineShader.vertexShader,
+				fragmentShader: CombineShader.fragmentShader,
 				blending: THREE.AdditiveBlending,
 				transparent: true
 			} ); // convolution material
@@ -64,8 +57,8 @@
 			renderer.clear();
 			this.fsQuad.render( renderer ); // Render original scene with superimposed blur to texture
 
-			this.fsQuad.material = this.materialCopy;
-			this.copyUniforms[ 'tDiffuse' ].value = this.renderTargetY.texture;
+			this.fsQuad.material = this.materialCombine;
+			this.combineUniforms[ 'tDiffuse' ].value = this.renderTargetY.texture;
 			if ( maskActive ) renderer.state.buffers.stencil.setTest( true );
 			renderer.setRenderTarget( readBuffer );
 			if ( this.clear ) renderer.clear();
@@ -75,6 +68,44 @@
 
 	}
 
+	const CombineShader = {
+		uniforms: {
+			'tDiffuse': {
+				value: null
+			},
+			'strength': {
+				value: 1.0
+			}
+		},
+		vertexShader:
+  /* glsl */
+  `
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader:
+  /* glsl */
+  `
+
+		uniform float strength;
+
+		uniform sampler2D tDiffuse;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vec4 texel = texture2D( tDiffuse, vUv );
+			gl_FragColor = strength * texel;
+
+		}`
+	};
 	BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 );
 	BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 );
 

examples/js/postprocessing/EffectComposer.js

@@ -8,16 +8,11 @@
 
 			if ( renderTarget === undefined ) {
 
-				const parameters = {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBAFormat
-				};
 				const size = renderer.getSize( new THREE.Vector2() );
 				this._pixelRatio = renderer.getPixelRatio();
 				this._width = size.width;
 				this._height = size.height;
-				renderTarget = new THREE.WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, parameters );
+				renderTarget = new THREE.WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio );
 				renderTarget.texture.name = 'EffectComposer.rt1';
 
 			} else {

examples/js/postprocessing/OutlinePass.js

@@ -18,14 +18,9 @@
 			this.pulsePeriod = 0;
 			this._visibilityCache = new Map();
 			this.resolution = resolution !== undefined ? new THREE.Vector2( resolution.x, resolution.y ) : new THREE.Vector2( 256, 256 );
-			const pars = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			};
 			const resx = Math.round( this.resolution.x / this.downSampleRatio );
 			const resy = Math.round( this.resolution.y / this.downSampleRatio );
-			this.renderTargetMaskBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
+			this.renderTargetMaskBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y );
 			this.renderTargetMaskBuffer.texture.name = 'OutlinePass.mask';
 			this.renderTargetMaskBuffer.texture.generateMipmaps = false;
 			this.depthMaterial = new THREE.MeshDepthMaterial();
@@ -35,23 +30,23 @@
 			this.prepareMaskMaterial = this.getPrepareMaskMaterial();
 			this.prepareMaskMaterial.side = THREE.DoubleSide;
 			this.prepareMaskMaterial.fragmentShader = replaceDepthToViewZ( this.prepareMaskMaterial.fragmentShader, this.renderCamera );
-			this.renderTargetDepthBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
+			this.renderTargetDepthBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y );
 			this.renderTargetDepthBuffer.texture.name = 'OutlinePass.depth';
 			this.renderTargetDepthBuffer.texture.generateMipmaps = false;
-			this.renderTargetMaskDownSampleBuffer = new THREE.WebGLRenderTarget( resx, resy, pars );
+			this.renderTargetMaskDownSampleBuffer = new THREE.WebGLRenderTarget( resx, resy );
 			this.renderTargetMaskDownSampleBuffer.texture.name = 'OutlinePass.depthDownSample';
 			this.renderTargetMaskDownSampleBuffer.texture.generateMipmaps = false;
-			this.renderTargetBlurBuffer1 = new THREE.WebGLRenderTarget( resx, resy, pars );
+			this.renderTargetBlurBuffer1 = new THREE.WebGLRenderTarget( resx, resy );
 			this.renderTargetBlurBuffer1.texture.name = 'OutlinePass.blur1';
 			this.renderTargetBlurBuffer1.texture.generateMipmaps = false;
-			this.renderTargetBlurBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
+			this.renderTargetBlurBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ) );
 			this.renderTargetBlurBuffer2.texture.name = 'OutlinePass.blur2';
 			this.renderTargetBlurBuffer2.texture.generateMipmaps = false;
 			this.edgeDetectionMaterial = this.getEdgeDetectionMaterial();
-			this.renderTargetEdgeBuffer1 = new THREE.WebGLRenderTarget( resx, resy, pars );
+			this.renderTargetEdgeBuffer1 = new THREE.WebGLRenderTarget( resx, resy );
 			this.renderTargetEdgeBuffer1.texture.name = 'OutlinePass.edge1';
 			this.renderTargetEdgeBuffer1.texture.generateMipmaps = false;
-			this.renderTargetEdgeBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
+			this.renderTargetEdgeBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ) );
 			this.renderTargetEdgeBuffer2.texture.name = 'OutlinePass.edge2';
 			this.renderTargetEdgeBuffer2.texture.generateMipmaps = false;
 			const MAX_EDGE_THICKNESS = 4;

examples/js/postprocessing/SAOPass.js

@@ -31,17 +31,12 @@
 				saoBlurDepthCutoff: 0.01
 			};
 			this.resolution = new THREE.Vector2( resolution.x, resolution.y );
-			this.saoRenderTarget = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			} );
+			this.saoRenderTarget = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y );
 			this.blurIntermediateRenderTarget = this.saoRenderTarget.clone();
 			this.beautyRenderTarget = this.saoRenderTarget.clone();
 			this.normalRenderTarget = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, {
 				minFilter: THREE.NearestFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} );
 			this.depthRenderTarget = this.normalRenderTarget.clone();
 			let depthTexture;

examples/js/postprocessing/SSAARenderPass.js

@@ -31,7 +31,6 @@
 				uniforms: this.copyUniforms,
 				vertexShader: copyShader.vertexShader,
 				fragmentShader: copyShader.fragmentShader,
-				premultipliedAlpha: true,
 				transparent: true,
 				blending: THREE.AdditiveBlending,
 				depthTest: false,
@@ -62,11 +61,7 @@
 
 			if ( ! this.sampleRenderTarget ) {
 
-				this.sampleRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBAFormat
-				} );
+				this.sampleRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height );
 				this.sampleRenderTarget.texture.name = 'SSAARenderPass.sample';
 
 			}

examples/js/postprocessing/SSRPass.js

@@ -146,34 +146,29 @@
 			this.beautyRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
 				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat,
 				depthTexture: depthTexture,
 				depthBuffer: true
 			} ); //for bouncing
 
 			this.prevRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} ); // normal render target
 
 			this.normalRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
 				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat,
 				type: THREE.HalfFloatType
 			} ); // metalness render target
 
 			this.metalnessRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} ); // ssr render target
 
 			this.ssrRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
-				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat
+				magFilter: THREE.NearestFilter
 			} );
 			this.blurRenderTarget = this.ssrRenderTarget.clone();
 			this.blurRenderTarget2 = this.ssrRenderTarget.clone(); // this.blurRenderTarget3 = this.ssrRenderTarget.clone();

examples/js/postprocessing/UnrealBloomPass.js

@@ -22,27 +22,22 @@
 
 			this.clearColor = new THREE.Color( 0, 0, 0 ); // render targets
 
-			const pars = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			};
 			this.renderTargetsHorizontal = [];
 			this.renderTargetsVertical = [];
 			this.nMips = 5;
 			let resx = Math.round( this.resolution.x / 2 );
 			let resy = Math.round( this.resolution.y / 2 );
-			this.renderTargetBright = new THREE.WebGLRenderTarget( resx, resy, pars );
+			this.renderTargetBright = new THREE.WebGLRenderTarget( resx, resy );
 			this.renderTargetBright.texture.name = 'UnrealBloomPass.bright';
 			this.renderTargetBright.texture.generateMipmaps = false;
 
 			for ( let i = 0; i < this.nMips; i ++ ) {
 
-				const renderTargetHorizonal = new THREE.WebGLRenderTarget( resx, resy, pars );
+				const renderTargetHorizonal = new THREE.WebGLRenderTarget( resx, resy );
 				renderTargetHorizonal.texture.name = 'UnrealBloomPass.h' + i;
 				renderTargetHorizonal.texture.generateMipmaps = false;
 				this.renderTargetsHorizontal.push( renderTargetHorizonal );
-				const renderTargetVertical = new THREE.WebGLRenderTarget( resx, resy, pars );
+				const renderTargetVertical = new THREE.WebGLRenderTarget( resx, resy );
 				renderTargetVertical.texture.name = 'UnrealBloomPass.v' + i;
 				renderTargetVertical.texture.generateMipmaps = false;
 				this.renderTargetsVertical.push( renderTargetVertical );

examples/js/shaders/BlendShader.js

@@ -46,7 +46,8 @@
 
 			vec4 texel1 = texture2D( tDiffuse1, vUv );
 			vec4 texel2 = texture2D( tDiffuse2, vUv );
-			gl_FragColor = opacity * mix( texel1, texel2, mixRatio );
+			gl_FragColor = mix( texel1, texel2, mixRatio );
+			gl_FragColor.a *= opacity;
 
 		}`
 	};

examples/js/shaders/CopyShader.js

@@ -36,8 +36,9 @@
 
 		void main() {
 
-			vec4 texel = texture2D( tDiffuse, vUv );
-			gl_FragColor = opacity * texel;
+			gl_FragColor = texture2D( tDiffuse, vUv );
+			gl_FragColor.a *= opacity;
+
 
 		}`
 	};