chati-dev 4.2.2 → 4.3.0

package/framework/scaffold/motion-premium-3d/components/3d/CanvasProvider.tsx.template

@@ -0,0 +1,85 @@
+'use client';
+
+/**
+ * CanvasProvider — the ONLY <Canvas> mount point in the app.
+ *
+ * Design invariants (ADR-3D-01 through ADR-3D-04):
+ *
+ *   1) Client-only mount. The module is imported through a
+ *      next/dynamic({ ssr: false }) wrapper at the page boundary, so
+ *      Three.js / R3F code never executes on the server.
+ *
+ *   2) Single RAF. <Canvas frameloop="demand"> disables R3F's default
+ *      always-on 60FPS loop. Rendering happens ONLY when a component
+ *      calls invalidate() — InvalidateOnScroll (see sibling file) ties
+ *      that to the Lenis/GSAP master tick established by motion-premium's
+ *      ADR-LENIS-GSAP. Zero competing RAFs across the whole app.
+ *
+ *   3) WebGL gate. If WebGLContext reports unavailable (no WebGL OR
+ *      prefers-reduced-motion), the Canvas never mounts and the caller's
+ *      <fallback> prop renders in its place.
+ *
+ *   4) Responsible defaults for premium sites:
+ *        dpr: [1, 2]        — Retina-aware without pathological 3x scaling
+ *        gl.antialias: true — crisp lines matter at scroll speeds
+ *        gl.alpha: true     — canvas blends with page background
+ *        gl.powerPreference: 'high-performance'
+ *
+ * Usage:
+ *   <CanvasProvider fallback={<SceneFallback fullBleed />}>
+ *     <CameraRig />
+ *     <MyScene />
+ *   </CanvasProvider>
+ */
+
+import { Canvas } from '@react-three/fiber';
+import type { ReactNode } from 'react';
+import { useWebGLReady } from '@/components/webgl/WebGLContext';
+
+export interface CanvasProviderProps {
+  children:       ReactNode;
+  fallback:       ReactNode;
+  /** Override the DPR range. Default [1, 2] — Retina-aware. */
+  dpr?:           [number, number];
+  /** Additional className merged onto the <Canvas> host. */
+  className?:     string;
+  /** Mount a DOM wrapper around the Canvas (useful for pinning, absolute positioning). */
+  wrapperClassName?: string;
+}
+
+export function CanvasProvider({
+  children,
+  fallback,
+  dpr = [1, 2],
+  className = '',
+  wrapperClassName = '',
+}: CanvasProviderProps) {
+  const ready = useWebGLReady();
+
+  if (!ready) {
+    // Fallback path — no Canvas, no R3F tree, no bundle cost beyond the
+    // detector itself. The caller supplies a SceneFallback so the shape
+    // of the viewport stays stable.
+    return <>{fallback}</>;
+  }
+
+  return (
+    <div className={`relative ${wrapperClassName}`.trim()} data-canvas-host>
+      <Canvas
+        className={className}
+        frameloop="demand"
+        dpr={dpr}
+        gl={{
+          antialias:       true,
+          alpha:           true,
+          powerPreference: 'high-performance',
+          // stencil/depth defaults are fine for scroll-choreography use
+          // cases; advanced effects (post-processing) can request overrides
+          // via <Canvas> prop drilling in user code.
+        }}
+      >
+        {children}
+      </Canvas>
+    </div>
+  );
+}

package/framework/scaffold/motion-premium-3d/components/3d/InvalidateOnScroll.tsx.template

