Parcourir la source

Merge pull request #18127 from Mugen87/dev29

WebGLRenderer: Remove gammaOutput, introduce outputEncoding.
Mr.doob il y a 5 ans
Parent
commit
48072f925b
93 fichiers modifiés avec 142 ajouts et 142 suppressions
  1. 3 2
      docs/api/en/renderers/WebGLRenderer.html
  2. 3 2
      docs/api/zh/renderers/WebGLRenderer.html
  3. 1 2
      docs/examples/en/loaders/GLTFLoader.html
  4. 1 2
      docs/examples/zh/loaders/GLTFLoader.html
  5. 1 1
      editor/js/Viewport.js
  6. 1 1
      editor/js/libs/app.js
  7. 0 4
      editor/js/libs/tern-threejs/threejs.js
  8. 5 5
      examples/js/pmrem/PMREMGenerator.js
  9. 1 1
      examples/jsm/nodes/core/NodeBuilder.d.ts
  10. 2 5
      examples/jsm/nodes/core/NodeBuilder.js
  11. 5 5
      examples/jsm/pmrem/PMREMGenerator.js
  12. 1 1
      examples/misc_exporter_collada.html
  13. 1 2
      examples/webaudio_orientation.html
  14. 1 1
      examples/webgl_animation_cloth.html
  15. 1 2
      examples/webgl_animation_keyframes.html
  16. 1 2
      examples/webgl_animation_multiple.html
  17. 1 2
      examples/webgl_animation_skinning_blending.html
  18. 1 2
      examples/webgl_animation_skinning_morph.html
  19. 1 1
      examples/webgl_buffergeometry.html
  20. 1 1
      examples/webgl_buffergeometry_drawrange.html
  21. 2 2
      examples/webgl_buffergeometry_instancing_lambert.html
  22. 1 1
      examples/webgl_buffergeometry_lines.html
  23. 1 1
      examples/webgl_buffergeometry_lines_indexed.html
  24. 1 1
      examples/webgl_buffergeometry_uint.html
  25. 1 1
      examples/webgl_geometry_teapot.html
  26. 1 1
      examples/webgl_lensflares.html
  27. 1 1
      examples/webgl_lightningstrike.html
  28. 1 3
      examples/webgl_lightprobe.html
  29. 1 4
      examples/webgl_lightprobe_cubecamera.html
  30. 1 1
      examples/webgl_lights_hemisphere.html
  31. 1 1
      examples/webgl_lights_physical.html
  32. 1 1
      examples/webgl_lights_pointlights2.html
  33. 1 1
      examples/webgl_lights_rectarealight.html
  34. 1 1
      examples/webgl_lights_spotlight.html
  35. 1 1
      examples/webgl_lights_spotlights.html
  36. 1 2
      examples/webgl_lightshafts.html
  37. 1 2
      examples/webgl_loader_3mf_materials.html
  38. 1 1
      examples/webgl_loader_draco.html
  39. 1 1
      examples/webgl_loader_gltf.html
  40. 1 1
      examples/webgl_loader_gltf_extensions.html
  41. 1 1
      examples/webgl_loader_lwo.html
  42. 1 1
      examples/webgl_loader_md2.html
  43. 1 1
      examples/webgl_loader_md2_control.html
  44. 1 1
      examples/webgl_loader_ply.html
  45. 1 1
      examples/webgl_loader_stl.html
  46. 1 2
      examples/webgl_loader_texture_basis.html
  47. 1 1
      examples/webgl_loader_texture_exr.html
  48. 1 1
      examples/webgl_loader_texture_hdr.html
  49. 1 1
      examples/webgl_loader_texture_rgbm.html
  50. 1 1
      examples/webgl_loader_vrm.html
  51. 1 1
      examples/webgl_marchingcubes.html
  52. 1 1
      examples/webgl_materials_bumpmap.html
  53. 1 1
      examples/webgl_materials_bumpmap_skin.html
  54. 1 1
      examples/webgl_materials_car.html
  55. 1 1
      examples/webgl_materials_displacementmap.html
  56. 2 2
      examples/webgl_materials_envmaps.html
  57. 1 1
      examples/webgl_materials_envmaps_exr.html
  58. 2 2
      examples/webgl_materials_envmaps_hdr.html
  59. 1 1
      examples/webgl_materials_envmaps_hdr_nodes.html
  60. 1 1
      examples/webgl_materials_envmaps_pmrem_nodes.html
  61. 1 1
      examples/webgl_materials_lightmap.html
  62. 1 1
      examples/webgl_materials_matcap.html
  63. 1 0
      examples/webgl_materials_nodes.html
  64. 4 2
      examples/webgl_materials_normalmap.html
  65. 1 1
      examples/webgl_materials_normalmap_object_space.html
  66. 1 1
      examples/webgl_materials_parallaxmap.html
  67. 1 1
      examples/webgl_materials_physical_clearcoat.html
  68. 1 1
      examples/webgl_materials_physical_transparency.html
  69. 1 1
      examples/webgl_materials_reflectivity.html
  70. 1 1
      examples/webgl_materials_standard.html
  71. 1 1
      examples/webgl_materials_translucency.html
  72. 1 1
      examples/webgl_materials_variations_basic.html
  73. 1 1
      examples/webgl_materials_variations_lambert.html
  74. 1 1
      examples/webgl_materials_variations_phong.html
  75. 1 1
      examples/webgl_materials_variations_physical.html
  76. 1 1
      examples/webgl_materials_variations_standard.html
  77. 1 1
      examples/webgl_materials_variations_toon.html
  78. 1 2
      examples/webgl_morphtargets_horse.html
  79. 1 1
      examples/webgl_performance_doublesided.html
  80. 7 1
      examples/webgl_postprocessing_advanced.html
  81. 0 1
      examples/webgl_shaders_tonemapping.html
  82. 1 1
      examples/webgl_shading_physical.html
  83. 1 2
      examples/webgl_shadowmap.html
  84. 1 1
      examples/webgl_shadowmap_pcss.html
  85. 1 2
      examples/webgl_shadowmap_performance.html
  86. 1 1
      examples/webgl_tonemapping.html
  87. 1 1
      examples/webxr_vr_dragging.html
  88. 1 1
      examples/webxr_vr_paint.html
  89. 1 1
      examples/webxr_vr_sculpt.html
  90. 16 0
      src/Three.Legacy.js
  91. 3 3
      src/renderers/WebGLRenderer.d.ts
  92. 7 1
      src/renderers/WebGLRenderer.js
  93. 4 11
      src/renderers/webgl/WebGLPrograms.js

