@supersoniks/concorde 4.9.98-visual-stack.1 → 5.0.1

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

@@ -1,357 +0,0 @@
-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>
-    `;
-  }
-}