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/index.html b/sample/particles/index.html
index f91563fd..3c983409 100644
--- a/sample/particles/index.html
+++ b/sample/particles/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>webgpu-samples: particles</title>
+    <title>webgpu-samples: particles (HDR)</title>
     <style>
       :root {
         color-scheme: light dark;
diff --git a/sample/particles/main.ts b/sample/particles/main.ts
index 404a2963..5deeaa7b 100644
--- a/sample/particles/main.ts
+++ b/sample/particles/main.ts
@@ -26,13 +26,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,
@@ -317,10 +320,13 @@ let numMipLevels = 1;
 const simulationParams = {
   simulate: true,
   deltaTime: 0.04,
+  toneMappingMode: 'standard' as GPUCanvasToneMappingMode,
+  brightnessFactor: 1.0,
 };
 
 const simulationUBOBufferSize =
   1 * 4 + // deltaTime
+  1 * 4 + // brightnessFactor
   3 * 4 + // padding
   4 * 4 + // seed
   0;
@@ -330,8 +336,23 @@ const simulationUBOBuffer = device.createBuffer({
 });
 
 const gui = new GUI();
+gui.width = 325;
 gui.add(simulationParams, 'simulate');
 gui.add(simulationParams, 'deltaTime');
+const hdrFolder = gui.addFolder('');
+hdrFolder
+  .add(simulationParams, 'toneMappingMode', ['standard', 'extended'])
+  .onChange(configureContext);
+hdrFolder.add(simulationParams, 'brightnessFactor', 0, 4, 0.1);
+hdrFolder.open();
+const hdrMediaQuery = window.matchMedia('(dynamic-range: high)');
+function updateHdrFolderName() {
+  hdrFolder.name = `HDR settings ${
+    hdrMediaQuery.matches ? '' : '⚠️ Your display is not compatible'
+  }`;
+}
+updateHdrFolderName();
+hdrMediaQuery.onchange = updateHdrFolderName;
 
 const computePipeline = device.createComputePipeline({
   layout: 'auto',
@@ -377,6 +398,7 @@ function frame() {
     0,
     new Float32Array([
       simulationParams.simulate ? simulationParams.deltaTime : 0.0,
+      simulationParams.brightnessFactor,
       0.0,
       0.0,
       0.0, // padding
@@ -438,4 +460,5 @@ function frame() {
 
   requestAnimationFrame(frame);
 }
+configureContext();
 requestAnimationFrame(frame);
diff --git a/sample/particles/meta.ts b/sample/particles/meta.ts
index 0f687778..b42dce2b 100644
--- a/sample/particles/meta.ts
+++ b/sample/particles/meta.ts
@@ -1,7 +1,7 @@
 export default {
-  name: 'Particles',
+  name: 'Particles (HDR)',
   description:
-    'This example demonstrates rendering of particles simulated with compute shaders.',
+    'This example demonstrates rendering of particles (using HDR capabilities when possible) simulated with compute shaders.',
   filename: __DIRNAME__,
   sources: [
     { path: 'main.ts' },
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;
diff --git a/src/samples.ts b/src/samples.ts
index 639bf3a2..52fb41ff 100644
--- a/src/samples.ts
+++ b/src/samples.ts
@@ -118,7 +118,7 @@ export const pageCategories: PageCategory[] = [
       normalMap,
       shadowMapping,
       deferredRendering,
-      particles,
+      'particles (HDR)': particles,
       points,
       imageBlur,
       cornell,
