Deploying to gh-pages from @ 78309e7 🚀

webgpu · Mar 11, 2024 · 50594cf · 50594cf
1 parent 164e160
commit 50594cf
Show file tree

Hide file tree

Showing 12 changed files with 5,006 additions and 1 deletion.
diff --git a/main.js b/main.js
@@ -293,6 +293,23 @@ var particles = {
     ],
 };
 
+var points = {
+    name: 'Points',
+    description: `\
+This example shows how to render points of various sizes using a quad and instancing.
+
+You can read more details [here](https://webgpufundamentals.org/webgpu/lessons/webgpu-points.html).
+`,
+    filename: "sample/points",
+    sources: [
+        { path: 'main.ts' },
+        { path: 'distance-sized-points.vert.wgsl' },
+        { path: 'fixed-size-points.vert.wgsl' },
+        { path: 'orange.frag.wgsl' },
+        { path: 'textured.frag.wgsl' },
+    ],
+};
+
 var pristineGrid = {
     name: 'Pristine Grid',
     description: `A simple WebGPU implementation of the "Pristine Grid" technique described in this wonderful little blog post: https://bgolus.medium.com/the-best-darn-grid-shader-yet-727f9278b9d8.
@@ -555,6 +572,7 @@ const pageCategories = [
             shadowMapping,
             deferredRendering,
             particles,
+            points,
             imageBlur,
             cornell,
             'a-buffer': aBuffer,

diff --git a/main.js.map b/main.js.map
diff --git a/sample/points/distance-sized-points.vert.wgsl b/sample/points/distance-sized-points.vert.wgsl
@@ -0,0 +1,37 @@
+struct Vertex {
+  @location(0) position: vec4f,
+};
+
+struct Uniforms {
+  matrix: mat4x4f,
+  resolution: vec2f,
+  size: f32,
+};
+
+struct VSOutput {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f,
+};
+
+@group(0) @binding(0) var<uniform> uni: Uniforms;
+
+@vertex fn vs(
+    vert: Vertex,
+    @builtin(vertex_index) vNdx: u32,
+) -> VSOutput {
+  let points = array(
+    vec2f(-1, -1),
+    vec2f( 1, -1),
+    vec2f(-1,  1),
+    vec2f(-1,  1),
+    vec2f( 1, -1),
+    vec2f( 1,  1),
+  );
+  var vsOut: VSOutput;
+  let pos = points[vNdx];
+  let clipPos = uni.matrix * vert.position;
+  let pointPos = vec4f(pos * uni.size / uni.resolution, 0, 0);
+  vsOut.position = clipPos + pointPos;
+  vsOut.texcoord = pos * 0.5 + 0.5;
+  return vsOut;
+}
diff --git a/sample/points/fixed-size-points.vert.wgsl b/sample/points/fixed-size-points.vert.wgsl
@@ -0,0 +1,37 @@
+struct Vertex {
+  @location(0) position: vec4f,
+};
+
+struct Uniforms {
+  matrix: mat4x4f,
+  resolution: vec2f,
+  size: f32,
+};
+
+struct VSOutput {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f,
+};
+
+@group(0) @binding(0) var<uniform> uni: Uniforms;
+
+@vertex fn vs(
+    vert: Vertex,
+    @builtin(vertex_index) vNdx: u32,
+) -> VSOutput {
+  let points = array(
+    vec2f(-1, -1),
+    vec2f( 1, -1),
+    vec2f(-1,  1),
+    vec2f(-1,  1),
+    vec2f( 1, -1),
+    vec2f( 1,  1),
+  );
+  var vsOut: VSOutput;
+  let pos = points[vNdx];
+  let clipPos = uni.matrix * vert.position;
+  let pointPos = vec4f(pos * uni.size / uni.resolution * clipPos.w, 0, 0);
+  vsOut.position = clipPos + pointPos;
+  vsOut.texcoord = pos * 0.5 + 0.5;
+  return vsOut;
+}
diff --git a/sample/points/index.html b/sample/points/index.html
@@ -0,0 +1,27 @@
+<!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: points</title>
+    <style>
+      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>