+ 3 - 2
docs/api/en/renderers/WebGLRenderer.html

@@ -164,8 +164,9 @@
 		<h3>[property:Float gammaFactor]</h3>
 		<p>Default is *2*. </p>
 
-		<h3>[property:Boolean gammaOutput]</h3>
-		<p>If set, then it expects that all textures and colors need to be outputted in premultiplied gamma. Default is *false*.</p>
+		<h3>[property:number outputEncoding]</h3>
+		<p>Defines the output encoding of the renderer. Default is [page:Textures THREE.LinearEncoding].</p>
+		<p>See the [page:Textures texture constants] page for details of other formats.</p>
 
 		<h3>[property:Object info]</h3>
 		<p>An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</p>

+ 3 - 2
docs/api/zh/renderers/WebGLRenderer.html

@@ -143,8 +143,9 @@
 		<h3>[property:Float gammaFactor]</h3>
 		<p>默认是 *2*. </p>
 
-		<h3>[property:Boolean gammaOutput]</h3>
-		<p>如果设置, 那么它期望所有纹理和颜色需要乘以gamma输出。 默认值*false*.</p>
+		<h3>[property:number outputEncoding]</h3>
+		<p>Defines the output encoding of the renderer. Default is [page:Textures THREE.LinearEncoding].</p>
+		<p>See the [page:Textures texture constants] page for details of other formats.</p>
 
 		<h3>[property:Object info]</h3>
 		<p>一个对象,包含有关图形板内存和渲染过程的一系列统计信息。这些信息可用于调试或仅仅满足下好奇心。改对象包含以下字段:</p>

+ 1 - 2
docs/examples/en/loaders/GLTFLoader.html

@@ -111,8 +111,7 @@
 		in linear colorspace, always configure [page:WebGLRenderer] as follows when using glTF:</p>
 
 		<code>
-		renderer.gammaOutput = true;
-		renderer.gammaFactor = 2.2;
+		renderer.outputEncoding = THREE.sRGBEncoding;
 		</code>
 
 		<p>GLTFLoader will automatically configure textures referenced from a .gltf or .glb file correctly, with the

+ 1 - 2
docs/examples/zh/loaders/GLTFLoader.html

@@ -107,8 +107,7 @@
 		颜色空间并显示在屏幕上。除非你需要使用线性颜色空间进行后期处理,否则请在使用glTF的时候将[page:WebGLRenderer]进行如下配置:</p>
 
 		<code>
-		renderer.gammaOutput = true;
-		renderer.gammaFactor = 2.2;
+		renderer.outputEncoding = THREE.sRGBEncoding;
 		</code>
 
 		<p>假设渲染器的配置如上所示,则GLTFLoader将可以正确地自动配置从.gltf或.glb文件中引用的纹理。

+ 1 - 1
editor/js/Viewport.js

