Updated examples builds.

examples/js/cameras/CinematicCamera.js

@@ -91,13 +91,8 @@
 				this.postprocessing.scene = new THREE.Scene();
 				this.postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
 				this.postprocessing.scene.add( this.postprocessing.camera );
-				const pars = {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat
-				};
-				this.postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
-				this.postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+				this.postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
+				this.postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
 				const bokeh_shader = THREE.BokehShader;
 				this.postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
 				this.postprocessing.bokeh_uniforms[ 'tColor' ].value = this.postprocessing.rtTextureColor.texture;

examples/js/loaders/LUT3dlLoader.js

@@ -54,7 +54,7 @@
 
 			}
 
-			const dataArray = new Array( size * size * size * 3 );
+			const dataArray = new Array( size * size * size * 4 );
 			let index = 0;
 			let maxOutputValue = 0.0;
 
@@ -71,22 +71,29 @@
 				const rLayer = Math.floor( index / ( size * size ) ) % size; // b grows first, then g, then r
 
 				const pixelIndex = bLayer * size * size + gLayer * size + rLayer;
-				dataArray[ 3 * pixelIndex + 0 ] = r;
-				dataArray[ 3 * pixelIndex + 1 ] = g;
-				dataArray[ 3 * pixelIndex + 2 ] = b;
+				dataArray[ 4 * pixelIndex + 0 ] = r;
+				dataArray[ 4 * pixelIndex + 1 ] = g;
+				dataArray[ 4 * pixelIndex + 2 ] = b;
+				dataArray[ 4 * pixelIndex + 3 ] = 1.0;
 				index += 1;
 
-			} // Find the apparent bit depth of the stored RGB values and scale the
+			} // Find the apparent bit depth of the stored RGB values and map the
 			// values to [ 0, 255 ].
 
 
 			const bits = Math.ceil( Math.log2( maxOutputValue ) );
 			const maxBitValue = Math.pow( 2.0, bits );
 
