Merge branch 'main' into docs/stable-fn-guide

Author: iwoplaza

README.md

@@ -180,7 +180,6 @@ out our [Official Docs](https://docs.swmansion.com/TypeGPU/getting-started)!
 
 - [packages/unplugin-typegpu](/packages/unplugin-typegpu) - Plugin for your
   favorite bundler, enabling TypeGPU shader functions to be written in JS.
-- [packages/tgpu-jit](/packages/tgpu-jit) - Just-In-Time transpiler for TypeGPU.
 - [packages/tgpu-gen](/packages/tgpu-gen) - CLI tool for automatic TypeGPU code
   generation.
 

apps/typegpu-docs/src/components/ExampleLayout.tsx

@@ -1,6 +1,6 @@
 import cs from 'classnames';
 import { useAtom, useAtomValue } from 'jotai';
-import { useId, useRef, useState } from 'react';
+import { useId, useRef } from 'react';
 import CrossSvg from '../assets/cross.svg';
 import DiscordIconSvg from '../assets/discord-icon.svg';
 import GithubIconSvg from '../assets/github-icon.svg';
@@ -14,6 +14,7 @@ import ExamplePage from './ExamplePage.tsx';
 import { SearchableExampleList } from './SearchableExampleList.tsx';
 import { Button } from './design/Button.tsx';
 import { Toggle } from './design/Toggle.tsx';
+import { experimentalExamplesShownAtom } from '../utils/examples/showExperimentalExamplesAtom.ts';
 
 export function ExampleLayout() {
   const menuShown = useAtomValue(menuShownAtom);
@@ -49,13 +50,11 @@ export function ExampleLayout() {
   );
 }
 
-const experimentalShowingLSKey = 'experimental-showing';
-
 function SideMenu() {
   const menuShown = useAtomValue(menuShownAtom);
   const [menuShownMobile, setMenuShownMobile] = useAtom(menuShownMobileAtom);
-  const [experimentalShowing, setExperimentalShowing] = useState(
-    localStorage.getItem(experimentalShowingLSKey) === 'true',
+  const [experimentalShowing, setExperimentalShowing] = useAtom(
+    experimentalExamplesShownAtom,
   );
   const scrollRef = useRef<HTMLDivElement>(null);
   const experimentalExamplesToggleId = useId();
@@ -82,14 +81,8 @@ function SideMenu() {
         </div>
         <div className='absolute top-5 right-5 md:hidden'>
           {menuShownMobile && (
-            <Button
-              onClick={() => setMenuShownMobile(false)}
-            >
-              <img
-                src={CrossSvg.src}
-                alt='Close menu'
-                className='h-3 w-3'
-              />
+            <Button onClick={() => setMenuShownMobile(false)}>
+              <img src={CrossSvg.src} alt='Close menu' className='h-3 w-3' />
             </Button>
           )}
         </div>
@@ -99,10 +92,7 @@ function SideMenu() {
         <hr className='my-0 box-border w-full border-tameplum-100 border-t' />
       </div>
 
-      <div
-        className='my-5 min-h-0 flex-1 overflow-y-auto px-5'
-        ref={scrollRef}
-      >
+      <div className='my-5 min-h-0 flex-1 overflow-y-auto px-5' ref={scrollRef}>
         <section className='mb-5 space-y-2 border-tameplum-100 border-b pb-5'>
           <h1 className='font-medium text-lg'>Welcome to examples page</h1>
           <p className='text-sm'>
@@ -138,14 +128,7 @@ function SideMenu() {
         <Toggle
           id={experimentalExamplesToggleId}
           checked={experimentalShowing}
-          onChange={(e) => {
-            const checked = e.target.checked;
-            localStorage.setItem(
-              experimentalShowingLSKey,
-              checked ? 'true' : 'false',
-            );
-            setExperimentalShowing(checked);
-          }}
+          onChange={(e) => setExperimentalShowing(e.target.checked)}
         />
       </label>
 

apps/typegpu-docs/src/components/ExamplePage.tsx

@@ -14,7 +14,7 @@ const getRandomExampleKey = () => {
 /**
  * The example we want to show off first.
  */
-const FLAGSHIP = 'simulation--boids';
+const FLAGSHIP = 'rendering--caustics';
 
 function RedirectToFlagship() {
   const setCurrentExample = useSetAtom(currentExampleAtom);
@@ -26,9 +26,7 @@ function RedirectToFlagship() {
     }
     redirectedRef.current = true;
 
-    setCurrentExample(
-      FLAGSHIP in examplesStable ? FLAGSHIP : getRandomExampleKey(),
-    );
+    setCurrentExample(FLAGSHIP in examples ? FLAGSHIP : getRandomExampleKey());
   }, [setCurrentExample]);
 
   return null;

apps/typegpu-docs/src/content/docs/fundamentals/tgsl.mdx

@@ -13,8 +13,7 @@ which is then used to generate equivalent WGSL.
 
 You can check the current state of supported JavaScript syntax in the [tinyest-for-wgsl repository](https://github.com/software-mansion/TypeGPU/blob/release/packages/tinyest-for-wgsl/src/parsers.ts).
 
-For the TGSL functions to work, you need to use either the dedicated build plugin -- [unplugin-typegpu](/TypeGPU/tooling/unplugin-typegpu), 
-or the Just-In-Time transpiler -- *tgpu-jit* (WIP).
+For the TGSL functions to work, you need to use the dedicated build plugin -- [unplugin-typegpu](/TypeGPU/tooling/unplugin-typegpu).
 
 ## Usage
 
@@ -35,24 +34,22 @@ const obstacles = root
     enabled: d.u32,
   }), MAX_OBSTACLES));
 
-const isInsideObstacle = tgpu['~unstable'].fn([d.i32, d.i32], d.bool)(
-  (x, y) => {
-    for (let obsIdx = 0; obsIdx < MAX_OBSTACLES; obsIdx++) {
-      const obs = obstacles.$[obsIdx];
-      if (obs.enabled === 0) {
-        continue;
-      }
-      const minX = std.max(0, obs.center.x - d.i32(obs.size.x / 2));
-      const maxX = std.min(gridSize, obs.center.x + d.i32(obs.size.x / 2));
-      const minY = std.max(0, obs.center.y - d.i32(obs.size.y / 2));
-      const maxY = std.min(gridSize, obs.center.y + d.i32(obs.size.y / 2));
-      if (x >= minX && x <= maxX && y >= minY && y <= maxY) {
-        return true;
-      }
+const isInsideObstacle = tgpu.fn([d.i32, d.i32], d.bool)((x, y) => {
+  for (let obsIdx = 0; obsIdx < MAX_OBSTACLES; obsIdx++) {
+    const obs = obstacles.$[obsIdx];
+    if (obs.enabled === 0) {
+      continue;
     }
-    return false;
-  },
-);
+    const minX = std.max(0, obs.center.x - d.i32(obs.size.x / 2));
+    const maxX = std.min(gridSize, obs.center.x + d.i32(obs.size.x / 2));
+    const minY = std.max(0, obs.center.y - d.i32(obs.size.y / 2));
+    const maxY = std.min(gridSize, obs.center.y + d.i32(obs.size.y / 2));
+    if (x >= minX && x <= maxX && y >= minY && y <= maxY) {
+      return true;
+    }
+  }
+  return false;
+});
 ```
 
 ```ts

apps/typegpu-docs/src/content/docs/reference/naming-convention.mdx

@@ -67,7 +67,7 @@ const cells3 = root.createReadonly(Cells);
 We give slots *camelCase* names with the `Slot` suffix.
 
 ```ts
-const colorSlot = tgpu['~unstable'].slot(vec4f(1, 0, 0, 1));
+const colorSlot = tgpu.slot(vec4f(1, 0, 0, 1));
 ```
 
 ## Accessors

apps/typegpu-docs/src/content/docs/tooling/unplugin-typegpu.mdx

@@ -23,16 +23,14 @@ The package includes the following functionalities:
   import tgpu from 'typegpu';
   import * as d from 'typegpu/data';
 
-  const add = tgpu['~unstable'].fn([d.u32, d.u32], d.u32)(
-    (a, b) => a + b,
-  );
+  const add = tgpu.fn([d.u32, d.u32], d.u32)((a, b) => a + b);
   ```
 
   However, if the implementation function, or the shell, is referenced via a variable, the plugin will not recognize it as TGSL,
   thus to make it work, the function needs to be marked with a `"kernel"` directive.
 
   ```ts
-  const addFn = tgpu['~unstable'].fn([d.u32, d.u32], d.u32);
+  const addFn = tgpu.fn([d.u32, d.u32], d.u32);
 
   const add = addFn((a, b) => {
     'kernel';
@@ -46,14 +44,14 @@ The package includes the following functionalities:
     return a + b;
   };
 
-  const add = tgpu['~unstable'].fn([d.u32, d.u32], d.u32)(addImpl);
+  const add = tgpu.fn([d.u32, d.u32], d.u32)(addImpl);
   ```
 
   After transpiling the function, the JS implementation is removed from the bundle in order to save space.
   To be able to invoke the function both on GPU and CPU, it needs to be marked with `"kernel & js"` directive;
 
   ```ts
-  const add = tgpu['~unstable'].fn([d.u32, d.u32], d.u32)((a, b) => {
+  const add = tgpu.fn([d.u32, d.u32], d.u32)((a, b) => {
     'kernel & js';
     return a + b;
   });
@@ -62,17 +60,11 @@ The package includes the following functionalities:
   ```
 
   Besides transpiling JS into AST, the plugin also collects external references, so it is not necessary to pass them to the `$uses` method anymore.
-  This is not possible when using a JIT transpiler.
 
-- **[WIP] Automatic naming of tgpu objects**
+- **Automatic naming of tgpu objects**
 
-  Naming gpu objects via the `$name` method is very helpful for debugging. Soon it will not be necessary to do that explicitly.
-  Instead, the plugin will be able to name the objects based on the variable names that they are assigned to.
-
-:::caution
-In order for the plugin to work, the file that is to be transformed needs to import _typegpu_.
-Note that unused imports may be automatically removed by bundlers, so make sure this does not happen.
-:::
+  Naming TypeGPU resources via the `$name` method is very helpful for debugging, but it's can get very repetitive.
+  Instead, the plugin is able to automatically name each resource based on the variable names that they are assigned to.
 
 ## Installation
 

apps/typegpu-docs/src/content/examples/algorithms/matrix-next/computeShared.ts

@@ -7,13 +7,13 @@ import { computeLayout } from './types.ts';
 const tileA = tgpu['~unstable'].workgroupVar(d.arrayOf(d.i32, TILE_SIZE ** 2));
 const tileB = tgpu['~unstable'].workgroupVar(d.arrayOf(d.i32, TILE_SIZE ** 2));
 
-export const getIndex = tgpu['~unstable'].fn([d.u32, d.u32, d.u32], d.u32)(
+export const getIndex = tgpu.fn([d.u32, d.u32, d.u32], d.u32)(
   (row, col, columns) => {
     return col + row * columns;
   },
 );
 
-const getTileIndex = tgpu['~unstable'].fn([d.u32, d.u32], d.u32)((row, col) => {
+const getTileIndex = tgpu.fn([d.u32, d.u32], d.u32)((row, col) => {
   return col + row * TILE_SIZE;
 });
 

apps/typegpu-docs/src/content/examples/image-processing/ascii-filter/index.ts

@@ -34,7 +34,7 @@ const displayModes = {
  * Adapted from the original Shadertoy implementation by movAX13h:
  * https://www.shadertoy.com/view/lssGDj
  */
-const characterFn = tgpu['~unstable'].fn([d.u32, d.vec2f], d.f32)((n, p) => {
+const characterFn = tgpu.fn([d.u32, d.vec2f], d.f32)((n, p) => {
   // Transform texture coordinates to character bitmap coordinates (5x5 grid)
   const pos = std.floor(std.add(std.mul(p, d.vec2f(-4, 4)), 2.5));
 

apps/typegpu-docs/src/content/examples/image-processing/ascii-filter/meta.json

@@ -1,5 +1,5 @@
 {
   "title": "ASCII filter",
   "category": "image-processing",
-  "tags": ["camera", "filtering", "external texture"]
+  "tags": ["experimental", "camera", "filtering", "external texture"]
 }

apps/typegpu-docs/src/content/examples/image-processing/camera-thresholding/index.ts

@@ -86,10 +86,7 @@ const sampler = root.device.createSampler({
   minFilter: 'linear',
 });
 
-const thresholdBuffer = root
-  .createBuffer(d.f32)
-  .$name('threshold')
-  .$usage('uniform');
+const thresholdBuffer = root.createBuffer(d.f32).$usage('uniform');
 
 const rareBindGroup = root.createBindGroup(rareLayout, {
   sampling: sampler,