Portfolio 3D Showcases at 1M Sessions: three.js vs Babylon.js vs Spline vs model-viewer — Hydration Cost, p99 Frame Latency, GPU Memory, and the True Cost per Million Renders

// lib/bench/phases.ts
export type Phase = 'bundle-eval' | 'engine-boot' | 'shader-compile' | 'first-frame';

interface PhaseHandle { end(): number }

export function startPhase(name: Phase): PhaseHandle {
  if (typeof performance?.mark !== 'function') return { end: () => Number.NaN };
  const startMark = `${name}:start`;
  const endMark = `${name}:end`;
  performance.mark(startMark);
  return {
    end(): number {
      performance.mark(endMark);
      return performance.measure(name, startMark, endMark).duration;
    },
  };
}

export function collectMeasures(
  names: readonly Phase[],
  onFlush: (timings: Record<string, number>) => void,
): () => void {
  if (typeof PerformanceObserver === 'undefined') return () => {};
  const observer = new PerformanceObserver((list) => {
    const timings: Record<string, number> = {};
    for (const entry of list.getEntries()) {
      if (entry.entryType === 'measure' && names.includes(entry.name as Phase)) {
        timings[entry.name] = entry.duration;
      }
    }
    if (Object.keys(timings).length > 0) onFlush(timings);
  });
  observer.observe({ type: 'measure', buffered: true });
  return () => observer.disconnect();
}

import { WebGLRenderer, Scene, PerspectiveCamera } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';

export async function bootShowcase(canvas: HTMLCanvasElement) {
  const renderer = new WebGLRenderer({ canvas, antialias: true, powerPreference: 'high-performance' });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  const ktx2 = new KTX2Loader().setTranscoderPath('/basis/').detectSupport(renderer);
  const loader = new GLTFLoader().setKTX2Loader(ktx2).setMeshoptDecoder(MeshoptDecoder);

  const { scene: asset } = await loader.loadAsync('/assets/hero.opt.glb');
  const scene = new Scene();
  scene.add(asset);

  const camera = new PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 0.1, 100);
  await renderer.compileAsync(scene, camera); // resolves before first paint

  return {
    renderer, scene, camera,
    dispose() { ktx2.dispose(); renderer.dispose(); renderer.forceContextLoss(); },
  };
}

// lib/bench/frame-latency.ts
export interface FrameStats {
  readonly samples: number; readonly p50: number; readonly p95: number; readonly p99: number;
  readonly longFrames: number; readonly budgetMs: number;
}

const percentile = (sorted: readonly number[], p: number): number => {
  if (sorted.length === 0) return Number.NaN;
  const idx = Math.ceil((p / 100) * sorted.length) - 1;
  return sorted[Math.min(sorted.length - 1, Math.max(0, idx))]!;
};

export class FrameLatencyRecorder {
  private readonly deltas: number[] = [];
  private rafId: number | null = null;
  private last = 0;
  private seen = 0;

  constructor(
    private readonly budgetMs = 1000 / 60,
    private readonly warmupFrames = 90,
    private readonly maxSamples = 3000,
  ) {}

  start(): void {
    this.last = performance.now();
    const tick = (now: number): void => {
      const delta = now - this.last;
      this.last = now;
      if (this.seen++ >= this.warmupFrames && delta < 1000) {
        this.deltas.push(delta);
        if (this.deltas.length > this.maxSamples) this.deltas.shift();
      }
      this.rafId = requestAnimationFrame(tick);
    };
    this.rafId = requestAnimationFrame(tick);
  }

  stop(): void {
    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
    this.rafId = null;
  }

  stats(): FrameStats {
    const sorted = [...this.deltas].sort((a, b) => a - b);
    return {
      samples: sorted.length,
      p50: percentile(sorted, 50),
      p95: percentile(sorted, 95),
      p99: percentile(sorted, 99),
      longFrames: sorted.filter((d) => d > this.budgetMs * 2).length,
      budgetMs: this.budgetMs,
    };
  }
}

// lib/bench/gpu-memory.ts
import type { BufferGeometry, Object3D, Texture } from 'three';
import { FloatType, HalfFloatType, RedFormat, RGFormat } from 'three';

function bytesPerTexel(texture: Texture): number {
  const channels = texture.format === RedFormat ? 1 : texture.format === RGFormat ? 2 : 4;
  const bytesPerChannel = texture.type === FloatType ? 4 : texture.type === HalfFloatType ? 2 : 1;
  return channels * bytesPerChannel;
}

