make paths relative

Note: Still need to fix some generated svg paths I think

test/tests/data-byte-diagram-tests.js

@@ -1,7 +1,7 @@
 import { describe, it } from '../mocha-support.js';
 import {
     makeShaderDataDefinitions,
-} from '/3rdparty/webgpu-utils-1.x.module.js';
+} from '../../3rdparty/webgpu-utils-1.x.module.js';
 import { assertEqual } from '../assert.js';
 import {
     createByteDiagramForType,

webgpu/background.html

@@ -32,7 +32,7 @@
 <div id="fail" style="display: none;"></div>
 <script type="module">
 // see https://webgpufundamentals.org/webgpu/lessons/webgpu-utils.html#wgpu-matrix
-import {mat4} from '/3rdparty/wgpu-matrix.module.js';
+import {mat4} from '../3rdparty/wgpu-matrix.module.js';
 import data from './resources/models/raw/webgpu.raw.js';
 
 async function main() {

webgpu/lessons/ko/webgpu-textures.md

@@ -371,7 +371,7 @@ struct OurVertexShaderOutput {
 저는 "muigui"라는, [dat.GUI](https://github.com/dataarts/dat.gui)와 유사한 API를 갖는 라이브러리를 사용합니다.
 
 ```js
-import GUI from '/3rdparty/muigui-0.x.module.js';
+import GUI from '../3rdparty/muigui-0.x.module.js';
 
 ...
 

webgpu/lessons/resources/byte-diagram-test.html

@@ -9,7 +9,7 @@
 // see https://webgpufundamentals.org/webgpu/lessons/webgpu-utils.html#webgpu-utils
 import {
   makeShaderDataDefinitions,
-} from '/3rdparty/webgpu-utils-1.x.module.js';
+} from '../../../3rdparty/webgpu-utils-1.x.module.js';
 import {
   createByteDiagramForType,
   getCodeForUniform,

webgpu/lessons/resources/cube-normals.html

@@ -85,7 +85,7 @@
 }
 </script>
 <script type="module">
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 
 const { v3, m4 } = twgl;
 

webgpu/lessons/resources/data-byte-diagram.js

@@ -4,7 +4,7 @@ import {
   getSizeAndAlignmentOfUnsizedArrayElement,
   makeBindGroupLayoutDescriptors,
   makeStructuredView,
-} from '/3rdparty/webgpu-utils-1.x.module.js';
+} from '../../../3rdparty/webgpu-utils-1.x.module.js';
 import typeInfo from './wgsl-data-types.js';
 import {
   createElem as el,

webgpu/lessons/resources/data-tables.js

@@ -1,6 +1,6 @@
 
-import { makeTable } from '/webgpu/lessons/resources/elem.js';
-import { zip } from '/webgpu/lessons/resources/utils.js';
+import { makeTable } from './elem.js';
+import { zip } from './utils.js';
 
 document.querySelectorAll('[data-table]').forEach(elem => {
   const data = JSON.parse(elem.dataset.table);

webgpu/lessons/resources/directional-lighting.html

@@ -31,8 +31,8 @@
 <canvas id="canvas"></canvas>
 </body>
 <script type="module">
-import GUI from '/3rdparty/muigui-0.x.module.js';
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import GUI from '../../../3rdparty/muigui-0.x.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 import * as diagram from './diagram.js';
 import { rgb, hsl } from './utils.js';
 

webgpu/lessons/resources/dot-product.html

@@ -183,7 +183,7 @@
 </body>
 </html>
 <script type="module">
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 const m4 = twgl.m4;
 const v3 = twgl.v3;
 

webgpu/lessons/resources/environment-mapping.html

@@ -31,8 +31,8 @@
 </body>
 </html>
 <script type="module">
-import GUI from '/3rdparty/muigui-0.x.module.js';
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import GUI from '../../../3rdparty/muigui-0.x.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 import * as diagram from './diagram.js';
 import { rgb, hsl } from './utils.js';
 const { v3 } = twgl;

webgpu/lessons/resources/lesson.js

@@ -1,4 +1,4 @@
-import '/webgpu/lessons/resources/data-tables.js';
+import './data-tables.js';
 // Licensed under a BSD license. See license.html for license
 /* eslint-disable strict */
 /* global settings, contributors, jQuery */

webgpu/lessons/resources/normals-scaled.html

@@ -105,7 +105,7 @@
 </body>
 </html>
 <script type="module">
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 const m4 = twgl.m4;
 const v3 = twgl.v3;
 

webgpu/lessons/resources/normals.html

@@ -89,7 +89,7 @@
 }
 </script>
 <script type="module">
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 const m4 = twgl.m4;
 const v3 = twgl.v3;
 

webgpu/lessons/resources/point-lighting.html

@@ -25,8 +25,8 @@
 </body>
 </html>
 <script type="module">
-import GUI from '/3rdparty/muigui-0.x.module.js';
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import GUI from '../../../3rdparty/muigui-0.x.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 import * as diagram from './diagram.js';
 import { hsl, rgb } from './utils.js';
 

webgpu/lessons/resources/power-graph.html

@@ -30,8 +30,8 @@
 </body>
 </html>
 <script type="module">
-import GUI from '/3rdparty/muigui-0.x.module.js';
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import GUI from '../../../3rdparty/muigui-0.x.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 
 function main() {
   const ctx = document.querySelector('#canvas').getContext('2d');

webgpu/lessons/resources/specular-lighting.html

@@ -30,8 +30,8 @@
 </body>
 </html>
 <script type="module">
-import GUI from '/3rdparty/muigui-0.x.module.js';
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import GUI from '../../../3rdparty/muigui-0.x.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 import * as diagram from './diagram.js';
 import { rgb, hsl } from './utils.js';
 

webgpu/lessons/resources/spot-lighting.html

@@ -31,8 +31,8 @@
 </body>
 </html>
 <script type="module">
-import GUI from '/3rdparty/muigui-0.x.module.js';
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import GUI from '../../../3rdparty/muigui-0.x.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 import * as diagram from './diagram.js';
 import { rgb, hsl } from './utils.js';
 const { v3 } = twgl;

webgpu/lessons/resources/surface-reflection.html

@@ -30,8 +30,8 @@
 </body>
 </html>
 <script type="module">
-import GUI from '/3rdparty/muigui-0.x.module.js';
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import GUI from '../../../3rdparty/muigui-0.x.module.js';
+import * as twgl from '../../../3rdparty/twgl-full.module.js';
 import * as diagram from './diagram.js';
 import { rgb, hsl } from './utils.js';
 

webgpu/lessons/resources/wgsl-offset-computer.html

@@ -310,7 +310,7 @@ <h1>WGSL Offset Computer</h1>
 import {
   makeShaderDataDefinitions,
   setIntrinsicsToView,
-} from '/3rdparty/webgpu-utils-1.x.module.js';
+} from '../../../3rdparty/webgpu-utils-1.x.module.js';
 import {
   createByteDiagramForType,
   getCodeForUniform,

webgpu/lessons/webgpu-cameras.js

@@ -7,8 +7,8 @@ import {
 import {
   createRequestAnimationFrameLoop,
 } from './resources/good-raf.js';
-import { SVG as svg } from '/3rdparty/svg.esm.js';
-import * as twgl from '/3rdparty/twgl-full.module.js';
+import { SVG as svg } from '../../3rdparty/svg.esm.js';
+import * as twgl from '../../3rdparty/twgl-full.module.js';
 
 const darkColors = {
   lines: [1, 1, 1, 1],

webgpu/lessons/webgpu-compute-shaders-histogram.js

@@ -4,7 +4,7 @@ import {
 import {
   createRequestAnimationFrameLoop,
 } from './resources/good-raf.js';
-import { SVG as svg } from '/3rdparty/svg.esm.js';
+import { SVG as svg } from '../../3rdparty/svg.esm.js';
 import {
   createElem as el, select, makeTable,
 } from './resources/elem.js';

webgpu/lessons/webgpu-environment-maps.js

@@ -6,7 +6,7 @@ import {
 } from './resources/elem.js';
 import {
   createTextureFromSources,
-} from '/3rdparty/webgpu-utils.module.js';
+} from '../../3rdparty/webgpu-utils.module.js';
 
 import {mat4} from 'http://localhost:8080/3rdparty/wgpu-matrix.module.js';
 import GUI from 'http://localhost:8080/3rdparty/muigui-0.x.module.js';

webgpu/lessons/webgpu-fundamentals.js

@@ -4,7 +4,7 @@ import {
 import {
   createElem as el,
 } from './resources/elem.js';
-import { SVG as svg } from '/3rdparty/svg.esm.js';
+import { SVG as svg } from '../../3rdparty/svg.esm.js';
 import { clamp } from './resources/utils.js';
 
 const darkColors = {

webgpu/lessons/webgpu-importing-textures.js

@@ -1,7 +1,7 @@
 import {
   renderDiagrams
 } from './resources/diagrams.js';
-import { SVG as svg } from '/3rdparty/svg.esm.js';
+import { SVG as svg } from '../../3rdparty/svg.esm.js';
 import {
   createElem as el,
 } from './resources/elem.js';

webgpu/lessons/webgpu-limits-and-features.js

@@ -28,6 +28,7 @@ const kLimitInfo = makeObjectFromTable(
   'maxTextureArrayLayers':                     [           ,       256,                          ],
 
   'maxBindGroups':                             [           ,         4,                          ],
+  'maxBindGroupsPlusVertexBuffers':            [           ,        24,                          ],
   'maxBindingsPerBindGroup':                   [           ,      1000,                          ],
   'maxDynamicUniformBuffersPerPipelineLayout': [           ,         8,                          ],
   'maxDynamicStorageBuffersPerPipelineLayout': [           ,         4,                          ],
@@ -95,7 +96,7 @@ renderDiagrams({
   limits(elem) {
     const addRow = makeTable(elem, ['limit name', 'your device', 'min']);
     for (const key of getObjLikeKeys(adapter.limits).sort(sortAlphabetically)) {
-      addRow([key, [adapter.limits[key] > kLimitInfo[key].default ? 'exceeds-limit' : '', withShortSize(adapter.limits[key])], withShortSize(kLimitInfo[key].default)]);
+      addRow([key, [adapter.limits[key] > kLimitInfo[key]?.default ? 'exceeds-limit' : '', withShortSize(adapter.limits[key])], withShortSize(kLimitInfo[key]?.default)]);
     }
   },
 

webgpu/lessons/webgpu-matrix-math.js

@@ -1,6 +1,6 @@
 import {
   makeShaderDataDefinitions,
-} from '/3rdparty/webgpu-utils-1.x.module.js';
+} from '../../3rdparty/webgpu-utils-1.x.module.js';
 import {
   renderDiagrams
 } from './resources/diagrams.js';
@@ -16,7 +16,7 @@ import {
 import {
   mat3,
   vec2,
-} from '/3rdparty/wgpu-matrix.module.js';
+} from '../../3rdparty/wgpu-matrix.module.js';
 import {
   hsla,
 } from './resources/utils.js';

webgpu/lessons/webgpu-memory-layout.js

@@ -1,6 +1,6 @@
 import {
   makeShaderDataDefinitions,
-} from '/3rdparty/webgpu-utils-1.x.module.js';
+} from '../../3rdparty/webgpu-utils-1.x.module.js';
 import {
   renderDiagrams
 } from './resources/diagrams.js';

webgpu/lessons/webgpu-multisampling.js

@@ -4,7 +4,7 @@ import {
 import {
   createElem as el,
 } from './resources/elem.js';
-import { SVG as svg } from '/3rdparty/svg.esm.js';
+import { SVG as svg } from '../../3rdparty/svg.esm.js';
 import { clamp } from './resources/utils.js';
 
 const darkColors = {

webgpu/lessons/webgpu-orthographic-projection.js

@@ -1,7 +1,7 @@
 /*
 import {
   makeShaderDataDefinitions,
-} from '/3rdparty/webgpu-utils-1.x.module.js';
+} from '../../3rdparty/webgpu-utils-1.x.module.js';
 import {
   renderDiagrams
 } from './resources/diagrams.js';
@@ -14,7 +14,7 @@ import {
 import {
   mat4,
   vec3,
-} from '/3rdparty/wgpu-matrix.module.js';
+} from '../../3rdparty/wgpu-matrix.module.js';
 import {
   hsla,
 } from './resources/utils.js';

webgpu/lessons/webgpu-perspective-projection.js

@@ -9,9 +9,9 @@ import {
 } from './resources/elem.js';
 import {
   mat4,
-} from '/3rdparty/wgpu-matrix.module.js';
-import * as twgl from '/3rdparty/twgl-full.module.js';
-import GUI from '/3rdparty/muigui-0.x.module.js';
+} from '../../3rdparty/wgpu-matrix.module.js';
+import * as twgl from '../../3rdparty/twgl-full.module.js';
+import GUI from '../../3rdparty/muigui-0.x.module.js';
 
 const darkColors = {
   lines: [1, 1, 1, 1],

webgpu/lessons/webgpu-storage-buffers.js

@@ -1,7 +1,7 @@
 import {
   renderDiagrams
 } from './resources/diagrams.js';
-import { SVG as svg } from '/3rdparty/svg.esm.js';
+import { SVG as svg } from '../../3rdparty/svg.esm.js';
 
 function createCircleVertices({
   radius = 1,

webgpu/lessons/webgpu-textures.js

@@ -4,7 +4,7 @@ import {
 import {
   createRequestAnimationFrameLoop,
 } from './resources/good-raf.js';
-import { SVG as svg } from '/3rdparty/svg.esm.js';
+import { SVG as svg } from '../../3rdparty/svg.esm.js';
 import {
   rgba8unormFromCSS,
   hsl,

webgpu/lessons/webgpu-textures.md

@@ -400,7 +400,7 @@ and when the setting change we need to re-render. I'm using a library
 called "muigui" which at the moment has an API similar to [dat.GUI](https://github.com/dataarts/dat.gui)
 
 ```js
-import GUI from '/3rdparty/muigui-0.x.module.js';
+import GUI from '../3rdparty/muigui-0.x.module.js';
 
 ...
 

webgpu/lessons/webgpu-translation.md

@@ -355,7 +355,7 @@ And then we need to set a translation at render time
 Finally let's add a UI so we can adjust the translation
 
 ```js
-+import GUI from '/3rdparty/muigui-0.x.module.js';
++import GUI from '../3rdparty/muigui-0.x.module.js';
 
 ...
   const settings = {

webgpu/lessons/webgpu-transparency.js

@@ -4,8 +4,8 @@ import {
 import {
   createElem as el
 } from './resources/elem.js';
-import {mat4} from '/3rdparty/wgpu-matrix.module.js';
-import {createTextureFromSource} from '/3rdparty/webgpu-utils-1.x.module.js';
+import {mat4} from '../../3rdparty/wgpu-matrix.module.js';
+import {createTextureFromSource} from '../../3rdparty/webgpu-utils-1.x.module.js';
 
 
 const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;

webgpu/lessons/webgpu-transparency.md

@@ -109,7 +109,7 @@ To that let's add a UI so we can set the alpha and color of
 the clear value as well as whether or not it's premultiplied
 
 ```js
-+import GUI from '/3rdparty/muigui-0.x.module.js';
++import GUI from '../3rdparty/muigui-0.x.module.js';
 
 ...
 

webgpu/lessons/zh_cn/webgpu-textures.md

@@ -305,7 +305,7 @@ const settings = {
 的 API
 
 ```js
-import GUI from '/3rdparty/muigui-0.x.module.js';
+import GUI from '../3rdparty/muigui-0.x.module.js';
 
 ...
 

webgpu/resources/js/unit-circle.js

@@ -28,7 +28,7 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-import { SVG as svg } from '/3rdparty/svg.esm.js';
+import { SVG as svg } from '../../3rdparty/svg.esm.js';
 
 
 const setTranslation = (e, x, y) => e.attr({transform: `translate(${x}, ${y})`});

webgpu/webgl-cube-multiple.html

@@ -34,7 +34,7 @@
   </body>
   <script type="module">
 // see https://webgpufundamentals.org/webgpu/lessons/webgpu-utils.html#wgpu-matrix
-import {vec3, mat4} from '/3rdparty/wgpu-matrix.module.js';
+import {vec3, mat4} from '../3rdparty/wgpu-matrix.module.js';
 
 function main() {
   const gl = document.querySelector('canvas').getContext('webgl');