@@ -0,0 +1,51 @@
+'use client';
+
+/**
+ * InvalidateOnScroll — ties R3F's demand-mode rendering to the Lenis
+ * smooth-scroll master tick (ADR-3D-03, ADR-LENIS-GSAP).
+ *
+ * Background: motion-premium establishes a single RAF loop where Lenis
+ * drives gsap.ticker via `gsap.ticker.add((t) => lenis.raf(t * 1000))`.
+ * The 2D side (ScrollTrigger, page transitions) piggybacks on this.
+ * The 3D side must NOT start a second RAF — doing so fragments the
+ * frame budget and drops FPS on 120Hz displays.
+ *
+ * This component mounts INSIDE <CanvasProvider> so it has access to
+ * R3F's invalidate() function. On every GSAP tick, it calls invalidate().
+ * R3F then renders exactly ONE frame, but only if any demand-mode
+ * signal (scroll delta, component invalidation, tween update) was
+ * raised since the last render.
+ *
+ * The net effect:
+ *   - Idle: zero renders (no scroll, no animation → no invalidate).
+ *   - Scroll-in-progress: one render per Lenis tick (≈16ms on 60Hz,
+ *     ≈8ms on 120Hz), matched to the 2D motion tick exactly.
+ *   - Non-scroll animation (hover effects, looping meshes): components
+ *     call useFrame, which R3F also honours under frameloop="demand"
+ *     as long as they call invalidate() explicitly.
+ *
+ * Must be rendered INSIDE a <Canvas>. useThree() will throw outside.
+ */
+
+import { useEffect } from 'react';
+import { useThree } from '@react-three/fiber';
+import { gsap } from 'gsap';
+
+export function InvalidateOnScroll() {
+  const invalidate = useThree((state) => state.invalidate);
+
+  useEffect(() => {
+    // gsap.ticker.add returns the handler itself for unregistration.
+    const tick = () => {
+      invalidate();
+    };
+    gsap.ticker.add(tick);
+
+    return () => {
+      gsap.ticker.remove(tick);
+    };
+  }, [invalidate]);
+
+  // Renders nothing — this is a RAF-coordination concern, not a scene node.
+  return null;
+}

package/framework/scaffold/motion-premium-3d/components/3d/MeshCrossfade.tsx.template

@@ -0,0 +1,79 @@
+'use client';
+
+/**
+ * MeshCrossfade — per-mesh variant of ScrollCrossfade. Use when a single
+ * object should morph through a sequence of states (different geometry,
+ * material, or texture) as scroll advances, without rebuilding the
+ * scene graph.
+ *
+ * Differs from ScrollCrossfade:
+ *   - ScrollCrossfade: multiple independent scene groups, pick one.
+ *   - MeshCrossfade:   single mesh slot, swap its contents — no GPU
+ *                      cost for inactive variants because unselected
+ *                      meshes are not instantiated.
+ *
+ * The active variant is determined by nearest `at` position to the
+ * current scroll progress. Hysteresis is a small threshold (default
+ * 2 percent of the pinned range) that prevents rapid flip-flop near
+ * segment boundaries.
+ *
+ * Usage:
+ *   <MeshCrossfade
+ *     variants={[
+ *       { at: 0.0, render: () => <BoxMesh />    },
+ *       { at: 0.5, render: () => <SphereMesh /> },
+ *       { at: 1.0, render: () => <TorusMesh />  },
+ *     ]}
+ *   />
+ */
+
+import { useContext, useMemo, useRef, useState } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { ScrollSceneContext } from './ScrollScene';
+
+export interface MeshVariant {
+  /** Progress position (0..1) where this variant is dominant. */
+  at:      number;
+  /** Render function for the variant. Returning null skips rendering. */
+  render:  () => JSX.Element | null;
+}
+
+export interface MeshCrossfadeProps {
+  variants:    MeshVariant[];
+  /** Hysteresis band width around segment boundaries (0..1). Default 0.02. */
+  hysteresis?: number;
+}
+
+export function MeshCrossfade({ variants, hysteresis = 0.02 }: MeshCrossfadeProps) {
+  const progressRef = useContext(ScrollSceneContext);
+  const sorted = useMemo(() => [...variants].sort((a, b) => a.at - b.at), [variants]);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const activeIdxRef = useRef(0);
+  activeIdxRef.current = activeIdx;
+
+  useFrame(() => {
+    if (!progressRef || sorted.length === 0) return;
+    const t = Math.max(0, Math.min(1, progressRef.current.progress));
+
+    // Find the variant whose `at` is closest to t.
+    let best = 0;
+    let bestDist = Math.abs(sorted[0].at - t);
+    for (let i = 1; i < sorted.length; i++) {
+      const d = Math.abs(sorted[i].at - t);
+      if (d < bestDist) { best = i; bestDist = d; }
+    }
+
+    // Hysteresis: only switch if the new best beats the current by more
+    // than `hysteresis`. Without this, positions near a boundary flip
+    // between variants on every frame.
+    if (best !== activeIdxRef.current) {
+      const currentDist = Math.abs(sorted[activeIdxRef.current].at - t);
+      if (currentDist - bestDist > hysteresis) {
+        setActiveIdx(best);
+      }
+    }
+  });
+
+  const active = sorted[activeIdx];
+  return active ? active.render() : null;
+}

