diff --git a/package-lock.json b/package-lock.json index 40624611..f57911f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "@types/showdown": "^2.0.6", "@types/stats.js": "^0.17.3", "@typescript-eslint/eslint-plugin": "^7.13.0", - "@webgpu/types": "^0.1.42", + "@webgpu/types": "^0.1.44", "chokidar": "^3.6.0", "eslint": "^8.57.0", "eslint-config-prettier": "^8.10.0", @@ -1059,9 +1059,9 @@ "dev": true }, "node_modules/@webgpu/types": { - "version": "0.1.42", - "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.42.tgz", - "integrity": "sha512-uvJtt4OD1Vjdebrrz3kNLgpOicYbikwnM8WPG6YD2lkCOHDtPdEtCINJFIFtbOCtPfA8SreR/vKyUNbAt92IwQ==", + "version": "0.1.44", + "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.44.tgz", + "integrity": "sha512-JDpYJN5E/asw84LTYhKyvPpxGnD+bAKPtpW9Ilurf7cZpxaTbxkQcGwOd7jgB9BPBrTYQ+32ufo4HiuomTjHNQ==", "dev": true }, "node_modules/accepts": { diff --git a/package.json b/package.json index 1571d516..bb1b77b3 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "@types/showdown": "^2.0.6", "@types/stats.js": "^0.17.3", "@typescript-eslint/eslint-plugin": "^7.13.0", - "@webgpu/types": "^0.1.42", + "@webgpu/types": "^0.1.44", "chokidar": "^3.6.0", "eslint": "^8.57.0", "eslint-config-prettier": "^8.10.0", 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;