impr: Radiance Cascades v2

apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.ts

@@ -16,6 +16,7 @@ context.configure({
 });
 
 const [width, height] = [canvas.width, canvas.height];
+const initialBrushRadius = 0.015;
 
 // Scene texture + views.
 const sceneTexture = root
@@ -47,7 +48,7 @@ const paramsUniform = root.createUniform(DrawParams, {
   isDrawing: 0,
   lastMousePos: d.vec2f(0.5),
   mousePos: d.vec2f(0.5),
-  brushRadius: 0.05,
+  brushRadius: initialBrushRadius,
   lightColor: d.vec3f(1, 0.9, 0.7),
 });
 
@@ -182,8 +183,10 @@ function drawScene() {
 
 function updateScene() {
   if (sceneDirty) {
-    floodRunner.run();
-    radianceRunner.run();
+    const encoder = root.device.createCommandEncoder();
+    floodRunner.run(encoder);
+    radianceRunner.run(encoder);
+    root.device.queue.submit([encoder.finish()]);
     sceneDirty = false;
   }
 }
@@ -220,8 +223,8 @@ function frame(timestamp: number) {
 export const controls = defineControls({
   ...drawInteraction.controls,
   'Brush Size': {
-    initial: 0.015,
-    min: 0.015,
+    initial: initialBrushRadius,
+    min: initialBrushRadius,
     max: 0.15,
     step: 0.015,
     onSliderChange(value: number) {

apps/typegpu-docs/src/examples/rendering/radiance-cascades/drag-controller.ts

@@ -1,7 +1,7 @@
 import { sdBox2d, sdDisk } from '@typegpu/sdf';
 import type { AnySceneElement } from './scene.ts';
 import { sceneElements } from './scene.ts';
-import { d } from 'typegpu';
+import * as d from 'typegpu/data';
 
 type DragTarget = AnySceneElement;
 

apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.ts

@@ -106,6 +106,46 @@ const cascadeSampler = root.createSampler({
   minFilter: 'linear',
 });
 
+const part1By1 = tgpu.fn(
+  [d.u32],
+  d.u32,
+)((v) => {
+  'use gpu';
+  const x0 = v & 0x0000ffff;
+  const x1 = (x0 | (x0 << 8)) & 0x00ff00ff;
+  const x2 = (x1 | (x1 << 4)) & 0x0f0f0f0f;
+  const x3 = (x2 | (x2 << 2)) & 0x33333333;
+  return (x3 | (x3 << 1)) & 0x55555555;
+});
+
+const compact1By1 = tgpu.fn(
+  [d.u32],
+  d.u32,
+)((v) => {
+  'use gpu';
+  const x0 = v & 0x55555555;
+  const x1 = (x0 ^ (x0 >> 1)) & 0x33333333;
+  const x2 = (x1 ^ (x1 >> 2)) & 0x0f0f0f0f;
+  const x3 = (x2 ^ (x2 >> 4)) & 0x00ff00ff;
+  return (x3 ^ (x3 >> 8)) & 0x0000ffff;
+});
+
+const morton2D = tgpu.fn(
+  [d.u32, d.u32],
+  d.u32,
+)((x, y) => {
+  'use gpu';
+  return part1By1(x) | (part1By1(y) << 1);
+});
+
+const unmorton2D = tgpu.fn(
+  [d.u32],
+  d.vec2u,
+)((index) => {
+  'use gpu';
+  return d.vec2u(compact1By1(index), compact1By1(index >> 1));
+});
+
 const cascadePassPipeline = root
   .with(sceneDataAccess, sceneDataUniform)
   .createGuardedComputePipeline((x, y) => {
@@ -136,7 +176,7 @@ const cascadePassPipeline = root
 
     for (const i of tgpu.unroll(std.range(4))) {
       const dirActual = dirStored * 2 + d.vec2u(i & 1, i >> 1);
-      const rayIndex = d.f32(dirActual.y * raysDimActual + dirActual.x) + 0.5;
+      const rayIndex = d.f32(morton2D(dirActual.x, dirActual.y)) + 0.5;
       const angle = (rayIndex / d.f32(rayCountActual)) * (Math.PI * 2) - Math.PI;
       const rayDir = d.vec2f(std.cos(angle), -std.sin(angle));
 
@@ -304,7 +344,8 @@ const overlayFrag = tgpu.fragmentFn({
         const rayDist = sdf.sdLine(uv, probePos, probePos + rayDir * std.max(rayEndDistance, 0.01));
 
         if (rayDist < minRayDist) {
-          const dirStored = d.vec2u((ri % raysDimActual) >> 1, d.u32(ri / raysDimActual) >> 1);
+          const dirActual = unmorton2D(ri);
+          const dirStored = d.vec2u(dirActual.x >> 1, dirActual.y >> 1);
           const sample = std.textureLoad(
             overlayDebugBGL.$.cascadeTex,
             d.vec2i(dirStored * probes + probe),

packages/typegpu-radiance-cascades/README.md

@@ -26,12 +26,65 @@ const runner = createRadianceCascades({
 runner.run();
 ```
 
-## TypeGPU is created by Software Mansion
+`run()` batches all cascade passes and the final radiance-field build into one
+command buffer. Pass your own encoder to batch it with surrounding work:
 
-[![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=typegpu-github 'Software Mansion')](https://swmansion.com)
+```ts
+const encoder = root.device.createCommandEncoder();
+runner.run(encoder);
+root.device.queue.submit([encoder.finish()]);
+```
+
+## Scene contract
+
+The default marcher expects `sdf(uv)` to return a signed distance in
+short-axis-normalized UV units:
+
+- positive outside geometry
+- negative inside geometry
+- zero on the blocking or emitting surface
+
+`color(uv)` should return linear radiance/emission. If the source texture is
+sRGB-like, linearize it before returning from `color`.
+
+## Quality and memory options
+
+```ts
+const runner = createRadianceCascades({
+  root,
+  size: { width, height },
+  sdfResolution,
+  sdf,
+  color,
+
+  // Direction density in the base cascade. 2 matches the classic default.
+  baseStoredRayDim: 2,
+
+  // hardware keeps the single filtered upper sample. bilinear-fix forks toward
+  // the four upper probes before merging.
+  mergeMode: 'bilinear-fix',
+
+  // Two active 2D ping-pong cascade textures are used by default. Enable this
+  // only when you need to inspect every cascade layer after a run.
+  keepCascadeLayers: false,
+
+  erodeBiasPx: 1,
+  epsPx: 0.25,
+  minStepPx: 0.125,
+  maxRaySteps: 64,
+  stepSafety: 1,
+  intervalOverlapPx: 0,
+});
+```
+
+Available merge modes are:
+
+- `'hardware'`
+- `'bilinear-fix'`
+
+`intervalOverlapPx` may also be set to `'upperProbeSpacing'` to use each
+layer's upper-probe spacing as the overlap amount.
 
-Since 2012 [Software Mansion](https://swmansion.com) is a software agency with
-experience in building web and mobile apps. We are Core React Native
-Contributors and experts in dealing with all kinds of React Native issues. We
-can help you build your next dream product –
-[Hire us](https://swmansion.com/contact/projects?utm_source=typegpu&utm_medium=readme).
+If you provide an output texture view, `runner.output` is that view. When the
+runner owns or can prove it has a sampled texture, `runner.outputTexture` is
+also available for creating sampled views.