react-native-webrtc-kaleidoscope 2.0.0 → 2.1.0

package/catalog/shaders/anamorphic-lensflare/anamorphic-lensflare.ts

@@ -0,0 +1,106 @@
+// Anamorphic lens-flare layer-shader interface: typed uniforms + control
+// descriptor. A cinematic camera-lens artifact, a transparent OVERLAY layer
+// (use blend 'additive'). All three palette colors are exposed so the flare can
+// be color-matched to whatever sits behind it (e.g. the simianlights field in the
+// observation-deck composite). Shader source is ./anamorphic-lensflare.frag.
+
+import type { RGB } from '../../../src/lib/primitives.types';
+import type { UniformControl } from '../_shared/types';
+
+/** Typed uniforms for the `anamorphic-lensflare` layer shader. */
+export type AnamorphicLensFlareUniforms = {
+  /** Flare X position, 0..1 (it drifts slowly around this). */
+  readonly uFlareX: number;
+  /** Flare Y position, 0..1 (0 = bottom). */
+  readonly uFlareY: number;
+  /** Overall brightness multiplier. */
+  readonly uIntensity: number;
+  /** Horizontal streak reach; higher = longer. */
+  readonly uStreakLength: number;
+  /** Main streak vertical tightness; higher = thinner. */
+  readonly uStreakWidth: number;
+  /** Optical-ghost strength along the flare axis. */
+  readonly uGhostStrength: number;
+  /** Core / warm streak tint. */
+  readonly uWarmColor: RGB;
+  /** Halo / wide-streak tint. */
+  readonly uBlueColor: RGB;
+  /** Secondary streak / ghost tint. */
+  readonly uPinkColor: RGB;
+};
+
+/** The `anamorphic-lensflare` shader's tunable uniforms; defaults are the stock cinematic look. */
+export const ANAMORPHIC_LENSFLARE_CONTROLS: readonly UniformControl[] = [
+  {
+    name: 'uFlareX',
+    kind: 'float',
+    default: 0.68,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    doc: 'Flare X position (drifts around this).',
+  },
+  {
+    name: 'uFlareY',
+    kind: 'float',
+    default: 0.34,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    doc: 'Flare Y position (0 = bottom).',
+  },
+  {
+    name: 'uIntensity',
+    kind: 'float',
+    default: 0.85,
+    min: 0,
+    max: 2,
+    step: 0.01,
+    doc: 'Overall brightness.',
+  },
+  {
+    name: 'uStreakLength',
+    kind: 'float',
+    default: 0.55,
+    min: 0,
+    max: 1.5,
+    step: 0.01,
+    doc: 'Horizontal streak reach.',
+  },
+  {
+    name: 'uStreakWidth',
+    kind: 'float',
+    default: 210,
+    min: 20,
+    max: 400,
+    step: 5,
+    doc: 'Main streak tightness; higher = thinner.',
+  },
+  {
+    name: 'uGhostStrength',
+    kind: 'float',
+    default: 0.55,
+    min: 0,
+    max: 1.5,
+    step: 0.01,
+    doc: 'Optical-ghost strength.',
+  },
+  {
+    name: 'uWarmColor',
+    kind: 'color',
+    default: [1.0, 0.82, 0.58],
+    doc: 'Core / warm streak tint.',
+  },
+  {
+    name: 'uBlueColor',
+    kind: 'color',
+    default: [0.35, 0.55, 1.0],
+    doc: 'Halo / wide-streak tint.',
+  },
+  {
+    name: 'uPinkColor',
+    kind: 'color',
+    default: [1.0, 0.45, 0.95],
+    doc: 'Secondary streak / ghost tint.',
+  },
+];

package/catalog/shaders/blur/blur.form.tsx

