Tonemapping: Added Luma-based Reinhard Tonemapping Option

docs/api/en/constants/Renderer.html

@@ -44,6 +44,7 @@ <h2>Tone Mapping</h2>
 		THREE.NoToneMapping
 		THREE.LinearToneMapping
 		THREE.ReinhardToneMapping
+		THREE.ReinhardLumaToneMapping
 		THREE.CineonToneMapping
 		THREE.ACESFilmicToneMapping
 		</code>

docs/api/ko/constants/Renderer.html

@@ -44,6 +44,7 @@ <h2>톤 맵핑</h2>
 		THREE.NoToneMapping
 		THREE.LinearToneMapping
 		THREE.ReinhardToneMapping
+		THREE.ReinhardLumaToneMapping
 		THREE.CineonToneMapping
 		THREE.ACESFilmicToneMapping
 		</code>

docs/api/zh/constants/Renderer.html

@@ -44,6 +44,7 @@ <h2>色调映射</h2>
 		THREE.NoToneMapping
 		THREE.LinearToneMapping
 		THREE.ReinhardToneMapping
+		THREE.ReinhardLumaToneMapping
 		THREE.CineonToneMapping
 		THREE.ACESFilmicToneMapping
 		</code>

editor/js/Sidebar.Project.Renderer.js

@@ -82,7 +82,8 @@ function SidebarProjectRenderer( editor ) {
 		1: 'Linear',
 		2: 'Reinhard',
 		3: 'Cineon',
-		4: 'ACESFilmic'
+		4: 'ACESFilmic',
+		6: 'ReinhardLuma',
 	} ).setWidth( '120px' ).onChange( updateToneMapping );
 	toneMappingSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );
 	toneMappingRow.add( toneMappingSelect );

examples/webgl_tonemapping.html

@@ -36,10 +36,11 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			let mesh, renderer, scene, camera, controls;
+			let texture, helmet, cube, renderer, scene, camera, controls;
 			let gui, guiExposure = null;
 
 			const params = {
+				model: 'helmet',
 				exposure: 1.0,
 				toneMapping: 'ACESFilmic'
 			};
@@ -48,6 +49,7 @@
 				None: THREE.NoToneMapping,
 				Linear: THREE.LinearToneMapping,
 				Reinhard: THREE.ReinhardToneMapping,
+				ReinhardLuma: THREE.ReinhardLumaToneMapping,
 				Cineon: THREE.CineonToneMapping,
 				ACESFilmic: THREE.ACESFilmicToneMapping,
 				Custom: THREE.CustomToneMapping
@@ -98,39 +100,57 @@
 
 				const rgbeLoader = new RGBELoader()
 					.setPath( 'textures/equirectangular/' );
