@agent-native/toolkit 0.201.1 → 0.202.0-nightly-20261006033736

package/src/app/shared/ocean/hero-ocean-background.tsx

@@ -0,0 +1,238 @@
+import { useEffect, useRef, useState } from "react";
+
+import { readOceanColors } from "./brand-colors.js";
+import type { OceanRenderer } from "./renderer.js";
+import { OCEAN_TUNING } from "./tuning.js";
+
+const FADE_IN_MS = 700;
+const RENDERER_INIT_TIMEOUT_MS = 30_000;
+const FIRST_FRAME_TIMEOUT_MS = 6000;
+
+export interface HeroOceanBackgroundProps {
+  onError: (error: unknown) => void;
+  onReady: () => void;
+  frameRate?: number;
+  className?: string;
+}
+
+type PointerTarget = readonly [number, number, number];
+
+export function HeroOceanBackground({
+  onError,
+  onReady,
+  frameRate = 30,
+  className = "absolute inset-0 z-[-1]",
+}: HeroOceanBackgroundProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [ready, setReady] = useState(false);
+  const onErrorRef = useRef(onError);
+  const onReadyRef = useRef(onReady);
+  onErrorRef.current = onError;
+  onReadyRef.current = onReady;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    if (!container || !canvas) return;
+
+    let renderer: OceanRenderer | undefined;
+    let cancelled = false;
+    let rendererFailed = false;
+    const cleanups: (() => void)[] = [];
+    let firstFrameTimeout: number | undefined;
+    let firstFrameStartedAt: number | undefined;
+    let firstFrameRemainingMs = FIRST_FRAME_TIMEOUT_MS;
+    let waitingForFirstFrame = false;
+    const pauseFirstFrameDeadline = () => {
+      if (firstFrameTimeout === undefined) return;
+      window.clearTimeout(firstFrameTimeout);
+      firstFrameTimeout = undefined;
+      firstFrameRemainingMs = Math.max(
+        0,
+        firstFrameRemainingMs -
+          (Date.now() - (firstFrameStartedAt ?? Date.now())),
+      );
+      firstFrameStartedAt = undefined;
+    };
+    const resumeFirstFrameDeadline = () => {
+      if (
+        cancelled ||
+        rendererFailed ||
+        !waitingForFirstFrame ||
+        document.hidden ||
+        firstFrameTimeout !== undefined
+      ) {
+        return;
+      }
+      firstFrameStartedAt = Date.now();
+      firstFrameTimeout = window.setTimeout(
+        () => failRenderer(new Error("The ocean wave did not draw a frame")),
+        firstFrameRemainingMs,
+      );
+    };
+    const stopFirstFrameDeadline = () => {
+      waitingForFirstFrame = false;
+      pauseFirstFrameDeadline();
+    };
+    const rendererInitTimeout = window.setTimeout(() => {
+      failRenderer(new Error("The ocean wave renderer did not initialize"));
+    }, RENDERER_INIT_TIMEOUT_MS);
+    cleanups.push(() => {
+      window.clearTimeout(rendererInitTimeout);
+      stopFirstFrameDeadline();
+    });
+
+    const failRenderer = (error: unknown) => {
+      if (cancelled || rendererFailed) return;
+      rendererFailed = true;
+      window.clearTimeout(rendererInitTimeout);
+      stopFirstFrameDeadline();
+      renderer?.dispose();
+      onErrorRef.current(error);
+    };
+    const handleDocumentVisibility = () => {
+      if (document.hidden) pauseFirstFrameDeadline();
+      else resumeFirstFrameDeadline();
+    };
+    document.addEventListener("visibilitychange", handleDocumentVisibility);
+    cleanups.push(() =>
+      document.removeEventListener(
+        "visibilitychange",
+        handleDocumentVisibility,
+      ),
+    );
+    let pointerTarget: PointerTarget = [0, 0, 0];
+    let lastPointer: readonly [number, number] | undefined;
+
+    const updatePointer = (clientX: number, clientY: number) => {
+      const rect = container.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      const inside = x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
+
+      pointerTarget = [
+        (x / rect.width) * 2 - 1,
+        1 - (y / rect.height) * 2,
+        inside ? 1 : 0,
+      ];
+      renderer?.setPointer(pointerTarget);
+    };
+
+    const handleMouseMove = (event: MouseEvent) => {
+      lastPointer = [event.clientX, event.clientY];
+      updatePointer(event.clientX, event.clientY);
+    };
+
+    const handleScroll = () => {
+      if (!lastPointer) return;
+      updatePointer(lastPointer[0], lastPointer[1]);
+    };
+
+    const fadePointer = () => {
+      lastPointer = undefined;
+      pointerTarget = [pointerTarget[0], pointerTarget[1], 0];
+      renderer?.setPointer(pointerTarget);
+    };
+
+    document.body.addEventListener("mousemove", handleMouseMove, {
+      passive: true,
+    });
+    document.body.addEventListener("mouseleave", fadePointer, {
+      passive: true,
+    });
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("blur", fadePointer);
+    cleanups.push(() => {
+      document.body.removeEventListener("mousemove", handleMouseMove);
+      document.body.removeEventListener("mouseleave", fadePointer);
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("blur", fadePointer);
+    });
+
+    void import("./renderer.js")
+      .then(({ createRenderer }) => {
+        if (cancelled || rendererFailed) return;
+        renderer = createRenderer({
+          canvas,
+          colors: readOceanColors(container),
+          fps: frameRate,
+          onError: failRenderer,
+        });
+        renderer.setPointer(pointerTarget);
+
+        void renderer.ready
+          .then(() => {
+            if (cancelled || rendererFailed) return;
+            window.clearTimeout(rendererInitTimeout);
+            waitingForFirstFrame = true;
+            resumeFirstFrameDeadline();
+            return renderer?.firstFrame;
+          })
+          .then(() => {
+            if (cancelled || rendererFailed) return;
+            stopFirstFrameDeadline();
+            setReady(true);
+            onReadyRef.current();
+          })
+          .catch(failRenderer);
+
+        const themeObserver = new MutationObserver(() => {
+          renderer?.setColors(readOceanColors(container));
+        });
+        themeObserver.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ["class", "data-theme"],
+        });
+        cleanups.push(() => themeObserver.disconnect());
+
+        const visibility = new IntersectionObserver(
+          ([entry]) => renderer?.setPaused(!(entry?.isIntersecting ?? true)),
+          { threshold: 0 },
+        );
+        visibility.observe(container);
+        cleanups.push(() => visibility.disconnect());
+      })
+      .catch((error: unknown) => {
+        failRenderer(error);
+      });
+
+    return () => {
+      cancelled = true;
+      for (const cleanup of cleanups) cleanup();
+      renderer?.dispose();
+    };
+  }, [frameRate]);
+
+  const { bottomFadeStartPercent } = OCEAN_TUNING;
+  const mask =
+    bottomFadeStartPercent >= 100
+      ? undefined
+      : // guard:allow-raw-color - The mask channel requires opaque black, not a theme color.
+        `linear-gradient(to bottom, #000 ${bottomFadeStartPercent}%, transparent 100%)`;
+
+  return (
+    <div
+      ref={containerRef}
+      aria-hidden="true"
+      data-agent-native-wave="true"
+      // Opacity is inline rather than a class because it animates between 0
+      // and a token value; the page background remains visible until the
+      // first wave frame is ready.
+      className={className}
+      style={{
+        opacity: ready ? 0.3 : 0,
+        transition: `opacity ${FADE_IN_MS}ms ease-out`,
+        ...(mask ? { maskImage: mask, WebkitMaskImage: mask } : {}),
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        className="block h-full w-full"
+        style={{ display: "block", height: "100%", width: "100%" }}
+      />
+    </div>
+  );
+}

package/src/app/shared/ocean/ifft-stage.wgsl

@@ -0,0 +1,36 @@
+struct IfftStageUniforms {
+  resolution: f32,
+  subtransformSize: f32,
+  horizontal: f32,
+};
+@group(0) @binding(0) var<uniform> u: IfftStageUniforms;
+@group(0) @binding(1) var u_input: texture_2d<f32>;
+
+@fragment fn fs_main(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  let N = i32(u.resolution);
+  let horizontal = u.horizontal > 0.5;
+  let index = select(position.y - 0.5, position.x - 0.5, horizontal);
+
+  let evenIndex = floor(index / u.subtransformSize) * (u.subtransformSize * 0.5)
+                + (index % (u.subtransformSize * 0.5));
+
+  let evenCoord = select(
+    vec2i(i32(position.x - 0.5), i32(evenIndex)),
+    vec2i(i32(evenIndex), i32(position.y - 0.5)),
+    horizontal,
+  );
+  let oddCoord = select(
+    vec2i(i32(position.x - 0.5), i32(evenIndex + u.resolution * 0.5)),
+    vec2i(i32(evenIndex + u.resolution * 0.5), i32(position.y - 0.5)),
+    horizontal,
+  );
+  let even = wrapLoad(u_input, evenCoord, N);
+  let odd = wrapLoad(u_input, oddCoord, N);
+
+  let twiddleArg = 2.0 * PI * (index / u.subtransformSize);
+  let twiddle = vec2f(cos(twiddleArg), sin(twiddleArg));
+
+  let outA = even.xy + cmul(twiddle, odd.xy);
+  let outB = even.zw + cmul(twiddle, odd.zw);
+  return vec4f(outA, outB);
+}

package/src/app/shared/ocean/initial-spectrum.wgsl

@@ -0,0 +1,36 @@
+struct InitialSpectrumUniforms {
+  resolution: f32,
+  size: f32,
+  windSpeed: f32,
+  windAngle: f32,
+  amplitude: f32,
+};
+@group(0) @binding(0) var<uniform> u: InitialSpectrumUniforms;
+@group(0) @binding(1) var u_noise: texture_2d<f32>;
+
+fn phillips(k: vec2f) -> f32 {
+  let kk = dot(k, k);
+  if (kk < 1e-8) { return 0.0; }
+  let w = vec2f(cos(u.windAngle), sin(u.windAngle));
+  let L = (u.windSpeed * u.windSpeed) / G;
+  let kdotw = dot(normalize(k), w);
+  var ph = u.amplitude * exp(-1.0 / (kk * L * L)) / (kk * kk) * (kdotw * kdotw);
+  let l = L * 0.001;
+  ph *= exp(-kk * l * l);
+  if (kdotw < 0.0) { ph *= 0.07; }
+  return ph;
+}
+
+@fragment fn fs_main(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  let coord = position.xy - vec2f(0.5);
+  let n = select(coord.x - u.resolution, coord.x, coord.x < u.resolution * 0.5);
+  let m = select(coord.y - u.resolution, coord.y, coord.y < u.resolution * 0.5);
+  let k = (2.0 * PI / u.size) * vec2f(n, m);
+
+  let rnd = textureLoad(u_noise, vec2u(coord), 0);
+
+  let h0k    = (1.0 / sqrt(2.0)) * vec2f(rnd.x, rnd.y) * sqrt(phillips(k));
+  let h0negk = (1.0 / sqrt(2.0)) * vec2f(rnd.z, rnd.w) * sqrt(phillips(-k));
+
+  return vec4f(h0k, h0negk.x, -h0negk.y);
+}

package/src/app/shared/ocean/noise.wgsl

@@ -0,0 +1,24 @@
+const SEED: u32 = 0x6f636561u;
+const RESOLUTION: u32 = 512u;
+
+
+
+fn mulberryAt(callIndex: u32) -> f32 {
+  let state = SEED + 0x6d2b79f5u * (callIndex + 1u);
+  var t = state;
+  t = (t ^ (t >> 15u)) * (t | 1u);
+  t = t ^ (t + ((t ^ (t >> 7u)) * (t | 61u)));
+  return f32(t ^ (t >> 14u)) / 4294967296.0;
+}
+fn gaussianPair(callIndex: u32) -> vec2f {
+  let u1 = max(mulberryAt(callIndex), 1.17549435e-38);
+  let u2 = mulberryAt(callIndex + 1u);
+  let magnitude = sqrt(-2.0 * log(u1));
+  let angle = 6.283185307179586 * u2;
+  return magnitude * vec2f(cos(angle), sin(angle));
+}
+@fragment fn fs_main(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  let coord = vec2u(position.xy - vec2f(0.5));
+  let base = (coord.y * RESOLUTION + coord.x) * 4u;
+  return vec4f(gaussianPair(base), gaussianPair(base + 2u));
+}

package/src/app/shared/ocean/normal-foam.wgsl

@@ -0,0 +1,32 @@
+struct NormalFoamUniforms {
+  resolution: f32,
+  worldSize: f32,
+  displacementScale: f32,
+  foamThreshold: f32,
+};
+@group(0) @binding(0) var<uniform> u: NormalFoamUniforms;
+@group(0) @binding(1) var u_displacement: texture_2d<f32>;
+
+@fragment fn fs_main(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  let N = i32(u.resolution);
+  let coord = vec2i(position.xy - vec2f(0.5));
+  let dx = u.worldSize / u.resolution;
+
+  let r = wrapLoad(u_displacement, coord + vec2i(1, 0), N).xyz * u.displacementScale;
+  let l = wrapLoad(u_displacement, coord - vec2i(1, 0), N).xyz * u.displacementScale;
+  let t = wrapLoad(u_displacement, coord + vec2i(0, 1), N).xyz * u.displacementScale;
+  let b = wrapLoad(u_displacement, coord - vec2i(0, 1), N).xyz * u.displacementScale;
+
+  let dhdx = (r.y - l.y) / (2.0 * dx);
+  let dhdz = (t.y - b.y) / (2.0 * dx);
+  let normal = normalize(vec3f(-dhdx, 1.0, -dhdz));
+
+  let dDxdx = (r.x - l.x) / (2.0 * dx);
+  let dDzdz = (t.z - b.z) / (2.0 * dx);
+  let dDxdz = (t.x - b.x) / (2.0 * dx);
+  let dDzdx = (r.z - l.z) / (2.0 * dx);
+  let J = (1.0 + dDxdx) * (1.0 + dDzdz) - dDxdz * dDzdx;
+
+  let foam = 1.0 - smoothstep(u.foamThreshold, u.foamThreshold + 0.8, J);
+  return vec4f(normal, foam);
+}

package/src/app/shared/ocean/ocean-colors.ts

@@ -0,0 +1,11 @@
+import { OCEAN_TUNING } from "./tuning.js";
+
+export interface OceanColors {
+  readonly fg: readonly [number, number, number];
+  readonly bg: readonly [number, number, number];
+}
+
+export const DEFAULT_OCEAN_COLORS: OceanColors = {
+  fg: OCEAN_TUNING.present.fgColor,
+  bg: OCEAN_TUNING.present.bgColor,
+};

package/src/app/shared/ocean/ocean-common.wgsl

@@ -0,0 +1,15 @@
+const PI: f32 = 3.141592653589793;
+const G: f32 = 9.81;
+
+fn cmul(a: vec2f, b: vec2f) -> vec2f {
+  return vec2f(a.x * b.x - a.y * b.y, a.x * b.y + a.y * b.x);
+}
+
+fn wrapCoord(coord: vec2i, N: i32) -> vec2u {
+  let wrapped = (coord % vec2i(N) + vec2i(N)) % vec2i(N);
+  return vec2u(wrapped);
+}
+
+fn wrapLoad(tex: texture_2d<f32>, coord: vec2i, N: i32) -> vec4f {
+  return textureLoad(tex, wrapCoord(coord, N), 0);
+}

package/src/app/shared/ocean/ocean-graph.ts

@@ -0,0 +1,29 @@
+export type SimulationTargetName = "spectrum" | "ping" | "pong";
+
+export interface IfftStage {
+  readonly index: number;
+  readonly axisStage: number;
+  readonly horizontal: boolean;
+  readonly subtransformSize: number;
+  readonly input: SimulationTargetName;
+  readonly output: Exclude<SimulationTargetName, "spectrum">;
+}
+
+export const OCEAN_RESOLUTION = 512 as const;
+const AXIS_STAGES = 9;
+
+export function createIfftStageTable(): readonly IfftStage[] {
+  return Object.freeze(
+    Array.from({ length: AXIS_STAGES * 2 }, (_, index): IfftStage => {
+      const output = index % 2 ? "pong" : "ping";
+      return Object.freeze({
+        index,
+        axisStage: index % AXIS_STAGES,
+        horizontal: index < AXIS_STAGES,
+        subtransformSize: 2 ** ((index % AXIS_STAGES) + 1),
+        input: index === 0 ? "spectrum" : output === "ping" ? "pong" : "ping",
+        output,
+      });
+    }),
+  );
+}

package/src/app/shared/ocean/particles.wgsl

@@ -0,0 +1,139 @@
+struct ParticleUniforms {
+  view: mat4x4f,
+  projection: mat4x4f,
+  viewport: vec4f,
+  world: vec4f,
+  fade: vec4f,
+  oceanColor: vec4f,
+  neonColor: vec4f,
+  foamColor: vec4f,
+  cursor: vec4f,
+};
+
+struct VertexOut {
+  @builtin(position) position: vec4f,
+  @location(0) pointCoord: vec2f,
+  @location(1) foam: f32,
+  @location(2) normal: vec3f,
+  @location(3) viewDir: vec3f,
+  @location(4) height: f32,
+  @location(5) fade: f32,
+};
+
+@group(0) @binding(0) var<uniform> u: ParticleUniforms;
+@group(0) @binding(1) var u_displacement: texture_2d<f32>;
+@group(0) @binding(2) var u_normalFoam: texture_2d<f32>;
+
+fn particleHash(p: vec2u) -> f32 {
+  var n = p.x * 374761393u + p.y * 668265263u;
+  n = (n ^ (n >> 13u)) * 1274126177u;
+  n = n ^ (n >> 16u);
+  return f32(n) / 4294967295.0;
+}
+
+fn quadCorner(vertexIndex: u32) -> vec2f {
+  let cornerIndex = array<u32, 6>(0u, 1u, 2u, 2u, 1u, 3u)[vertexIndex % 6u];
+  switch (cornerIndex) {
+    case 0u: { return vec2f(-1.0, -1.0); }
+    case 1u: { return vec2f( 1.0, -1.0); }
+    case 2u: { return vec2f(-1.0,  1.0); }
+    default: { return vec2f( 1.0,  1.0); }
+  }
+}
+
+@vertex fn vs_main(
+  @builtin(vertex_index) vertexIndex: u32,
+  @builtin(instance_index) instanceIndex: u32,
+) -> VertexOut {
+  let resolution = max(1u, u32(u.viewport.w));
+  let i = instanceIndex % resolution;
+  let j = instanceIndex / resolution;
+  let particleRef = vec2f(f32(i), f32(j)) / f32(resolution);
+  let texCoord = vec2u(i, j);
+
+  let disp = textureLoad(u_displacement, texCoord, 0).xyz * u.world.y;
+  let nf = textureLoad(u_normalFoam, texCoord, 0);
+
+  let halfWorld = u.world.x * 0.5;
+  let base = vec3f(
+    particleRef.x * u.world.x - halfWorld,
+    0.0,
+    particleRef.y * u.world.x - halfWorld,
+  );
+  let pos = base + disp;
+
+  let mv = u.view * vec4f(pos, 1.0);
+  let viewDir = -mv.xyz;
+  let dist = -mv.z;
+  let f = 1.0 - smoothstep(u.fade.x, u.fade.y, dist);
+  let fade = pow(clamp(f, 0.0, 1.0), u.fade.z);
+
+  let projected = u.projection * mv;
+  var ndc = projected.xy / projected.w;
+
+  let aspect = u.viewport.x / max(u.viewport.y, 1.0);
+  if (u.cursor.z > 0.0) {
+    let cursorDelta = u.cursor.xy - ndc;
+    let fieldDelta = cursorDelta * vec2f(aspect, 1.0);
+    let cursorDistance = length(fieldDelta);
+    let rangeFalloff = 1.0 - smoothstep(0.0, 1.7, cursorDistance);
+    let particleId = vec2u(i, j);
+    let particleSeed = particleHash(particleId);
+    let detached = smoothstep(0.76, 0.998, particleSeed);
+    let phase = particleHash(particleId + vec2u(37u, 71u)) * 6.2831855;
+    let activity = 0.55 + 0.45 * (0.5 + 0.5 * sin(u.cursor.w * 0.45 + phase));
+    let trailProgress = clamp(cursorDistance / 1.7, 0.0, 1.0);
+    let trailWidth = mix(0.025, 0.28, trailProgress);
+    let jitter = vec2f(
+      particleHash(particleId + vec2u(17u, 53u)) - 0.5,
+      particleHash(particleId + vec2u(41u, 29u)) - 0.5,
+    ) * vec2f(trailWidth / aspect, trailWidth);
+    let nearFalloff = 1.0 - smoothstep(0.0, 1.0, cursorDistance);
+    let baselineResponse = mix(0.004, 0.014, nearFalloff) *
+      mix(0.6, 1.0, particleSeed);
+    let particleResponse = baselineResponse +
+      detached * activity * mix(0.11, 0.82, nearFalloff);
+    let attraction = rangeFalloff * particleResponse * u.cursor.z;
+    ndc += (u.cursor.xy + jitter - ndc) * attraction;
+  }
+
+  let corner = quadCorner(vertexIndex);
+  let pointSizePx = 2.0 * u.world.z * u.viewport.z;
+  let clipOffset = corner * (pointSizePx / u.viewport.xy) * projected.w;
+  let clip = vec4f(ndc * projected.w + clipOffset, projected.z, projected.w);
+
+  var out: VertexOut;
+  out.position = clip;
+  out.pointCoord = corner * 0.5 + vec2f(0.5);
+  out.foam = nf.w;
+  out.normal = nf.xyz;
+  out.viewDir = viewDir;
+  out.height = disp.y;
+  out.fade = fade;
+  return out;
+}
+
+@fragment fn fs_main(in: VertexOut) -> @location(0) vec4f {
+  let cc = in.pointCoord - vec2f(0.5);
+  let d2 = dot(cc, cc);
+  if (d2 > 0.25) {
+    discard;
+  }
+
+  let n = normalize(in.normal);
+  let v = normalize(in.viewDir);
+  let fresnel = pow(1.0 - clamp(dot(n, v), 0.0, 1.0), 5.0);
+
+  let foam = clamp(in.foam, 0.0, 1.0);
+  let crest = smoothstep(-0.5, 1.5, in.height);
+
+  var color = u.oceanColor.rgb * 0.5;
+  color += u.neonColor.rgb * crest * 0.5;
+  color += u.neonColor.rgb * fresnel * 0.15;
+  color = mix(color, u.foamColor.rgb, foam);
+  var alpha = 0.02 + crest * 0.06 + fresnel * 0.04;
+  alpha = mix(alpha, 1.0, foam);
+  color *= in.fade;
+  alpha *= in.fade;
+  return vec4f(color, clamp(alpha, 0.0, 1.0));
+}

package/src/app/shared/ocean/present.wgsl

@@ -0,0 +1,40 @@
+struct PresentUniforms {
+  fgColor: vec4f,
+  bgColor: vec4f,
+
+  brightness: f32,
+  _pad: vec3f,
+};
+
+@group(0) @binding(0) var<uniform> uniforms: PresentUniforms;
+@group(0) @binding(1) var sceneHDR: texture_2d<f32>;
+@group(0) @binding(2) var bloomTexture: texture_2d<f32>;
+@group(0) @binding(3) var linearSampler: sampler;
+
+fn LinearTosRGB(value: vec4f) -> vec4f {
+  let lt = value.rgb * 12.92;
+  let gt = 1.055 * pow(value.rgb, vec3f(0.41666)) - vec3f(0.055);
+  let rgb = select(gt, lt, value.rgb <= vec3f(0.0031308));
+  return vec4f(rgb, value.a);
+}
+
+@fragment fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
+  let scene = textureSample(sceneHDR, linearSampler, uv);
+  let bloom = textureSample(bloomTexture, linearSampler, uv);
+  let hdr = scene.rgb + bloom.rgb;
+
+
+
+
+  let tone = clamp(dot(hdr, vec3f(0.2126, 0.7152, 0.0722)), 0.0, 1.0);
+
+
+
+
+
+  var color = mix(uniforms.bgColor.rgb, uniforms.fgColor.rgb, tone);
+  color += (uniforms.fgColor.rgb - uniforms.bgColor.rgb) * tone * tone
+    * (uniforms.brightness - 1.0);
+
+  return LinearTosRGB(vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), 1.0));
+}