new code snippets

apps/typegpu-docs/src/components/CodeShowcase.astro

@@ -10,133 +10,117 @@ const sectionId = "interactive-code-section";
 
 <div class="flex flex-col" id={sectionId}>
     <div
-        class=""
+        class="flex gap-4 sm:grid sm:grid-cols-3 -mx-6 px-6 pb-2 sm:overflow-visible overflow-x-auto horizontal-scroll"
     >
         <div
-            class="flex gap-4 sm:grid sm:grid-cols-3 -mx-6 px-6 pb-2 sm:overflow-visible overflow-x-auto horizontal-scroll"
+            class="flex-shrink-0 opacity-60 hover:opacity-100 w-72 sm:w-auto transition-opacity duration-200 ease-in-out cursor-pointer code-button-wrapper"
         >
-            <div
-                class="flex-shrink-0 opacity-60 hover:opacity-100 w-72 sm:w-auto transition-opacity duration-200 ease-in-out cursor-pointer code-button-wrapper"
-            >
-                <CodeButton
-                    title="As a foundation"
-                    message="TypeGPU smooths out the tough parts of WebGPU without boxing you in."
-                    icon={for_libraries}
-                />
-            </div>
-            <div
-                class="flex-shrink-0 opacity-60 hover:opacity-100 w-72 sm:w-auto transition-opacity duration-200 ease-in-out cursor-pointer code-button-wrapper"
-            >
-                <CodeButton
-                    title="As a puzzle piece"
-                    message="Pick and choose the APIs, then plug them into your code however you want."
-                    icon={as_a_puzzle_piece}
-                />
-            </div>
-            <div
-                class="flex-shrink-0 opacity-60 hover:opacity-100 w-72 sm:w-auto transition-opacity duration-200 ease-in-out cursor-pointer code-button-wrapper"
-            >
-                <CodeButton
-                    title="For libraries"
-                    message="Simplify library internals, and make your user-facing API type-safe by default."
-                    icon={as_a_foundation}
-                />
-            </div>
+            <CodeButton
+                title="As a foundation"
+                message="TypeGPU smooths out the tough parts of WebGPU without boxing you in."
+                icon={for_libraries}
+            />
+        </div>
+        <div
+            class="flex-shrink-0 opacity-60 hover:opacity-100 w-72 sm:w-auto transition-opacity duration-200 ease-in-out cursor-pointer code-button-wrapper"
+        >
+            <CodeButton
+                title="As a puzzle piece"
+                message="Pick and choose the APIs, then plug them into your code however you want."
+                icon={as_a_puzzle_piece}
+            />
+        </div>
+        <div
+            class="flex-shrink-0 opacity-60 hover:opacity-100 w-72 sm:w-auto transition-opacity duration-200 ease-in-out cursor-pointer code-button-wrapper"
+        >
+            <CodeButton
+                title="For libraries"
+                message="Simplify library internals, and make your user-facing API type-safe by default."
+                icon={as_a_foundation}
+            />
         </div>
     </div>
 
     <div class="codepen-container">
         <CodePen
-            code={`export interface TgpuComputePipeline
-  extends TgpuNamable, SelfResolvable, Timeable {
-  readonly [$internal]: ComputePipelineInternals;
-  readonly resourceType: 'compute-pipeline';
-
-  with(
-    bindGroupLayout: TgpuBindGroupLayout,
-    bindGroup: TgpuBindGroup,
-  ): TgpuComputePipeline;
-
-  dispatchWorkgroups(
-    x: number,
-    y?: number | undefined,
-    z?: number | undefined,
-  ): void;
-}
-
-export function INTERNAL_createComputePipeline(
-  branch: ExperimentalTgpuRoot,
-  slotBindings: [TgpuSlot<unknown>, unknown][],
-  entryFn: TgpuComputeFn,
-) {
-  return new TgpuComputePipelineImpl(
-    new ComputePipelineCore(branch, slotBindings, entryFn),
-    {},
-  );
-}`}
+            code={`const neighborhood = (a: number, r: number) => {
+  'use gpu';
+  return d.vec2f(a - r, a + r);
+};
+
+//
+// #1) Can be called in JS
+//
+const range = neighborhood(1.1, 0.5);
+//    ^? d.v2f
+
+//
+// #2) Used to generate WGSL
+//
+const main = () => {
+  'use gpu';
+  return neighborhood(1.1, 0.5);
+};
+
+const wgsl = tgpu.resolve([main]);
+//    ^? string
+
+//
+// #3) Executed on the GPU (generates WGSL underneath)
+//
+root['~unstable']
+  .createGuardedComputePipeline(main)
+  .dispatchThreads();`}
             language="typescript"
         />
         <CodePen
