Update example to match the new API

Author: iwoplaza

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

@@ -1,4 +1,4 @@
-import tgpu, { d, std, type TgpuVertexFn } from 'typegpu';
+import tgpu, { d, std, type TgpuBuffer, type TgpuVertexFn } from 'typegpu';
 import {
   useFrame,
   useRoot,
@@ -51,12 +51,14 @@ const rotate = (v: d.v2f, angle: number) => {
   return pos;
 };
 
-function createRandomPositions() {
-  return Array.from({ length: PARTICLE_AMOUNT }, () => ({
-    position: d.vec2f(Math.random() * 2 - 1, Math.random() * 2 + 1),
-    velocity: d.vec2f((Math.random() * 2 - 1) / 50, -(Math.random() / 25 + 0.01)),
-    seed: Math.random(),
-  }));
+function writeRandomPositions(buffer: TgpuBuffer<ReturnType<typeof dataLayout.schemaForCount>>) {
+  buffer.write(
+    Array.from({ length: PARTICLE_AMOUNT }, () => ({
+      position: d.vec2f(Math.random() * 2 - 1, Math.random() * 2 + 1),
+      velocity: d.vec2f((Math.random() * 2 - 1) / 50, -(Math.random() / 25 + 0.01)),
+      seed: Math.random(),
+    })),
+  );
 }
 
 const computeLayout = tgpu.bindGroupLayout({
@@ -113,16 +115,19 @@ function App() {
   // buffers
 
   const particleGeometryBuffer = useBuffer(d.arrayOf(ParticleGeometry, PARTICLE_AMOUNT), {
-    initial: () =>
-      Array.from({ length: PARTICLE_AMOUNT }, () => ({
-        angle: Math.floor(Math.random() * 50) - 10,
-        tilt: Math.floor(Math.random() * 10) - 10 - 10,
-        color: COLOR_PALETTE[Math.floor(Math.random() * COLOR_PALETTE.length)],
-      })),
+    initial: (buffer) => {
+      buffer.write(
+        Array.from({ length: PARTICLE_AMOUNT }, () => ({
+          angle: Math.floor(Math.random() * 50) - 10,
+          tilt: Math.floor(Math.random() * 10) - 10 - 10,
+          color: COLOR_PALETTE[Math.floor(Math.random() * COLOR_PALETTE.length)],
+        })),
+      );
+    },
   }).$usage('vertex');
 
   const particleDataBuffer = useBuffer(d.arrayOf(ParticleData, PARTICLE_AMOUNT), {
-    initial: createRandomPositions,
+    initial: writeRandomPositions,
   }).$usage('storage', 'uniform', 'vertex');
 
   const aspectRatio = useUniformValue(d.f32, 1);
@@ -185,7 +190,7 @@ function App() {
         <button
           type="button"
           className="text-4xl shadow rounded p-4"
-          onClick={() => particleDataBuffer.write(createRandomPositions())}
+          onClick={() => writeRandomPositions(particleDataBuffer)}
         >
           🎉
         </button>

apps/typegpu-docs/src/examples/react/shifting-gradient/index.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { d, common, std } from 'typegpu';
 import { useConfigureContext, useFrame, useRoot, useUniformValue } from '@typegpu/react';
 import { oklabToRgb, hexToOklab } from '@typegpu/color';
@@ -28,7 +29,7 @@ function App() {
     [root, time],
   );
 
-  const { canvasRefCallback, ctxRef } = useConfigureContext();
+  const { canvasRefCallback, ctxRef } = useConfigureContext({ alphaMode: 'premultiplied' });
   useFrame(({ elapsedSeconds }) => {
     if (!ctxRef.current) return;
 
@@ -42,7 +43,6 @@ function App() {
 // #region Example controls and cleanup
 
 import { createRoot } from 'react-dom/client';
-import { useMemo } from 'react';
 const reactRoot = createRoot(document.getElementById('example-app') as HTMLDivElement);
 reactRoot.render(<App />);
 

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

@@ -4,9 +4,7 @@ import { useChangeDetection, useDeferredCleanup, useStableSchema } from './helpe
 import { useRoot } from './root-context.tsx';
 
 export interface UseBufferOptions<TSchema extends d.AnyData> {
-  initial?:
-    | ((buffer: TgpuBuffer<TSchema>) => d.InferInput<NoInfer<TSchema>>)
-    | d.InferInput<NoInfer<TSchema>>;
+  initial?: ((buffer: TgpuBuffer<TSchema>) => void) | d.InferInput<NoInfer<TSchema>>;
   onInit?: (buffer: TgpuBuffer<TSchema>) => void;
 }