Merge branch 'dev' of https://github.com/mrdoob/three.js into render-…

…context

examples/jsm/misc/GPUComputationRenderer.js

@@ -3,10 +3,8 @@ import {
 	ClampToEdgeWrapping,
 	DataTexture,
 	FloatType,
-	LinearSRGBColorSpace,
 	Mesh,
 	NearestFilter,
-	NoToneMapping,
 	PlaneGeometry,
 	RGBAFormat,
 	Scene,
@@ -400,23 +398,16 @@ class GPUComputationRenderer {
 
 			const currentXrEnabled = renderer.xr.enabled;
 			const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
-			const currentOutputColorSpace = renderer.outputColorSpace;
-			const currentToneMapping = renderer.toneMapping;
 
 			renderer.xr.enabled = false; // Avoid camera modification
 			renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
-			renderer.outputColorSpace = LinearSRGBColorSpace;
-			renderer.toneMapping = NoToneMapping;
-
 			mesh.material = material;
 			renderer.setRenderTarget( output );
 			renderer.render( scene, camera );
 			mesh.material = passThruShader;
 
 			renderer.xr.enabled = currentXrEnabled;
 			renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-			renderer.outputColorSpace = currentOutputColorSpace;
-			renderer.toneMapping = currentToneMapping;
 
 			renderer.setRenderTarget( currentRenderTarget );
 

examples/jsm/nodes/shadernode/ShaderNode.js

@@ -322,7 +322,7 @@ export const nodeImmutable = ( ...params ) => new ShaderNodeImmutable( ...params
 
 export const shader = ( jsFunc ) => { // @deprecated, r154
 
-	console.warn( 'TSL: shader() is deprecated. Use fn() instead.' );
+	console.warn( 'TSL: shader() is deprecated. Use tslFn() instead.' );
 
 	return new ShaderNode( jsFunc );
 

examples/jsm/objects/Reflector.js

@@ -9,9 +9,7 @@ import {
 	Vector3,
 	Vector4,
 	WebGLRenderTarget,
-	HalfFloatType,
-	NoToneMapping,
-	LinearSRGBColorSpace
+	HalfFloatType
 } from 'three';
 
 class Reflector extends Mesh {
@@ -147,13 +145,9 @@ class Reflector extends Mesh {
 
 			const currentXrEnabled = renderer.xr.enabled;
 			const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
-			const currentOutputColorSpace = renderer.outputColorSpace;
-			const currentToneMapping = renderer.toneMapping;
 
 			renderer.xr.enabled = false; // Avoid camera modification
 			renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
-			renderer.outputColorSpace = LinearSRGBColorSpace;
-			renderer.toneMapping = NoToneMapping;
 
 			renderer.setRenderTarget( renderTarget );
 
@@ -164,8 +158,6 @@ class Reflector extends Mesh {
 
 			renderer.xr.enabled = currentXrEnabled;
 			renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-			renderer.outputColorSpace = currentOutputColorSpace;
-			renderer.toneMapping = currentToneMapping;
 
 			renderer.setRenderTarget( currentRenderTarget );
 

examples/jsm/objects/Refractor.js

@@ -10,8 +10,6 @@ import {
 	Vector3,
 	Vector4,
 	WebGLRenderTarget,
-	LinearSRGBColorSpace,
-	NoToneMapping,
 	HalfFloatType
 } from 'three';
 
@@ -194,22 +192,16 @@ class Refractor extends Mesh {
 			const currentRenderTarget = renderer.getRenderTarget();
 			const currentXrEnabled = renderer.xr.enabled;
 			const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
-			const currentOutputColorSpace = renderer.outputColorSpace;
-			const currentToneMapping = renderer.toneMapping;
 
 			renderer.xr.enabled = false; // avoid camera modification
 			renderer.shadowMap.autoUpdate = false; // avoid re-computing shadows
-			renderer.outputColorSpace = LinearSRGBColorSpace;
-			renderer.toneMapping = NoToneMapping;
 
 			renderer.setRenderTarget( renderTarget );
 			if ( renderer.autoClear === false ) renderer.clear();
 			renderer.render( scene, virtualCamera );
 
 			renderer.xr.enabled = currentXrEnabled;
 			renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-			renderer.outputColorSpace = currentOutputColorSpace;
-			renderer.toneMapping = currentToneMapping;
 			renderer.setRenderTarget( currentRenderTarget );
 
 			// restore viewport

examples/jsm/postprocessing/MaskPass.js

@@ -63,11 +63,14 @@ class MaskPass extends Pass {
 		if ( this.clear ) renderer.clear();
 		renderer.render( this.scene, this.camera );
 
-		// unlock color and depth buffer for subsequent rendering
+		// unlock color and depth buffer and make them writable for subsequent rendering/clearing
 
 		state.buffers.color.setLocked( false );
 		state.buffers.depth.setLocked( false );
 
+		state.buffers.color.setMask( true );
+		state.buffers.depth.setMask( true );
+
 		// only render where stencil is set to 1
 
 		state.buffers.stencil.setLocked( false );

examples/jsm/postprocessing/OutputPass.js

@@ -1,24 +1,21 @@
 import {
 	RawShaderMaterial,
 	UniformsUtils,
-	NoToneMapping,
 	LinearToneMapping,
 	ReinhardToneMapping,
 	CineonToneMapping,
-	ACESFilmicToneMapping
+	ACESFilmicToneMapping,
+	SRGBColorSpace
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
 import { OutputShader } from '../shaders/OutputShader.js';
 
 class OutputPass extends Pass {
 
-	constructor( toneMapping = NoToneMapping, toneMappingExposure = 1 ) {
+	constructor() {
 
 		super();
 
-		this.toneMapping = toneMapping;
-		this.toneMappingExposure = toneMappingExposure;
-
 		//
 
 		const shader = OutputShader;
@@ -31,19 +28,41 @@ class OutputPass extends Pass {
 			fragmentShader: shader.fragmentShader
 		} );
 
-		if ( toneMapping === LinearToneMapping ) this.material.defines.LINEAR_TONE_MAPPING = '';
-		else if ( toneMapping === ReinhardToneMapping ) this.material.defines.REINHARD_TONE_MAPPING = '';
-		else if ( toneMapping === CineonToneMapping ) this.material.defines.CINEON_TONE_MAPPING = '';
-		else if ( toneMapping === ACESFilmicToneMapping ) this.material.defines.ACES_FILMIC_TONE_MAPPING = '';
-
 		this.fsQuad = new FullScreenQuad( this.material );
 
+		// internal cache
+
+		this._outputColorSpace = null;
+		this._toneMapping = null;
+
 	}
 
 	render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive */ ) {
 
 		this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
-		this.uniforms[ 'toneMappingExposure' ].value = this.toneMappingExposure;
+		this.uniforms[ 'toneMappingExposure' ].value = renderer.toneMappingExposure;
+
+		// rebuild defines if required
+
+		if ( this._outputColorSpace !== renderer.outputColorSpace || this._toneMapping !== renderer.toneMapping ) {
+
+			this._outputColorSpace = renderer.outputColorSpace;
+			this._toneMapping = renderer.toneMapping;
+
+			this.material.defines = {};
+
+			if ( this._outputColorSpace == SRGBColorSpace ) this.material.defines.SRGB_COLOR_SPACE = '';
+
+			if ( this._toneMapping === LinearToneMapping ) this.material.defines.LINEAR_TONE_MAPPING = '';
+			else if ( this._toneMapping === ReinhardToneMapping ) this.material.defines.REINHARD_TONE_MAPPING = '';
+			else if ( this._toneMapping === CineonToneMapping ) this.material.defines.CINEON_TONE_MAPPING = '';
+			else if ( this._toneMapping === ACESFilmicToneMapping ) this.material.defines.ACES_FILMIC_TONE_MAPPING = '';
+
+			this.material.needsUpdate = true;
+
+		}
+
+		//
 
 		if ( this.renderToScreen === true ) {
 

examples/jsm/postprocessing/UnrealBloomPass.js

@@ -94,7 +94,7 @@ class UnrealBloomPass extends Pass {
 
 			this.separableBlurMaterials.push( this.getSeperableBlurMaterial( kernelSizeArray[ i ] ) );
 
-			this.separableBlurMaterials[ i ].uniforms[ 'texSize' ].value = new Vector2( resx, resy );
+			this.separableBlurMaterials[ i ].uniforms[ 'invSize' ].value = new Vector2( 1 / resx, 1 / resy );
 
 			resx = Math.round( resx / 2 );
 
@@ -192,7 +192,7 @@ class UnrealBloomPass extends Pass {
 			this.renderTargetsHorizontal[ i ].setSize( resx, resy );
 			this.renderTargetsVertical[ i ].setSize( resx, resy );
 
-			this.separableBlurMaterials[ i ].uniforms[ 'texSize' ].value = new Vector2( resx, resy );
+			this.separableBlurMaterials[ i ].uniforms[ 'invSize' ].value = new Vector2( 1 / resx, 1 / resy );
 
 			resx = Math.round( resx / 2 );
 			resy = Math.round( resy / 2 );
@@ -298,17 +298,25 @@ class UnrealBloomPass extends Pass {
 
 	getSeperableBlurMaterial( kernelRadius ) {
 
+		const coefficients = [];
+
+		for ( let i = 0; i < kernelRadius; i ++ ) {
+
+			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( kernelRadius * kernelRadius ) ) / kernelRadius );
+
+		}
+
 		return new ShaderMaterial( {
 
 			defines: {
-				'KERNEL_RADIUS': kernelRadius,
-				'SIGMA': kernelRadius
+				'KERNEL_RADIUS': kernelRadius
 			},
 
 			uniforms: {
 				'colorTexture': { value: null },
-				'texSize': { value: new Vector2( 0.5, 0.5 ) },
-				'direction': { value: new Vector2( 0.5, 0.5 ) }
+				'invSize': { value: new Vector2( 0.5, 0.5 ) }, // inverse texture size
+				'direction': { value: new Vector2( 0.5, 0.5 ) },
+				'gaussianCoefficients': { value: coefficients } // precomputed Gaussian coefficients
 			},
 
 			vertexShader:
@@ -322,23 +330,19 @@ class UnrealBloomPass extends Pass {
 				`#include <common>
 				varying vec2 vUv;
 				uniform sampler2D colorTexture;
-				uniform vec2 texSize;
+				uniform vec2 invSize;
 				uniform vec2 direction;
+				uniform float gaussianCoefficients[KERNEL_RADIUS];
 
-				float gaussianPdf(in float x, in float sigma) {
-					return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
-				}
 				void main() {
-					vec2 invSize = 1.0 / texSize;
-					float fSigma = float(SIGMA);
-					float weightSum = gaussianPdf(0.0, fSigma);
-					vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;
+					float weightSum = gaussianCoefficients[0];
+					vec3 diffuseSum = texture2D( colorTexture, vUv ).rgb * weightSum;
 					for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
 						float x = float(i);
-						float w = gaussianPdf(x, fSigma);
+						float w = gaussianCoefficients[i];
 						vec2 uvOffset = direction * invSize * x;
-						vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;
-						vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;
+						vec3 sample1 = texture2D( colorTexture, vUv + uvOffset ).rgb;
+						vec3 sample2 = texture2D( colorTexture, vUv - uvOffset ).rgb;
 						diffuseSum += (sample1 + sample2) * w;
 						weightSum += 2.0 * w;
 					}

examples/jsm/shaders/OutputShader.js

@@ -65,7 +65,11 @@ const OutputShader = {
 
 			// color space
 
-			gl_FragColor = LinearTosRGB( gl_FragColor );
+			#ifdef SRGB_COLOR_SPACE
+
+				gl_FragColor = LinearTosRGB( gl_FragColor );
+
+			#endif
 
 		}`
 

examples/webgl_postprocessing_3dlut.html

@@ -124,13 +124,14 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.useLegacyLights = false;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				container.appendChild( renderer.domElement );
 
 				composer = new EffectComposer( renderer );
 				composer.setPixelRatio( window.devicePixelRatio );
 				composer.setSize( window.innerWidth, window.innerHeight );
 				composer.addPass( new RenderPass( scene, camera ) );
-				composer.addPass( new OutputPass( THREE.ACESFilmicToneMapping ) );
+				composer.addPass( new OutputPass() );
 
 				lutPass = new LUTPass();
 				composer.addPass( lutPass );

examples/webgl_postprocessing_unreal_bloom.html

@@ -75,6 +75,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
@@ -101,7 +102,7 @@
 				bloomPass.strength = params.strength;
 				bloomPass.radius = params.radius;
 
-				const outputPass = new OutputPass( THREE.ReinhardToneMapping );
+				const outputPass = new OutputPass();
 
 				composer = new EffectComposer( renderer );
 				composer.addPass( renderScene );
@@ -148,7 +149,7 @@
 
 				toneMappingFolder.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
 
-					outputPass.toneMappingExposure = Math.pow( value, 4.0 );
+					renderer.toneMappingExposure = Math.pow( value, 4.0 );
 
 				} );
 

examples/webgl_postprocessing_unreal_bloom_selective.html

@@ -86,6 +86,7 @@
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.useLegacyLights = false;
+			renderer.toneMapping = THREE.ReinhardToneMapping;
 			document.body.appendChild( renderer.domElement );
 
 			const scene = new THREE.Scene();
@@ -125,7 +126,7 @@
 			);
 			mixPass.needsSwap = true;
 
-			const outputPass = new OutputPass( THREE.ReinhardToneMapping );
+			const outputPass = new OutputPass();
 
 			const finalComposer = new EffectComposer( renderer );
 			finalComposer.addPass( renderScene );
@@ -167,7 +168,7 @@
 
 			toneMappingFolder.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
 
-				outputPass.toneMappingExposure = Math.pow( value, 4.0 );
+				renderer.toneMappingExposure = Math.pow( value, 4.0 );
 				render();
 
 			} );