Deploying to gh-pages from @ 9044129 🚀

webgpu · Mar 8, 2024 · f316b00 · f316b00
1 parent a29c4ec
commit f316b00
Show file tree

Hide file tree

Showing 9 changed files with 2,915 additions and 1 deletion.
diff --git a/main.js b/main.js
@@ -330,6 +330,13 @@ var resizeCanvas = {
     ],
 };
 
+var resizeObserverHDDPI = {
+    name: 'ResizeObserver HD-DPI Fullscreen',
+    description: `This example shows how to use ResizeObserver, handle HD-DPI correctly, and Fullscreen`,
+    filename: "sample/resizeObserverHDDPI",
+    sources: [{ path: 'main.ts' }, { path: 'checker.wgsl' }],
+};
+
 var reversedZ = {
     name: 'Reversed Z',
     description: `This example shows the use of reversed z technique for better utilization of depth buffer precision.
@@ -538,6 +545,7 @@ const pageCategories = [
         description: 'Demos integrating WebGPU with other functionalities of the web platform.',
         samples: {
             resizeCanvas,
+            resizeObserverHDDPI,
             videoUploading,
             worker,
         },

diff --git a/main.js.map b/main.js.map
diff --git a/sample/resizeObserverHDDPI/checker.wgsl b/sample/resizeObserverHDDPI/checker.wgsl
@@ -0,0 +1,25 @@
+struct Uniforms {
+  color0: vec4f,
+  color1: vec4f,
+  size: u32,
+};
+
+@group(0) @binding(0) var<uniform> uni: Uniforms;
+
+@vertex
+fn vs(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
+  const pos = array(
+    vec2f(-1.0, -1.0),
+    vec2f( 3.0, -1.0),
+    vec2f(-1.0,  3.0),
+  );
+  return vec4f(pos[vertexIndex], 0.0, 1.0);
+}
+
+@fragment
+fn fs(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  let grid = vec2u(position.xy) / uni.size;
+  let checker = (grid.x + grid.y) % 2 == 1;
+  return select(uni.color0, uni.color1, checker);
+}
+
diff --git a/sample/resizeObserverHDDPI/index.html b/sample/resizeObserverHDDPI/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>webgpu-samples: resizeObserverHDDPI</title>
+    <style>
+      html, body {
+        margin: 0;      /* remove default margin */
+        height: 100%;   /* make body fill the browser window */
+      }
+      canvas {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      .fit-container {
+        width: 100%;
+        height: 100%;
+      }
+      .resizable {
+        resize: both;
+        overflow: scroll;  /* required because resize doesn't work with overflow: visible, the default */
+        max-width: 100%;
+        max-height: 100%;
+      }
+    </style>
+    <script defer src="main.js" type="module"></script>
+    <gscript defer type="module" src="../../js/iframe-helper.js"></script>
+  </head>
+  <body>
+    <div id="container" class="fit-container">
+      <canvas></canvas>
+    </div>
+  </body>
+</html>