@@ -0,0 +1,29 @@
+// Blur's editor form: the shader OWNS its control layout. This pass just stacks
+// one <Control uniform="…"/> per uniform in declared order (the auto-form's shape);
+// the point is that this file exists per shader, so layout/grouping is a local edit
+// here, and a new primitive flows in through <Control> without touching it.
+// Conventional layer id: "blur".
+
+import {
+  Control,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { BLUR_CONTROLS } from './blur';
+
+export function BlurForm({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <ControlForm
+      id="blur"
+      uniforms={uniforms.blur ?? {}}
+      onPatch={onPatch}
+      disabled={disabled}
+      controls={BLUR_CONTROLS}
+    >
+      <ControlSection title="blur">
+        <Control uniform="sigma" />
+      </ControlSection>
+    </ControlForm>
+  );
+}

package/catalog/shaders/blur/blur.ts

@@ -0,0 +1,32 @@
+// Blur layer-shader interface: a camera-sampling separable gaussian. Unlike the
+// generative layer shaders, blur reads its input channel (the camera) and softens
+// it rather than generating pixels; its one tunable is `sigma`. The descriptor
+// drives the demo's generated slider, exactly like the generative controls.
+
+import type { UniformControl } from '../_shared/types';
+
+/** Typed uniforms for the `blur` layer shader. */
+export type BlurUniforms = {
+  /** Gaussian blur sigma (softness). Higher = softer. Slider range [0.5, 10]. */
+  readonly sigma: number;
+};
+
+/**
+ * The `blur` layer's tunable. A single `sigma`, surfaced as "blur" (the `label`).
+ * The live kernel is a 13-tap separable gaussian whose tap spacing also scales
+ * with sigma, so the top of the slider keeps softening (with a faint ghost) past
+ * where a fixed-radius kernel saturates. The max of 10 keeps that spread subtle;
+ * see the kernel in web-driver/effects/composite.ts (mirrored on Android + iOS).
+ */
+export const BLUR_CONTROLS: readonly UniformControl[] = [
+  {
+    name: 'sigma',
+    label: 'blur',
+    kind: 'float',
+    default: 4,
+    min: 0.5,
+    max: 10,
+    step: 0.1,
+    doc: 'Gaussian blur softness; higher = softer.',
+  },
+];

package/catalog/shaders/blur/composite-blur.frag

@@ -0,0 +1,42 @@
+// Composite compositor BLUR layer: a camera-sampling separable gaussian, 13-tap
+// (base offsets -6..6, scaled by a sigma-coupled spread), sigma-weighted. One pass
+// per direction (uDir is the texel step on the active axis): horizontal camera ->
+// scratchA, then vertical scratchA -> scratchB. Output keeps the source alpha (the
+// camera is opaque).
+//
+// The tap spacing scales with sigma (spread): the high end of the slider gains a
+// little extra reach plus a faint ghost/double-image instead of flatlining once the
+// kernel saturates (~sigma 7). Intentional coupling; one knob drives both blur
+// softness and tap spacing, so this is a small multi-fx unit, not a pure gaussian.
+// Keep the spread term. No floor, so at low sigma the spread is sub-texel (taps
+// overlap, near no-op).
+//
+// Canonical single source for all three runtimes (build:shaders): web
+// COMPOSITE_BLUR_FRAG_SRC, Android Shaders.COMPOSITE_BLUR_FRAG, iOS
+// composite-blur.metalsrc. The host supplies uDir + uSigma; on iOS CompositeRendering
+// binds them by name (ShaderLibrary.uniformBufferIndices), so the spirv-cross buffer
+// order is not assumed. Do not hand-edit the generated copies.
+#version 300 es
+precision highp float;
+uniform sampler2D uTex;
+uniform vec2 uDir;
+uniform float uSigma;
+in highp vec2 vUv;
+out vec4 oColor;
+void main() {
+  float s2 = 2.0 * uSigma * uSigma;
+  float w[7];
+  float sum = 0.0;
+  for (int i = 0; i < 7; i++) {
+    w[i] = exp(-(float(i) * float(i)) / s2);
+    sum += (i == 0) ? w[i] : 2.0 * w[i];
+  }
+  float spread = uSigma * 0.25;
+  vec4 acc = texture(uTex, vUv) * (w[0] / sum);
+  for (int i = 1; i < 7; i++) {
+    vec2 off = uDir * float(i) * spread;
+    acc += texture(uTex, vUv + off) * (w[i] / sum);
+    acc += texture(uTex, vUv - off) * (w[i] / sum);
+  }
+  oColor = acc;
+}

package/catalog/shaders/clouds/clouds.form.tsx

@@ -0,0 +1,39 @@
+// Clouds' editor form: the shader OWNS its control layout. This pass just stacks
+// one <Control uniform="…"/> per uniform in declared order (the auto-form's shape);
+// the point is that this file exists per shader, so layout/grouping is a local edit
+// here, and a new primitive flows in through <Control> without touching it.
+// Conventional layer id: "sky".
+
+import {
+  Control,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { CLOUDS_CONTROLS } from './clouds';
+
+export function CloudsForm({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <ControlForm
+      id="sky"
+      uniforms={uniforms.sky ?? {}}
+      onPatch={onPatch}
+      disabled={disabled}
+      controls={CLOUDS_CONTROLS}
+    >
+      <ControlSection title="sky">
+        <Control uniform="uSkyLowColor" />
+        <Control uniform="uSkyHighColor" />
+        <Control uniform="uCloudLightColor" />
+        <Control uniform="uCloudDarkColor" />
+        <Control uniform="uExposure" />
+        <Control uniform="uStepSize" />
+        <Control uniform="uCloudSpeed" />
+        <Control uniform="uCloudScale" />
+        <Control uniform="uDensity" />
+        <Control uniform="uCoverage" />
+        <Control uniform="uSoftness" />
+      </ControlSection>
+    </ControlForm>
+  );
+}

package/catalog/shaders/clouds/clouds.frag

@@ -0,0 +1,128 @@
+// Clouds: raymarched clouds with an art-directable time-of-day palette + exposure.
+// A full-frame opaque BACKGROUND layer (alpha 1). Ported from the Shadertoy
+// prototype to this repo's GLSL ES 3.00 multi-runtime convention: the palette and
+// shape params that were Shadertoy globals/#defines are now uniforms, and
+// iTime/iResolution/mainImage -> uTime/uResolution/main+oColor. STEPS stays a
+// compile-time constant (GLSL ES loop bound).
+//
+// Slab-bounded march (issue #37): the clouds live in 0 < p.y < 3 (the height
+// mask is 0 outside it), so cloudDensity() returns 0 before the 5-octave fbm()
+// when p.y leaves the slab, and the march breaks once the ray exits it. Both
+// skip only zero-contribution samples; output is unchanged.
+//
+// UV convention: matches passthrough.vert. vUv = (0, 0) bottom-left, (1, 1)
+// top-right; fragCoord is reconstructed as vUv * uResolution. Fully procedural
+// (no input texture), so net texture flips are zero on every runtime; no
+// gl_FragCoord is read.
+//
+// Precision: highp float (the rand()/hash() chain uses the 43758.5453123
+// multiplier; mediump bands it). This source is codegen'd by build:shaders into
+// CLOUDS_FRAG_SRC in web-driver/shaders.generated.ts (the web compositor's copy).
+//
+// Working time-of-day palettes + shape looks live in shaders/clouds.presets.md.
+// Quick reference (uStepSize / uCloudSpeed): clear 0.20/0.6, billowy 0.10/0.2,
+// wispy 0.25/0.2.
+
+#version 300 es
+precision highp float;
+
+uniform float uTime;
+uniform vec2 uResolution;
+uniform vec3 uSkyLowColor;
+uniform vec3 uSkyHighColor;
+uniform vec3 uCloudLightColor;
+uniform vec3 uCloudDarkColor;
+uniform float uExposure;
+uniform float uStepSize;
+uniform float uCloudSpeed;
+uniform float uCloudScale;
+uniform float uDensity;
+uniform float uCoverage;
+uniform float uSoftness;
+
+in highp vec2 vUv;
+out vec4 oColor;
+
+// STEPS must stay a compile-time constant (GLSL ES loop bound).
+#define STEPS 48
+
+float hash(vec3 p) {
+    p = fract(p * 0.3183099 + 0.1);
+    p *= 17.0;
+    return fract(p.x * p.y * p.z * (p.x + p.y + p.z));
+}
+
+float rand(vec2 p) {
+    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+float noise(vec3 p) {
+    vec3 i = floor(p);
+    vec3 f = fract(p);
+    f = f * f * (3.0 - 2.0 * f);
+    return mix(
+        mix(
+            mix(hash(i + vec3(0,0,0)), hash(i + vec3(1,0,0)), f.x),
+            mix(hash(i + vec3(0,1,0)), hash(i + vec3(1,1,0)), f.x),
+            f.y),
+        mix(
+            mix(hash(i + vec3(0,0,1)), hash(i + vec3(1,0,1)), f.x),
+            mix(hash(i + vec3(0,1,1)), hash(i + vec3(1,1,1)), f.x),
+            f.y),
+        f.z);
+}
+
+float fbm(vec3 p) {
+    float v = 0.0;
+    float a = 0.5;
+    for (int i = 0; i < 5; i++) {
+        v += a * noise(p);
+        p *= 2.03;
+        a *= 0.5;
+    }
+    return v;
+}
+
+float cloudDensity(vec3 p) {
+    p += vec3(uTime * uCloudSpeed, 0.0, uTime * uCloudSpeed * 0.35);
+    // Outside the slab the height mask is 0, so the sample is 0; bail before fbm.
+    if (p.y <= 0.0 || p.y >= 3.0) return 0.0;
+    float n = fbm(p * uCloudScale);
+    float bottom = smoothstep(0.0, 0.7, p.y);
+    float top = smoothstep(3.0, 1.2, p.y);
+    float heightMask = bottom * top;
+    float cloud = smoothstep(uCoverage, uCoverage + uSoftness, n);
+    return cloud * heightMask;
+}
+
+void main() {
+    vec2 fragCoord = vUv * uResolution;
+    vec2 uv = (fragCoord - 0.5 * uResolution) / uResolution.y;
+    vec3 ro = vec3(0.0, 1.2, -4.0);
+    vec3 rd = normalize(vec3(uv, 1.5));
+    float skyGradient = clamp(rd.y * 0.5 + 0.5, 0.0, 1.0);
+    vec3 skyColor = mix(uSkyLowColor, uSkyHighColor, skyGradient);
+    vec3 accum = vec3(0.0);
+    float alpha = 0.0;
+    float t = rand(fragCoord) * uStepSize;
+    for (int i = 0; i < STEPS; i++) {
+        vec3 p = ro + rd * t;
+        // The slab is crossed monotonically in t; once past it, all samples are 0.
+        if (rd.y > 0.0 && p.y >= 3.0) break;
+        if (rd.y < 0.0 && p.y <= 0.0) break;
+        float d = cloudDensity(p);
+        if (d > 0.01) {
+            float light = smoothstep(0.4, 2.8, p.y);
+            vec3 sampleColor = mix(uCloudDarkColor, uCloudLightColor, light);
+            float a = d * uDensity;
+            accum += (1.0 - alpha) * sampleColor * a;
+            alpha += (1.0 - alpha) * a;
+        }
+        t += uStepSize;
+        if (alpha > 0.95) break;
+    }
+    vec3 color = mix(skyColor, accum, alpha);
+    color *= uExposure;
+    color = pow(color, vec3(0.9));
+    oColor = vec4(color, 1.0);
+}

package/catalog/shaders/clouds/clouds.presets.md

@@ -0,0 +1,37 @@
+# clouds.frag presets
+
+Working uniform values for `clouds.frag`, kept here so we don't fish through the
+shader comments. Each row is a time-of-day look (a set of uniform values over the
+one shader); a composite picks one and overrides the uniforms.
+
+## Time-of-day palettes
+
+Four colors + exposure. `uSkyLowColor` = horizon, `uSkyHighColor` = overhead,
+`uCloudLightColor` = lit/upper cloud, `uCloudDarkColor` = shadowed/lower cloud,
+`uExposure` = overall brightness.
+
+| preset         | uSkyLowColor     | uSkyHighColor    | uCloudLightColor | uCloudDarkColor  | uExposure |
+|----------------|------------------|------------------|------------------|------------------|-----------|
+| bright-day ★   | 0.48, 0.68, 0.95 | 0.85, 0.93, 1.00 | 1.00, 0.97, 0.90 | 0.62, 0.67, 0.76 | 1.0       |
+| deep-night     | 0.02, 0.03, 0.08 | 0.10, 0.14, 0.28 | 0.38, 0.42, 0.55 | 0.08, 0.10, 0.16 | 0.75      |
+| sunset         | 0.95, 0.38, 0.18 | 0.35, 0.18, 0.55 | 1.00, 0.62, 0.35 | 0.35, 0.16, 0.28 | 0.9       |
+
+★ = the default in `CLOUDS_CONTROLS` (clouds.ts); the shader bakes no defaults.
+
+## Shape looks
+
+Vary `uStepSize` + `uCloudSpeed`:
+
+| look    | uStepSize | uCloudSpeed | feel               |
+|---------|-----------|-------------|--------------------|
+| clear   | 0.20      | 0.6         | clearer, separated |
+| billowy | 0.10      | 0.2         | fatter, billowy    |
+| wispy   | 0.25      | 0.2         | wispier, slower    |
+
+Shared shape knobs: `STEPS` 64 (compile-time constant), `uCloudScale` 0.65,
+`uDensity` 0.07, `uCoverage` 0.44, `uSoftness` 0.15.
+
+## Layer use
+
+The shipped shader outputs an opaque sky + clouds (`alpha 1`): a full
+**background** layer, composited under the masked person downstream.

package/catalog/shaders/clouds/clouds.ts

@@ -0,0 +1,124 @@
+// Clouds layer-shader interface: the typed uniforms + a runtime control
+// descriptor. The descriptor is the single source the demo generates tuning
+// controls from, and it documents every uniform (GLSL can't carry this; TS
+// shows up in editors and for LLMs). This is the first of the per-shader type
+// files; the shader source is shaders/clouds.frag.
+
+import type { RGB } from '../../../src/lib/primitives.types';
+import type { UniformControl } from '../_shared/types';
+
+/** Typed uniforms for the `clouds` layer shader. */
+export type CloudsUniforms = {
+  /** Sky color near the horizon. */
+  readonly uSkyLowColor: RGB;
+  /** Sky color overhead. */
+  readonly uSkyHighColor: RGB;
+  /** Lit (upper) cloud color. */
+  readonly uCloudLightColor: RGB;
+  /** Shadowed (lower) cloud color. */
+  readonly uCloudDarkColor: RGB;
+  /** Overall brightness; lower for night, ~1 for day. */
+  readonly uExposure: number;
+  /** Raymarch step distance; smaller = finer/slower, larger = coarser/faster. */
+  readonly uStepSize: number;
+  /** How fast the clouds drift. 0 freezes them. */
+  readonly uCloudSpeed: number;
+  /** Cloud noise frequency; smaller = larger/broader shapes, larger = busier. */
+  readonly uCloudScale: number;
+  /** Opacity contributed per sample; higher = more solid clouds. */
+  readonly uDensity: number;
+  /** Noise threshold; lower = more cloud cover, higher = clearer sky. */
+  readonly uCoverage: number;
+  /** Cloud edge softness; higher = mistier edges. */
+  readonly uSoftness: number;
+};
+
+/**
+ * The `clouds` shader's tunable uniforms. Drives the demo's generated control
+ * panel. Defaults here are the "bright day" look; composites override them (the
+ * wizard tower runs a sunset palette, the fairy cave a moonlit-night one).
+ */
+export const CLOUDS_CONTROLS: readonly UniformControl[] = [
+  {
+    name: 'uSkyLowColor',
+    kind: 'color',
+    default: [0.48, 0.68, 0.95],
+    doc: 'Sky color near the horizon.',
+  },
+  { name: 'uSkyHighColor', kind: 'color', default: [0.85, 0.93, 1.0], doc: 'Sky color overhead.' },
+  {
+    name: 'uCloudLightColor',
+    kind: 'color',
+    default: [1.0, 0.97, 0.9],
+    doc: 'Lit (upper) cloud color.',
+  },
+  {
+    name: 'uCloudDarkColor',
+    kind: 'color',
+    default: [0.62, 0.67, 0.76],
+    doc: 'Shadowed (lower) cloud color.',
+  },
+  {
+    name: 'uExposure',
+    kind: 'float',
+    default: 1.0,
+    min: 0.2,
+    max: 1.5,
+    step: 0.01,
+    doc: 'Overall brightness.',
+  },
+  {
+    name: 'uStepSize',
+    kind: 'float',
+    default: 0.2,
+    min: 0.05,
+    max: 0.4,
+    step: 0.01,
+    doc: 'Raymarch step distance; smaller = finer.',
+  },
+  {
+    name: 'uCloudSpeed',
+    kind: 'float',
+    default: 0.2,
+    min: 0.0,
+    max: 1.0,
+    step: 0.01,
+    doc: 'Drift speed; 0 freezes.',
+  },
+  {
+    name: 'uCloudScale',
+    kind: 'float',
+    default: 0.45,
+    min: 0.2,
+    max: 2.0,
+    step: 0.01,
+    doc: 'Cloud frequency; smaller = broader shapes.',
+  },
+  {
+    name: 'uDensity',
+    kind: 'float',
+    default: 0.07,
+    min: 0.01,
+    max: 0.3,
+    step: 0.005,
+    doc: 'Opacity per sample; higher = more solid.',
+  },
+  {
+    name: 'uCoverage',
+    kind: 'float',
+    default: 0.44,
+    min: 0.0,
+    max: 0.9,
+    step: 0.01,
+    doc: 'Threshold; lower = more cloud cover.',
+  },
+  {
+    name: 'uSoftness',
+    kind: 'float',
+    default: 0.15,
+    min: 0.0,
+    max: 0.5,
+    step: 0.01,
+    doc: 'Cloud edge softness.',
+  },
+];

package/catalog/shaders/corporate-blobs/corporate-blobs.form.tsx

@@ -0,0 +1,44 @@
+// Corporate-blobs' editor form: the shader OWNS its control layout. This pass just
+// stacks one <Control uniform="…"/> per uniform in declared order (the auto-form's
+// shape); the point is that this file exists per shader, so layout/grouping is a
+// local edit here, and a new primitive flows in through <Control> without touching
+// it. Conventional layer id: "blobs".
+
+import {
+  Control,
+  ControlForm,
+  ControlSection,
+  type KaleidoscopeControls,
+} from '../../../src/components/preset-control-panel';
+import { CORPORATE_BLOBS_CONTROLS } from './corporate-blobs';
+
+export function CorporateBlobsForm({ uniforms, onPatch, disabled }: KaleidoscopeControls) {
+  return (
+    <ControlForm
+      id="blobs"
+      uniforms={uniforms.blobs ?? {}}
+      onPatch={onPatch}
+      disabled={disabled}
+      controls={CORPORATE_BLOBS_CONTROLS}
+    >
+      <ControlSection title="blobs">
+        <Control uniform="uColor" />
+        <Control uniform="uBlobColor1" />
+        <Control uniform="uBlobColor2" />
+        <Control uniform="uBlobColor3" />
+        <Control uniform="uBlobColor4" />
+        <Control uniform="uBlobColor5" />
+        <Control uniform="uBlobColor6" />
+        <Control uniform="uBlobColor7" />
+        <Control uniform="uBlobColor8" />
+        <Control uniform="uGlobalAlpha" />
+        <Control uniform="uScale" />
+        <Control uniform="uEdgePull" />
+        <Control uniform="uCenterClear" />
+        <Control uniform="uMotionAmount" />
+        <Control uniform="uMotionSpeed" />
+        <Control uniform="uEdgeSoftness" />
+      </ControlSection>
+    </ControlForm>
+  );
+}