Batched examples

Author: cieplypolar

apps/typegpu-docs/src/content/examples/rendering/3d-fish/index.ts

@@ -256,55 +256,57 @@ function frame(timestamp: DOMHighResTimeStamp) {
   lastTimestamp = timestamp;
   cameraBuffer.write(camera);
 
-  computePipeline
-    .with(computeBindGroupLayout, computeBindGroups[odd ? 1 : 0])
-    .dispatchWorkgroups(p.fishAmount / p.workGroupSize);
-
-  renderPipeline
-    .withColorAttachment({
-      view: context.getCurrentTexture().createView(),
-      clearValue: [
-        p.backgroundColor.x,
-        p.backgroundColor.y,
-        p.backgroundColor.z,
-        1,
-      ],
-      loadOp: 'clear',
-      storeOp: 'store',
-    })
-    .withDepthStencilAttachment({
-      view: depthTexture.createView(),
-      depthClearValue: 1,
-      depthLoadOp: 'clear',
-      depthStoreOp: 'store',
-    })
-    .with(modelVertexLayout, oceanFloorModel.vertexBuffer)
-    .with(renderInstanceLayout, oceanFloorDataBuffer)
-    .with(renderBindGroupLayout, renderOceanFloorBindGroup)
-    .draw(oceanFloorModel.polygonCount, 1);
-
-  renderPipeline
-    .withColorAttachment({
-      view: context.getCurrentTexture().createView(),
-      clearValue: [
-        p.backgroundColor.x,
-        p.backgroundColor.y,
-        p.backgroundColor.z,
-        1,
-      ],
-      loadOp: 'load',
-      storeOp: 'store',
-    })
-    .withDepthStencilAttachment({
-      view: depthTexture.createView(),
-      depthClearValue: 1,
-      depthLoadOp: 'load',
-      depthStoreOp: 'store',
-    })
-    .with(modelVertexLayout, fishModel.vertexBuffer)
-    .with(renderInstanceLayout, fishDataBuffers[odd ? 1 : 0])
-    .with(renderBindGroupLayout, renderFishBindGroups[odd ? 1 : 0])
-    .draw(fishModel.polygonCount, p.fishAmount);
+  root['~unstable'].batch(() => {
+    computePipeline
+      .with(computeBindGroupLayout, computeBindGroups[odd ? 1 : 0])
+      .dispatchWorkgroups(p.fishAmount / p.workGroupSize);
+
+    renderPipeline
+      .withColorAttachment({
+        view: context.getCurrentTexture().createView(),
+        clearValue: [
+          p.backgroundColor.x,
+          p.backgroundColor.y,
+          p.backgroundColor.z,
+          1,
+        ],
+        loadOp: 'clear',
+        storeOp: 'store',
+      })
+      .withDepthStencilAttachment({
+        view: depthTexture.createView(),
+        depthClearValue: 1,
+        depthLoadOp: 'clear',
+        depthStoreOp: 'store',
+      })
+      .with(modelVertexLayout, oceanFloorModel.vertexBuffer)
+      .with(renderInstanceLayout, oceanFloorDataBuffer)
+      .with(renderBindGroupLayout, renderOceanFloorBindGroup)
+      .draw(oceanFloorModel.polygonCount, 1);
+
+    renderPipeline
+      .withColorAttachment({
+        view: context.getCurrentTexture().createView(),
+        clearValue: [
+          p.backgroundColor.x,
+          p.backgroundColor.y,
+          p.backgroundColor.z,
+          1,
+        ],
+        loadOp: 'load',
+        storeOp: 'store',
+      })
+      .withDepthStencilAttachment({
+        view: depthTexture.createView(),
+        depthClearValue: 1,
+        depthLoadOp: 'load',
+        depthStoreOp: 'store',
+      })
+      .with(modelVertexLayout, fishModel.vertexBuffer)
+      .with(renderInstanceLayout, fishDataBuffers[odd ? 1 : 0])
+      .with(renderBindGroupLayout, renderFishBindGroups[odd ? 1 : 0])
+      .draw(fishModel.polygonCount, p.fishAmount);
+  });
 
   requestAnimationFrame(frame);
 }

apps/typegpu-docs/src/content/examples/rendering/cubemap-reflection/index.ts

