Merge branch 'main' into docs/naming-conventions

apps/typegpu-docs/src/content/examples/simple/increment/meta.json

@@ -1,5 +1,4 @@
 {
   "title": "Increment",
-  "category": "simple",
-  "tags": ["experimental"]
+  "category": "simple"
 }

apps/typegpu-docs/src/content/examples/simulation/game-of-life/index.ts

@@ -6,13 +6,12 @@ const device = root.device;
 
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
-const devicePixelRatio = window.devicePixelRatio;
-canvas.width = canvas.clientWidth * devicePixelRatio;
-canvas.height = canvas.clientHeight * devicePixelRatio;
+
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 context.configure({
   device,
   format: presentationFormat,
+  alphaMode: 'premultiplied',
 });
 
 let workgroupSize = 16;
@@ -37,6 +36,7 @@ const bindGroupLayoutCompute = tgpu.bindGroupLayout({
     access: 'mutable',
   },
 });
+
 const bindGroupLayoutRender = tgpu.bindGroupLayout({
   size: {
     uniform: d.vec2u,
@@ -121,20 +121,18 @@ fn frag(@location(0) cell: f32, @builtin(position) pos: vec4f) -> @location(0) v
   }
 
   return vec4f(
-    max(f32(cell) * pos.x / 1024, 0),
-    max(f32(cell) * pos.y / 1024, 0),
-    max(f32(cell) * (1 - pos.x / 1024), 0),
-    1.
+    pos.x / 2048,
+    pos.y / 2048,
+    1 - pos.x / 2048,
+    0.8
   );
 }`,
     externals: {
       ...bindGroupLayoutRender.bound,
     },
   }),
 });
-let commandEncoder: GPUCommandEncoder;
 
-// compute pipeline
 const computePipeline = device.createComputePipeline({
   layout: device.createPipelineLayout({
     bindGroupLayouts: [root.unwrap(bindGroupLayoutCompute)],
@@ -159,7 +157,7 @@ const resetGameData = () => {
   const length = gameWidth * gameHeight;
   const cells = Array.from({ length })
     .fill(0)
-    .map((_, i) => (Math.random() < 0.25 ? 1 : 0));
+    .map(() => (Math.random() < 0.25 ? 1 : 0));
 
   const buffer0 = root
     .createBuffer(d.arrayOf(d.u32, length), cells)
@@ -191,14 +189,13 @@ const resetGameData = () => {
       colorAttachments: [
         {
           view,
-          clearValue: { r: 239 / 255, g: 239 / 255, b: 249 / 255, a: 1 },
           loadOp: 'clear',
           storeOp: 'store',
         },
       ],
     };
 
-    commandEncoder = device.createCommandEncoder();
+    const commandEncoder = device.createCommandEncoder();
     const passEncoderCompute = commandEncoder.beginComputePass();
 
     passEncoderCompute.setPipeline(computePipeline);
@@ -271,7 +268,7 @@ const renderPipeline = device.createRenderPipeline({
 
 export const controls = {
   size: {
-    initial: '1024',
+    initial: '64',
     options: [16, 32, 64, 128, 256, 512, 1024].map((x) => x.toString()),
     onSelectChange: (value: string) => {
       gameWidth = Number.parseInt(value);
@@ -306,9 +303,14 @@ export const controls = {
       paused = value;
     },
   },
+
+  Reset: {
+    onButtonClick: resetGameData,
+  },
 };
 
 export function onCleanup() {
+  paused = true;
   root.destroy();
   root.device.destroy();
 }

apps/typegpu-docs/src/content/examples/simulation/game-of-life/meta.json

@@ -1,5 +1,4 @@
 {
   "title": "Game of Life",
-  "category": "simulation",
-  "tags": ["experimental"]
+  "category": "simulation"
 }

packages/typegpu/scripts/generateSwizzleFunctions.ts

@@ -0,0 +1,40 @@
+/**
+ * Prints the swizzling getters to be manually added to the VecBase abstract class.
+ */
+printSwizzlingFor('xyzw');
+
+/**
+ * Yields combinations of letters from `components` of given `length`.
+ *
+ * @example
+ * vectorComponentCombinations('xyz', 2)  // xx, xy, xz, yx, yy ...
+ */
+function* vectorComponentCombinations(
+  components: string,
+  length: number,
+): Generator<string, undefined, undefined> {
+  if (length > 1) {
+    for (const str of vectorComponentCombinations(components, length - 1)) {
+      for (const component of components) {
+        yield str + component;
+      }
+    }
+  } else {
+    yield* components;
+  }
+}
+
+function printSwizzlingFor(components: string) {
+  const componentIndex: Record<string, number> = { x: 0, y: 1, z: 2, w: 3 };
+  for (const count of [2, 3, 4] as const) {
+    const vecClassName = `_Vec${count}`;
+    for (const swizzle of vectorComponentCombinations(components, count)) {
+      const implementation = `  get ${swizzle}() { return new this.${vecClassName}(${[
+        ...swizzle,
+      ]
+        .map((s) => `this[${componentIndex[s]}]`)
+        .join(', ')}); }`;
+      console.log(implementation);
+    }
+  }
+}

packages/typegpu/src/data/matrix.ts

@@ -1,10 +1,11 @@
 import { inGPUMode } from '../gpuMode';
 import type { SelfResolvable } from '../types';
-import { type VecKind, vec2f, vec3f, vec4f } from './vector';
+import { vec2f, vec3f, vec4f } from './vector';
 import type {
   Mat2x2f,
   Mat3x3f,
   Mat4x4f,
+  VecKind,
   m2x2f,
   m3x3f,
   m4x4f,