-			for ( let i = 0, l = dataArray.length; i < l; i ++ ) {
+			for ( let i = 0, l = dataArray.length; i < l; i += 4 ) {
 
-				const val = dataArray[ i ];
-				dataArray[ i ] = 255 * val / maxBitValue;
+				const r = dataArray[ i + 0 ];
+				const g = dataArray[ i + 1 ];
+				const b = dataArray[ i + 2 ];
+				dataArray[ i + 0 ] = 255 * r / maxBitValue; // r
+
+				dataArray[ i + 1 ] = 255 * g / maxBitValue; // g
+
+				dataArray[ i + 2 ] = 255 * b / maxBitValue; // b
 
 			}
 
@@ -95,7 +102,7 @@
 			texture.image.data = data;
 			texture.image.width = size;
 			texture.image.height = size * size;
-			texture.format = THREE.RGBFormat;
+			texture.format = THREE.RGBAFormat;
 			texture.type = THREE.UnsignedByteType;
 			texture.magFilter = THREE.LinearFilter;
 			texture.minFilter = THREE.LinearFilter;
@@ -108,7 +115,7 @@
 			texture3D.image.width = size;
 			texture3D.image.height = size;
 			texture3D.image.depth = size;
-			texture3D.format = THREE.RGBFormat;
+			texture3D.format = THREE.RGBAFormat;
 			texture3D.type = THREE.UnsignedByteType;
 			texture3D.magFilter = THREE.LinearFilter;
 			texture3D.minFilter = THREE.LinearFilter;

examples/js/modifiers/CurveModifier.js

@@ -1,7 +1,7 @@
 ( function () {
 
 	// Original src: https://github.com/zz85/threejs-path-flow
-	const BITS = 3;
+	const CHANNELS = 4;
 	const TEXTURE_WIDTH = 1024;
 	const TEXTURE_HEIGHT = 4;
 	/**
@@ -12,8 +12,8 @@
 
 	function initSplineTexture( numberOfCurves = 1 ) {
 
-		const dataArray = new Float32Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * BITS );
-		const dataTexture = new THREE.DataTexture( dataArray, TEXTURE_WIDTH, TEXTURE_HEIGHT * numberOfCurves, THREE.RGBFormat, THREE.FloatType );
+		const dataArray = new Float32Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS );
+		const dataTexture = new THREE.DataTexture( dataArray, TEXTURE_WIDTH, TEXTURE_HEIGHT * numberOfCurves, THREE.RGBAFormat, THREE.FloatType );
 		dataTexture.wrapS = THREE.RepeatWrapping;
 		dataTexture.wrapY = THREE.RepeatWrapping;
 		dataTexture.magFilter = THREE.NearestFilter;
@@ -62,11 +62,12 @@
 		const {
 			data
 		} = image;
-		const i = BITS * TEXTURE_WIDTH * o; // Row Offset
+		const i = CHANNELS * TEXTURE_WIDTH * o; // Row Offset
 
-		data[ index * BITS + i + 0 ] = x;
-		data[ index * BITS + i + 1 ] = y;
-		data[ index * BITS + i + 2 ] = z;
+		data[ index * CHANNELS + i + 0 ] = x;
+		data[ index * CHANNELS + i + 1 ] = y;
+		data[ index * CHANNELS + i + 2 ] = z;
+		data[ index * CHANNELS + i + 3 ] = 1;
 
 	}
 	/**

examples/js/objects/Reflector.js

@@ -25,19 +25,7 @@
 			const q = new THREE.Vector4();
 			const textureMatrix = new THREE.Matrix4();
 			const virtualCamera = new THREE.PerspectiveCamera();
-			const parameters = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBFormat
-			};
-			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
-
-			if ( ! THREE.MathUtils.isPowerOfTwo( textureWidth ) || ! THREE.MathUtils.isPowerOfTwo( textureHeight ) ) {
-
-				renderTarget.texture.generateMipmaps = false;
-
-			}
-
+			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight );
 			const material = new THREE.ShaderMaterial( {
 				uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
 				fragmentShader: shader.fragmentShader,

examples/js/objects/ReflectorForSSRPass.js

@@ -79,19 +79,9 @@
 			}
 
 			const parameters = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBFormat,
 				depthTexture: useDepthTexture ? depthTexture : null
 			};
 			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
-
-			if ( ! THREE.MathUtils.isPowerOfTwo( textureWidth ) || ! THREE.MathUtils.isPowerOfTwo( textureHeight ) ) {
-
-				renderTarget.texture.generateMipmaps = false;
-
-			}
-
 			const material = new THREE.ShaderMaterial( {
 				transparent: useDepthTexture,
 				defines: Object.assign( {}, ReflectorForSSRPass.ReflectorShader.defines, {

examples/js/objects/Refractor.js

@@ -20,19 +20,7 @@
 			const refractorPlane = new THREE.Plane();
 			const textureMatrix = new THREE.Matrix4(); // render target
 
-			const parameters = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBFormat
-			};
-			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
-
-			if ( ! THREE.MathUtils.isPowerOfTwo( textureWidth ) || ! THREE.MathUtils.isPowerOfTwo( textureHeight ) ) {
-
-				renderTarget.texture.generateMipmaps = false;
-
-			} // material
-
+			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight ); // material
 
 			this.material = new THREE.ShaderMaterial( {
 				uniforms: THREE.UniformsUtils.clone( shader.uniforms ),

examples/js/objects/Water.js

@@ -39,19 +39,7 @@
 			const q = new THREE.Vector4();
 			const textureMatrix = new THREE.Matrix4();
 			const mirrorCamera = new THREE.PerspectiveCamera();
-			const parameters = {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBFormat
-			};
-			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
-
-			if ( ! THREE.MathUtils.isPowerOfTwo( textureWidth ) || ! THREE.MathUtils.isPowerOfTwo( textureHeight ) ) {
-
-				renderTarget.texture.generateMipmaps = false;
-
-			}
-
+			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight );
 			const mirrorShader = {
 				uniforms: THREE.UniformsUtils.merge( [ THREE.UniformsLib[ 'fog' ], THREE.UniformsLib[ 'lights' ], {
 					'normalSampler': {

examples/js/postprocessing/GlitchPass.js

@@ -25,6 +25,7 @@
 			/*, deltaTime, maskActive */
 		) {
 
+			if ( renderer.capabilities.isWebGL2 === false ) this.uniforms[ 'tDisp' ].value.format = THREE.LuminanceFormat;
 			this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
 			this.uniforms[ 'seed' ].value = Math.random(); //default seeding
 
@@ -81,19 +82,17 @@
 
 		generateHeightmap( dt_size ) {
 
-			const data_arr = new Float32Array( dt_size * dt_size * 3 );
+			const data_arr = new Float32Array( dt_size * dt_size );
 			const length = dt_size * dt_size;
 
 			for ( let i = 0; i < length; i ++ ) {
 
 				const val = THREE.MathUtils.randFloat( 0, 1 );
-				data_arr[ i * 3 + 0 ] = val;
-				data_arr[ i * 3 + 1 ] = val;
-				data_arr[ i * 3 + 2 ] = val;
+				data_arr[ i ] = val;
 
 			}
 
-			const texture = new THREE.DataTexture( data_arr, dt_size, dt_size, THREE.RGBFormat, THREE.FloatType );
+			const texture = new THREE.DataTexture( data_arr, dt_size, dt_size, THREE.RedFormat, THREE.FloatType );
 			texture.needsUpdate = true;
 			return texture;
 

examples/js/postprocessing/SMAAPass.js

@@ -7,17 +7,11 @@
 			super(); // render targets
 
 			this.edgesRT = new THREE.WebGLRenderTarget( width, height, {
-				depthBuffer: false,
-				generateMipmaps: false,
-				minFilter: THREE.LinearFilter,
-				format: THREE.RGBFormat
+				depthBuffer: false
 			} );
 			this.edgesRT.texture.name = 'SMAAPass.edges';
 			this.weightsRT = new THREE.WebGLRenderTarget( width, height, {
-				depthBuffer: false,
-				generateMipmaps: false,
-				minFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
+				depthBuffer: false
 			} );
 			this.weightsRT.texture.name = 'SMAAPass.weights'; // textures
 
@@ -35,7 +29,6 @@
 			this.areaTexture = new THREE.Texture();
 			this.areaTexture.name = 'SMAAPass.area';
 			this.areaTexture.image = areaTextureImage;
-			this.areaTexture.format = THREE.RGBFormat;
 			this.areaTexture.minFilter = THREE.LinearFilter;
 			this.areaTexture.generateMipmaps = false;
 			this.areaTexture.flipY = false;

examples/js/postprocessing/SSAOPass.js

@@ -23,25 +23,17 @@
 			this.generateRandomKernelRotations(); // beauty render target
 
 			const depthTexture = new THREE.DepthTexture();
-			depthTexture.type = THREE.UnsignedShortType;
-			this.beautyRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			} ); // normal render target with depth buffer
+			depthTexture.format = THREE.DepthStencilFormat;
+			depthTexture.type = THREE.UnsignedInt248Type;
+			this.beautyRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height ); // normal render target with depth buffer
 
 			this.normalRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
 				minFilter: THREE.NearestFilter,
 				magFilter: THREE.NearestFilter,
-				format: THREE.RGBAFormat,
 				depthTexture: depthTexture
 			} ); // ssao render target
 