export function estimateTextureBytes(texture: Texture): number {
  const compressed = texture as Texture & { isCompressedTexture?: boolean; mipmaps?: { data: ArrayBufferView }[] };
  if (compressed.isCompressedTexture) {
    return (compressed.mipmaps ?? []).reduce((sum, m) => sum + m.data.byteLength, 0);
  }
  const img = texture.image as { width?: number; height?: number } | undefined;
  if (!img?.width || !img?.height) return 0;
  const base = img.width * img.height * bytesPerTexel(texture);
  return Math.round(base * (texture.generateMipmaps ? 4 / 3 : 1));
}

export function estimateSceneGpuBytes(root: Object3D): { textures: number; geometry: number } {
  const textures = new Map<string, number>();
  const geometries = new Set<BufferGeometry>();

  root.traverse((node) => {
    const mesh = node as Object3D & { geometry?: BufferGeometry; material?: Record<string, unknown> };
    if (mesh.geometry) geometries.add(mesh.geometry);
    for (const value of Object.values(mesh.material ?? {})) {
      const tex = value as Texture | undefined;
      if (tex?.isTexture) textures.set(tex.uuid, estimateTextureBytes(tex));
    }
  });

  return {
    textures: [...textures.values()].reduce((a, b) => a + b, 0),
    geometry: [...geometries].reduce((sum, g) => sum + (g.attributes.position?.array.byteLength ?? 0), 0),
  };
}

# Meshopt + GPU-compressed textures: the default portfolio recipe
npx @gltf-transform/cli optimize hero.glb hero.opt.glb \
  --compress meshopt \
  --texture-compress ktx2 \
  --texture-size 2048 \
  --simplify true

# Alternatively, for very large photogrammetry meshes where ratio wins
npx @gltf-transform/cli optimize hero.glb hero.draco.glb --compress draco --texture-compress ktx2

// lib/bench/cost-model.ts
export interface CostModelInput {
  readonly monthlySessions: number;
  readonly coldPayloadBytes: number;
  readonly egressUsdPerGb: number;
  readonly requestUsdPerMillion: number;
  readonly requestsPerSession: number;
}

export interface CostModelOutput {
  readonly egressGb: number;
  readonly egressUsd: number;
  readonly requestsUsd: number;
  readonly totalUsd: number;
  readonly usdPerMillionSessions: number;
}

const BYTES_PER_GB = 1e9;

export function costPerMillionRenders(input: CostModelInput): CostModelOutput {
  if (input.monthlySessions <= 0) throw new RangeError('monthlySessions must be positive');
  const egressGb = (input.monthlySessions * input.coldPayloadBytes) / BYTES_PER_GB;
  const egressUsd = egressGb * input.egressUsdPerGb;
  const requests = input.monthlySessions * input.requestsPerSession;
  const requestsUsd = (requests / 1_000_000) * input.requestUsdPerMillion;
  const totalUsd = egressUsd + requestsUsd;

  return {
    egressGb: Number(egressGb.toFixed(1)),
    egressUsd: Number(egressUsd.toFixed(2)),
    requestsUsd: Number(requestsUsd.toFixed(2)),
    totalUsd: Number(totalUsd.toFixed(2)),
    usdPerMillionSessions: Number((totalUsd / (input.monthlySessions / 1_000_000)).toFixed(2)),
  };
}

<!-- model-viewer: the highest-leverage three attributes in the API -->
<model-viewer id="hero" src="/assets/hero.glb" poster="/assets/hero-poster.avif"
  loading="lazy" reveal="manual" camera-controls environment-image="neutral"
  shadow-intensity="1" alt="Rotating mechanical keyboard hero render"></model-viewer>
<script type="module">
  const viewer = document.getElementById('hero');
  viewer.addEventListener('model-visibility', (event) => {
    if (event.detail.visible) viewer.dismissPoster();
  });
</script>

'use client';
import { lazy, Suspense, useEffect, useRef, useState } from 'react';

const Showcase = lazy(() => import('./showcase-canvas'));

export function HeroSlot() {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const node = ref.current;
    if (!node || typeof IntersectionObserver === 'undefined') { setVisible(true); return; }
    const io = new IntersectionObserver(([entry]) => {
      if (entry?.isIntersecting) { setVisible(true); io.disconnect(); }
    }, { rootMargin: '200px' });
    io.observe(node);
    return () => io.disconnect();
  }, []);

  return (
    <div ref={ref} style={{ aspectRatio: '16 / 9', contain: 'layout paint' }}>
      {visible && <Suspense fallback={null}><Showcase /></Suspense>}
    </div>
  );
}