feat: Add React 3D monkey example

apps/typegpu-docs/src/examples/react/3d-monkey/index.html

@@ -0,0 +1,5 @@
+<div
+  id="example-app"
+  style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
+>
+</div>

apps/typegpu-docs/src/examples/react/3d-monkey/index.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import {
+  useFrame,
+  useMirroredUniform,
+  useRoot,
+  useUniformValue,
+} from '@typegpu/react';
+import * as d from 'typegpu/data';
+import * as m from 'wgpu-matrix';
+import { loadModel, type Model } from './load-model.ts';
+import { Uniforms } from './schemas.ts';
+import { MonkeyRenderer } from './monkey-renderer.tsx';
+
+let changeMonkeyColor: () => void;
+
+function App() {
+  const root = useRoot();
+  const [model, setModel] = useState<Model | null>(null);
+  const [currentModelColor, setCurrentModelColor] = useState(
+    d.vec3f(1.0, 0.5, 0.2),
+  ); // initial color - orange
+
+  changeMonkeyColor = () => {
+    setCurrentModelColor(d.vec3f(Math.random(), Math.random(), Math.random()));
+  };
+
+  const time = useUniformValue(d.f32, 0);
+  const modelColor = useMirroredUniform(d.vec3f, currentModelColor);
+  const uniforms = useUniformValue(Uniforms);
+
+  // Model loading
+  useEffect(() => {
+    loadModel(root, '/TypeGPU/assets/3d-monkey/monkey.obj').then(setModel);
+  }, [root]);
+
+  // Animation loop
+  useFrame(() => {
+    time.value = performance.now() / 1000;
+    const modelMatrix = m.mat4.rotationY(time.value, d.mat4x4f());
+    m.mat4.scale(modelMatrix, [0.5, 0.5, 0.5], modelMatrix);
+
+    const viewMatrix = m.mat4.lookAt([0, 0, -3], [0, 0, 0], [0, 1, 0]);
+    const projectionMatrix = m.mat4.perspective(Math.PI / 4, 16 / 9, 0.1, 100);
+    const viewProjectionMatrix = m.mat4.multiply(
+      projectionMatrix,
+      viewMatrix,
+      d.mat4x4f(),
+    );
+
+    uniforms.value = { modelMatrix, viewProjectionMatrix };
+  });
+
+  if (!model) return null;
+
+  return (
+    <MonkeyRenderer
+      model={model}
+      uniforms={uniforms}
+      modelColor={modelColor}
+    />
+  );
+}
+
+// #region Example controls and cleanup
+
+import { createRoot } from 'react-dom/client';
+
+const reactRoot = createRoot(
+  document.getElementById('example-app') as HTMLDivElement,
+);
+reactRoot.render(<App />);
+
+export const controls = {
+  'Monkey color': {
+    onButtonClick: () => {
+      changeMonkeyColor();
+    },
+  },
+};
+
+export function onCleanup() {
+  setTimeout(() => reactRoot.unmount(), 0);
+}
+
+// #endregion

apps/typegpu-docs/src/examples/react/3d-monkey/load-model.ts

