WebGLRenderer: Add internal MSAA render target with centralized tonemapping.

Author: mrdoob

examples/jsm/lines/LineMaterial.js

@@ -393,8 +393,6 @@ ShaderLib[ 'line' ] = {
 
 			gl_FragColor = vec4( diffuseColor.rgb, alpha );
 
-			#include <tonemapping_fragment>
-			#include <colorspace_fragment>
 			#include <fog_fragment>
 			#include <premultiplied_alpha_fragment>
 

examples/jsm/materials/LDrawConditionalLineMaterial.js

@@ -116,8 +116,6 @@ class LDrawConditionalLineMaterial extends ShaderMaterial {
 				#include <color_fragment>
 				outgoingLight = diffuseColor.rgb; // simple shader
 				gl_FragColor = vec4( outgoingLight, diffuseColor.a );
-				#include <tonemapping_fragment>
-				#include <colorspace_fragment>
 				#include <fog_fragment>
 				#include <premultiplied_alpha_fragment>
 			}

examples/jsm/materials/MeshGouraudMaterial.js

@@ -221,7 +221,6 @@ const GouraudShader = {
 		#endif
 
 		#include <common>
-		#include <dithering_pars_fragment>
 		#include <color_pars_fragment>
 		#include <uv_pars_fragment>
 		#include <map_pars_fragment>
@@ -300,11 +299,8 @@ const GouraudShader = {
 			#include <envmap_fragment>
 
 			#include <opaque_fragment>
-			#include <tonemapping_fragment>
-			#include <colorspace_fragment>
 			#include <fog_fragment>
 			#include <premultiplied_alpha_fragment>
-			#include <dithering_fragment>
 
 		}`
 

src/renderers/WebGLRenderer.js

@@ -4,14 +4,14 @@ import {
 	FrontSide,
 	DoubleSide,
 	HalfFloatType,
-	UnsignedByteType,
 	NoToneMapping,
 	LinearMipmapLinearFilter,
 	SRGBColorSpace,
 	LinearSRGBColorSpace,
 	RGBAIntegerFormat,
 	RGIntegerFormat,
 	RedIntegerFormat,
+	UnsignedByteType,
 	UnsignedIntType,
 	UnsignedShortType,
 	UnsignedInt248Type,
@@ -31,6 +31,7 @@ import { WebGLBindingStates } from './webgl/WebGLBindingStates.js';
 import { WebGLBufferRenderer } from './webgl/WebGLBufferRenderer.js';
 import { WebGLCapabilities } from './webgl/WebGLCapabilities.js';
 import { WebGLClipping } from './webgl/WebGLClipping.js';
+import { WebGLComposite } from './webgl/WebGLComposite.js';
 import { WebGLCubeMaps } from './webgl/WebGLCubeMaps.js';
 import { WebGLCubeUVMaps } from './webgl/WebGLCubeUVMaps.js';
 import { WebGLExtensions } from './webgl/WebGLExtensions.js';
@@ -339,6 +340,10 @@ class WebGLRenderer {
 
 		let _renderBackground = false;
 
+		// internal composite pass for tonemapping, color space conversion, and dithering
+		let _composite = null;
+		let _isRenderingComposite = false;
+
 		function getTargetPixelRatio() {
 
 			return _currentRenderTarget === null ? _pixelRatio : 1;
@@ -454,6 +459,10 @@ class WebGLRenderer {
 
 			info.programs = programCache.programs;
 
+			// Initialize composite pass for tonemapping, color space conversion, and dithering
+			_composite = new WebGLComposite( extensions, capabilities );
+			_composite.setSize( _width * _pixelRatio, _height * _pixelRatio );
+
 			/**
 			 * Holds details about the capabilities of the current rendering context.
 			 *
@@ -655,6 +664,9 @@ class WebGLRenderer {
 
 			}
 
+			// Resize composite render target
+			_composite.setSize( width * _pixelRatio, height * _pixelRatio );
+
 			this.setViewport( 0, 0, width, height );
 
 		};
@@ -694,6 +706,9 @@ class WebGLRenderer {
 			canvas.width = Math.floor( width * pixelRatio );
 			canvas.height = Math.floor( height * pixelRatio );
 
+			// Resize composite render target
+			_composite.setSize( width * pixelRatio, height * pixelRatio );
+
 			this.setViewport( 0, 0, width, height );
 
 		};
@@ -1007,6 +1022,9 @@ class WebGLRenderer {
 			uniformsGroups.dispose();
 			programCache.dispose();
 
+			// Dispose composite pass
+			_composite.dispose();
+
 			xr.dispose();
 
 			xr.removeEventListener( 'sessionstart', onXRSessionStart );
@@ -1563,6 +1581,36 @@ class WebGLRenderer {
 
 			}
 
+			// Determine if we should use composite pass for tonemapping, color space conversion, and dithering
+			const useComposite = scene.isScene === true && _currentRenderTarget === null && _isRenderingComposite === false;
+			const useXR = xr.enabled === true && xr.isPresenting === true;
+			const userToneMapping = _this.toneMapping;
+
+			let compositeRenderTarget = null;
+
+			if ( useComposite ) {
+
+				// Choose render target based on XR mode
+				if ( useXR ) {
+
+					compositeRenderTarget = _composite.xrRenderTarget;
+
+					// Resize XR render target to match the XR framebuffer
+					const size = _this.getDrawingBufferSize( _vector2 );
+					_composite.setXRSize( size.x, size.y );
+
+				} else {
+
+					compositeRenderTarget = _composite.renderTarget;
+
+				}
+
+				// Render to internal MSAA target, disable tone mapping (will be applied in composite pass)
+				_this.setRenderTarget( compositeRenderTarget );
+				_this.toneMapping = NoToneMapping;
+
+			}
+
 			//
 			if ( scene.isScene === true ) scene.onBeforeRender( _this, scene, camera, _currentRenderTarget );
 
@@ -1684,6 +1732,19 @@ class WebGLRenderer {
 
 			}
 
+			// Perform composite pass for tonemapping, color space conversion, and dithering
+			if ( useComposite ) {
+
+				// Restore tone mapping for composite pass
+				_this.toneMapping = userToneMapping;
+
+				// Render composite pass to canvas
+				_isRenderingComposite = true;
+				_composite.render( _this, compositeRenderTarget );
+				_isRenderingComposite = false;
+
+			}
+
 			//
 
 			if ( scene.isScene === true ) scene.onAfterRender( _this, scene, camera );

src/renderers/shaders/ShaderLib/background.glsl.js

@@ -33,8 +33,5 @@ void main() {
 
 	gl_FragColor = texColor;
 
-	#include <tonemapping_fragment>
-	#include <colorspace_fragment>
-
 }
 `;

src/renderers/shaders/ShaderLib/backgroundCube.glsl.js

@@ -56,8 +56,5 @@ void main() {
 
 	gl_FragColor = texColor;
 
-	#include <tonemapping_fragment>
-	#include <colorspace_fragment>
-
 }
 `;

src/renderers/shaders/ShaderLib/cube.glsl.js

@@ -29,8 +29,5 @@ void main() {
 	gl_FragColor = texColor;
 	gl_FragColor.a *= opacity;
 
-	#include <tonemapping_fragment>
-	#include <colorspace_fragment>
-
 }
 `;

src/renderers/shaders/ShaderLib/equirect.glsl.js

@@ -28,8 +28,5 @@ void main() {
 
 	gl_FragColor = texture2D( tEquirect, sampleUV );
 
-	#include <tonemapping_fragment>
-	#include <colorspace_fragment>
-
 }
 `;

src/renderers/shaders/ShaderLib/linedashed.glsl.js

@@ -67,8 +67,6 @@ void main() {
 	outgoingLight = diffuseColor.rgb; // simple shader
 
 	#include <opaque_fragment>
-	#include <tonemapping_fragment>
-	#include <colorspace_fragment>
 	#include <fog_fragment>
 	#include <premultiplied_alpha_fragment>
 

src/renderers/shaders/ShaderLib/meshbasic.glsl.js

@@ -53,7 +53,6 @@ uniform float opacity;
 #endif
 
 #include <common>
-#include <dithering_pars_fragment>
 #include <color_pars_fragment>
 #include <uv_pars_fragment>
 #include <map_pars_fragment>
@@ -106,11 +105,8 @@ void main() {
 	#include <envmap_fragment>
 
 	#include <opaque_fragment>
-	#include <tonemapping_fragment>
-	#include <colorspace_fragment>
 	#include <fog_fragment>
 	#include <premultiplied_alpha_fragment>
-	#include <dithering_fragment>
 
 }
 `;