diff --git a/examples/jsm/effects/OutlineEffect.js b/examples/jsm/effects/OutlineEffect.js index 3ab6034a8400c9..78bde0be88b352 100644 --- a/examples/jsm/effects/OutlineEffect.js +++ b/examples/jsm/effects/OutlineEffect.js @@ -164,9 +164,9 @@ class OutlineEffect { ' gl_FragColor = vec4( outlineColor, outlineAlpha );', + ' #include ', ' #include ', ' #include ', - ' #include ', ' #include ', '}' diff --git a/examples/jsm/lines/LineMaterial.js b/examples/jsm/lines/LineMaterial.js index 4e30e7614a30bd..562460e7af6bbd 100644 --- a/examples/jsm/lines/LineMaterial.js +++ b/examples/jsm/lines/LineMaterial.js @@ -425,9 +425,9 @@ ShaderLib[ 'line' ] = { gl_FragColor = vec4( diffuseColor.rgb, alpha ); + #include #include #include - #include #include } diff --git a/examples/jsm/loaders/LDrawLoader.js b/examples/jsm/loaders/LDrawLoader.js index 14ca28db63322c..f79f78eb68ef76 100644 --- a/examples/jsm/loaders/LDrawLoader.js +++ b/examples/jsm/loaders/LDrawLoader.js @@ -132,9 +132,9 @@ class LDrawConditionalLineMaterial extends ShaderMaterial { #include outgoingLight = diffuseColor.rgb; // simple shader gl_FragColor = vec4( outgoingLight, diffuseColor.a ); + #include #include #include - #include #include } `, diff --git a/examples/jsm/materials/MeshGouraudMaterial.js b/examples/jsm/materials/MeshGouraudMaterial.js index 21758cf43cd2d1..5dafdaebedf2cc 100644 --- a/examples/jsm/materials/MeshGouraudMaterial.js +++ b/examples/jsm/materials/MeshGouraudMaterial.js @@ -293,9 +293,9 @@ const GouraudShader = { #include #include + #include #include #include - #include #include #include diff --git a/examples/jsm/objects/Water.js b/examples/jsm/objects/Water.js index 20882312bca18b..bf7853e9114bb9 100644 --- a/examples/jsm/objects/Water.js +++ b/examples/jsm/objects/Water.js @@ -180,9 +180,9 @@ class Water extends Mesh { vec3 outgoingLight = albedo; gl_FragColor = vec4( outgoingLight, alpha ); + #include #include #include - #include }` }; diff --git a/examples/jsm/objects/Water2.js b/examples/jsm/objects/Water2.js index 4989b953334020..1c4ca065aaf7d8 100644 --- a/examples/jsm/objects/Water2.js +++ b/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 #include #include - #include }` diff --git a/examples/screenshots/games_fps.jpg b/examples/screenshots/games_fps.jpg index 7d03a632af7f2b..1ee42987f7129d 100644 Binary files a/examples/screenshots/games_fps.jpg and b/examples/screenshots/games_fps.jpg differ diff --git a/examples/screenshots/misc_controls_map.jpg b/examples/screenshots/misc_controls_map.jpg index fa2084f8a4c4ea..5c57d68284eb12 100644 Binary files a/examples/screenshots/misc_controls_map.jpg and b/examples/screenshots/misc_controls_map.jpg differ diff --git a/examples/screenshots/webgl_animation_skinning_ik.jpg b/examples/screenshots/webgl_animation_skinning_ik.jpg index 22c8cd9652c5c8..e946c7e8b131af 100644 Binary files a/examples/screenshots/webgl_animation_skinning_ik.jpg and b/examples/screenshots/webgl_animation_skinning_ik.jpg differ diff --git a/examples/screenshots/webgl_buffergeometry.jpg b/examples/screenshots/webgl_buffergeometry.jpg index 1c065d774bef22..cb37630f7fdd27 100644 Binary files a/examples/screenshots/webgl_buffergeometry.jpg and b/examples/screenshots/webgl_buffergeometry.jpg differ diff --git a/examples/screenshots/webgl_buffergeometry_points.jpg b/examples/screenshots/webgl_buffergeometry_points.jpg index 2e97e5efc681e8..642bb34588c2ac 100644 Binary files a/examples/screenshots/webgl_buffergeometry_points.jpg and b/examples/screenshots/webgl_buffergeometry_points.jpg differ diff --git a/examples/screenshots/webgl_buffergeometry_points_interleaved.jpg b/examples/screenshots/webgl_buffergeometry_points_interleaved.jpg index 0021f4de97b000..f14edc77373080 100644 Binary files a/examples/screenshots/webgl_buffergeometry_points_interleaved.jpg and b/examples/screenshots/webgl_buffergeometry_points_interleaved.jpg differ diff --git a/examples/screenshots/webgl_geometry_dynamic.jpg b/examples/screenshots/webgl_geometry_dynamic.jpg index b4b29381bac0d8..09a372b64c61cc 100644 Binary files a/examples/screenshots/webgl_geometry_dynamic.jpg and b/examples/screenshots/webgl_geometry_dynamic.jpg differ diff --git a/examples/screenshots/webgl_geometry_terrain.jpg b/examples/screenshots/webgl_geometry_terrain.jpg index 3ebff65e3000b0..10300a7bb8a746 100644 Binary files a/examples/screenshots/webgl_geometry_terrain.jpg and b/examples/screenshots/webgl_geometry_terrain.jpg differ diff --git a/examples/screenshots/webgl_geometry_text.jpg b/examples/screenshots/webgl_geometry_text.jpg index b9e0f4154e1ac0..c12a0ce9baae2d 100644 Binary files a/examples/screenshots/webgl_geometry_text.jpg and b/examples/screenshots/webgl_geometry_text.jpg differ diff --git a/examples/screenshots/webgl_gpgpu_birds_gltf.jpg b/examples/screenshots/webgl_gpgpu_birds_gltf.jpg index 7c656d9d8d7241..0a38645b7e6b47 100644 Binary files a/examples/screenshots/webgl_gpgpu_birds_gltf.jpg and b/examples/screenshots/webgl_gpgpu_birds_gltf.jpg differ diff --git a/examples/screenshots/webgl_loader_md2_control.jpg b/examples/screenshots/webgl_loader_md2_control.jpg index 44fa5f48728c15..8d1591092775f1 100644 Binary files a/examples/screenshots/webgl_loader_md2_control.jpg and b/examples/screenshots/webgl_loader_md2_control.jpg differ diff --git a/examples/screenshots/webgl_loader_ttf.jpg b/examples/screenshots/webgl_loader_ttf.jpg index b22008229a8865..ac76a0bf40f120 100644 Binary files a/examples/screenshots/webgl_loader_ttf.jpg and b/examples/screenshots/webgl_loader_ttf.jpg differ diff --git a/examples/screenshots/webgl_lod.jpg b/examples/screenshots/webgl_lod.jpg index 2de4d5b1a0e086..bdff890868a282 100644 Binary files a/examples/screenshots/webgl_lod.jpg and b/examples/screenshots/webgl_lod.jpg differ diff --git a/examples/screenshots/webgl_materials_texture_filters.jpg b/examples/screenshots/webgl_materials_texture_filters.jpg index f1eba6abce3c57..49d9e92b274062 100644 Binary files a/examples/screenshots/webgl_materials_texture_filters.jpg and b/examples/screenshots/webgl_materials_texture_filters.jpg differ diff --git a/examples/screenshots/webgl_points_billboards.jpg b/examples/screenshots/webgl_points_billboards.jpg index ca85f98b0588ec..153a3a2d7adccc 100644 Binary files a/examples/screenshots/webgl_points_billboards.jpg and b/examples/screenshots/webgl_points_billboards.jpg differ diff --git a/examples/screenshots/webgl_sprites.jpg b/examples/screenshots/webgl_sprites.jpg index ee9396c01e42a4..16dd088250345e 100644 Binary files a/examples/screenshots/webgl_sprites.jpg and b/examples/screenshots/webgl_sprites.jpg differ diff --git a/src/renderers/shaders/ShaderLib/backgroundColor.glsl.js b/src/renderers/shaders/ShaderLib/backgroundColor.glsl.js new file mode 100644 index 00000000000000..26994c43ff5807 --- /dev/null +++ b/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 + #include + +} +`; diff --git a/src/renderers/shaders/ShaderLib/linedashed.glsl.js b/src/renderers/shaders/ShaderLib/linedashed.glsl.js index 42bfbb39ac9ff5..f6ebebc7c28019 100644 --- a/src/renderers/shaders/ShaderLib/linedashed.glsl.js +++ b/src/renderers/shaders/ShaderLib/linedashed.glsl.js @@ -66,9 +66,9 @@ void main() { outgoingLight = diffuseColor.rgb; // simple shader #include + #include #include #include - #include #include } diff --git a/src/renderers/shaders/ShaderLib/meshbasic.glsl.js b/src/renderers/shaders/ShaderLib/meshbasic.glsl.js index ec44579c18381f..0d96bd083cf38c 100644 --- a/src/renderers/shaders/ShaderLib/meshbasic.glsl.js +++ b/src/renderers/shaders/ShaderLib/meshbasic.glsl.js @@ -104,9 +104,9 @@ void main() { #include #include + #include #include #include - #include #include #include diff --git a/src/renderers/shaders/ShaderLib/meshlambert.glsl.js b/src/renderers/shaders/ShaderLib/meshlambert.glsl.js index e8e2f28b7295df..bff91f88217c2e 100644 --- a/src/renderers/shaders/ShaderLib/meshlambert.glsl.js +++ b/src/renderers/shaders/ShaderLib/meshlambert.glsl.js @@ -112,9 +112,9 @@ void main() { #include #include + #include #include #include - #include #include #include diff --git a/src/renderers/shaders/ShaderLib/meshmatcap.glsl.js b/src/renderers/shaders/ShaderLib/meshmatcap.glsl.js index d1018bbc985d30..39836c6254da9d 100644 --- a/src/renderers/shaders/ShaderLib/meshmatcap.glsl.js +++ b/src/renderers/shaders/ShaderLib/meshmatcap.glsl.js @@ -99,9 +99,9 @@ void main() { vec3 outgoingLight = diffuseColor.rgb * matcapColor.rgb; #include + #include #include #include - #include #include #include diff --git a/src/renderers/shaders/ShaderLib/meshphong.glsl.js b/src/renderers/shaders/ShaderLib/meshphong.glsl.js index 3248b1aa87d545..cc76af4fbbf055 100644 --- a/src/renderers/shaders/ShaderLib/meshphong.glsl.js +++ b/src/renderers/shaders/ShaderLib/meshphong.glsl.js @@ -114,9 +114,9 @@ void main() { #include #include + #include #include #include - #include #include #include diff --git a/src/renderers/shaders/ShaderLib/meshphysical.glsl.js b/src/renderers/shaders/ShaderLib/meshphysical.glsl.js index a3acad519f3938..3af29e5c98e01d 100644 --- a/src/renderers/shaders/ShaderLib/meshphysical.glsl.js +++ b/src/renderers/shaders/ShaderLib/meshphysical.glsl.js @@ -212,9 +212,9 @@ void main() { #endif #include + #include #include #include - #include #include #include diff --git a/src/renderers/shaders/ShaderLib/meshtoon.glsl.js b/src/renderers/shaders/ShaderLib/meshtoon.glsl.js index 458b406743132f..27ae03baef410f 100644 --- a/src/renderers/shaders/ShaderLib/meshtoon.glsl.js +++ b/src/renderers/shaders/ShaderLib/meshtoon.glsl.js @@ -106,9 +106,9 @@ void main() { vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance; #include + #include #include #include - #include #include #include diff --git a/src/renderers/shaders/ShaderLib/points.glsl.js b/src/renderers/shaders/ShaderLib/points.glsl.js index be07fd06ed84f4..a0578bab880abc 100644 --- a/src/renderers/shaders/ShaderLib/points.glsl.js +++ b/src/renderers/shaders/ShaderLib/points.glsl.js @@ -77,9 +77,9 @@ void main() { outgoingLight = diffuseColor.rgb; #include + #include #include #include - #include #include } diff --git a/src/renderers/shaders/ShaderLib/shadow.glsl.js b/src/renderers/shaders/ShaderLib/shadow.glsl.js index ad2405c4d065a3..475a7206745b47 100644 --- a/src/renderers/shaders/ShaderLib/shadow.glsl.js +++ b/src/renderers/shaders/ShaderLib/shadow.glsl.js @@ -46,9 +46,9 @@ void main() { gl_FragColor = vec4( color, opacity * ( 1.0 - getShadowMask() ) ); + #include #include #include - #include } `; diff --git a/src/renderers/shaders/ShaderLib/sprite.glsl.js b/src/renderers/shaders/ShaderLib/sprite.glsl.js index 864dee4f84bdc2..cd908a4dfe6ca1 100644 --- a/src/renderers/shaders/ShaderLib/sprite.glsl.js +++ b/src/renderers/shaders/ShaderLib/sprite.glsl.js @@ -73,9 +73,9 @@ void main() { outgoingLight = diffuseColor.rgb; #include + #include #include #include - #include } `; diff --git a/src/renderers/webgl/WebGLBackground.js b/src/renderers/webgl/WebGLBackground.js index c236a0c2039a89..c9ab09f3d48077 100644 --- a/src/renderers/webgl/WebGLBackground.js +++ b/src/renderers/webgl/WebGLBackground.js @@ -8,6 +8,8 @@ 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 ) { @@ -15,6 +17,7 @@ function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha, 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 ); + } } diff --git a/src/renderers/webgl/WebGLMaterials.js b/src/renderers/webgl/WebGLMaterials.js index 2c2cc1ab585fe6..7e7c53aed141a7 100644 --- a/src/renderers/webgl/WebGLMaterials.js +++ b/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 ) {