diff --git a/examples/jsm/math/ColorSpaces.js b/examples/jsm/math/ColorSpaces.js index 9b2cb5b3be0e98..1f588fe0a58f3d 100644 --- a/examples/jsm/math/ColorSpaces.js +++ b/examples/jsm/math/ColorSpaces.js @@ -1,4 +1,4 @@ -import { LinearTransfer, Matrix3, SRGBTransfer } from 'three'; +import { LinearTransfer, Matrix3, SRGBTransfer, SRGBColorSpace, ColorManagement } from 'three'; /** @module ColorSpaces */ @@ -114,6 +114,24 @@ export const LinearRec2020ColorSpaceImpl = { luminanceCoefficients: REC2020_LUMINANCE_COEFFICIENTS, }; +/** + * Extended-sRGB color space. + * + * @type {string} + * @constant + */ +export const ExtendedSRGBColorSpace = 'extended-srgb'; + +/** + * Implementation object for the Extended-sRGB color space. + * + * @type {module:ColorSpaces~ColorSpaceImpl} + * @constant + */ +export const ExtendedSRGBColorSpaceImpl = { + ...ColorManagement.spaces[ SRGBColorSpace ], + outputColorSpaceConfig: { drawingBufferColorSpace: SRGBColorSpace, toneMappingMode: 'extended' } +}; /** * An object holding the color space implementation. diff --git a/examples/webgpu_tsl_vfx_linkedparticles.html b/examples/webgpu_tsl_vfx_linkedparticles.html index f44c1c53302e7d..8f1b629c57e75d 100644 --- a/examples/webgpu_tsl_vfx_linkedparticles.html +++ b/examples/webgpu_tsl_vfx_linkedparticles.html @@ -35,6 +35,10 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; import WebGPU from 'three/addons/capabilities/WebGPU.js'; + import { ExtendedSRGBColorSpace, ExtendedSRGBColorSpaceImpl } from 'three/addons/math/ColorSpaces.js'; + + THREE.ColorManagement.define( { [ ExtendedSRGBColorSpace ]: ExtendedSRGBColorSpaceImpl } ); + let camera, scene, renderer, postProcessing, controls, timer, light; let updateParticles, spawnParticles; // TSL compute nodes @@ -90,12 +94,15 @@ // renderer - renderer = new THREE.WebGPURenderer( { antialias: true } ); + renderer = new THREE.WebGPURenderer( { antialias: true, outputType: THREE.HalfFloatType } ); renderer.setClearColor( 0x14171a ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animate ); - renderer.toneMapping = THREE.ACESFilmicToneMapping; + + renderer.outputColorSpace = ExtendedSRGBColorSpace; + // TODO: Add support for tone mapping #29573 + // renderer.toneMapping = THREE.ACESFilmicToneMapping; document.body.appendChild( renderer.domElement ); // TSL function diff --git a/src/math/ColorManagement.js b/src/math/ColorManagement.js index a7717648986c2a..f4a5576078ee38 100644 --- a/src/math/ColorManagement.js +++ b/src/math/ColorManagement.js @@ -34,7 +34,7 @@ function createColorManagement() { * - luminanceCoefficients: RGB luminance coefficients * * Optional: - * - outputColorSpaceConfig: { drawingBufferColorSpace: ColorSpace } + * - outputColorSpaceConfig: { drawingBufferColorSpace: ColorSpace, toneMappingMode: 'extended' | 'standard' } * - workingColorSpaceConfig: { unpackColorSpace: ColorSpace } * * Reference: @@ -103,6 +103,12 @@ function createColorManagement() { }, + getToneMappingMode: function ( colorSpace ) { + + return this.spaces[ colorSpace ].outputColorSpaceConfig.toneMappingMode || 'standard'; + + }, + getLuminanceCoefficients: function ( target, colorSpace = this.workingColorSpace ) { return target.fromArray( this.spaces[ colorSpace ].luminanceCoefficients ); diff --git a/src/renderers/webgpu/WebGPUBackend.js b/src/renderers/webgpu/WebGPUBackend.js index 3e5baf9937dfc0..6427973db29908 100644 --- a/src/renderers/webgpu/WebGPUBackend.js +++ b/src/renderers/webgpu/WebGPUBackend.js @@ -16,6 +16,7 @@ import WebGPUTextureUtils from './utils/WebGPUTextureUtils.js'; import { WebGPUCoordinateSystem } from '../../constants.js'; import WebGPUTimestampQueryPool from './utils/WebGPUTimestampQueryPool.js'; import { warnOnce } from '../../utils.js'; +import { ColorManagement } from '../../math/ColorManagement.js'; /** * A backend implementation targeting WebGPU. @@ -238,15 +239,20 @@ class WebGPUBackend extends Backend { const alphaMode = parameters.alpha ? 'premultiplied' : 'opaque'; - this.trackTimestamp = this.trackTimestamp && this.hasFeature( GPUFeatureName.TimestampQuery ); + const toneMappingMode = ColorManagement.getToneMappingMode( this.renderer.outputColorSpace ); this.context.configure( { device: this.device, format: this.utils.getPreferredCanvasFormat(), usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC, - alphaMode: alphaMode + alphaMode: alphaMode, + toneMapping: { + mode: toneMappingMode + } } ); + this.trackTimestamp = this.trackTimestamp && this.hasFeature( GPUFeatureName.TimestampQuery ); + this.updateSize(); }