-			this.ssaoRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
-				minFilter: THREE.LinearFilter,
-				magFilter: THREE.LinearFilter,
-				format: THREE.RGBAFormat
-			} );
+			this.ssaoRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height );
 			this.blurRenderTarget = this.ssaoRenderTarget.clone(); // ssao material
 
 			if ( THREE.SSAOShader === undefined ) {
@@ -131,7 +123,8 @@
 			/*, readBuffer, deltaTime, maskActive */
 		) {
 
-			// render beauty
+			if ( renderer.capabilities.isWebGL2 === false ) this.noiseTexture.format = THREE.LuminanceFormat; // render beauty
+
 			renderer.setRenderTarget( this.beautyRenderTarget );
 			renderer.clear();
 			renderer.render( this.scene, this.camera ); // render normals and depth (honor only meshes, points and lines do not contribute to SSAO)
@@ -297,23 +290,18 @@
 
 			const simplex = new THREE.SimplexNoise();
 			const size = width * height;
-			const data = new Float32Array( size * 4 );
+			const data = new Float32Array( size );
 
 			for ( let i = 0; i < size; i ++ ) {
 
-				const stride = i * 4;
 				const x = Math.random() * 2 - 1;
 				const y = Math.random() * 2 - 1;
 				const z = 0;
-				const noise = simplex.noise3d( x, y, z );
-				data[ stride ] = noise;
-				data[ stride + 1 ] = noise;
-				data[ stride + 2 ] = noise;
-				data[ stride + 3 ] = 1;
+				data[ i ] = simplex.noise3d( x, y, z );
 
 			}
 
-			this.noiseTexture = new THREE.DataTexture( data, width, height, THREE.RGBAFormat, THREE.FloatType );
+			this.noiseTexture = new THREE.DataTexture( data, width, height, THREE.RedFormat, THREE.FloatType );
 			this.noiseTexture.wrapS = THREE.RepeatWrapping;
 			this.noiseTexture.wrapT = THREE.RepeatWrapping;
 			this.noiseTexture.needsUpdate = true;

examples/js/postprocessing/SavePass.js

@@ -18,11 +18,7 @@
 
 			if ( this.renderTarget === undefined ) {
 
-				this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat
-				} );
+				this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
 				this.renderTarget.texture.name = 'SavePass.rt';
 
 			}

examples/js/shaders/DigitalGlitch.js

@@ -90,7 +90,7 @@
 				float xs = floor(gl_FragCoord.x / 0.5);
 				float ys = floor(gl_FragCoord.y / 0.5);
 				//based on staffantans glitch shader for unity https://github.com/staffantan/unityglitch
-				vec4 normal = texture2D (tDisp, p*seed*seed);
+				float disp = texture2D(tDisp, p*seed*seed).r;
 				if(p.y<distortion_x+col_s && p.y>distortion_x-col_s*seed) {
 					if(seed_x>0.){
 						p.y = 1. - (p.y + distortion_y);
@@ -107,8 +107,8 @@
 						p.x = 1. - (p.x + distortion_x);
 					}
 				}
-				p.x+=normal.x*seed_x*(seed/5.);
-				p.y+=normal.y*seed_y*(seed/5.);
+				p.x+=disp*seed_x*(seed/5.);
+				p.y+=disp*seed_y*(seed/5.);
 				//base from RGB shift shader
 				vec2 offset = amount * vec2( cos(angle), sin(angle));
 				vec4 cr = texture2D(tDiffuse, p + offset);

examples/js/shaders/SSAOShader.js

@@ -155,7 +155,7 @@
 			vec3 viewNormal = getViewNormal( vUv );
 
 			vec2 noiseScale = vec2( resolution.x / 4.0, resolution.y / 4.0 );
-			vec3 random = texture2D( tNoise, vUv * noiseScale ).xyz;
+			vec3 random = vec3( texture2D( tNoise, vUv * noiseScale ).r );
 
 			// compute matrix used to reorient a kernel vector