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

package/src/docs/example/docs-3d-form.ts

@@ -0,0 +1,95 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { set } from "@supersoniks/concorde/utils";
+import "../../core/components/functional/3d/3d";
+import "../../core/components/ui/form/input/input";
+import "../../core/components/ui/form/checkbox/checkbox";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+/** Entrées form uniquement. */
+const formKey = new DataProviderKey<{
+  exposure: number;
+  fov: number;
+  minDistance: number;
+  maxDistance: number;
+  autoRotate: string | boolean | null;
+}>("docs3dForm");
+
+/**
+ * Auto-bind form → viewer (exposure / fov / autoRotate).
+ */
+@customElement("docs-3d-form-demo")
+export class Docs3dFormDemo extends LitElement {
+  static styles = [tailwind, DEMO_3D_STYLES];
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    set(formKey, {
+      exposure: 1,
+      fov: 45,
+      minDistance: 1,
+      maxDistance: 8,
+      autoRotate: "true",
+    });
+  }
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-3" formDataProvider=${formKey.path}>
+        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 max-w-2xl">
+          <sonic-input
+            name="exposure"
+            type="number"
+            label="Exposure"
+            step="0.1"
+          ></sonic-input>
+          <sonic-input
+            name="fov"
+            type="number"
+            label="FOV"
+            step="1"
+          ></sonic-input>
+          <sonic-input
+            name="minDistance"
+            type="number"
+            label="Min distance"
+            step="0.1"
+          ></sonic-input>
+          <sonic-input
+            name="maxDistance"
+            type="number"
+            label="Max distance"
+            step="0.5"
+          ></sonic-input>
+          <div class="flex items-end pb-2">
+            <sonic-checkbox
+              name="autoRotate"
+              unique
+              checked
+              value="true"
+              label="Auto-rotate"
+            ></sonic-checkbox>
+          </div>
+        </div>
+
+        <sonic-3d
+          src=${HELMET_GLB}
+          camera="orbit"
+          pick
+          play
+          dataProvider=${formKey.path}
+          out-data-provider="docs3dFormOut"
+          aspect-ratio="16/10"
+        ></sonic-3d>
+
+        <p class="text-sm text-neutral-500">
+          Form → viewer : <code>exposure</code>, <code>fov</code>,
+          <code>minDistance</code>, <code>maxDistance</code>,
+          <code>autoRotate</code>. Zoom molette borné par min/max.
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-orbit.ts