package/framework/scaffold/motion-premium-3d/components/3d/ScrollCrossfade.tsx.template

@@ -0,0 +1,88 @@
+'use client';
+
+/**
+ * ScrollCrossfade — fades between an ordered sequence of scene "stops"
+ * as scroll progress advances. The 3D analogue of motion-premium's 2D
+ * BackgroundCrossfadeProvider.
+ *
+ * Mounts inside <CanvasProvider> + <ScrollSceneContext>. Each stop is
+ * a React node (typically a <group> containing meshes). Stops whose
+ * index corresponds to the current progress segment animate their
+ * material opacity in; neighbour stops animate out; distant stops stay
+ * fully transparent.
+ *
+ * Internal material handling: the component sets `visible` false on
+ * groups whose opacity is effectively zero so the GPU skips them
+ * entirely.
+ *
+ * Usage:
+ *   <ScrollCrossfade stops={[
+ *     <HeroScene  key="hero"  />,
+ *     <ZoomScene  key="zoom"  />,
+ *     <OutroScene key="outro" />,
+ *   ]} />
+ *
+ * The number of stops determines the segment boundaries evenly across
+ * the pinned progress range. For uneven spacing, supply the optional
+ * `at` array (same length) with 0..1 positions.
+ */
+
+import { Children, useContext, useMemo, useRef, type ReactNode } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Group } from 'three';
+import { ScrollSceneContext } from './ScrollScene';
+
+export interface ScrollCrossfadeProps {
+  stops:   ReactNode[];
+  /** Optional progress positions per stop; defaults to evenly spaced. */
+  at?:     number[];
+  /** How wide the crossfade band is (0..1). Default 0.15 = 15 percent of the pinned range. */
+  fade?:   number;
+}
+
+const MIN_VISIBLE = 0.01;
+
+export function ScrollCrossfade({ stops, at, fade = 0.15 }: ScrollCrossfadeProps) {
+  const progressRef = useContext(ScrollSceneContext);
+  const groupRefs   = useRef<(Group | null)[]>([]);
+
+  const positions = useMemo(() => {
+    if (at && at.length === stops.length) return at;
+    if (stops.length === 1) return [0.5];
+    return stops.map((_, i) => i / (stops.length - 1));
+  }, [at, stops]);
+
+  useFrame(() => {
+    if (!progressRef) return;
+    const t = Math.max(0, Math.min(1, progressRef.current.progress));
+
+    for (let i = 0; i < stops.length; i++) {
+      const group = groupRefs.current[i];
+      if (!group) continue;
+      const distance = Math.abs(t - positions[i]);
+      const opacity  = Math.max(0, 1 - distance / fade);
+      group.visible = opacity > MIN_VISIBLE;
+
+      // Cascade opacity into any material that has it. This is a
+      // best-effort pass — authors who need per-material control can
+      // skip this component and drive opacity from their own useFrame.
+      group.traverse((obj) => {
+        const mat = (obj as unknown as { material?: { opacity?: number; transparent?: boolean } }).material;
+        if (mat && typeof mat.opacity === 'number') {
+          mat.opacity = opacity;
+          mat.transparent = true;
+        }
+      });
+    }
+  });
+
+  return (
+    <>
+      {Children.map(stops, (child, i) => (
+        <group ref={(el) => { groupRefs.current[i] = el; }}>
+          {child}
+        </group>
+      ))}
+    </>
+  );
+}

package/framework/scaffold/motion-premium-3d/components/3d/ScrollScene.tsx.template

