Apply fog before tonemapping and encoding

examples/jsm/effects/OutlineEffect.js

@@ -164,9 +164,9 @@ class OutlineEffect {
 
 			'	gl_FragColor = vec4( outlineColor, outlineAlpha );',
 
+			'	#include <fog_fragment>',
 			'	#include <tonemapping_fragment>',
 			'	#include <colorspace_fragment>',
-			'	#include <fog_fragment>',
 			'	#include <premultiplied_alpha_fragment>',
 
 			'}'

examples/jsm/lines/LineMaterial.js

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

examples/jsm/loaders/LDrawLoader.js

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

examples/jsm/materials/MeshGouraudMaterial.js

@@ -293,9 +293,9 @@ const GouraudShader = {
 			#include <envmap_fragment>
 
 			#include <opaque_fragment>
+			#include <fog_fragment>
 			#include <tonemapping_fragment>
 			#include <colorspace_fragment>
-			#include <fog_fragment>
 			#include <premultiplied_alpha_fragment>
 			#include <dithering_fragment>
 

examples/jsm/objects/Water.js

@@ -180,9 +180,9 @@ class Water extends Mesh {
 					vec3 outgoingLight = albedo;
 					gl_FragColor = vec4( outgoingLight, alpha );
 
+					#include <fog_fragment>
 					#include <tonemapping_fragment>
 					#include <colorspace_fragment>
-					#include <fog_fragment>	
 				}`
 
 		};

examples/jsm/objects/Water2.js

@@ -347,9 +347,9 @@ Water.WaterShader = {
 			// multiply water color with the mix of both textures
 			gl_FragColor = vec4( color, 1.0 ) * mix( refractColor, reflectColor, reflectance );
 
+			#include <fog_fragment>
 			#include <tonemapping_fragment>
 			#include <colorspace_fragment>
-			#include <fog_fragment>
 
 		}`
 

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

@@ -0,0 +1,20 @@
+export const vertex = /* glsl */`
+void main() {
+
+	gl_Position = vec4( position.xy, 1.0, 1.0 );
+
+}
+`;
+
+export const fragment = /* glsl */`
+uniform vec3 color;
+
+void main() {
+
+	gl_FragColor = vec4( color, 1.0 );
+
+	#include <tonemapping_fragment>
+	#include <colorspace_fragment>
+
+}
+`;

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

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

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

@@ -104,9 +104,9 @@ void main() {
 	#include <envmap_fragment>
 
 	#include <opaque_fragment>
+	#include <fog_fragment>
 	#include <tonemapping_fragment>
 	#include <colorspace_fragment>
-	#include <fog_fragment>
 	#include <premultiplied_alpha_fragment>
 	#include <dithering_fragment>
 

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

@@ -112,9 +112,9 @@ void main() {
 
 	#include <envmap_fragment>
 	#include <opaque_fragment>
+	#include <fog_fragment>
 	#include <tonemapping_fragment>
 	#include <colorspace_fragment>
-	#include <fog_fragment>
 	#include <premultiplied_alpha_fragment>
 	#include <dithering_fragment>
 

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

@@ -99,9 +99,9 @@ void main() {
 	vec3 outgoingLight = diffuseColor.rgb * matcapColor.rgb;
 
 	#include <opaque_fragment>
+	#include <fog_fragment>
 	#include <tonemapping_fragment>
 	#include <colorspace_fragment>
-	#include <fog_fragment>
 	#include <premultiplied_alpha_fragment>
 	#include <dithering_fragment>
 

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

@@ -114,9 +114,9 @@ void main() {
 
 	#include <envmap_fragment>
 	#include <opaque_fragment>
+	#include <fog_fragment>
 	#include <tonemapping_fragment>
 	#include <colorspace_fragment>
-	#include <fog_fragment>
 	#include <premultiplied_alpha_fragment>
 	#include <dithering_fragment>
 

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

@@ -212,9 +212,9 @@ void main() {
 	#endif
 
 	#include <opaque_fragment>
+	#include <fog_fragment>
 	#include <tonemapping_fragment>
 	#include <colorspace_fragment>
-	#include <fog_fragment>
 	#include <premultiplied_alpha_fragment>
 	#include <dithering_fragment>
 

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

@@ -106,9 +106,9 @@ void main() {
 	vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;
 
 	#include <opaque_fragment>
+	#include <fog_fragment>
 	#include <tonemapping_fragment>
 	#include <colorspace_fragment>
-	#include <fog_fragment>
 	#include <premultiplied_alpha_fragment>
 	#include <dithering_fragment>
 

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

@@ -77,9 +77,9 @@ void main() {
 	outgoingLight = diffuseColor.rgb;
 
 	#include <opaque_fragment>
+	#include <fog_fragment>
 	#include <tonemapping_fragment>
 	#include <colorspace_fragment>
-	#include <fog_fragment>
 	#include <premultiplied_alpha_fragment>
 
 }

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

@@ -46,9 +46,9 @@ void main() {
 
 	gl_FragColor = vec4( color, opacity * ( 1.0 - getShadowMask() ) );
 
+	#include <fog_fragment>
 	#include <tonemapping_fragment>
 	#include <colorspace_fragment>
-	#include <fog_fragment>
 
 }
 `;

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

@@ -73,9 +73,9 @@ void main() {
 	outgoingLight = diffuseColor.rgb;
 
 	#include <opaque_fragment>
+	#include <fog_fragment>
 	#include <tonemapping_fragment>
 	#include <colorspace_fragment>
-	#include <fog_fragment>
 
 }
 `;

src/renderers/webgl/WebGLBackground.js

@@ -8,13 +8,16 @@ import { Mesh } from '../../objects/Mesh.js';
 import { ShaderLib } from '../shaders/ShaderLib.js';
 import { cloneUniforms, getUnlitUniformColorSpace } from '../shaders/UniformsUtils.js';
 
+import * as backgroundColor from '../shaders/ShaderLib/backgroundColor.glsl.js';
+
 const _rgb = { r: 0, b: 0, g: 0 };
 
 function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha, premultipliedAlpha ) {
 
 	const clearColor = new Color( 0x000000 );
 	let clearAlpha = alpha === true ? 0 : 1;
 
+	let colorMesh;
 	let planeMesh;
 	let boxMesh;
 
@@ -24,7 +27,6 @@ function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha,
 
 	function render( renderList, scene ) {
 
-		let forceClear = false;
 		let background = scene.isScene === true ? scene.background : null;
 
 		if ( background && background.isTexture ) {
@@ -38,11 +40,6 @@ function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha,
 
 			setClear( clearColor, clearAlpha );
 
-		} else if ( background && background.isColor ) {
-
-			setClear( background, 1 );
-			forceClear = true;
-
 		}
 
 		const environmentBlendMode = renderer.xr.getEnvironmentBlendMode();
@@ -57,7 +54,7 @@ function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha,
 
 		}
 
-		if ( renderer.autoClear || forceClear ) {
+		if ( renderer.autoClear ) {
 
 			renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
 
@@ -192,6 +189,39 @@ function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha,
 			// push to the pre-sorted opaque render list
 			renderList.unshift( planeMesh, planeMesh.geometry, planeMesh.material, 0, 0, null );
 
+		} else if ( background && background.isColor ) {
+
+			if ( colorMesh === undefined ) {
+
+				colorMesh = new Mesh(
+					new PlaneGeometry( 2, 2 ),
+					new ShaderMaterial( {
+						name: 'BackgroundMaterial',
+						uniforms: {
+							color: { value: /*@__PURE__*/ new Color() }
+						},
+						vertexShader: backgroundColor.vertex,
+						fragmentShader: backgroundColor.fragment,
+						side: FrontSide,
+						depthTest: false,
+						depthWrite: false,
+						fog: false
+					} )
+				);
+
+				colorMesh.geometry.deleteAttribute( 'normal' );
+				colorMesh.geometry.deleteAttribute( 'uv' );
+
+				objects.update( colorMesh );
+
+			}
+
+			colorMesh.material.uniforms.color.value.copy( background ).multiplyScalar( scene.backgroundIntensity );
+			colorMesh.layers.enableAll();
+
+			// push to the pre-sorted opaque render list
+			renderList.unshift( colorMesh, colorMesh.geometry, colorMesh.material, 0, 0, null );
+
 		}
 
 	}

src/renderers/webgl/WebGLMaterials.js

@@ -1,5 +1,4 @@
 import { BackSide } from '../../constants.js';
-import { getUnlitUniformColorSpace } from '../shaders/UniformsUtils.js';
 
 function WebGLMaterials( renderer, properties ) {
 
@@ -17,7 +16,7 @@ function WebGLMaterials( renderer, properties ) {
 
 	function refreshFogUniforms( uniforms, fog ) {
 
-		fog.color.getRGB( uniforms.fogColor.value, getUnlitUniformColorSpace( renderer ) );
+		fog.color.getRGB( uniforms.fogColor.value );
 
 		if ( fog.isFog ) {