@@ -0,0 +1,62 @@
+import { load } from '@loaders.gl/core';
+import { OBJLoader } from '@loaders.gl/obj';
+import type { TgpuBuffer, VertexFlag } from 'typegpu';
+import type { TgpuRoot } from 'typegpu';
+import * as d from 'typegpu/data';
+import { modelVertexLayout } from './schemas.ts';
+
+export type ModelVertex = d.WgslArray<
+  d.WgslStruct<{
+    readonly modelPosition: d.Vec3f;
+    readonly modelNormal: d.Vec3f;
+    readonly textureUV: d.Vec2f;
+  }>
+>;
+
+export type VertexBuffer = TgpuBuffer<ModelVertex> & VertexFlag;
+
+export type Model = {
+  vertexBuffer: VertexBuffer;
+  polygonCount: number;
+};
+
+export async function loadModel(
+  root: TgpuRoot,
+  modelPath: string,
+): Promise<Model> {
+  const modelMesh = await load(modelPath, OBJLoader);
+  const polygonCount = modelMesh.attributes.POSITION.value.length / 3;
+
+  const vertexBuffer = root
+    .createBuffer(modelVertexLayout.schemaForCount(polygonCount))
+    .$usage('vertex')
+    .$name(`model vertices of ${modelPath}`);
+
+  const modelVertices = [];
+  for (let i = 0; i < polygonCount; i++) {
+    modelVertices.push({
+      modelPosition: d.vec3f(
+        modelMesh.attributes.POSITION.value[3 * i],
+        modelMesh.attributes.POSITION.value[3 * i + 1],
+        modelMesh.attributes.POSITION.value[3 * i + 2],
+      ),
+      modelNormal: d.vec3f(
+        modelMesh.attributes.NORMAL.value[3 * i],
+        modelMesh.attributes.NORMAL.value[3 * i + 1],
+        modelMesh.attributes.NORMAL.value[3 * i + 2],
+      ),
+      textureUV: d.vec2f(
+        modelMesh.attributes.TEXCOORD_0.value[2 * i],
+        1 - modelMesh.attributes.TEXCOORD_0.value[2 * i + 1],
+      ),
+    });
+  }
+  modelVertices.reverse();
+
+  vertexBuffer.write(modelVertices);
+
+  return {
+    vertexBuffer,
+    polygonCount,
+  };
+}

apps/typegpu-docs/src/examples/react/3d-monkey/meta.json

@@ -0,0 +1,5 @@
+{
+  "title": "React: 3D Monkey",
+  "category": "react",
+  "tags": ["experimental"]
+}

apps/typegpu-docs/src/examples/react/3d-monkey/monkey-renderer.tsx

@@ -0,0 +1,92 @@
+import {
+  type MirroredValue,
+  type UniformValue,
+  useRender,
+} from '@typegpu/react';
+import { useEffect } from 'react';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import type { Model } from './load-model.ts';
+import {
+  ModelFragmentInput,
+  ModelVertexInput,
+  modelVertexLayout,
+  ModelVertexOutput,
+  type Uniforms,
+} from './schemas.ts';
+
+export function MonkeyRenderer({
+  model,
+  uniforms,
+  modelColor,
+}: {
+  model: Model;
+  uniforms: UniformValue<typeof Uniforms, d.Infer<typeof Uniforms>>;
+  modelColor: MirroredValue<d.Vec3f>;
+}) {
+  const { ref } = useRender({
+    vertexIn: ModelVertexInput,
+    vertexOut: ModelVertexOutput,
+    vertex: (input) => {
+      'kernel';
+      const worldPosition = std.mul(
+        uniforms.$.modelMatrix,
+        d.vec4f(input.modelPosition, 1.0),
+      );
+      const canvasPosition = std.mul(
+        uniforms.$.viewProjectionMatrix,
+        worldPosition,
+      );
+
+      const worldNormal = std.normalize(
+        std.mul(uniforms.$.modelMatrix, d.vec4f(input.modelNormal, 0.0)).xyz,
+      );
+
+      return {
+        canvasPosition: canvasPosition,
+        worldNormal: worldNormal,
+      };
+    },
+    fragmentIn: ModelFragmentInput,
+    fragmentOut: d.vec4f,
+    fragment: (input) => {
+      'kernel';
+      const lightDirection = std.normalize(d.vec3f(0.5, 0.5, -1.0));
+      const ambientLight = 0.2;
+
+      const diffuseStrength = std.max(
+        std.dot(input.worldNormal, lightDirection),
+        0.0,
+      );
+      const finalLight = ambientLight + diffuseStrength * (1.0 - ambientLight);
+      const finalColor = std.mul(finalLight, modelColor.$);
+
+      return d.vec4f(finalColor, 1.0);
+    },
+    vertexBuffer: model.vertexBuffer,
+    vertexCount: model.polygonCount,
+    vertexLayout: modelVertexLayout,
+    depthTest: true,
+  });
+
+  // Ensure canvas pixel resolution matches its display size
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    const resize = () => {
+      canvas.width = canvas.clientWidth * window.devicePixelRatio;
+      canvas.height = canvas.clientHeight * window.devicePixelRatio;
+    };
+    const observer = new window.ResizeObserver(resize);
+    observer.observe(canvas);
+    resize();
+    return () => observer.disconnect();
+  }, [ref]);
+
+  return (
+    <canvas
+      ref={ref}
+      style={{ width: '100%', height: '100%', display: 'block' }}
+    />
+  );
+}