@@ -0,0 +1,121 @@
+'use client';
+
+/**
+ * ScrollScene — a pinned R3F scene whose animation progress is driven
+ * by GSAP ScrollTrigger (the same engine that drives the 2D side of
+ * motion-premium). This keeps the 3D scene on the single-RAF contract
+ * (ADR-3D-03) and lets scenes share the same scroll source of truth as
+ * pinned 2D sections.
+ *
+ * Pattern:
+ *   1. User wraps a section of the page in <ScrollScene>. The component
+ *      creates a ScrollTrigger pinning that section for `length` of
+ *      viewport height.
+ *   2. ScrollTrigger's `onUpdate` writes the 0..1 progress into a ref
+ *      exposed through ScrollSceneContext.
+ *   3. Descendants (CameraRig, ScrollCrossfade, MeshCrossfade) read the
+ *      ref via useFrame on every R3F render (which InvalidateOnScroll
+ *      triggers once per GSAP tick).
+ *
+ * This design keeps R3F decoupled from any extra state library —
+ * progress lives in a plain ref. React re-renders are NOT used to
+ * propagate progress (that would tank framerate); only three-js scene
+ * mutations happen inside useFrame.
+ *
+ * Consumers must mount this OUTSIDE <Canvas> (it lays out a scrolling
+ * section). The scene children it yields via `renderScene` mount INSIDE
+ * the caller's CanvasProvider.
+ *
+ * Usage:
+ *   const sceneRef = useRef<ScrollSceneRef>(null);
+ *   return (
+ *     <>
+ *       <ScrollScene ref={sceneRef} length={3}>
+ *         <Container>...overlay HTML...</Container>
+ *       </ScrollScene>
+ *       <CanvasProvider fallback={<SceneFallback fullBleed />}>
+ *         <InvalidateOnScroll />
+ *         <ScrollSceneContext.Provider value={sceneRef.current?.progress}>
+ *           <CameraRig />
+ *           <MyMesh />
+ *         </ScrollSceneContext.Provider>
+ *       </CanvasProvider>
+ *     </>
+ *   );
+ */
+
+import { createContext, forwardRef, useEffect, useImperativeHandle, useRef, type ReactNode, type MutableRefObject } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+export type ScrollPhase = 'before' | 'entering' | 'pinned' | 'exiting' | 'after';
+
+export interface ScrollProgressRef {
+  /** 0..1 across the pinned range. */
+  progress: number;
+  /** Coarse lifecycle phase for gating sub-animations. */
+  phase:    ScrollPhase;
+}
+
+export interface ScrollSceneRef {
+  /** Ref object R3F components read during useFrame. */
+  progress: MutableRefObject<ScrollProgressRef>;
+}
+
+export interface ScrollSceneProps {
+  /** Pin length as a multiple of viewport height (e.g. 3 = pin for 3 viewports of scroll). */
+  length?:      number;
+  /** Extra scrub smoothing (0 = linear, >0 = eased). */
+  scrub?:       number | boolean;
+  /** Additional className for the outer section. */
+  className?:   string;
+  /** Overlay HTML (anything non-3D that should scroll-pin with the canvas). */
+  children?:    ReactNode;
+}
+
+/** Context read by scene-children under CanvasProvider. Null until ScrollScene mounts. */
+export const ScrollSceneContext = createContext<MutableRefObject<ScrollProgressRef> | null>(null);
+
+export const ScrollScene = forwardRef<ScrollSceneRef, ScrollSceneProps>(function ScrollScene(
+  { length = 2, scrub = true, className = '', children },
+  ref,
+) {
+  const sectionRef = useRef<HTMLElement | null>(null);
+  const progressRef = useRef<ScrollProgressRef>({ progress: 0, phase: 'before' });
+
+  useImperativeHandle(ref, () => ({ progress: progressRef }), []);
+
+  useEffect(() => {
+    if (!sectionRef.current) return;
+    gsap.registerPlugin(ScrollTrigger);
+
+    const trigger = ScrollTrigger.create({
+      trigger:   sectionRef.current,
+      start:     'top top',
+      end:       `+=${length * 100}%`,
+      pin:       true,
+      scrub,
+      onEnter:   () => { progressRef.current.phase = 'entering'; },
+      onLeave:   () => { progressRef.current.phase = 'after'; },
+      onEnterBack: () => { progressRef.current.phase = 'entering'; },
+      onLeaveBack: () => { progressRef.current.phase = 'before'; },
+      onUpdate:  (self) => {
+        progressRef.current.progress = self.progress;
+        if (self.progress > 0 && self.progress < 1) progressRef.current.phase = 'pinned';
+        else if (self.progress >= 1) progressRef.current.phase = 'exiting';
+      },
+    });
+
+    return () => { trigger.kill(); };
+  }, [length, scrub]);
+
+  return (
+    <section
+      ref={sectionRef}
+      className={`relative h-svh w-full ${className}`.trim()}
+      data-scroll-scene
+    >
+      {children}
+    </section>
+  );
+});