+
+				async function loadGltf( path, file ) {
 
-				const gltfLoader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
+					const gltf = await new GLTFLoader().setPath( path ).loadAsync( file );
+					let result;
+					gltf.scene.traverse( function ( child ) {
 
-				const [ texture, gltf ] = await Promise.all( [
+						if ( child.isMesh ) {
+
+							result = child;
+
+						}
+
+					} );
+
+					return result;
+
+				}
+
+				[ texture, helmet, cube ] = await Promise.all( [
 					rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
-					gltfLoader.loadAsync( 'DamagedHelmet.gltf' ),
+					loadGltf( 'models/gltf/DamagedHelmet/glTF/', 'DamagedHelmet.gltf' ),
+					loadGltf( 'models/gltf/', 'Emissive HSL cube.glb' ),
 				] );
 
+				scene.add( helmet );
+				scene.add( cube );
+				cube.visible = false;
+
 				// environment
 
 				texture.mapping = THREE.EquirectangularReflectionMapping;
 
 				scene.background = texture;
 				scene.environment = texture;
 
-				// model
-
-				gltf.scene.traverse( function ( child ) {
-
-					if ( child.isMesh ) {
+				render();
 
-						mesh = child;
-						scene.add( mesh );
+				window.addEventListener( 'resize', onWindowResize );
 
-					}
+				gui = new GUI();
 
-				} );
+				gui.add( params, 'model', [ 'helmet', 'cube' ] )
 
-				render();
+					.onChange( function () {
 
-				window.addEventListener( 'resize', onWindowResize );
+						helmet.visible = params.model === 'helmet';
+						cube.visible = params.model === 'cube';
+						render();
 
-				gui = new GUI();
+					} );
 
 				gui.add( params, 'toneMapping', Object.keys( toneMappingOptions ) )
 

src/constants.js

@@ -53,6 +53,7 @@ export const ReinhardToneMapping = 2;
 export const CineonToneMapping = 3;
 export const ACESFilmicToneMapping = 4;
 export const CustomToneMapping = 5;
+export const ReinhardLumaToneMapping = 6;
 
 export const UVMapping = 300;
 export const CubeReflectionMapping = 301;

src/renderers/shaders/ShaderChunk/common.glsl.js

@@ -87,6 +87,9 @@ mat3 transposeMat3( const in mat3 m ) {
 
 }
 
+#ifndef linearToRelativeLuminance
+// <tonemapping_pars_fragment> may have defined linearToRelativeLuminance() already
+#define linearToRelativeLuminance linearToRelativeLuminance
 // https://en.wikipedia.org/wiki/Relative_luminance
 float linearToRelativeLuminance( const in vec3 color ) {
 
@@ -95,6 +98,7 @@ float linearToRelativeLuminance( const in vec3 color ) {
 	return dot( weights, color.rgb );
 
 }
+#endif
 
 bool isPerspectiveMatrix( mat4 m ) {
 

src/renderers/shaders/ShaderChunk/tonemapping_pars_fragment.glsl.js

@@ -4,6 +4,19 @@ export default /* glsl */`
 #define saturate( a ) clamp( a, 0.0, 1.0 )
 #endif
 
+#ifndef linearToRelativeLuminance
+// <common> may have defined linearToRelativeLuminance() already
+#define linearToRelativeLuminance linearToRelativeLuminance
+// https://en.wikipedia.org/wiki/Relative_luminance
+float linearToRelativeLuminance( const in vec3 color ) {
+
+	vec3 weights = vec3( 0.2126, 0.7152, 0.0722 );
+
+	return dot( weights, color.rgb );
+
+}
+#endif
+
 uniform float toneMappingExposure;
 
 // exposure only
@@ -21,6 +34,14 @@ vec3 ReinhardToneMapping( vec3 color ) {
 
 }
 
+// source: https://64.github.io/tonemapping/
+vec3 ReinhardLumaToneMapping( vec3 color ) {
+
+	color *= toneMappingExposure;
+	return saturate( color / ( 1. + linearToRelativeLuminance( color ) ) );
+
+}
+
 // source: http://filmicworlds.com/blog/filmic-tonemapping-operators/
 vec3 OptimizedCineonToneMapping( vec3 color ) {
 

src/renderers/webgl/WebGLProgram.js

@@ -1,7 +1,7 @@
 import { WebGLUniforms } from './WebGLUniforms.js';
 import { WebGLShader } from './WebGLShader.js';
 import { ShaderChunk } from '../shaders/ShaderChunk.js';
-import { NoToneMapping, AddOperation, MixOperation, MultiplyOperation, CubeRefractionMapping, CubeUVReflectionMapping, CubeReflectionMapping, PCFSoftShadowMap, PCFShadowMap, VSMShadowMap, ACESFilmicToneMapping, CineonToneMapping, CustomToneMapping, ReinhardToneMapping, LinearToneMapping, sRGBEncoding, LinearEncoding, GLSL3 } from '../../constants.js';
+import { NoToneMapping, AddOperation, MixOperation, MultiplyOperation, CubeRefractionMapping, CubeUVReflectionMapping, CubeReflectionMapping, PCFSoftShadowMap, PCFShadowMap, VSMShadowMap, ACESFilmicToneMapping, CineonToneMapping, CustomToneMapping, ReinhardToneMapping, ReinhardLumaToneMapping, LinearToneMapping, sRGBEncoding, LinearEncoding, GLSL3 } from '../../constants.js';
 
 let programIdCount = 0;
 
@@ -84,6 +84,10 @@ function getToneMappingFunction( functionName, toneMapping ) {
 			toneMappingName = 'Reinhard';
 			break;
 
+		case ReinhardLumaToneMapping:
+			toneMappingName = 'ReinhardLuma';
+			break;
+
 		case CineonToneMapping:
 			toneMappingName = 'OptimizedCineon';
 			break;

test/unit/src/constants.tests.js

@@ -58,6 +58,7 @@ export default QUnit.module( 'Constants', () => {
 		assert.equal( Constants.ReinhardToneMapping, 2, 'ReinhardToneMapping is equal to 2' );
 		assert.equal( Constants.CineonToneMapping, 3, 'CineonToneMapping is equal to 3' );
 		assert.equal( Constants.ACESFilmicToneMapping, 4, 'ACESFilmicToneMapping is equal to 4' );
+		assert.equal( Constants.ReinhardLumaToneMapping, 6, 'ReinhardLumaToneMapping is equal to 6' );
 		assert.equal( Constants.UVMapping, 300, 'UVMapping is equal to 300' );
 		assert.equal( Constants.CubeReflectionMapping, 301, 'CubeReflectionMapping is equal to 301' );
 		assert.equal( Constants.CubeRefractionMapping, 302, 'CubeRefractionMapping is equal to 302' );