resize article

webgpu · Nov 3, 2023 · e2012e3 · e2012e3
1 parent e4b084d
commit e2012e3
Show file tree

Hide file tree

Showing 10 changed files with 971 additions and 5 deletions.
diff --git a/build/external-refs.js b/build/external-refs.js
@@ -124,8 +124,14 @@ const apis = [
   'Response',
 ];
 
+const others = {
+  'getBoundingClientRect': 'https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect',
+  'devicePixelRatio': 'https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio',
+};
+
 // check with removing the last 's'?
 const refs = {
+  ...others,
   ...Object.fromEntries(globalObjects.map(k => [k, `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/${k}`])),
   ...Object.fromEntries(gpuDict.map(k => [k, `https://www.w3.org/TR/webgpu/#dictdef-${k.toLowerCase()}`])),
   ...Object.fromEntries(apis.map(k => [k, `https://developer.mozilla.org/en-US/docs/Web/API/${k}`])),

diff --git a/toc.hanson b/toc.hanson
@@ -42,6 +42,7 @@
     'webgpu-compute-shaders-histogram-part-2.md',
   ],
   'misc': [
+    'webgpu-resizing-the-canvas.md',
     'webgpu-from-webgl.md',
     'webgpu-resources.md',
     'webgpu-wgsl-function-reference.md',

diff --git a/webgpu/fractional-element-size-device-pixel-content-box-size.html b/webgpu/fractional-element-size-device-pixel-content-box-size.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      @import url(resources/webgpu-lesson.css);
+#parent {
+  display: flex;
+  width: 299px;
+  height: 40px;
+  align-items: stretch;
+  background-color: red;
+}
+#parent>* {
+  flex: 1 1 33%;
+}
+#left { background-color: #A44; }
+#middle { background-color: #4A4; }
+#right { background-color: #66C; }
+    </style>
+  </head>
+  <body>
+    <div id="parent">
+      <div id="left">left</div>
+      <div id="middle">middle</div>
+      <div id="right">right</div>
+    </div>
+    <pre id="info">
+
+    </pre>
+  </body>
+  <script>
+const infoElem = document.querySelector('#info');
+const inlineSizes = {};
+const observer = new ResizeObserver(entries => {
+  for (const entry of entries) {
+    inlineSizes[entry.target.id] = {
+      inlineSize: entry.contentBoxSize[0].inlineSize,
+      dpcbInlineSize: entry.devicePixelContentBoxSize?.[0].inlineSize,
+    };
+  }
+
+  const info = Object.entries(inlineSizes).map(([id, data]) => {
+    const elem = document.getElementById(id);
+    return `\
+--------------- #${elem.id} ---------------
+                          inlineSize: ${data.inlineSize}
+devicePixelContentBoxSize.inlineSize: ${data.dpcbInlineSize}    <=====
+                         clientWidth: ${elem.clientWidth}
+         getBoundingClientRect.width: ${elem.getBoundingClientRect().width}`;
+  });
+  infoElem.textContent = `devicePixelRatio: ${devicePixelRatio}\n${info.join('\n')}`;
+});
+
+observer.observe(document.querySelector('#left'));
+observer.observe(document.querySelector('#middle'));
+observer.observe(document.querySelector('#right'));
+observer.observe(document.querySelector('#parent'));
+  </script>
+</html>
diff --git a/webgpu/fractional-element-size-issues.html b/webgpu/fractional-element-size-issues.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      @import url(resources/webgpu-lesson.css);
+#parent {
+  display: flex;
+  width: 299px;
+  height: 40px;
+  align-items: stretch;
+  background-color: red;
+}
+#parent>* {
+  flex: 1 1 33%;
+}
+#left { background-color: pink; }
+#middle { background-color: lightgreen; }
+#right { background-color: lightblue; }
+    </style>
+  </head>
+  <body>
+    <div id="parent">
+      <div id="left">left</div>
+      <div id="middle">middle</div>
+      <div id="right">right</div>
+    </div>
+    <pre id="info">
+
+    </pre>
+  </body>
+  <script>
+const infoElem = document.querySelector('#info');
+const inlineSizes = {};
+const observer = new ResizeObserver(entries => {
+  for (const entry of entries) {
+    inlineSizes[entry.target.id] = entry.contentBoxSize[0].inlineSize;
+  }
+
+  const info = Object.entries(inlineSizes).map(([id, inlineSize]) => {
+    const elem = document.getElementById(id);
+    return `\
+--------------- #${elem.id} ---------------
+                 inlineSize: ${inlineSize}
+                clientWidth: ${elem.clientWidth}
+getBoundingClientRect.width: ${elem.getBoundingClientRect().width}`;
+  });
+  infoElem.textContent = `devicePixelRatio: ${devicePixelRatio}\n${info.join('\n')}`;
+});
+
+observer.observe(document.querySelector('#left'));
+observer.observe(document.querySelector('#middle'));
+observer.observe(document.querySelector('#right'));
+observer.observe(document.querySelector('#parent'));
+  </script>
+</html>
diff --git a/webgpu/lessons/webgpu-inter-stage-variables.md b/webgpu/lessons/webgpu-inter-stage-variables.md
@@ -137,7 +137,7 @@ Running that we see it still works.
 
 {{{example url="../webgpu-inter-stage-variables-triangle-by-fn-param.html"}}}
 
-## `@builtin(position)`
+## <a id="a-builtin-position"></a> `@builtin(position)`
 
 That helps point out another quirk. Our original shader that used the same
 struct in both the vertex and fragment shaders had a field called `position` but

diff --git a/webgpu/lessons/webgpu-resizing-the-canvas.js b/webgpu/lessons/webgpu-resizing-the-canvas.js
@@ -0,0 +1,13 @@
+import {
+  renderDiagrams
+} from './resources/diagrams.js';
+
+renderDiagrams({
+  'dpr': (elem) => {
+    const update = () => {
+      elem.textContent = window.devicePixelRatio;
+    };
+    update();
+    window.addEventListener('resize', update);
+  },
+});