WebGLRenderer: Remove inline sRGB decode. (mrdoob#23129)

* WebGLRenderer: Remove inline sRGB decode. * Update WebGLTextures.js * VideoTexture: Use inline sRGB decode. * WebGLTexture: Fix video textures with WebGL 1.
chubei-oppen · Jan 4, 2022 · 05fc79c · 05fc79c
1 parent 5655fbe
commit 05fc79c
Show file tree

Hide file tree

Showing 26 changed files with 208 additions and 214 deletions.
diff --git a/examples/jsm/loaders/GLTFLoader.js b/examples/jsm/loaders/GLTFLoader.js
@@ -1478,7 +1478,6 @@ class GLTFMeshStandardSGMaterial extends MeshStandardMaterial {
 			'vec3 specularFactor = specular;',
 			'#ifdef USE_SPECULARMAP',
 			'	vec4 texelSpecular = texture2D( specularMap, vUv );',
-			'	texelSpecular = sRGBToLinear( texelSpecular );',
 			'	// reads channel RGB, compatible with a glTF Specular-Glossiness (RGBA) texture',
 			'	specularFactor *= texelSpecular.rgb;',
 			'#endif'

diff --git a/examples/jsm/nodes/utils/ColorSpaceNode.js b/examples/jsm/nodes/utils/ColorSpaceNode.js
@@ -57,9 +57,11 @@ class ColorSpaceNode extends TempNode {
 
 	}
 
-	fromDecoding( encoding ) {
+	fromDecoding() {
 
-		const components = ColorSpaceNode.getEncodingComponents( encoding );
+		// TODO: Remove fromDecoding()
+
+		const components = ColorSpaceNode.getEncodingComponents( LinearEncoding );
 
 		this.method = components[ 0 ] + 'ToLinear';
 		this.factor = components[ 1 ];
@@ -106,14 +108,6 @@ ColorSpaceNode.Nodes = ( function () {
 		}`
 	);
 
-	const sRGBToLinear = new FunctionNode( /* glsl */`
-		vec4 sRGBToLinear( in vec4 value ) {
-
-			return vec4( mix( pow( value.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.w );
-
-		}`
-	);
-
 	const LinearTosRGB = new FunctionNode( /* glsl */`
 		vec4 LinearTosRGB( in vec4 value ) {
 
@@ -124,15 +118,12 @@ ColorSpaceNode.Nodes = ( function () {
 
 	return {
 		LinearToLinear: LinearToLinear,
-		sRGBToLinear: sRGBToLinear,
 		LinearTosRGB: LinearTosRGB
 	};
 
 } )();
 
 ColorSpaceNode.LINEAR_TO_LINEAR = 'LinearToLinear';
-
-ColorSpaceNode.SRGB_TO_LINEAR = 'sRGBToLinear';
 ColorSpaceNode.LINEAR_TO_SRGB = 'LinearTosRGB';
 
 ColorSpaceNode.getEncodingComponents = function ( encoding ) {

diff --git a/examples/jsm/renderers/nodes/display/ColorSpaceNode.js b/examples/jsm/renderers/nodes/display/ColorSpaceNode.js
@@ -1,7 +1,7 @@
 import TempNode from '../core/Node.js';
 import { ShaderNode,
 	vec3,
-	pow, mul, add, sub, mix, join,
+	pow, mul, sub, mix, join,
 	lessThanEqual } from '../ShaderNode.js';
 
 import { LinearEncoding, sRGBEncoding } from '../../../../../build/three.module.js';
@@ -12,22 +12,6 @@ export const LinearToLinear = new ShaderNode( ( inputs ) => {
 
 } );
 
-export const sRGBToLinear = new ShaderNode( ( inputs ) => {
-
-	const { value } = inputs;
-
-	const rgb = value.rgb;
-
-	const a = pow( add( mul( rgb, 0.9478672986 ), vec3( 0.0521327014 ) ), vec3( 2.4 ) );
-	const b = mul( rgb, 0.0773993808 );
-	const factor = vec3( lessThanEqual( rgb, vec3( 0.04045 ) ) );
-
-	const rgbResult = mix( a, b, factor );
-
-	return join( rgbResult.r, rgbResult.g, rgbResult.b, value.a );
-
-} );
-
 export const LinearTosRGB = new ShaderNode( ( inputs ) => {
 
 	const { value } = inputs;
@@ -46,7 +30,6 @@ export const LinearTosRGB = new ShaderNode( ( inputs ) => {
 
 const EncodingLib = {
 	LinearToLinear,
-	sRGBToLinear,
 	LinearTosRGB
 };
 
@@ -66,8 +49,6 @@ function getEncodingComponents( encoding ) {
 class ColorSpaceNode extends TempNode {
 
 	static LINEAR_TO_LINEAR = 'LinearToLinear';
-
-	static SRGB_TO_LINEAR = 'sRGBToLinear';
 	static LINEAR_TO_SRGB = 'LinearTosRGB';
 
 	constructor( method, node ) {
@@ -92,9 +73,11 @@ class ColorSpaceNode extends TempNode {
 
 	}
 
-	fromDecoding( encoding ) {
+	fromDecoding() {
 
-		const components = getEncodingComponents( encoding );
+		// TODO: Remove fromDecoding()
+
+		const components = getEncodingComponents( LinearEncoding );
 
 		this.method = components[ 0 ] + 'ToLinear';
 		this.factor = components[ 1 ];

diff --git a/examples/jsm/utils/RoughnessMipmapper.js b/examples/jsm/utils/RoughnessMipmapper.js
@@ -184,8 +184,6 @@ function _getMipmapMaterial() {
 
 			#define ENVMAP_TYPE_CUBE_UV
 
-			vec4 envMapTexelToLinear( vec4 a ) { return a; }
-
 			#include <cube_uv_reflection_fragment>
 
 			float roughnessToVariance( float roughness ) {

diff --git a/examples/webgl_lightprobe_cubecamera.html b/examples/webgl_lightprobe_cubecamera.html
@@ -43,7 +43,6 @@
 				camera.position.set( 0, 0, 30 );
 
 				const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 256, {
-					encoding: THREE.sRGBEncoding, // since gamma is applied during rendering, the cubeCamera renderTarget texture encoding must be sRGBEncoding
 					format: THREE.RGBAFormat
 				} );
 

diff --git a/examples/webgl_materials_nodes.html b/examples/webgl_materials_nodes.html
@@ -40,13 +40,13 @@
 			const library = {};
 			let serialized = false;
 			const textures = {
-				brick: { url: 'textures/brick_diffuse.jpg' },
-				grass: { url: 'textures/terrain/grasslight-big.jpg' },
-				grassNormal: { url: 'textures/terrain/grasslight-big-nm.jpg' },
-				decalDiffuse: { url: 'textures/decal/decal-diffuse.png' },
-				decalNormal: { url: 'textures/decal/decal-normal.jpg' },
-				cloud: { url: 'textures/lava/cloud.png' },
-				spherical: { url: 'textures/envmap.png' }
+				brick: { url: 'textures/brick_diffuse.jpg', encoding: THREE.sRGBEncoding },
+				grass: { url: 'textures/terrain/grasslight-big.jpg', encoding: THREE.sRGBEncoding },
+				grassNormal: { url: 'textures/terrain/grasslight-big-nm.jpg', encoding: THREE.LinearEncoding },
+				decalDiffuse: { url: 'textures/decal/decal-diffuse.png', encoding: THREE.sRGBEncoding },
+				decalNormal: { url: 'textures/decal/decal-normal.jpg', encoding: THREE.LinearEncoding },
+				cloud: { url: 'textures/lava/cloud.png', encoding: THREE.sRGBEncoding },
+				spherical: { url: 'textures/envmap.png', encoding: THREE.sRGBEncoding }
 			};
 
 			const param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'mesh-standard' };
@@ -59,6 +59,7 @@
 
 					texture = textures[ name ].texture = new THREE.TextureLoader().load( textures[ name ].url );
 					texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+					texture.encoding = textures[ name ].encoding;
 
 					library[ texture.uuid ] = texture;
 
@@ -187,7 +188,7 @@
 					'basic / spherical-reflection': 'spherical-reflection',
 					'basic / standard': 'standard',
 					'basic / uv-transform': 'uv-transform',
-			
+
 					'adv / bias': 'bias',
 					'adv / camera-depth': 'camera-depth',
 					'adv / caustic': 'caustic',
@@ -215,7 +216,7 @@
 					'node / normal': 'node-normal',
 					'node / position': 'node-position',
 					'node / reflect': 'node-reflect',
-			
+
 					'misc / basic-material': 'basic-material',
 					'misc / custom-attribute': 'custom-attribute',
 					'misc / firefly': 'firefly',

diff --git a/src/constants.js b/src/constants.js
@@ -177,3 +177,6 @@ export const StreamCopyUsage = 35042;
 
 export const GLSL1 = '100';
 export const GLSL3 = '300 es';
+
+export const _SRGBFormat = 1034; // fallback for WebGL 1
+export const _SRGBAFormat = 1035; // fallback for WebGL 1
diff --git a/src/extras/ImageUtils.js b/src/extras/ImageUtils.js
@@ -1,4 +1,5 @@
 import { createElementNS } from '../utils.js';
+import { SRGBToLinear } from '../math/Color.js';
 
 let _canvas;
 
@@ -61,6 +62,68 @@ class ImageUtils {
 
 	}
 
+	static sRGBToLinear( image ) {
+
+		if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
+			( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
+			( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {
+
+			const canvas = createElementNS( 'canvas' );
+
+			canvas.width = image.width;
+			canvas.height = image.height;
+
+			const context = canvas.getContext( '2d' );
+			context.drawImage( image, 0, 0, image.width, image.height );
+
+			const imageData = context.getImageData( 0, 0, image.width, image.height );
+			const data = imageData.data;
+
+			for ( let i = 0; i < data.length; i ++ ) {
+
+				data[ i ] = SRGBToLinear( data[ i ] / 255 ) * 255;
+
+			}
+
+			context.putImageData( imageData, 0, 0 );
+
+			return canvas;
+
+		} else if ( image.data ) {
+
+			const data = image.data.slice( 0 );
+
+			for ( let i = 0; i < data.length; i ++ ) {
+
+				if ( data instanceof Uint8Array || data instanceof Uint8ClampedArray ) {
+
+					data[ i ] = Math.floor( SRGBToLinear( data[ i ] / 255 ) * 255 );
+
+				} else {
+
+					// assuming float
+
+					data[ i ] = SRGBToLinear( data[ i ] );
+
+				}
+
+			}
+
+			return {
+				data: data,
+				width: image.width,
+				height: image.height
+			};
+
+		} else {
+
+			console.warn( 'THREE.ImageUtils.sRGBToLinear(): Unsupported image type. No color space conversion applied.' );
+			return image;
+
+		}
+
+	}
+
 }
 
 export { ImageUtils };