@@ -0,0 +1,44 @@
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import "../../core/components/functional/3d/3d";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+@customElement("docs-3d-orbit-demo")
+export class Docs3dOrbitDemo extends LitElement {
+  static styles = [tailwind, DEMO_3D_STYLES];
+
+  @state() private hit = "";
+
+  private onPick = (e: Event) => {
+    const detail = (e as CustomEvent<{ objectId: string }>).detail;
+    this.hit = detail?.objectId ?? "";
+  };
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <sonic-3d
+          src=${HELMET_GLB}
+          camera="orbit"
+          auto-rotate
+          pick
+          play
+          min-distance="1"
+          max-distance="10"
+          min-polar="10"
+          max-polar="170"
+          aspect-ratio="16/10"
+          @pick=${this.onPick}
+        ></sonic-3d>
+        <p class="text-sm text-neutral-500">
+          DamagedHelmet (CDN) — glisser = orbiter · molette = zoom · clic droit =
+          pan · survol = highlight · double-clic = recentrer
+          ${this.hit
+            ? html` · pick: <code>${this.hit}</code>`
+            : null}
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-out.ts

@@ -0,0 +1,56 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import "../../core/components/functional/3d/3d";
+import "../../core/components/functional/value/value";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+/** Sorties télémétrie (séparé du form). */
+const outKey = new DataProviderKey("docs3dOut");
+
+@customElement("docs-3d-out-demo")
+export class Docs3dOutDemo extends LitElement {
+  static styles = [tailwind, DEMO_3D_STYLES];
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <sonic-3d
+          src=${HELMET_GLB}
+          camera="orbit"
+          auto-rotate
+          play
+          pick
+          out-data-provider=${outKey.path}
+          aspect-ratio="16/10"
+        ></sonic-3d>
+        <div class="flex flex-wrap gap-4 text-sm tabular-nums text-neutral-600">
+          <span>
+            ready:
+            <sonic-value dataProvider=${outKey.path} key="ready"></sonic-value>
+          </span>
+          <span>
+            distance:
+            <sonic-value
+              dataProvider=${outKey.path}
+              key="distance"
+            ></sonic-value>
+          </span>
+          <span>
+            yaw:
+            <sonic-value dataProvider=${outKey.path} key="yaw"></sonic-value>
+          </span>
+          <span>
+            frame:
+            <sonic-value dataProvider=${outKey.path} key="frame"></sonic-value>
+          </span>
+        </div>
+        <p class="text-sm text-neutral-500">
+          Sorties → <code>out-data-provider</code> via
+          <code>sonic-value key="…"</code> (pas <code>name</code>).
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-shader-live-demo.ts

@@ -0,0 +1,98 @@
+/**
+ * Démo pont live : sonic-3d → sonic-shader via channel0="#plateau"
+ * (copie canvas chaque frame, sans JPEG frame-out).
+ */
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import "../../core/components/functional/3d/3d";
+import "../../core/components/functional/shader/shader";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+/** Aberration chromatique + bords neon — bien visible vs le 3d brut. */
+const LIVE_POST = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 c = uv - 0.5;
+  float aber = 0.004 + clamp(uParam0, 0.0, 1.0) * 0.028;
+  aber *= 1.0 + 0.35 * sin(iTime * 2.2);
+
+  float r = texture(iChannel0, uv + c * aber).r;
+  float g = texture(iChannel0, uv).g;
+  float b = texture(iChannel0, uv - c * aber).b;
+  vec3 col = vec3(r, g, b);
+
+  // Contours sobel légers (luma)
+  vec2 px = 1.0 / max(iResolution.xy, vec2(1.0));
+  float tl = dot(texture(iChannel0, uv + px * vec2(-1.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 bl = dot(texture(iChannel0, uv + px * vec2(-1.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 edge = length(vec2(tr + br - tl - bl, tl + tr - bl - br));
+  col += vec3(0.15, 0.85, 1.0) * smoothstep(0.08, 0.45, edge);
+
+  // Scanlines + vignette
+  col *= 0.88 + 0.12 * sin(uv.y * iResolution.y * 1.2);
+  float vig = smoothstep(1.15, 0.35, length(c));
+  col *= vig;
+
+  fragColor = vec4(col, 1.0);
+}
+`;
+
+@customElement("docs-3d-shader-live-demo")
+export class Docs3dShaderLiveDemo extends LitElement {
+  static styles = [
+    tailwind,
+    DEMO_3D_STYLES,
+    css`
+      .grid {
+        display: grid;
+        gap: 0.75rem;
+        grid-template-columns: 1fr;
+      }
+      @media (min-width: 720px) {
+        .grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+      sonic-3d,
+      sonic-shader {
+        width: 100%;
+        border-radius: 0.5rem;
+        overflow: hidden;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <div class="grid">
+          <sonic-3d
+            id="plateau"
+            src=${HELMET_GLB}
+            camera="orbit"
+            auto-rotate
+            play
+            min-distance="1"
+            max-distance="10"
+            aspect-ratio="16/10"
+          ></sonic-3d>
+          <sonic-shader
+            play
+            channel0="#plateau"
+            image=${LIVE_POST}
+            param0="0.7"
+            aspect-ratio="16/10"
+          ></sonic-shader>
+        </div>
+        <p class="text-sm text-neutral-500">
+          Live bridge: <code>channel0="#plateau"</code> (no JPEG). Left = raw
+          <code>sonic-3d</code>, right = chromatic aberration + neon edges +
+          scanlines. Slider-ready via <code>param0</code> (aberration strength).
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-shared.ts

@@ -0,0 +1,15 @@
+import { css } from "lit";
+
+/**
+ * DamagedHelmet — Khronos Sample Assets (CC BY 4.0 / CC BY-NC original).
+ * Servi via jsDelivr (CDN).
+ */
+export const HELMET_GLB =
+  "https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb";
+
+export const DEMO_3D_STYLES = css`
+  sonic-3d {
+    border-radius: 0.5rem;
+    --sonic-3d-ar: 16 / 10;
+  }
+`;