From 3fc506449972824a83e42b743281609129a6bdf8 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Sat, 1 Jan 2022 06:54:52 -0600 Subject: [PATCH] fix: remove depreciated encodings with r136 (#108) * fix: remove RGBM7Encoding and RGBM16Encoding Mirrors https://github.com/mrdoob/three.js/pull/23046 * fix(ColorSpaceNode): remove RGBDEncoding Mirrors https://github.com/mrdoob/three.js/pull/23049 * fix: remove RGBEEncoding and RGBEFormat * fix: remove gammaFactor and GammaEncoding Mirrors https://github.com/mrdoob/three.js/pull/23080 * fix: unmangle typo in RGBMLoader --- src/loaders/HDRCubeTextureLoader.js | 12 --- src/loaders/RGBELoader.js | 28 +----- src/loaders/RGBMLoader.js | 52 ++++++++++- src/nodes/core/NodeBuilder.js | 4 +- src/nodes/utils/ColorSpaceNode.js | 134 +-------------------------- src/shaders/GammaCorrectionShader.ts | 2 +- 6 files changed, 52 insertions(+), 180 deletions(-) diff --git a/src/loaders/HDRCubeTextureLoader.js b/src/loaders/HDRCubeTextureLoader.js index 75c29a3..4e17659 100644 --- a/src/loaders/HDRCubeTextureLoader.js +++ b/src/loaders/HDRCubeTextureLoader.js @@ -7,11 +7,7 @@ import { LinearEncoding, LinearFilter, Loader, - NearestFilter, - RGBAFormat, - RGBEEncoding, RGBFormat, - UnsignedByteType, } from 'three' import { RGBELoader } from '../loaders/RGBELoader.js' @@ -40,14 +36,6 @@ class HDRCubeTextureLoader extends Loader { texture.type = this.type switch (texture.type) { - case UnsignedByteType: - texture.encoding = RGBEEncoding - texture.format = RGBAFormat - texture.minFilter = NearestFilter - texture.magFilter = NearestFilter - texture.generateMipmaps = false - break - case FloatType: texture.encoding = LinearEncoding texture.format = RGBFormat diff --git a/src/loaders/RGBELoader.js b/src/loaders/RGBELoader.js index 1404bad..ac29e70 100644 --- a/src/loaders/RGBELoader.js +++ b/src/loaders/RGBELoader.js @@ -1,16 +1,4 @@ -import { - DataTextureLoader, - DataUtils, - FloatType, - HalfFloatType, - LinearEncoding, - LinearFilter, - NearestFilter, - RGBEEncoding, - RGBEFormat, - RGBFormat, - UnsignedByteType, -} from 'three' +import { DataTextureLoader, DataUtils, FloatType, HalfFloatType, LinearEncoding, LinearFilter, RGBFormat } from 'three' // https://github.com/mrdoob/three.js/issues/5552 // http://en.wikipedia.org/wiki/RGBE_image_format @@ -310,12 +298,6 @@ class RGBELoader extends DataTextureLoader { let numElements switch (this.type) { - case UnsignedByteType: - data = image_rgba_data - format = RGBEFormat // handled as THREE.RGBAFormat in shaders - type = UnsignedByteType - break - case FloatType: numElements = (image_rgba_data.length / 4) * 3 const floatArray = new Float32Array(numElements) @@ -371,14 +353,6 @@ class RGBELoader extends DataTextureLoader { load(url, onLoad, onProgress, onError) { function onLoadCallback(texture, texData) { switch (texture.type) { - case UnsignedByteType: - texture.encoding = RGBEEncoding - texture.minFilter = NearestFilter - texture.magFilter = NearestFilter - texture.generateMipmaps = false - texture.flipY = true - break - case FloatType: texture.encoding = LinearEncoding texture.minFilter = LinearFilter diff --git a/src/loaders/RGBMLoader.js b/src/loaders/RGBMLoader.js index ad031bd..94afdd7 100644 --- a/src/loaders/RGBMLoader.js +++ b/src/loaders/RGBMLoader.js @@ -1,6 +1,23 @@ -import { DataTextureLoader, UnsignedByteType, RGBAFormat, LinearFilter, CubeTexture, RGBM7Encoding } from 'three' +import { DataTextureLoader, RGBAFormat, LinearFilter, CubeTexture, HalfFloatType, DataUtils } from 'three' class RGBMLoader extends DataTextureLoader { + constructor(manager) { + super(manager) + + this.type = HalfFloatType + this.maxRange = 7 // more information about this property at https://iwasbeingirony.blogspot.com/2010/06/difference-between-rgbm-and-rgbd.html + } + + setDataType(value) { + this.type = value + return this + } + + setMaxRange(value) { + this.maxRange = value + return this + } + loadCubemap(urls, onLoad, onProgress, onError) { const texture = new CubeTexture() @@ -31,7 +48,7 @@ class RGBMLoader extends DataTextureLoader { loadTexture(i) } - texture.encoding = RGBM7Encoding + texture.type = this.type texture.format = RGBAFormat texture.minFilter = LinearFilter texture.generateMipmaps = false @@ -43,14 +60,39 @@ class RGBMLoader extends DataTextureLoader { const img = UPNG.decode(buffer) const rgba = UPNG.toRGBA8(img)[0] + const data = new Uint8Array(rgba) + const size = img.width * img.height * 4 + + const output = this.type === HalfFloatType ? new Uint16Array(size) : new Float32Array(size) + + // decode RGBM + + for (let i = 0; i < data.length; i += 4) { + const r = data[i + 0] / 255 + const g = data[i + 1] / 255 + const b = data[i + 2] / 255 + const a = data[i + 3] / 255 + + if (this.type === HalfFloatType) { + output[i + 0] = DataUtils.toHalfFloat(Math.min(r * a * this.maxRange, 65504)) + output[i + 1] = DataUtils.toHalfFloat(Math.min(g * a * this.maxRange, 65504)) + output[i + 2] = DataUtils.toHalfFloat(Math.min(b * a * this.maxRange, 65504)) + output[i + 3] = DataUtils.toHalfFloat(1) + } else { + output[i + 0] = r * a * this.maxRange + output[i + 1] = g * a * this.maxRange + output[i + 2] = b * a * this.maxRange + output[i + 3] = 1 + } + } + return { width: img.width, height: img.height, - data: new Uint8Array(rgba), + data: output, format: RGBAFormat, - type: UnsignedByteType, + type: this.type, flipY: true, - encoding: RGBM7Encoding, } } } diff --git a/src/nodes/core/NodeBuilder.js b/src/nodes/core/NodeBuilder.js index e15080e..56f2991 100644 --- a/src/nodes/core/NodeBuilder.js +++ b/src/nodes/core/NodeBuilder.js @@ -4,7 +4,7 @@ import { CubeUVReflectionMapping, CubeUVRefractionMapping, LinearEncoding, - GammaEncoding, + sRGBEncoding, } from 'three' import { NodeUniform } from './NodeUniform' @@ -775,7 +775,7 @@ NodeBuilder.prototype = { } if (encoding === LinearEncoding && this.context.gamma) { - encoding = GammaEncoding + encoding = sRGBEncoding } return encoding diff --git a/src/nodes/utils/ColorSpaceNode.js b/src/nodes/utils/ColorSpaceNode.js index 7ca8593..d81494f 100644 --- a/src/nodes/utils/ColorSpaceNode.js +++ b/src/nodes/utils/ColorSpaceNode.js @@ -1,18 +1,8 @@ -import { - GammaEncoding, - LinearEncoding, - RGBEEncoding, - RGBM7Encoding, - RGBM16Encoding, - RGBDEncoding, - sRGBEncoding, -} from 'three' +import { LinearEncoding, sRGBEncoding } from 'three' import { TempNode } from '../core/TempNode' import { ConstNode } from '../core/ConstNode' -import { FloatNode } from '../inputs/FloatNode' import { FunctionNode } from '../core/FunctionNode' -import { ExpressionNode } from '../core/ExpressionNode' function ColorSpaceNode(input, method) { TempNode.call(this, 'v4') @@ -23,30 +13,8 @@ function ColorSpaceNode(input, method) { } ColorSpaceNode.Nodes = (function () { - // For a discussion of what this is, please read this: http://lousodrome.net/blog/light/2013/05/26/gamma-correct-and-hdr-rendering-in-a-32-bits-buffer/ - var LinearToLinear = new FunctionNode(['vec4 LinearToLinear( in vec4 value ) {', ' return value;', '}'].join('\n')) - var GammaToLinear = new FunctionNode( - [ - 'vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {', - - ' return vec4( pow( value.xyz, vec3( gammaFactor ) ), value.w );', - - '}', - ].join('\n'), - ) - - var LinearToGamma = new FunctionNode( - [ - 'vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {', - - ' return vec4( pow( value.xyz, vec3( 1.0 / gammaFactor ) ), value.w );', - - '}', - ].join('\n'), - ) - var sRGBToLinear = new FunctionNode( [ 'vec4 sRGBToLinear( in vec4 value ) {', @@ -67,79 +35,6 @@ ColorSpaceNode.Nodes = (function () { ].join('\n'), ) - var RGBEToLinear = new FunctionNode( - [ - 'vec4 RGBEToLinear( in vec4 value ) {', - - ' return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );', - - '}', - ].join('\n'), - ) - - var LinearToRGBE = new FunctionNode( - [ - 'vec4 LinearToRGBE( in vec4 value ) {', - - ' float maxComponent = max( max( value.r, value.g ), value.b );', - ' float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );', - ' return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );', - // return vec4( value.brg, ( 3.0 + 128.0 ) / 256.0 ); - - '}', - ].join('\n'), - ) - - // reference: http://iwasbeingirony.blogspot.ca/2010/06/difference-between-rgbm-and-rgbd.html - - var RGBMToLinear = new FunctionNode( - [ - 'vec3 RGBMToLinear( in vec4 value, in float maxRange ) {', - - ' return vec4( value.xyz * value.w * maxRange, 1.0 );', - - '}', - ].join('\n'), - ) - - var LinearToRGBM = new FunctionNode( - [ - 'vec3 LinearToRGBM( in vec4 value, in float maxRange ) {', - - ' float maxRGB = max( value.x, max( value.g, value.b ) );', - ' float M = clamp( maxRGB / maxRange, 0.0, 1.0 );', - ' M = ceil( M * 255.0 ) / 255.0;', - ' return vec4( value.rgb / ( M * maxRange ), M );', - - '}', - ].join('\n'), - ) - - // reference: http://iwasbeingirony.blogspot.ca/2010/06/difference-between-rgbm-and-rgbd.html - - var RGBDToLinear = new FunctionNode( - [ - 'vec3 RGBDToLinear( in vec4 value, in float maxRange ) {', - - ' return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );', - - '}', - ].join('\n'), - ) - - var LinearToRGBD = new FunctionNode( - [ - 'vec3 LinearToRGBD( in vec4 value, in float maxRange ) {', - - ' float maxRGB = max( value.x, max( value.g, value.b ) );', - ' float D = max( maxRange / maxRGB, 1.0 );', - ' D = clamp( floor( D ) / 255.0, 0.0, 1.0 );', - ' return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );', - - '}', - ].join('\n'), - ) - // LogLuv reference: http://graphicrants.blogspot.ca/2009/04/rgbm-color-encoding.html // M matrix, for encoding @@ -191,16 +86,8 @@ ColorSpaceNode.Nodes = (function () { return { LinearToLinear: LinearToLinear, - GammaToLinear: GammaToLinear, - LinearToGamma: LinearToGamma, sRGBToLinear: sRGBToLinear, LinearTosRGB: LinearTosRGB, - RGBEToLinear: RGBEToLinear, - LinearToRGBE: LinearToRGBE, - RGBMToLinear: RGBMToLinear, - LinearToRGBM: LinearToRGBM, - RGBDToLinear: RGBDToLinear, - LinearToRGBD: LinearToRGBD, cLogLuvM: cLogLuvM, LinearToLogLuv: LinearToLogLuv, cLogLuvInverseM: cLogLuvInverseM, @@ -210,21 +97,12 @@ ColorSpaceNode.Nodes = (function () { ColorSpaceNode.LINEAR_TO_LINEAR = 'LinearToLinear' -ColorSpaceNode.GAMMA_TO_LINEAR = 'GammaToLinear' -ColorSpaceNode.LINEAR_TO_GAMMA = 'LinearToGamma' - ColorSpaceNode.SRGB_TO_LINEAR = 'sRGBToLinear' ColorSpaceNode.LINEAR_TO_SRGB = 'LinearTosRGB' ColorSpaceNode.RGBE_TO_LINEAR = 'RGBEToLinear' ColorSpaceNode.LINEAR_TO_RGBE = 'LinearToRGBE' -ColorSpaceNode.RGBM_TO_LINEAR = 'RGBMToLinear' -ColorSpaceNode.LINEAR_TO_RGBM = 'LinearToRGBM' - -ColorSpaceNode.RGBD_TO_LINEAR = 'RGBDToLinear' -ColorSpaceNode.LINEAR_TO_RGBD = 'LinearToRGBD' - ColorSpaceNode.LINEAR_TO_LOG_LUV = 'LinearToLogLuv' ColorSpaceNode.LOG_LUV_TO_LINEAR = 'LogLuvToLinear' @@ -234,16 +112,6 @@ ColorSpaceNode.getEncodingComponents = function (encoding) { return ['Linear'] case sRGBEncoding: return ['sRGB'] - case RGBEEncoding: - return ['RGBE'] - case RGBM7Encoding: - return ['RGBM', new FloatNode(7.0).setReadonly(true)] - case RGBM16Encoding: - return ['RGBM', new FloatNode(16.0).setReadonly(true)] - case RGBDEncoding: - return ['RGBD', new FloatNode(256.0).setReadonly(true)] - case GammaEncoding: - return ['Gamma', new ExpressionNode('float( GAMMA_FACTOR )', 'f')] } } diff --git a/src/shaders/GammaCorrectionShader.ts b/src/shaders/GammaCorrectionShader.ts index f782829..faa9ae9 100644 --- a/src/shaders/GammaCorrectionShader.ts +++ b/src/shaders/GammaCorrectionShader.ts @@ -37,7 +37,7 @@ const GammaCorrectionShader: GammaCorrectionShaderImpl = { ' vec4 tex = texture2D( tDiffuse, vUv );', - ' gl_FragColor = LinearTosRGB( tex );', // optional: LinearToGamma( tex, float( GAMMA_FACTOR ) ); + ' gl_FragColor = LinearTosRGB( tex );', '}', ].join('\n'),