@supersoniks/concorde 4.9.96 → 4.9.98-visual-stack.0

package/src/docs/example/docs-shader-demos.ts

@@ -0,0 +1,357 @@
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import { handle } from "@supersoniks/concorde/decorators";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { get, set } from "@supersoniks/concorde/utils";
+import "../../core/components/functional/shader/shader";
+import "../../core/components/ui/form/input/input";
+
+const sample = (file: string) =>
+  new URL(`/docs/shader-samples/${file}`, location.origin).href;
+
+/**
+ * Multipass water ripples:
+ * Buffer A — height field (Verlet + laplacian), sharp click/drag droplets
+ * Image — refract the photo from the height gradient (no recolor)
+ */
+const IMPACT_BUFFER_A = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / iResolution.xy;
+
+  // .r = current height, .g = previous height
+  vec4 state = texture(iChannel0, uv);
+  float h = state.r;
+  float hPrev = state.g;
+
+  float n = texture(iChannel0, uv + vec2(0.0, px.y)).r;
+  float s = texture(iChannel0, uv - vec2(0.0, px.y)).r;
+  float e = texture(iChannel0, uv + vec2(px.x, 0.0)).r;
+  float w = texture(iChannel0, uv - vec2(px.x, 0.0)).r;
+  float lap = (n + s + e + w) * 0.25 - h;
+
+  // Wave equation — a bit less springy
+  float hNew = (2.0 * h - hPrev) + lap * 0.32;
+  // Stronger damping so ripples settle
+  hNew *= 0.978;
+
+  // Droplet only while pressed (avoids endless energy while hovering)
+  if (iMouse.z > 0.0) {
+    vec2 m = iMouse.xy / iResolution.xy;
+    float d2 = dot(uv - m, uv - m);
+    // Thin peak + slight negative ring (not a wide flat blob)
+    float drop = exp(-d2 * 7000.0) - 0.4 * exp(-d2 * 2200.0);
+    hNew += 1.8 * drop;
+  }
+
+  fragColor = vec4(hNew, h, 0.0, 1.0);
+}
+`;
+
+const IMPACT_IMAGE = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / iResolution.xy;
+
+  float hx = texture(iChannel0, uv + vec2(px.x, 0.0)).r - texture(iChannel0, uv - vec2(px.x, 0.0)).r;
+  float hy = texture(iChannel0, uv + vec2(0.0, px.y)).r - texture(iChannel0, uv - vec2(0.0, px.y)).r;
+
+  // Stronger refraction so wave height reads clearly
+  vec2 offset = vec2(hx, hy) * 1.35;
+  vec3 photo = texture(iChannel1, clamp(uv + offset, 0.0, 1.0)).rgb;
+  fragColor = vec4(photo, 1.0);
+}
+`;
+
+const hostCss = css`
+  sonic-shader {
+    border-radius: 0.5rem;
+  }
+  figure img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
+`;
+
+@customElement("docs-shader-multipass-demo")
+export class DocsShaderMultipassDemo extends LitElement {
+  static styles = [tailwind, hostCss];
+
+  render() {
+    return html`
+      <p class="mb-2 text-sm text-neutral-500">
+        Ripple eau : clique / glisse pour des gouttes fines ; les ondes
+        s’amortissent. Pas de teinte.
+      </p>
+      <sonic-shader
+        mouse
+        play
+        channel1=${sample("impact.jpg")}
+        buffer-a-ch0="self"
+        image-ch0="buffer-a"
+        image-ch1=${sample("impact.jpg")}
+        .bufferA=${IMPACT_BUFFER_A}
+        .image=${IMPACT_IMAGE}
+      ></sonic-shader>
+    `;
+  }
+}
+
+/**
+ * Chaînage officiel A → Image (même contexte GPU).
+ * Buffer A = Sobel ; Image = overlay des contours sur la photo.
+ * Pas deux sonic-shader : un seul composant, FBO ping-pong.
+ */
+const CHAIN_BUFFER_A = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / iResolution.xy;
+  float tl = dot(texture(iChannel0, uv + px * vec2(-1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float t  = dot(texture(iChannel0, uv + px * vec2( 0.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float tr = dot(texture(iChannel0, uv + px * vec2( 1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float l  = dot(texture(iChannel0, uv + px * vec2(-1.0,  0.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float r  = dot(texture(iChannel0, uv + px * vec2( 1.0,  0.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float bl = dot(texture(iChannel0, uv + px * vec2(-1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float b  = dot(texture(iChannel0, uv + px * vec2( 0.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float br = dot(texture(iChannel0, uv + px * vec2( 1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float gx = (tr + 2.0 * r + br) - (tl + 2.0 * l + bl);
+  float gy = (tl + 2.0 * t + tr) - (bl + 2.0 * b + br);
+  float edge = clamp(length(vec2(gx, gy)) * 1.8, 0.0, 1.0);
+  fragColor = vec4(vec3(edge), 1.0);
+}
+`;
+
+const CHAIN_IMAGE = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec3 photo = texture(iChannel1, uv).rgb;
+  float edge = texture(iChannel0, uv).r;
+  float mixAmt = clamp(uParam0, 0.0, 1.0);
+  vec3 ink = vec3(0.05, 0.9, 0.75);
+  vec3 col = mix(photo, mix(photo, ink, edge), mixAmt);
+  fragColor = vec4(col, 1.0);
+}
+`;
+
+type ChainForm = { param0?: number | string };
+const chainForm = new DataProviderKey<ChainForm>("shaderChainForm");
+
+@customElement("docs-shader-chain-demo")
+export class DocsShaderChainDemo extends LitElement {
+  static styles = [tailwind, hostCss];
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    set(chainForm, { param0: 0.85 });
+  }
+
+  render() {
+    return html`
+      <p class="mb-2 text-sm text-neutral-500">
+        Chaînage GPU : Buffer&nbsp;A (Sobel) → Image (overlay). Un seul
+        <code>sonic-shader</code>, canaux
+        <code>image-ch0="buffer-a"</code>. Intensité via
+        <code>dataProvider</code> → <code>uParam0</code>.
+      </p>
+      <div formDataProvider=${chainForm.path} class="mb-3 max-w-md">
+        <sonic-input
+          name="param0"
+          type="number"
+          label="Intensité contours (param0)"
+          min="0"
+          max="1"
+          step="0.05"
+          value="0.85"
+        ></sonic-input>
+      </div>
+      <sonic-shader
+        play
+        .mouse=${false}
+        dataProvider=${chainForm.path}
+        channel0=${sample("color.jpg")}
+        buffer-a-ch0=${sample("color.jpg")}
+        image-ch0="buffer-a"
+        image-ch1=${sample("color.jpg")}
+        .bufferA=${CHAIN_BUFFER_A}
+        .image=${CHAIN_IMAGE}
+      ></sonic-shader>
+    `;
+  }
+}
+
+/**
+ * Hover on/off via hover-param → uParam0 (0↔1).
+ * Zoom + aberration + vignette marqués quand on = 1.
+ */
+const HOVER_FX_ZOOM = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float on = clamp(uParam0, 0.0, 1.0);
+  float t = on * on * (3.0 - 2.0 * on);
+  vec2 c = uv - 0.5;
+  float r = length(c);
+  // Zoom punch + barrel warp
+  float zoom = mix(1.0, 1.22, t);
+  vec2 warped = c * zoom;
+  warped *= 1.0 + 0.28 * t * r * r;
+  vec2 base = warped + 0.5;
+  // Chromatic split fort
+  float split = 0.055 * t;
+  vec3 col;
+  col.r = texture(iChannel0, clamp(base + c * split, 0.0, 1.0)).r;
+  col.g = texture(iChannel0, clamp(base, 0.0, 1.0)).g;
+  col.b = texture(iChannel0, clamp(base - c * split, 0.0, 1.0)).b;
+  // Vignette + punch contraste / chaleur
+  float vig = mix(1.0, smoothstep(1.15, 0.22, r * zoom), t * 0.9);
+  col *= vig;
+  col = mix(col, col * col * 1.35, t * 0.45);
+  col = mix(col, col * vec3(1.22, 0.95, 0.82), t * 0.7);
+  fragColor = vec4(col, 1.0);
+}
+`;
+
+@customElement("docs-shader-hover-demo")
+export class DocsShaderHoverDemo extends LitElement {
+  static styles = [tailwind, hostCss];
+
+  render() {
+    return html`
+      <p class="mb-2 text-sm text-neutral-500">
+        Rollover / roll-out : hover-param anime uParam0 (0↔1). play-on-hover
+        n’anime que pendant la transition. Survole la carte.
+      </p>
+      <sonic-shader
+        hover-param="0"
+        hover-speed="14"
+        play
+        play-on-hover
+        .mouse=${false}
+        channel0=${sample("impact.jpg")}
+        .image=${HOVER_FX_ZOOM}
+      ></sonic-shader>
+    `;
+  }
+}
+
+/**
+ * Sampling couleur sous le curseur → dataProvider (pas de viseur GLSL).
+ *
+ * Pattern Concorde :
+ * - `@handle(dp.frame)` = écoute « nouveau rendu dispo »
+ * - `get(dp)` = lecture massive du snapshot
+ * Sans lecteur monté → publication paresseuse (0 set / 0 readPixels).
+ */
+const SAMPLE_FX = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  fragColor = texture(iChannel0, uv);
+}
+`;
+
+type ShaderOutSnap = {
+  frame?: number;
+  mouseX?: number;
+  mouseY?: number;
+  sampleR?: number;
+  sampleG?: number;
+  sampleB?: number;
+  sampleLuma?: number;
+};
+
+const shaderOutForm = new DataProviderKey<ShaderOutSnap>("shaderOutDemo");
+
+/**
+ * Lecteur DP : bind sur `frame` + lecture massive via `get(shaderOutForm)`.
+ * Monter / démonter cet élément active / coupe la publication paresseuse.
+ */
+@customElement("docs-shader-out-reader")
+export class DocsShaderOutReader extends LitElement {
+  static styles = [tailwind];
+
+  @state() snap: ShaderOutSnap | null = null;
+  @state() updates = 0;
+
+  @handle(shaderOutForm.frame)
+  onFrame(_frame: number) {
+    this.snap = get(shaderOutForm);
+    this.updates++;
+  }
+
+  render() {
+    const s = this.snap;
+    const rgb =
+      s?.sampleR != null
+        ? `rgb(${Math.round(s.sampleR * 255)} ${Math.round((s.sampleG ?? 0) * 255)} ${Math.round((s.sampleB ?? 0) * 255)})`
+        : "transparent";
+    return html`
+      <div
+        class="grid grid-cols-2 gap-x-4 gap-y-1 rounded-md bg-neutral-100 px-3 py-2 font-mono text-xs text-neutral-700 sm:grid-cols-3"
+      >
+        <div class="col-span-full text-neutral-500">
+          @handle(frame) → get(dp) — maj #${this.updates}
+        </div>
+        <div>frame ${s?.frame ?? "—"}</div>
+        <div>mouseX ${s?.mouseX?.toFixed?.(3) ?? "—"}</div>
+        <div>mouseY ${s?.mouseY?.toFixed?.(3) ?? "—"}</div>
+        <div>luma ${s?.sampleLuma?.toFixed?.(3) ?? "—"}</div>
+        <div>R ${s?.sampleR?.toFixed?.(3) ?? "—"}</div>
+        <div>G ${s?.sampleG?.toFixed?.(3) ?? "—"}</div>
+        <div>B ${s?.sampleB?.toFixed?.(3) ?? "—"}</div>
+        <div class="col-span-full flex items-center gap-2 pt-1">
+          <span
+            class="inline-block h-5 w-5 rounded border border-neutral-300"
+            style="background:${rgb}"
+          ></span>
+          <span class="text-neutral-500">sample (lecture massive)</span>
+        </div>
+      </div>
+    `;
+  }
+}
+
+@customElement("docs-shader-out-demo")
+export class DocsShaderOutDemo extends LitElement {
+  static styles = [tailwind, hostCss];
+
+  @state() listening = true;
+
+  render() {
+    return html`
+      <p class="mb-2 text-sm text-neutral-500">
+        Écoute <code>frame</code> + lecture massive <code>get(dp)</code>.
+        Décoche pour démonter le lecteur → plus aucune publication ni
+        <code>readPixels</code>.
+      </p>
+      <label class="mb-2 flex items-center gap-2 text-sm text-neutral-700">
+        <input
+          type="checkbox"
+          .checked=${this.listening}
+          @change=${(e: Event) => {
+            this.listening = (e.target as HTMLInputElement).checked;
+          }}
+        />
+        Lecteur monté (@handle + get)
+      </label>
+      <div class="grid gap-3">
+        <sonic-shader
+          mouse
+          mouse-mode="target"
+          mouse-speed="10"
+          play
+          sample
+          out-interval="50"
+          out-data-provider=${shaderOutForm.path}
+          channel0=${sample("color.jpg")}
+          .image=${SAMPLE_FX}
+        ></sonic-shader>
+        ${this.listening
+          ? html`<docs-shader-out-reader></docs-shader-out-reader>`
+          : html`<p class="text-sm text-neutral-500">
+              Aucun lecteur — publication paresseuse inactive.
+            </p>`}
+      </div>
+    `;
+  }
+}