Implemented stuff

Author: iwoplaza

apps/typegpu-docs/src/content/examples/react/triangle/index.tsx

@@ -1,8 +1,22 @@
+import { vec4f } from 'typegpu/data';
+import { useRender } from '@typegpu/react';
+
 function App() {
-  // TODO: Use useRender to draw a full-screen gradient
+  const { ref } = useRender({
+    fragment: ({ uv }) => {
+      'kernel';
+      return vec4f(uv.x, uv.y, 1, 1);
+    },
+  });
+
   // TODO: Provide a time variable to the shader with useUniformValue
   // TODO: Make the gradient shift colors over time using hsvToRgb from @typegpu/color
-  return <main>Hello</main>;
+
+  return (
+    <main>
+      <canvas ref={ref} width='256' height='256' />
+    </main>
+  );
 }
 
 // #region Example controls and cleanup

packages/typegpu-react/README.md

@@ -12,8 +12,9 @@
 import { hsvToRgb } from '@typegpu/color';
 import { useFrame, useRender, useUniformValue } from '@typegpu/react';
 
-const App = () => {
-  const time = useUniformValue(0);
+const App = (props: Props) => {
+  const time = useUniformValue(d.f32, 0);
+  const color = useMirroredUniform(d.vec3f, props.color);
 
   // Runs each frame on the CPU 🤖
   useFrame(() => {
@@ -22,9 +23,9 @@ const App = () => {
 
   const { ref } = useRender({
     // Runs each frame on the GPU 🌈
-    fragment: () => {
+    fragment: ({ uv }) => {
       'kernel';
-      return hsvToRgb(time.value, 1, 1);
+      return hsvToRgb(time.$, uv.x, uv.y) * color.$;
     },
   });
 

packages/typegpu-react/package.json

@@ -31,12 +31,12 @@
   "license": "MIT",
   "peerDependencies": {
     "typegpu": "^0.7.0",
-    "react": "^18.0.0"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@typegpu/tgpu-dev-cli": "workspace:*",
     "@webgpu/types": "catalog:types",
-    "@types/react": "^18.0.0",
+    "@types/react": "^19.0.0",
     "tsdown": "catalog:build",
     "typegpu": "workspace:*",
     "typescript": "catalog:types",

packages/typegpu-react/src/index.ts

@@ -1,3 +1,3 @@
-export { useFrame } from './useFrame.ts';
-export { useRender } from './useRender.ts';
-export { useUniformValue } from './useUniformValue.ts';
+export { useFrame } from './use-frame.ts';
+export { useRender } from './use-render.ts';
+export { useUniformValue } from './use-uniform-value.ts';

packages/typegpu-react/src/root-context.tsx

@@ -0,0 +1,56 @@
+import {
+  createContext,
+  type ReactNode,
+  use,
+  useContext,
+  useState,
+} from 'react';
+import tgpu, { type TgpuRoot } from 'typegpu';
+
+class RootContext {
+  #root: TgpuRoot | undefined;
+  #rootPromise: Promise<TgpuRoot> | undefined;
+
+  initOrGetRoot(): Promise<TgpuRoot> | TgpuRoot {
+    if (this.#root) {
+      return this.#root;
+    }
+
+    if (!this.#rootPromise) {
+      this.#rootPromise = tgpu.init().then((root) => {
+        this.#root = root;
+        return root;
+      });
+    }
+
+    return this.#rootPromise;
+  }
+}
+
+/**
+ * Used in case no provider is mounted
+ */
+const globalRootContextValue = new RootContext();
+
+const rootContext = createContext<RootContext | null>(null);
+
+export interface RootProps {
+  children?: ReactNode | undefined;
+}
+
+export const Root = ({ children }: RootProps) => {
+  const [ctx] = useState(() => new RootContext());
+
+  return (
+    <rootContext.Provider value={ctx}>
+      {children}
+    </rootContext.Provider>
+  );
+};
+
+export function useRoot(): TgpuRoot {
+  const context = useContext(rootContext) ?? globalRootContextValue;
+
+  const maybeRoot = context.initOrGetRoot();
+  return maybeRoot instanceof Promise ? use(maybeRoot) : maybeRoot;
+}

packages/typegpu-react/src/useFrame.ts packages/typegpu-react/src/use-frame.tspackages/typegpu-react/src/useFrame.ts renamed to packages/typegpu-react/src/use-frame.ts

@@ -0,0 +1,86 @@
+import * as d from 'typegpu/data';
+import tgpu from 'typegpu';
+import { useRoot } from './root-context.tsx';
+import { useMemo, useRef } from 'react';
+import { useFrame } from './use-frame.ts';
+
+type InferRecord<T> = {
+  [K in keyof T]: d.Infer<T[K]>;
+};
+
+export interface UseRenderOptions {
+  vertex?: () => void;
+
+  /**
+   * A kernel function that runs per-pixel on the GPU.
+   */
+  fragment: (input: InferRecord<typeof DefaultVarying>) => d.v4f;
+}
+
+const DefaultVarying = {
+  uv: d.vec2f,
+};
+
+const fullScreenTriangle = tgpu['~unstable'].vertexFn({
+  in: { vertexIndex: d.builtin.vertexIndex },
+  out: { pos: d.builtin.position, ...DefaultVarying },
+})((input) => {
+  const pos = [d.vec2f(-1, -1), d.vec2f(3, -1), d.vec2f(-1, 3)];
+  const uv = [d.vec2f(0, 1), d.vec2f(2, 1), d.vec2f(0, -1)];
+
+  return {
+    pos: d.vec4f(pos[input.vertexIndex] as d.v2f, 0, 1),
+    uv: uv[input.vertexIndex] as d.v2f,
+  };
+});
+
+const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
+export function useRender(options: UseRenderOptions) {
+  const ref = useRef<HTMLCanvasElement>(null);
+  const ctxRef = useRef<GPUCanvasContext>(null);
+  const root = useRoot();
+
+  // Only considering the first passed-in fragment function.
+  // This assumes that users won't swap shaders in the same useRender call,
+  // but we can make this more robust by computing a hash with unplugin-typegpu.
+  // TODO: You can also use the React Nook trick to track functions based on their
+  //       place in the code. Simpler and more reliable? ((x)=>x)``
+  const fragmentRef = useRef(options.fragment);
+
+  const fragmentFn = useMemo(() => {
+    return tgpu['~unstable'].fragmentFn({
+      in: { ...DefaultVarying },
+      out: d.vec4f,
+    })(fragmentRef.current);
+  }, []);
+
+  const pipeline = useMemo(() => {
+    return root['~unstable']
+      .withVertex(fullScreenTriangle, {})
+      .withFragment(fragmentFn, { format: presentationFormat })
+      .createPipeline();
+  }, [root, fragmentFn]);
+
+  useFrame(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    if (ctxRef.current === null) {
+      ctxRef.current = canvas.getContext('webgpu') as GPUCanvasContext;
+      ctxRef.current.configure({
+        device: root.device,
+        format: presentationFormat,
+      });
+    }
+
+    pipeline
+      .withColorAttachment({
+        view: ctxRef.current.getCurrentTexture().createView(),
+        loadOp: 'load',
+        storeOp: 'store',
+      })
+      .draw(3);
+  });
+
+  return { ref };
+}

packages/typegpu-react/src/use-render.ts

@@ -0,0 +1,13 @@
+import type * as d from 'typegpu/data';
+
+interface UniformValue<TSchema, TValue extends d.Infer<TSchema>> {
+  schema: TSchema;
+  value: TValue;
+}
+
+export function useUniformValue<TSchema, TValue extends d.Infer<TSchema>>(
+  schema: d.AnyWgslData,
+  initialValue?: TValue | undefined,
+): UniformValue<TSchema, TValue> {
+  // TODO: Implement
+}