aranroig.com/frontend/app/components/widgets/HiboliaScene.vue

<script setup lang="ts">
const ATLAS_URL = 'https://cdn.aranroig.com/web/assets/cards.png';
const CARD_COLS = 5;
const CARD_ROWS = 11;
const CARD_COUNT = 20;
const CARD_LANES = 5;
const CARD_SPEED = 1.1;
const CARD_WIDTH = 1.15;
const CARD_BACK_FACE = 9 * CARD_COLS + 2;

const root = ref<HTMLDivElement | null>(null);
let disposeScene: (() => void) | null = null;
let cancelled = false;
let cancelSchedule: (() => void) | null = null;

const init = async () => {
  const el = root.value;
  if (!el || cancelled) return;

  const {
    Scene,
    PerspectiveCamera,
    WebGLRenderer,
    TextureLoader,
    SRGBColorSpace,
    MeshBasicMaterial,
    PlaneGeometry,
    Mesh,
    Vector2,
    Vector3,
    Color,
    Clock,
    MathUtils
  } = await import('three');
  if (cancelled) return;

  const scene = new Scene();

  const camera = new PerspectiveCamera(45, 1, 0.1, 100);
  camera.position.z = 4;

  const renderer = new WebGLRenderer({ antialias: true, alpha: true });
  renderer.setPixelRatio(1);
  el.appendChild(renderer.domElement);

  let texture;
  try {
    texture = await new TextureLoader().loadAsync(ATLAS_URL);
  } catch (e) {
    console.warn('HiboliaScene: failed to load card atlas (CORS?)', e);
    el.removeChild(renderer.domElement);
    return;
  }
  if (cancelled) {
    texture.dispose();
    renderer.dispose();
    if (renderer.domElement.parentElement === el) el.removeChild(renderer.domElement);
    return;
  }
  texture.colorSpace = SRGBColorSpace;
  texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

  const cellW = texture.image.width / CARD_COLS;
  const cellH = texture.image.height / CARD_ROWS;
  const cardHeight = CARD_WIDTH * (cellH / cellW);

  const material = new MeshBasicMaterial({
    map: texture,
    transparent: true
  });

  const backMaterial = new MeshBasicMaterial({
    map: texture,
    transparent: true
  });

  // Round the card corners with an anti-aliased rounded-rect SDF in the shader.
  const CORNER_RADIUS = 0.09;
  const applyRoundedCorners = (mat: any) => {
    mat.onBeforeCompile = (shader: any) => {
      shader.uniforms.uHalfSize = { value: new Vector2(CARD_WIDTH / 2, cardHeight / 2) };
      shader.uniforms.uRadius = { value: CORNER_RADIUS };
      shader.vertexShader = shader.vertexShader
        .replace(
          '#include <common>',
          '#include <common>\nvarying vec2 vCardPos;'
        )
        .replace(
          '#include <begin_vertex>',
          '#include <begin_vertex>\nvCardPos = position.xy;'
        );
      shader.fragmentShader = shader.fragmentShader
        .replace(
          '#include <common>',
          `#include <common>
varying vec2 vCardPos;
uniform vec2 uHalfSize;
uniform float uRadius;`
        )
        .replace(
          '#include <color_fragment>',
          `#include <color_fragment>
vec2 q = abs(vCardPos) - uHalfSize + uRadius;
float sd = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - uRadius;
diffuseColor.a *= 1.0 - smoothstep(-fwidth(sd), fwidth(sd), sd);`
        );
      mat.userData.shader = shader;
    };
    mat.needsUpdate = true;
  };
  applyRoundedCorners(material);
  applyRoundedCorners(backMaterial);

  let viewHalfW = 2;
  let viewHalfH = 1.66;
  const updateView = () => {
    viewHalfH = camera.position.z * Math.tan(MathUtils.degToRad(camera.fov / 2));
    viewHalfW = viewHalfH * camera.aspect;
  };

  // Inset UVs half a pixel inside each atlas cell to stop neighbors bleeding in.
  const marginU = 0.5 / cellW;
  const marginV = 0.5 / cellH;

  // Shift the plane's UVs into one cell of the atlas: col across 5 columns,
  // row from the top of the image (v origin is bottom-left in three.js).
  const applyCardFace = (geometry: any, face: number) => {
    const col = face % CARD_COLS;
    const row = Math.floor(face / CARD_COLS);
    const uv = geometry.attributes.uv;
    if (!geometry.userData.baseUv) {
      geometry.userData.baseUv = Float32Array.from(uv.array);
    }
    const base = geometry.userData.baseUv;
    for (let i = 0; i < uv.count; i++) {
      const u = (col + marginU + base[i * 2] * (1 - 2 * marginU)) / CARD_COLS;
      const v = (CARD_ROWS - 1 - row + marginV + base[i * 2 + 1] * (1 - 2 * marginV)) / CARD_ROWS;
      uv.setXY(i, u, v);
    }
    uv.needsUpdate = true;
  };

  const cards: any[] = [];

  const respawn = (card: any, initial: boolean) => {
    const topY = viewHalfH + cardHeight;
    const bottomY = -viewHalfH - cardHeight;
    card.mesh.position.set(
      -viewHalfW + (viewHalfW * 2 / CARD_LANES) * (card.slot % CARD_LANES + 0.5) + MathUtils.randFloatSpread(0.3),
      initial
        ? bottomY + (topY - bottomY) * (1 - (card.slot + 0.5) / CARD_COUNT)
        : topY,
      MathUtils.randFloat(-1.5, 0.5)
    );
    card.mesh.rotation.set(
      MathUtils.randFloat(-0.3, 0.3),
      MathUtils.randFloat(-0.4, 0.4),
      MathUtils.randFloat(-0.3, 0.3)
    );
    card.spin.set(
      MathUtils.randFloatSpread(1.6),
      MathUtils.randFloatSpread(1.6),
      MathUtils.randFloatSpread(0.9)
    );
    applyCardFace(card.geometry, Math.floor(Math.random() * CARD_COLS * CARD_ROWS));
  };

  for (let i = 0; i < CARD_COUNT; i++) {
    const geometry = new PlaneGeometry(CARD_WIDTH, cardHeight);
    const mesh = new Mesh(geometry, material);
    const backGeometry = new PlaneGeometry(CARD_WIDTH, cardHeight);
    applyCardFace(backGeometry, CARD_BACK_FACE);
    const backMesh = new Mesh(backGeometry, backMaterial);
    backMesh.rotation.y = Math.PI;
    backMesh.position.z = -0.001;
    mesh.add(backMesh);
    scene.add(mesh);
    const card = { mesh, geometry, backGeometry, slot: i, spin: new Vector3() };
    respawn(card, true);
    cards.push(card);
  }

  const resize = () => {
    const width = el.clientWidth;
    const height = el.clientHeight;
    if (!width || !height) return;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    updateView();
  };
  resize();

  const observer = new ResizeObserver(resize);
  observer.observe(el);

  // Solid canvas background tracking the active theme's --color-background.
  const applyBackground = () => {
    const bg = getComputedStyle(document.documentElement)
      .getPropertyValue('--color-background')
      .trim();
    renderer.setClearColor(new Color(bg || '#0e0e0e'), 1);
  };
  applyBackground();

  const themeObserver = new MutationObserver(applyBackground);
  themeObserver.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['data-theme']
  });

  const clock = new Clock();
  let frameId = 0;
  let running = false;
  const animate = () => {
    if (!running) return;
    frameId = requestAnimationFrame(animate);
    const dt = Math.min(clock.getDelta(), 0.05);
    for (const card of cards) {
      card.mesh.position.y -= CARD_SPEED * dt;
      card.mesh.rotation.x += card.spin.x * dt;
      card.mesh.rotation.y += card.spin.y * dt;
      card.mesh.rotation.z += card.spin.z * dt;
      if (card.mesh.position.y < -viewHalfH - cardHeight) {
        respawn(card, false);
      }
    }
    renderer.render(scene, camera);
  };

  // Pause the loop while the tab is hidden to free the main thread and GPU.
  const startLoop = () => {
    if (running) return;
    running = true;
    clock.getDelta();
    frameId = requestAnimationFrame(animate);
  };
  const stopLoop = () => {
    if (!running) return;
    running = false;
    cancelAnimationFrame(frameId);
  };
  const removeVisibility = onVisibility((hidden) => (hidden ? stopLoop() : startLoop()));
  startLoop();

  disposeScene = () => {
    stopLoop();
    removeVisibility();
    observer.disconnect();
    themeObserver.disconnect();
    for (const card of cards) {
      card.geometry.dispose();
      card.backGeometry.dispose();
    }
    material.dispose();
    backMaterial.dispose();
    texture.dispose();
    renderer.dispose();
    if (renderer.domElement.parentElement === el) {
      el.removeChild(renderer.domElement);
    }
  };
};

onMounted(() => {
  cancelSchedule = scheduleIdle(() => {
    init();
  });
});

onBeforeUnmount(() => {
  cancelled = true;
  cancelSchedule?.();
  disposeScene?.();
});
</script>

<template>
  <div ref="root" class="three-root">
    <div class="three-bg" aria-hidden="true"></div>
  </div>
</template>

<style lang="scss" scoped>
.three-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .three-bg {
    position: absolute;
    inset: 0;
    background: var(--color-background);
  }

  :deep(canvas) {
    position: relative;
    z-index: 1;
    display: block;
  }
}
</style>