@@ -313,7 +313,7 @@ var Viewport = function ( editor ) {
 
 		renderer.autoClear = false;
 		renderer.autoUpdateScene = false;
-		renderer.gammaOutput = true;
+		renderer.outputEncoding = THREE.GammaEncoding;
 		renderer.setPixelRatio( window.devicePixelRatio );
 		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 

+ 1 - 1
editor/js/libs/app.js

@@ -21,7 +21,7 @@ var APP = {
 		this.load = function ( json ) {
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.gammaOutput = true;
+			renderer.outputEncoding = THREE.GammaEncoding;
 			renderer.setClearColor( 0x000000 );
 			renderer.setPixelRatio( window.devicePixelRatio );
 

+ 0 - 4
editor/js/libs/tern-threejs/threejs.js

@@ -4661,10 +4661,6 @@
           "!type": "bool",
           "!doc": "Defines whether the renderer should auto update objects. Default is true."
         },
-        "gammaOutput": {
-          "!type": "bool",
-          "!doc": "Default is false.  If set, then it expects that all textures and colors need to be outputted in premultiplied gamma."
-        },
         "shadowMapEnabled": {
           "!type": "bool",
           "!doc": "Default is false. If set, use shadow maps in the scene."

+ 5 - 5
examples/js/pmrem/PMREMGenerator.js

@@ -261,7 +261,7 @@ THREE.PMREMGenerator = ( function () {
 		var upSign = [ 1, 1, 1, 1, - 1, 1 ];
 		var forwardSign = [ 1, 1, - 1, - 1, - 1, 1 ];
 
-		var gammaOutput = _renderer.gammaOutput;
+		var outputEncoding = _renderer.outputEncoding;
 		var toneMapping = _renderer.toneMapping;
 		var toneMappingExposure = _renderer.toneMappingExposure;
 		var clearColor = _renderer.getClearColor();
@@ -269,7 +269,7 @@ THREE.PMREMGenerator = ( function () {
 
 		_renderer.toneMapping = THREE.LinearToneMapping;
 		_renderer.toneMappingExposure = 1.0;
-		_renderer.gammaOutput = false;
+		_renderer.outputEncoding = THREE.LinearEncoding;
 		scene.scale.z *= - 1;
 
 		var background = scene.background;
@@ -314,7 +314,7 @@ THREE.PMREMGenerator = ( function () {
 
 		_renderer.toneMapping = toneMapping;
 		_renderer.toneMappingExposure = toneMappingExposure;
-		_renderer.gammaOutput = gammaOutput;
+		_renderer.outputEncoding = outputEncoding;
 		_renderer.setClearColor( clearColor, clearAlpha );
 		scene.scale.z *= - 1;
 
@@ -560,8 +560,8 @@ void main() {
         float theta = dTheta * float(dir * i);
         float cosTheta = cos(theta);
         // Rodrigues' axis-angle rotation
-        vec3 sampleDirection = vOutputDirection * cosTheta 
-            + cross(axis, vOutputDirection) * sin(theta) 
+        vec3 sampleDirection = vOutputDirection * cosTheta
+            + cross(axis, vOutputDirection) * sin(theta)
             + axis * dot(axis, vOutputDirection) * (1.0 - cosTheta);
         gl_FragColor.rgb +=
             weights[i] * bilinearCubeUV(envMap, sampleDirection, mipInt);

+ 1 - 1
examples/jsm/nodes/core/NodeBuilder.d.ts

@@ -143,6 +143,6 @@ export class NodeBuilder {
 	setShader( shader: string ): this;
 	mergeDefines( defines: object ): object;
 	mergeUniform( uniforms: object ): object;
-	getTextureEncodingFromMap( map: Texture, gammaOverrideLinear?: boolean ): TextureEncoding;
+	getTextureEncodingFromMap( map: Texture ): TextureEncoding;
 
 }

+ 2 - 5
examples/jsm/nodes/core/NodeBuilder.js

@@ -949,9 +949,7 @@ NodeBuilder.prototype = {
 
 	},
 
-	getTextureEncodingFromMap: function ( map, gammaOverrideLinear ) {
-
-		gammaOverrideLinear = gammaOverrideLinear !== undefined ? gammaOverrideLinear : this.context.gamma;
+	getTextureEncodingFromMap: function ( map ) {
 
 		var encoding;
 
@@ -970,8 +968,7 @@ NodeBuilder.prototype = {
 
 		}
 
-		// add backwards compatibility for WebGLRenderer.gammaOutput parameter, should probably be removed at some point.
-		if ( encoding === LinearEncoding && gammaOverrideLinear ) {
+		if ( encoding === LinearEncoding && this.context.gamma ) {
 
 			encoding = GammaEncoding;
 

+ 5 - 5
examples/jsm/pmrem/PMREMGenerator.js

@@ -287,7 +287,7 @@ var PMREMGenerator = ( function () {
 		var upSign = [ 1, 1, 1, 1, - 1, 1 ];
 		var forwardSign = [ 1, 1, - 1, - 1, - 1, 1 ];
 
-		var gammaOutput = _renderer.gammaOutput;
+		var outputEncoding = _renderer.outputEncoding;
 		var toneMapping = _renderer.toneMapping;
 		var toneMappingExposure = _renderer.toneMappingExposure;
 		var clearColor = _renderer.getClearColor();
@@ -295,7 +295,7 @@ var PMREMGenerator = ( function () {
 
 		_renderer.toneMapping = LinearToneMapping;
 		_renderer.toneMappingExposure = 1.0;
-		_renderer.gammaOutput = false;
+		_renderer.outputEncoding = LinearEncoding;
 		scene.scale.z *= - 1;
 
 		var background = scene.background;
@@ -340,7 +340,7 @@ var PMREMGenerator = ( function () {
 
 		_renderer.toneMapping = toneMapping;
 		_renderer.toneMappingExposure = toneMappingExposure;
-		_renderer.gammaOutput = gammaOutput;
+		_renderer.outputEncoding = outputEncoding;
 		_renderer.setClearColor( clearColor, clearAlpha );
 		scene.scale.z *= - 1;
 
@@ -586,8 +586,8 @@ void main() {
         float theta = dTheta * float(dir * i);
         float cosTheta = cos(theta);
         // Rodrigues' axis-angle rotation
-        vec3 sampleDirection = vOutputDirection * cosTheta 
-            + cross(axis, vOutputDirection) * sin(theta) 
+        vec3 sampleDirection = vOutputDirection * cosTheta
+            + cross(axis, vOutputDirection) * sin(theta)
             + axis * dot(axis, vOutputDirection) * (1.0 - cosTheta);
         gl_FragColor.rgb +=
             weights[i] * bilinearCubeUV(envMap, sampleDirection, mipInt);

+ 1 - 1
examples/misc_exporter_collada.html

@@ -73,7 +73,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( canvasWidth, canvasHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				// EVENTS

+ 1 - 2
examples/webaudio_orientation.html

@@ -144,8 +144,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.gammaOutput = true;
-			renderer.gammaFactor = 2.2;
+			renderer.outputEncoding = THREE.sRGBEncoding;
 			renderer.shadowMap.enabled = true;
 			container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webgl_animation_cloth.html

@@ -562,7 +562,7 @@
 
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				renderer.shadowMap.enabled = true;
 

+ 1 - 2
examples/webgl_animation_keyframes.html

@@ -49,8 +49,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.gammaOutput = true;
-			renderer.gammaFactor = 2.2;
+			renderer.outputEncoding = THREE.sRGBEncoding;
 			container.appendChild( renderer.domElement );
 
 			scene = new THREE.Scene();

+ 1 - 2
examples/webgl_animation_multiple.html

@@ -320,8 +320,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 				container.appendChild( renderer.domElement );

+ 1 - 2
examples/webgl_animation_skinning_blending.html

@@ -137,8 +137,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 

+ 1 - 2
examples/webgl_animation_skinning_morph.html

@@ -106,8 +106,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 1 - 1
examples/webgl_buffergeometry.html

@@ -156,7 +156,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webgl_buffergeometry_drawrange.html

@@ -168,7 +168,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				container.appendChild( renderer.domElement );
 

+ 2 - 2
examples/webgl_buffergeometry_instancing_lambert.html

@@ -35,7 +35,7 @@
 		import { Curves } from './jsm/curves/CurveExtras.js';
 
 		// this is a cut-and-paste of the depth shader -- modified to accommodate instancing for this app
-		var customDepthVertexShader = 
+		var customDepthVertexShader =
 			`
 			// instanced
 			attribute vec3 instanceOffset;
@@ -165,7 +165,7 @@
 			renderer.shadowMap.enabled = true;
 			document.body.appendChild( renderer.domElement );
 
-			renderer.gammaOutput = true;
+			renderer.outputEncoding = THREE.sRGBEncoding;
 
 			scene = new THREE.Scene();
 

+ 1 - 1
examples/webgl_buffergeometry_lines.html

@@ -82,7 +82,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webgl_buffergeometry_lines_indexed.html

@@ -190,7 +190,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webgl_buffergeometry_uint.html

@@ -157,7 +157,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webgl_geometry_teapot.html

@@ -67,7 +67,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( canvasWidth, canvasHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				// EVENTS

+ 1 - 1
examples/webgl_lensflares.html

@@ -115,7 +115,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				//

+ 1 - 1
examples/webgl_lightningstrike.html

@@ -54,7 +54,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				container.appendChild( renderer.domElement );
 

+ 1 - 3
examples/webgl_lightprobe.html

@@ -49,9 +49,7 @@
 				//renderer.toneMapping = LinearToneMapping;
 			 	//renderer.toneMappingExposure = API.exposure;
 
-				// gamma
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2; // approximate sRGB
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				// scene
 				scene = new THREE.Scene();

+ 1 - 4
examples/webgl_lightprobe_cubecamera.html

@@ -32,10 +32,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
-
-				// gamma
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2; // approximate sRGB
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				// scene
 				scene = new THREE.Scene();

+ 1 - 1
examples/webgl_lights_hemisphere.html

@@ -190,7 +190,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 
 				// STATS

+ 1 - 1
examples/webgl_lights_physical.html

@@ -218,7 +218,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.physicallyCorrectLights = true;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.setPixelRatio( window.devicePixelRatio );

+ 1 - 1
examples/webgl_lights_pointlights2.html

@@ -134,7 +134,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				// CONTROLS
 

+ 1 - 1
examples/webgl_lights_rectarealight.html

@@ -42,7 +42,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				document.body.appendChild( renderer.domElement );
 
 				// Check for float-RT support

+ 1 - 1
examples/webgl_lights_spotlight.html

@@ -34,7 +34,7 @@
 				document.body.appendChild( renderer.domElement );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				scene = new THREE.Scene();
 

+ 1 - 1
examples/webgl_lights_spotlights.html

@@ -52,7 +52,7 @@
 
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				camera.position.set( 46, 22, - 21 );
 

+ 1 - 2
examples/webgl_lightshafts.html

@@ -181,8 +181,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				controls = new OrbitControls( camera, renderer.domElement );

+ 1 - 2
examples/webgl_loader_3mf_materials.html

@@ -100,8 +100,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 				document.body.appendChild( renderer.domElement );

+ 1 - 1
examples/webgl_loader_draco.html

@@ -80,7 +80,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.gammaOutput = true;
+			renderer.outputEncoding = THREE.sRGBEncoding;
 			renderer.shadowMap.enabled = true;
 			container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webgl_loader_gltf.html

@@ -83,7 +83,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				controls = new OrbitControls( camera, renderer.domElement );

+ 1 - 1
examples/webgl_loader_gltf_extensions.html

@@ -144,7 +144,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.physicallyCorrectLights = true;
 				container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webgl_loader_lwo.html

@@ -87,7 +87,7 @@
 				renderer.shadowMap.enabled = true;
 				renderer.physicallyCorrectLights = true;
 				renderer.gammaFactor = 1.18;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				controls = new OrbitControls( camera, renderer.domElement );

+ 1 - 1
examples/webgl_loader_md2.html

@@ -115,7 +115,7 @@
 
 				//
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 
 				// STATS

+ 1 - 1
examples/webgl_loader_md2_control.html

@@ -126,7 +126,7 @@
 
 				//
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 

+ 1 - 1
examples/webgl_loader_ply.html

@@ -109,7 +109,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				renderer.shadowMap.enabled = true;
 

+ 1 - 1
examples/webgl_loader_stl.html

@@ -145,7 +145,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				renderer.shadowMap.enabled = true;
 

+ 1 - 2
examples/webgl_loader_texture_basis.html

@@ -32,8 +32,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );

+ 1 - 1
examples/webgl_loader_texture_exr.html

@@ -39,7 +39,7 @@
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.toneMappingExposure = params.exposure;
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				scene = new THREE.Scene();
 

+ 1 - 1
examples/webgl_loader_texture_hdr.html

@@ -39,7 +39,7 @@
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.toneMappingExposure = params.exposure;
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				scene = new THREE.Scene();
 

+ 1 - 1
examples/webgl_loader_texture_rgbm.html

@@ -36,7 +36,7 @@
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.toneMappingExposure = params.exposure;
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				scene = new THREE.Scene();
 

+ 1 - 1
examples/webgl_loader_vrm.html

@@ -93,7 +93,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				controls = new OrbitControls( camera, renderer.domElement );

+ 1 - 1
examples/webgl_marchingcubes.html

@@ -92,7 +92,7 @@
 			// RENDERER
 
 			renderer = new THREE.WebGLRenderer();
-			renderer.gammaOutput = true;
+			renderer.outputEncoding = THREE.sRGBEncoding;
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 

+ 1 - 1
examples/webgl_materials_bumpmap.html

@@ -102,7 +102,7 @@
 				container.appendChild( renderer.domElement );
 
 				renderer.shadowMap.enabled = true;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				//
 

+ 1 - 1
examples/webgl_materials_bumpmap_skin.html

@@ -83,7 +83,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 				renderer.autoClear = false;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				//
 

+ 1 - 1
examples/webgl_materials_car.html

@@ -102,7 +102,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 				stats = new Stats();

+ 1 - 1
examples/webgl_materials_displacementmap.html

@@ -112,7 +112,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				//
 

+ 2 - 2
examples/webgl_materials_envmaps.html

@@ -106,7 +106,7 @@
 				} );
 
 				cubeMaterial.envMap = textureCube;
-				
+
 				// Skybox
 
 				cubeMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), cubeMaterial );
@@ -128,7 +128,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				//
 

+ 1 - 1
examples/webgl_materials_envmaps_exr.html

@@ -107,7 +107,7 @@
 
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				stats = new Stats();
 				container.appendChild( stats.dom );

+ 2 - 2
examples/webgl_materials_envmaps_hdr.html

@@ -57,7 +57,7 @@
 				envScene.add(mainLight);
 
 				var lightMaterial = new THREE.MeshLambertMaterial( { color: 0x000000, emissive: 0xffffff, emissiveIntensity: 10 } );
-				
+
 				var light1 = new THREE.Mesh(geometry, lightMaterial);
 				light1.position.set(-5, 2, 0);
 				light1.scale.set(0.1, 1, 1);
@@ -168,7 +168,7 @@
 				container.appendChild( renderer.domElement );
 
 				//renderer.toneMapping = ReinhardToneMapping;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				stats = new Stats();
 				container.appendChild( stats.dom );

+ 1 - 1
examples/webgl_materials_envmaps_hdr_nodes.html

@@ -154,7 +154,7 @@
 				container.appendChild( renderer.domElement );
 
 				//renderer.toneMapping = THREE.ReinhardToneMapping;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				stats = new Stats();
 				container.appendChild( stats.dom );

+ 1 - 1
examples/webgl_materials_envmaps_pmrem_nodes.html

@@ -142,7 +142,7 @@
 				container.appendChild( renderer.domElement );
 
 				//renderer.toneMapping = THREE.ReinhardToneMapping;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				stats = new Stats();
 				container.appendChild( stats.dom );

+ 1 - 1
examples/webgl_materials_lightmap.html

@@ -110,7 +110,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				// CONTROLS
 

+ 1 - 1
examples/webgl_materials_matcap.html

@@ -43,7 +43,7 @@
 				renderer.toneMapping = THREE.LinearToneMapping;
 			 	renderer.toneMappingExposure = API.exposure;
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				// scene
 				scene = new THREE.Scene();

+ 1 - 0
examples/webgl_materials_nodes.html

@@ -121,6 +121,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.uuid = THREE.Math.generateUUID(); // generate to library
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();

+ 4 - 2
examples/webgl_materials_normalmap.html

@@ -35,6 +35,7 @@
 			import { BleachBypassShader } from './jsm/shaders/BleachBypassShader.js';
 			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
 			import { FXAAShader } from './jsm/shaders/FXAAShader.js';
+			import { GammaCorrectionShader } from './jsm/shaders/GammaCorrectionShader.js';
 
 			var container, stats, loader;
 
@@ -113,7 +114,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
 
 				//
 
@@ -130,10 +130,11 @@
 				var effectBleach = new ShaderPass( BleachBypassShader );
 				var effectColor = new ShaderPass( ColorCorrectionShader );
 				effectFXAA = new ShaderPass( FXAAShader );
+				var gammaCorrection = new ShaderPass( GammaCorrectionShader );
 
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
 
-				effectBleach.uniforms[ 'opacity' ].value = 0.4;
+				effectBleach.uniforms[ 'opacity' ].value = 0.2;
 
 				effectColor.uniforms[ 'powRGB' ].value.set( 1.4, 1.45, 1.45 );
 				effectColor.uniforms[ 'mulRGB' ].value.set( 1.1, 1.1, 1.1 );
@@ -144,6 +145,7 @@
 				composer.addPass( effectFXAA );
 				composer.addPass( effectBleach );
 				composer.addPass( effectColor );
+				composer.addPass( gammaCorrection );
 
 				// EVENTS
 

+ 1 - 1
examples/webgl_materials_normalmap_object_space.html

@@ -33,7 +33,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				// scene
 				scene = new THREE.Scene();

+ 1 - 1
examples/webgl_materials_parallaxmap.html

@@ -82,7 +82,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				//
 

+ 1 - 1
examples/webgl_materials_physical_clearcoat.html

@@ -179,7 +179,7 @@
 
 			//
 
-			renderer.gammaOutput = true;
+			renderer.outputEncoding = THREE.sRGBEncoding;
 
 			//
 

+ 1 - 1
examples/webgl_materials_physical_transparency.html

@@ -61,7 +61,7 @@
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = params.exposure;
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				scene = new THREE.Scene();
 				scene.background = hdrCubeMap;

+ 1 - 1
examples/webgl_materials_reflectivity.html

@@ -155,7 +155,7 @@
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				stats = new Stats();
 				container.appendChild( stats.dom );

+ 1 - 1
examples/webgl_materials_standard.html

@@ -43,7 +43,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.toneMappingExposure = 3;
 

+ 1 - 1
examples/webgl_materials_translucency.html

@@ -67,7 +67,7 @@
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );
-			renderer.gammaOutput = true;
+			renderer.outputEncoding = THREE.sRGBEncoding;
 
 			//
 

+ 1 - 1
examples/webgl_materials_variations_basic.html

@@ -146,7 +146,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				//
 

+ 1 - 1
examples/webgl_materials_variations_lambert.html

@@ -146,7 +146,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				//
 

+ 1 - 1
examples/webgl_materials_variations_phong.html

@@ -153,7 +153,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				//
 

+ 1 - 1
examples/webgl_materials_variations_physical.html

@@ -159,7 +159,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMapping = THREE.Uncharted2ToneMapping;
 				renderer.toneMappingExposure = 0.75;
 

+ 1 - 1
examples/webgl_materials_variations_standard.html

@@ -164,7 +164,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.toneMapping = THREE.Uncharted2ToneMapping;
 				renderer.toneMappingExposure = 0.75;
 

+ 1 - 1
examples/webgl_materials_variations_toon.html

@@ -152,7 +152,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				effect = new OutlineEffect( renderer );
 

+ 1 - 2
examples/webgl_morphtargets_horse.html

@@ -80,8 +80,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webgl_performance_doublesided.html

@@ -93,7 +93,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				container.appendChild( renderer.domElement );
 

+ 7 - 1
examples/webgl_postprocessing_advanced.html

@@ -36,6 +36,7 @@
 			import { VerticalBlurShader } from './jsm/shaders/VerticalBlurShader.js';
 			import { SepiaShader } from './jsm/shaders/SepiaShader.js';
 			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
+			import { GammaCorrectionShader } from './jsm/shaders/GammaCorrectionShader.js';
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
@@ -118,7 +119,6 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
 				renderer.autoClear = false;
-				renderer.gammaOutput = true;
 
 				//
 
@@ -139,6 +139,7 @@
 				var effectBleach = new ShaderPass( shaderBleach );
 				var effectSepia = new ShaderPass( shaderSepia );
 				var effectVignette = new ShaderPass( shaderVignette );
+				var gammaCorrection = new ShaderPass( GammaCorrectionShader );
 				// var effectCopy = new ShaderPass( shaderCopy );
 
 				effectBleach.uniforms[ "opacity" ].value = 0.95;
@@ -206,9 +207,11 @@
 				composer1 = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
 				composer1.addPass( renderScene );
+				composer1.addPass( gammaCorrection );
 				//composer1.addPass( renderMask );
 				composer1.addPass( effectFilmBW );
 				//composer1.addPass( clearMask );
+
 				composer1.addPass( effectVignette );
 
 				//
@@ -216,6 +219,7 @@
 				composer2 = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
 				composer2.addPass( renderScene );
+				composer2.addPass( gammaCorrection );
 				composer2.addPass( effectDotScreen );
 				composer2.addPass( renderMask );
 				composer2.addPass( effectColorify1 );
@@ -230,6 +234,7 @@
 				composer3 = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
 				composer3.addPass( renderScene );
+				composer3.addPass( gammaCorrection );
 				//composer3.addPass( renderMask );
 				composer3.addPass( effectSepia );
 				composer3.addPass( effectFilm );
@@ -241,6 +246,7 @@
 				composer4 = new EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
 				composer4.addPass( renderScene );
+				composer4.addPass( gammaCorrection );
 				//composer4.addPass( renderMask );
 				composer4.addPass( effectBloom );
 				composer4.addPass( effectFilm );

+ 0 - 1
examples/webgl_shaders_tonemapping.html

@@ -324,7 +324,6 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
-				renderer.gammaOutput = false;
 
 				container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webgl_shading_physical.html

@@ -236,7 +236,7 @@
 
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				//
 

+ 1 - 2
examples/webgl_shadowmap.html

@@ -94,8 +94,7 @@
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.autoClear = false;
 
 				//

+ 1 - 1
examples/webgl_shadowmap_pcss.html

@@ -238,7 +238,7 @@
 
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 
 				// controls

+ 1 - 2
examples/webgl_shadowmap_performance.html

@@ -90,8 +90,7 @@
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
-				renderer.gammaFactor = 2.2;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.autoClear = false;
 
 				//

+ 1 - 1
examples/webgl_tonemapping.html

@@ -164,7 +164,7 @@
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
 				composer = new EffectComposer( renderer );
 				composer.setSize( window.innerWidth, window.innerHeight );

+ 1 - 1
examples/webxr_vr_dragging.html

@@ -114,7 +114,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );

+ 1 - 1
examples/webxr_vr_paint.html

@@ -91,7 +91,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 

+ 1 - 1
examples/webxr_vr_sculpt.html

@@ -84,7 +84,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.gammaOutput = true;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 

+ 16 - 0
src/Three.Legacy.js

@@ -7,6 +7,8 @@ import { AudioAnalyser } from './audio/AudioAnalyser.js';
 import { PerspectiveCamera } from './cameras/PerspectiveCamera.js';
 import {
 	FlatShading,
+	GammaEncoding,
+	LinearEncoding,
 	StaticDrawUsage,
 	DynamicDrawUsage,
 	TrianglesDrawMode
@@ -1728,6 +1730,20 @@ Object.defineProperties( WebGLRenderer.prototype, {
 
 			console.warn( 'THREE.WebGLRenderer: .gammaInput has been removed. Please define the correct color spaces for textures via Texture.encoding instead.' );
 
+		}
+	},
+	gammaOutput: {
+		get: function () {
+
+			console.warn( 'THREE.WebGLRenderer: .gammaOutput has been removed. Please use WebGLRenderer.outputEncoding instead.' );
+			return ( this.outputEncoding === GammaEncoding ) ? true : false;
+
+		},
+		set: function ( value ) {
+
+			console.warn( 'THREE.WebGLRenderer: .gammaOutput has been removed. Please use WebGLRenderer.outputEncoding instead.' );
+			this.outputEncoding = ( value === true ) ? GammaEncoding : LinearEncoding;
+
 		}
 	}
 

+ 3 - 3
src/renderers/WebGLRenderer.d.ts

@@ -14,7 +14,7 @@ import { WebGLRenderTarget } from './WebGLRenderTarget';
 import { Object3D } from './../core/Object3D';
 import { Material } from './../materials/Material';
 import { Fog } from './../scenes/Fog';
-import { ToneMapping, ShadowMapType, CullFace } from '../constants';
+import { ToneMapping, ShadowMapType, CullFace, TextureEncoding } from '../constants';
 import { WebXRManager } from '../renderers/webxr/WebXRManager';
 import { RenderTarget } from './webgl/WebGLRenderLists';
 import { Geometry } from './../core/Geometry';
@@ -156,9 +156,9 @@ export class WebGLRenderer implements Renderer {
 	extensions: WebGLExtensions;
 
 	/**
-	 * Default is false.
+	 * Default is LinearEncoding.
 	 */
-	gammaOutput: boolean;
+	outputEncoding: TextureEncoding;
 
 	physicallyCorrectLights: boolean;
 	toneMapping: ToneMapping;

+ 7 - 1
src/renderers/WebGLRenderer.js

@@ -11,6 +11,7 @@ import {
 	HalfFloatType,
 	FloatType,
 	UnsignedByteType,
+	LinearEncoding,
 	LinearToneMapping,
 	BackSide
 } from '../constants.js';
@@ -100,7 +101,7 @@ function WebGLRenderer( parameters ) {
 	// physically based shading
 
 	this.gammaFactor = 2.0;	// for backwards compatibility
-	this.gammaOutput = false;
+	this.outputEncoding = LinearEncoding;
 
 	// physical lights
 
@@ -1539,6 +1540,7 @@ function WebGLRenderer( parameters ) {
 			program = programCache.acquireProgram( material, materialProperties.shader, parameters, programCacheKey );
 
 			materialProperties.program = program;
+			materialProperties.outputEncoding = _this.outputEncoding;
 			material.program = program;
 
 		}
@@ -1672,6 +1674,10 @@ function WebGLRenderer( parameters ) {
 
 				material.needsUpdate = true;
 
+			} else if ( materialProperties.outputEncoding !== _this.outputEncoding ) {
+
+				material.needsUpdate = true;
+
 			}
 
 		}

+ 4 - 11
src/renderers/webgl/WebGLPrograms.js

@@ -2,7 +2,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-import { BackSide, DoubleSide, CubeUVRefractionMapping, CubeUVReflectionMapping, GammaEncoding, LinearEncoding, ObjectSpaceNormalMap, TangentSpaceNormalMap, NoToneMapping } from '../../constants.js';
+import { BackSide, DoubleSide, CubeUVRefractionMapping, CubeUVReflectionMapping, LinearEncoding, ObjectSpaceNormalMap, TangentSpaceNormalMap, NoToneMapping } from '../../constants.js';
 import { WebGLProgram } from './WebGLProgram.js';
 
 function WebGLPrograms( renderer, extensions, capabilities ) {
@@ -87,7 +87,7 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 	}
 
-	function getTextureEncodingFromMap( map, gammaOverrideLinear ) {
+	function getTextureEncodingFromMap( map ) {
 
 		var encoding;
 
@@ -106,13 +106,6 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 		}
 
-		// add backwards compatibility for WebGLRenderer.gammaInput/gammaOutput parameter, should probably be removed at some point.
-		if ( encoding === LinearEncoding && gammaOverrideLinear ) {
-
-			encoding = GammaEncoding;
-
-		}
-
 		return encoding;
 
 	}
@@ -153,7 +146,7 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 			supportsVertexTextures: vertexTextures,
 			numMultiviewViews: numMultiviewViews,
-			outputEncoding: getTextureEncodingFromMap( ( ! currentRenderTarget ) ? null : currentRenderTarget.texture, renderer.gammaOutput ),
+			outputEncoding: ( currentRenderTarget !== null ) ? getTextureEncodingFromMap( currentRenderTarget.texture ) : renderer.outputEncoding,
 			map: !! material.map,
 			mapEncoding: getTextureEncodingFromMap( material.map ),
 			matcap: !! material.matcap,
@@ -276,7 +269,7 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 		array.push( material.onBeforeCompile.toString() );
 
-		array.push( renderer.gammaOutput );
+		array.push( renderer.outputEncoding );
 
 		array.push( renderer.gammaFactor );