@@ -312,7 +312,7 @@ function loop() {
   if (exampleDestroyed) {
     return;
   }
-  render();
+  root['~unstable'].batch(render);
   requestAnimationFrame(loop);
 }
 

apps/typegpu-docs/src/content/examples/simulation/boids-next/index.ts

@@ -294,20 +294,22 @@ function frame() {
 
   even = !even;
 
-  computePipeline
-    .with(computeBindGroupLayout, computeBindGroups[even ? 0 : 1])
-    .dispatchWorkgroups(triangleAmount);
-
-  renderPipeline
-    .withColorAttachment({
-      view: context.getCurrentTexture().createView(),
-      clearValue: [1, 1, 1, 1],
-      loadOp: 'clear' as const,
-      storeOp: 'store' as const,
-    })
-    .with(instanceLayout, trianglePosBuffers[even ? 1 : 0])
-    .with(renderLayout, renderBindGroups[even ? 1 : 0])
-    .draw(3, triangleAmount);
+  root['~unstable'].batch(() => {
+    computePipeline
+      .with(computeBindGroupLayout, computeBindGroups[even ? 0 : 1])
+      .dispatchWorkgroups(triangleAmount);
+
+    renderPipeline
+      .withColorAttachment({
+        view: context.getCurrentTexture().createView(),
+        clearValue: [1, 1, 1, 1],
+        loadOp: 'clear' as const,
+        storeOp: 'store' as const,
+      })
+      .with(instanceLayout, trianglePosBuffers[even ? 1 : 0])
+      .with(renderLayout, renderBindGroups[even ? 1 : 0])
+      .draw(3, triangleAmount);
+  });
 
   requestAnimationFrame(frame);
 }

apps/typegpu-docs/src/content/examples/simulation/confetti/index.ts

@@ -210,16 +210,18 @@ onFrame((dt) => {
   deltaTime.write(dt);
   aspectRatio.write(canvas.width / canvas.height);
 
-  computePipeline.dispatchWorkgroups(PARTICLE_AMOUNT);
-
-  renderPipeline
-    .withColorAttachment({
-      view: context.getCurrentTexture().createView(),
-      clearValue: [0, 0, 0, 0],
-      loadOp: 'clear' as const,
-      storeOp: 'store' as const,
-    })
-    .draw(4, PARTICLE_AMOUNT);
+  root['~unstable'].batch(() => {
+    computePipeline.dispatchWorkgroups(PARTICLE_AMOUNT);
+
+    renderPipeline
+      .withColorAttachment({
+        view: context.getCurrentTexture().createView(),
+        clearValue: [0, 0, 0, 0],
+        loadOp: 'clear' as const,
+        storeOp: 'store' as const,
+      })
+      .draw(4, PARTICLE_AMOUNT);
+  });
 });
 
 // example controls and cleanup

apps/typegpu-docs/src/content/examples/simulation/fluid-double-buffering/index.ts

@@ -586,10 +586,12 @@ onFrame((deltaTime) => {
   msSinceLastTick += deltaTime;
 
   if (msSinceLastTick >= timestep) {
-    for (let i = 0; i < stepsPerTick; ++i) {
-      tick();
-    }
-    primary.render();
+    root['~unstable'].batch(() => {
+      for (let i = 0; i < stepsPerTick; ++i) {
+        tick();
+      }
+      primary.render();
+    });
     msSinceLastTick -= timestep;
   }
 });

apps/typegpu-docs/src/content/examples/simulation/fluid-with-atomics/index.ts

@@ -372,7 +372,6 @@ function resetGameData() {
         storeOp: 'store' as const,
       })
       .draw(4, options.size ** 2);
-
     currentStateBuffer.copyFrom(nextState.buffer);
   };
 
@@ -397,7 +396,7 @@ function resetGameData() {
 
   createSampleScene();
   applyDrawCanvas();
-  render();
+  root['~unstable'].batch(render);
 }
 
 let isDrawing = false;

apps/typegpu-docs/src/content/examples/simulation/gravity/index.ts

@@ -199,7 +199,7 @@ function frame(timestamp: DOMHighResTimeStamp) {
     passed: Math.min((timestamp - lastTimestamp) / 1000, 0.1),
   });
   lastTimestamp = timestamp;
-  render();
+  root['~unstable'].batch(render);
   requestAnimationFrame(frame);
 }
 requestAnimationFrame(frame);