-            code={`export function INTERNAL_createComputePipeline(
-    branch: ExperimentalTgpuRoot,
-    slotBindings: [TgpuSlot<unknown>, unknown][],
-    entryFn: TgpuComputeFn,
-  ) {
-    return new TgpuComputePipelineImpl(
-      new ComputePipelineCore(branch, slotBindings, entryFn),
-      {},
-    );
-    export interface TgpuComputePipeline
-    extends TgpuNamable, SelfResolvable, Timeable {
-    readonly [$internal]: ComputePipelineInternals;
-    readonly resourceType: 'compute-pipeline';
+            code={`import type { StorageFlag, TgpuBuffer, TgpuRoot } from 'typegpu';
+import * as d from 'typegpu/data';
 
+// We can define schemas, or functions that return schemas...
+const HeightMap = (width: number, height: number) =>
+  d.arrayOf(d.arrayOf(d.f32, height), width);
 
-  with(
-    bindGroupLayout: TgpuBindGroupLayout,
-    bindGroup: TgpuBindGroup,
-  ): TgpuComputePipeline;
+// ...then infer types from them
+type HeightMap = ReturnType<typeof HeightMap>;
 
-  dispatchWorkgroups(
-    x: number,
-    y?: number | undefined,
-    z?: number | undefined,
-  ): void;
-}
+export async function generateHeightMap(
+  root: TgpuRoot,
+  opts: { width: number; height: number },
+): Promise<TgpuBuffer<HeightMap> & StorageFlag> {
+  const buffer = root
+    .createBuffer(HeightMap(opts.width, opts.height))
+    .$usage('storage');
 
+  const rawBuffer = root.unwrap(buffer); // => GPUBuffer
+
+  // Here we can do anything we would usually do with a
+  // WebGPU buffer, like populating it in a compute shader.
+  // 'rawBuffer' is the WebGPU resource that is backing the
+  // typed 'buffer' object, meaning any changes to it will
+  // be visible in both.
+
+  return buffer;
 }`}
             language="typescript"
         />
         <CodePen
-            code={`// Create a buffer with a specific data type
-export function INTERNAL_createComputePipeline(
-    branch: ExperimentalTgpuRoot,
-    slotBindings: [TgpuSlot<unknown>, unknown][],
-    entryFn: TgpuComputeFn,
-  ) {
-    return new TgpuComputePipelineImpl(
-      new ComputePipelineCore(branch, slotBindings, entryFn),
-      {},
-    );
-    with(
-        bindGroupLayout: TgpuBindGroupLayout,
-        bindGroup: TgpuBindGroup,
-        ): TgpuComputePipeline;
-
-        dispatchWorkgroups(
-      x: number,
-      y?: number | undefined,
-      z?: number | undefined,
-    ): void;
-    export interface TgpuComputePipeline
-    extends TgpuNamable, SelfResolvable, Timeable {
-    readonly [$internal]: ComputePipelineInternals;
-    readonly resourceType: 'compute-pipeline';
-
-
-}
-
-      }`}
+            code={`import tgpu from 'typegpu';
+import gen from '@xyz/gen';
+import plot from '@abc/plot';
+
+// common root for allocating resources
+const root = await tgpu.init();
+
+const terrainBuffer = await gen.generateHeightMap(root, { ... });
+//    ^? TgpuBuffer<WgslArray<WgslArray<F32>>> & StorageFlag
+
+// ERROR: Argument of type 'TgpuBuffer<WgslArray<WgslArray<F32>>>' is
+// not assignable to parameter of type 'TgpuBuffer<WgslArray<F32>>>'
+plot.array1d(root, terrainBuffer);
+
+// SUCCESS!
+plot.array2d(root, terrainBuffer);}`}
             language="typescript"
         />
     </div>

apps/typegpu-docs/src/pages/new/index.astro

@@ -127,7 +127,7 @@ import PageLayout from "../../layouts/PageLayout.astro";
       <CodeShowcase />
       <div class="flex md:flex-row flex-col md:justify-between gap-6 md:gap-0">
         <h3
-          class="font-normal text-blue-950 dark:text-gray-100 text-xl md:text-4xl center"
+          class="font-medium text-blue-950 dark:text-gray-100 text-xl md:text-2xl center"
         >
           Read more about TypeGPU
         </h3>
@@ -150,12 +150,12 @@ import PageLayout from "../../layouts/PageLayout.astro";
     >
       <div class="flex flex-col gap-6 pb-14">
         <h2
-          class="font-normal text-blue-950 dark:text-gray-100 text-2xlmd:text-4xl center"
+          class="font-medium text-blue-950 dark:text-gray-100 text-2xl md:text-4xl center"
         >
           Explore TypeGPU examples
         </h2>
         <p
-          class="text-blue-950 dark:text-gray-300 text-lg md:text-2xl text-pretty"
+          class="text-blue-950 dark:text-gray-300 text-lg md:text-xl text-pretty"
         >
           From interactive 3D apps to custom shaders and type-safe libraries,
           TypeGPU gives you the tools to build anything WebGPU can do.
@@ -170,12 +170,12 @@ import PageLayout from "../../layouts/PageLayout.astro";
     >
       <div class="flex flex-col gap-6 pb-20">
         <h2
-          class="font-normal text-blue-950 dark:text-white text-2xlmd:text-4xl center"
+          class="font-medium text-blue-950 dark:text-white text-2xl md:text-4xl center"
         >
           Get to know TypeGPU
         </h2>
         <p
-          class="text-blue-950 dark:text-white text-lg md:text-2xl text-pretty"
+          class="text-blue-950 dark:text-white text-lg md:text-xl text-pretty"
         >
           Dive into guides, tutorials, and videos to see how TypeGPU can change
           the way you work with GPU rendering and computing.
@@ -190,12 +190,12 @@ import PageLayout from "../../layouts/PageLayout.astro";
     >
       <div class="flex flex-col gap-6 pb-20">
         <h2
-          class="font-normal text-blue-950 dark:text-gray-100 text-2xl md:text-4xl center"
+          class="font-medium text-blue-950 dark:text-gray-100 text-2xl md:text-4xl center"
         >
           What's around the corner?
         </h2>
         <p
-          class="text-blue-950 dark:text-gray-300 text-lg md:text-2xl text-pretty"
+          class="text-blue-950 dark:text-gray-300 text-lg md:text-xl text-pretty"
         >
           Our journey toward end-to-end type safety involves several
           interoperating primitives – explore our live board to see what
@@ -228,7 +228,7 @@ import PageLayout from "../../layouts/PageLayout.astro";
           We are <GradientTitle title="Software Mansion" />
         </h2>
         <div
-          class="mb-4 text-blue-900 dark:text-gray-300 text-2xl text-center text-pretty"
+          class="mb-4 text-blue-900 dark:text-gray-300 text-xl text-center text-pretty"
         >
           We’re a software company built around improving developer experience
           and bringing to life the innovative ideas of our clients. Do you have