Deploying to gh-pages from @ 73107d8 🚀

webgpu · Jun 19, 2024 · 601c3b7 · 601c3b7
1 parent b0cdaaa
commit 601c3b7
Show file tree

Hide file tree

Showing 12 changed files with 9,433 additions and 1 deletion.
diff --git a/main.js b/main.js
@@ -534,6 +534,28 @@ before processing in
     sources: [{ path: 'main.ts' }, { path: 'volume.wgsl' }],
 };
 
+var wireframe = {
+    name: 'Wireframe',
+    description: `
+  This example demonstrates drawing a wireframe from triangles in 2 ways.
+  Both use the vertex and index buffers as storage buffers and the use \`@builtin(vertex_index)\`
+  to index the vertex data. One method generates 6 vertices per triangle and uses line-list to draw lines.
+  The other method draws triangles with a fragment shader that uses barycentric coordinates to draw edges
+  as detailed [here](https://web.archive.org/web/20130424093557/http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/).
+
+  `,
+    filename: "sample/wireframe",
+    sources: [
+        { path: 'main.ts' },
+        { path: 'wireframe.wgsl' },
+        { path: 'solidColorLit.wgsl' },
+        { path: 'models.ts' },
+        { path: '../../meshes/box.ts' },
+        { path: '../../meshes/mesh.ts' },
+        { path: 'utils.ts' },
+    ],
+};
+
 var worker = {
     name: 'WebGPU in a Worker',
     description: `This example shows one method of using WebGPU in a web worker and presenting to
@@ -619,6 +641,7 @@ const pageCategories = [
             skinnedMesh,
             textRenderingMsdf,
             volumeRenderingTexture3D,
+            wireframe,
         },
     },
     // Samples that demonstrate how to integrate WebGPU and/or WebGPU render operations with other

diff --git a/main.js.map b/main.js.map
diff --git a/sample/wireframe/index.html b/sample/wireframe/index.html
@@ -0,0 +1,30 @@
+<!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: wireframe</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+      html, body {
+        margin: 0;      /* remove default margin */
+        height: 100%;   /* make body fill the browser window */
+        display: flex;
+        place-content: center center;
+      }
+      canvas {
+        width: 600px;
+        height: 600px;
+        max-width: 100%;
+        display: block;
+      }
+    </style>
+    <script defer src="main.js" type="module"></script>
+    <script defer type="module" src="../../js/iframe-helper.js"></script>
+  </head>
+  <body>
+    <canvas></canvas>
+  </body>
+</html>