package/framework/scaffold/motion-premium-3d/components/webgl/SceneFallback.tsx.template

@@ -0,0 +1,65 @@
+/**
+ * SceneFallback — rendered when WebGL is unavailable or the user asked
+ * for reduced motion.
+ *
+ * The design intent (ADR-3D-05, ADR-3D-08): users who cannot see a
+ * canvas should see a considered static design, not a broken-looking
+ * blank area. The fallback reads like an artistic still — a single
+ * gradient background with optional children (headline, logo, CTA)
+ * that still honour the brand palette.
+ *
+ * Props:
+ *   children        — optional foreground content (headline, CTA)
+ *   className       — extra Tailwind classes to merge
+ *   fullBleed       — when true, fills viewport (use for heroes)
+ *   accessibleLabel — passed to role="img" aria-label. When the scene
+ *                     is decorative, set to '' and add aria-hidden instead.
+ *
+ * Usage:
+ *   <SceneFallback fullBleed accessibleLabel="Product showcase backdrop">
+ *     <h1 className="text-display-lg">Welcome</h1>
+ *   </SceneFallback>
+ */
+
+import type { ReactNode } from 'react';
+
+export interface SceneFallbackProps {
+  children?:         ReactNode;
+  className?:        string;
+  fullBleed?:        boolean;
+  accessibleLabel?:  string;
+}
+
+export function SceneFallback({
+  children,
+  className = '',
+  fullBleed = false,
+  accessibleLabel = '',
+}: SceneFallbackProps) {
+  const baseClass = fullBleed
+    ? 'relative w-screen h-svh overflow-hidden'
+    : 'relative w-full h-full min-h-[60vh] overflow-hidden';
+
+  // Brand palette placeholder — resolved at scaffold apply from brand.ts.
+  // The gradient runs from deep to primary for a cinematic-stills feel
+  // that echoes the WebGL scene it replaces.
+  const gradient = 'bg-[radial-gradient(ellipse_at_center,{{PRIMARY_HEX}}_0%,{{BG_DEEP_HEX}}_70%)]';
+
+  const a11y = accessibleLabel
+    ? { role: 'img', 'aria-label': accessibleLabel }
+    : { 'aria-hidden': true };
+
+  return (
+    <div
+      className={`${baseClass} ${gradient} ${className}`.trim()}
+      {...a11y}
+      data-scene-fallback
+    >
+      {children && (
+        <div className="relative z-10 h-full w-full flex items-center justify-center">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/framework/scaffold/motion-premium-3d/components/webgl/WebGLContext.tsx.template

@@ -0,0 +1,68 @@
+'use client';
+
+/**
+ * WebGLContext — React context that exposes runtime WebGL availability.
+ *
+ * Pattern (ADR-3D-05): the detect.ts probe runs ONCE on mount. The
+ * result lives in context so every 3D template checks the same source
+ * of truth without re-probing. Downstream <ScrollScene> and
+ * <CanvasProvider> short-circuit to <SceneFallback> when availability
+ * is false — no <Canvas> ever mounts, no Three.js bundle pays its
+ * cost on devices that cannot render it.
+ *
+ * State shape:
+ *   status: 'pending' | 'available' | 'unavailable'
+ *   reason: 'no-webgl' | 'reduced-motion' | 'no-window' | null
+ *
+ * 'pending' allows the first render to paint a static fallback; the
+ * effect then updates the context. This avoids the "canvas flashes for
+ * one frame before falling back" hydration bug.
+ */
+
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { detectWebGL, type WebGLAvailability } from '@/lib/webgl/detect';
+
+export interface WebGLContextValue {
+  status: 'pending' | 'available' | 'unavailable';
+  reason: WebGLAvailability extends { reason: infer R } ? R | null : null;
+  webglVersion: 1 | 2 | null;
+}
+
+const DEFAULT_VALUE: WebGLContextValue = {
+  status:        'pending',
+  reason:        null,
+  webglVersion:  null,
+};
+
+const WebGLContext = createContext<WebGLContextValue>(DEFAULT_VALUE);
+
+export function WebGLProvider({ children }: { children: ReactNode }) {
+  const [value, setValue] = useState<WebGLContextValue>(DEFAULT_VALUE);
+
+  useEffect(() => {
+    const result = detectWebGL();
+    if (result.available) {
+      setValue({ status: 'available', reason: null, webglVersion: result.version });
+    } else {
+      setValue({ status: 'unavailable', reason: result.reason, webglVersion: null });
+    }
+  }, []);
+
+  return <WebGLContext.Provider value={value}>{children}</WebGLContext.Provider>;
+}
+
+/**
+ * Hook — returns the full context value. Prefer `useWebGLReady()` when
+ * you only need the boolean.
+ */
+export function useWebGLContext(): WebGLContextValue {
+  return useContext(WebGLContext);
+}
+
+/**
+ * Hook — boolean "may we mount a Canvas now?". Returns false on pending
+ * so the first render is always safe (fallback renders, then upgrades).
+ */
+export function useWebGLReady(): boolean {
+  return useContext(WebGLContext).status === 'available';
+}

package/framework/scaffold/motion-premium-3d/lib/webgl/detect.ts.template

@@ -0,0 +1,69 @@
+/**
+ * WebGL availability detection — client-only.
+ *
+ * Runs a one-shot probe: try to acquire a WebGL2 context, fall back to
+ * WebGL1, return null when neither is available (Safari ITP with
+ * strict mode, corporate browser lockdowns, very old hardware).
+ *
+ * ADR-3D-05: treat reduced-motion as WebGL-off from a UX perspective.
+ * A user who has asked for reduced motion does not want a scroll-driven
+ * 3D scene — even if WebGL is technically available. Returning false in
+ * this case lets downstream components render the SceneFallback without
+ * a second check.
+ *
+ * ADR-3D-08 coordinates with the hook at the component layer: the
+ * canvas provider calls detect() once and stores the result in a React
+ * context (see WebGLContext.tsx).
+ *
+ * Pure on the browser: does NOT render, mount, or dispatch events.
+ * Safe to call inside useEffect.
+ */
+
+export type WebGLAvailability =
+  | { available: true;  version: 2 | 1 }
+  | { available: false; reason: 'no-webgl' | 'reduced-motion' | 'no-window' };
+
+export function detectWebGL(): WebGLAvailability {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    // SSR / Node: pretend WebGL is unavailable so client-only mounts handle it.
+    return { available: false, reason: 'no-window' };
+  }
+
+  // Reduced-motion opt-out comes first — cheap, and a pref miss saves us
+  // from ever probing a context we will not use.
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+    return { available: false, reason: 'reduced-motion' };
+  }
+
+  let canvas: HTMLCanvasElement | null = null;
+  try {
+    canvas = document.createElement('canvas');
+    const gl2 = canvas.getContext('webgl2');
+    if (gl2) {
+      // Best-effort cleanup so we do not leak the probe context.
+      (gl2 as WebGL2RenderingContext).getExtension('WEBGL_lose_context')?.loseContext();
+      return { available: true, version: 2 };
+    }
+    const gl1 = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+    if (gl1) {
+      (gl1 as WebGLRenderingContext).getExtension('WEBGL_lose_context')?.loseContext();
+      return { available: true, version: 1 };
+    }
+    return { available: false, reason: 'no-webgl' };
+  } catch {
+    return { available: false, reason: 'no-webgl' };
+  } finally {
+    if (canvas) {
+      // Drop the probe node.
+      canvas.width = 0;
+      canvas.height = 0;
+    }
+  }
+}
+
+/**
+ * Shorthand boolean — use when caller only cares if Canvas should mount.
+ */
+export function isWebGLAvailable(): boolean {
+  return detectWebGL().available;
+}