diff --git a/sample/particles/main.ts b/sample/particles/main.ts index e718fd91..14b47b44 100644 --- a/sample/particles/main.ts +++ b/sample/particles/main.ts @@ -24,13 +24,16 @@ const context = canvas.getContext('webgpu') as GPUCanvasContext; const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; -const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); - -context.configure({ - device, - format: presentationFormat, - alphaMode: 'premultiplied', -}); +const presentationFormat = 'rgba16float'; + +function configureContext() { + context.configure({ + device, + format: presentationFormat, + toneMapping: { mode: simulationParams.toneMappingMode }, + alphaMode: 'premultiplied', + }); +} const particlesBuffer = device.createBuffer({ size: numParticles * particleInstanceByteSize, @@ -315,10 +318,13 @@ let numMipLevels = 1; const simulationParams = { simulate: true, deltaTime: 0.04, + toneMappingMode: 'standard', + brightnessFactor: 1.0, }; const simulationUBOBufferSize = 1 * 4 + // deltaTime + 1 * 4 + // brightnessFactor 3 * 4 + // padding 4 * 4 + // seed 0; @@ -330,6 +336,11 @@ const simulationUBOBuffer = device.createBuffer({ const gui = new GUI(); gui.add(simulationParams, 'simulate'); gui.add(simulationParams, 'deltaTime'); +const hdrFolder = gui.addFolder('HDR Settings'); +hdrFolder + .add(simulationParams, 'toneMappingMode', ['standard', 'extended']) + .onChange(configureContext); +hdrFolder.add(simulationParams, 'brightnessFactor', 0, 4, 0.1); const computePipeline = device.createComputePipeline({ layout: 'auto', @@ -375,6 +386,7 @@ function frame() { 0, new Float32Array([ simulationParams.simulate ? simulationParams.deltaTime : 0.0, + simulationParams.brightnessFactor, 0.0, 0.0, 0.0, // padding @@ -436,4 +448,5 @@ function frame() { requestAnimationFrame(frame); } +configureContext(); requestAnimationFrame(frame); diff --git a/sample/particles/particle.wgsl b/sample/particles/particle.wgsl index 15c3f604..5b9575f7 100644 --- a/sample/particles/particle.wgsl +++ b/sample/particles/particle.wgsl @@ -64,6 +64,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4f { //////////////////////////////////////////////////////////////////////////////// struct SimulationParams { deltaTime : f32, + brightnessFactor : f32, seed : vec4f, } @@ -125,6 +126,9 @@ fn simulate(@builtin(global_invocation_id) global_invocation_id : vec3u) { let uv = vec2f(coord) / vec2f(textureDimensions(texture)); particle.position = vec3f((uv - 0.5) * 3.0 * vec2f(1.0, -1.0), 0.0); particle.color = textureLoad(texture, coord, 0); + particle.color.r *= sim_params.brightnessFactor; + particle.color.g *= sim_params.brightnessFactor; + particle.color.b *= sim_params.brightnessFactor; particle.velocity.x = (rand() - 0.5) * 0.1; particle.velocity.y = (rand() - 0.5) * 0.1; particle.velocity.z = rand() * 0.3;