apps/typegpu-docs/src/examples/react/3d-monkey/schemas.ts

@@ -0,0 +1,23 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+
+export const ModelVertexInput = {
+  modelPosition: d.vec3f,
+  modelNormal: d.vec3f,
+} as const;
+
+export const ModelVertexOutput = {
+  canvasPosition: d.builtin.position,
+  worldNormal: d.vec3f,
+} as const;
+
+export const ModelFragmentInput = ModelVertexOutput;
+
+export const Uniforms = d.struct({
+  viewProjectionMatrix: d.mat4x4f,
+  modelMatrix: d.mat4x4f,
+});
+
+export const modelVertexLayout = tgpu.vertexLayout((n: number) =>
+  d.arrayOf(d.struct(ModelVertexInput), n)
+);

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

@@ -1,82 +1,48 @@
 import * as d from 'typegpu/data';
-import {
-  useFrame,
-  useMirroredUniform,
-  useRender,
-  useUniformValue,
-} from '@typegpu/react';
+import { useFrame, useRender, useUniformValue } from '@typegpu/react';
 import { hsvToRgb } from '@typegpu/color';
 
-// TODO: We can come up with a more sophisticated example later
-function ColorBox(props: { color: d.v3f }) {
-  const color = useMirroredUniform(d.vec3f, props.color);
-
-  const { ref } = useRender({
-    fragment: () => {
-      'kernel';
-      return d.vec4f(color.$, 1);
-    },
-  });
-
-  return (
-    <canvas
-      ref={ref}
-      width='32'
-      height='32'
-      style={{ border: '2px black solid' }}
-    />
-  );
-}
-
-let randomizeColor: () => void;
-
 function App() {
-  const [currentColor, setCurrentColor] = useState(d.vec3f(1, 0, 0));
   const time = useUniformValue(d.f32, 0);
 
-  randomizeColor = () => {
-    setCurrentColor(d.vec3f(Math.random(), Math.random(), Math.random()));
-  };
-
   useFrame(() => {
     time.value = performance.now() / 1000;
   });
 
   const { ref } = useRender({
+    vertex: ({ vertexIndex }) => {
+      'kernel';
+      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[vertexIndex] as d.v2f, 0, 1),
+        uv: uv[vertexIndex] as d.v2f,
+      };
+    },
     fragment: () => {
       'kernel';
       const t = time.$;
       const rgb = hsvToRgb(d.vec3f(t * 0.5, 1, 1));
-
       return d.vec4f(rgb, 1);
     },
   });
 
   return (
-    <main style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
+    <main>
       <canvas ref={ref} width='256' height='256' />
-      <ColorBox color={currentColor} />
     </main>
   );
 }
 
 // #region Example controls and cleanup
 
 import { createRoot } from 'react-dom/client';
-import { useState } from 'react';
 const reactRoot = createRoot(
   document.getElementById('example-app') as HTMLDivElement,
 );
 reactRoot.render(<App />);
 
-export const controls = {
-  'Randomize box color': {
-    onButtonClick: () => {
-      randomizeColor();
-    },
-  },
-};
-
 export function onCleanup() {
   setTimeout(() => reactRoot.unmount(), 0);
 }

packages/typegpu-react/src/index.ts

@@ -1,4 +1,7 @@
 export { useFrame } from './use-frame.ts';
 export { useRender } from './use-render.ts';
 export { useUniformValue } from './use-uniform-value.ts';
+export type { UniformValue } from './use-uniform-value.ts';
 export { useMirroredUniform } from './use-mirrored-uniform.ts';
+export type { MirroredValue } from './use-mirrored-uniform.ts';
+export { useRoot } from './root-context.tsx';

packages/typegpu-react/src/use-mirrored-uniform.ts

@@ -3,7 +3,7 @@ import { useRoot } from './root-context.tsx';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { ValidateUniformSchema } from 'typegpu';
 
-interface MirroredValue<TSchema> {
+export interface MirroredValue<TSchema> {
   schema: TSchema;
   readonly $: d.InferGPU<TSchema>;
 }