<!-- ============================================================
PROMOVIDO A PUBLICABLE el 2026-09-09, desde constelacion-qr-webgpu-con-fondo-
experimental-v5.html (checkpoint congelado y aprobado por Marco). Antes de
esta promoción, este archivo venía de antes del Hilo 4 — la versión anterior
(sin Hilo 4, sin bloom, sin el rediseño de nodos/cubos) queda preservada
intacta en constelacion-qr-webgpu-con-fondo-pre-hilo4.html, mismo criterio de
siempre: nunca se pisa un estado anterior sin dejarlo guardado aparte.

QUÉ TRAE ESTA PROMOCIÓN (resumen — el detalle completo de cada pieza vive en
los comentarios junto a su propio código, más abajo): Hilo 4 completo
(formación de la constelación migrando desde el fondo, remolino de eje
compartido, timing tuneado), bloom real (Hilo 2 — con la garantía de que en
el instante cenital exacto usa el mismo camino de código de siempre, sin
bloom de por medio), fondo más vivo (titileo ocasional por estrella,
rotación de galaxias con piso de velocidad, estrellas fugaces con
trayectoria horizontal acotada), y el rediseño completo del estilo de nodos/
cubos: se abandonó el sombreado de esfera falsa (normal reconstruida +
especular + fresnel + glint en cruz, que a Marco le resultaba "de
caricatura") a favor de resplandor real con alfa-blending de verdad — la
misma técnica que ya usan las estrellas del fondo (núcleo + halo + variedad
de estilos de wgsl/estrellas-grandes.wgsl) — tanto para los círculos como
para las caras del cubo.

QUÉ SE SACÓ al promover (chrome de laboratorio que no corresponde en la
pieza publicable): el botón de navegación entre checkpoints (esquina
superior derecha) y su CSS — esos checkpoints (-v1.html a -v5.html) siguen
existiendo en el laboratorio como registro histórico, pero no tienen sentido
para un visitante del sitio real.

Ahora enlazada desde entrega/index.html, sección #constelacion.
============================================================ -->
<!-- ============================================================
Constelación QR con fondo del laboratorio de galaxias (WebGPU) — versión
PUBLICABLE de constelacion-qr-webgpu.html, que queda intacta al lado como
referencia/respaldo (no se toca ni una línea suya desde aquí). Página aparte,
enlazada desde entrega/index.html (sección #constelacion, ver el comentario
de promoción justo arriba de este) — el día que se decidió dónde vive en el
sitio ya pasó.

CÓMO SE ABRE: doble clic — file://, sin servidor, sin paso de build para
JS/CSS/este HTML (el único build de todo el proyecto sigue siendo
`python laboratorio-galaxias-unificado-webgpu-fuente/generar-js.py`, y solo
hace falta si se toca un .wgsl del laboratorio — este archivo no toca
ninguno).

QUÉ HACE ESTE ARCHIVO: pone en la MISMA página, apiladas por CSS, dos
aplicaciones WebGPU que hoy son completamente independientes:

  1) el laboratorio de galaxias completo (laboratorio-galaxias-unificado-
     webgpu.html / -fuente/), de fondo, a pantalla completa, con su panel
     oculto y un preset fijo aplicado al cargar — sin exponer ningún control
     al visitante.
  2) la constelación QR (constelacion-qr-webgpu.html), encima, con el fondo
     de su propio render pass vuelto transparente en vez de un color plano,
     para que el laboratorio se vea a través.

EL PROBLEMA DE FONDO Y POR QUÉ SE RESOLVIÓ ASÍ (no es solo "un canvas atrás
de otro"): la pista original era compartir un solo GPUAdapter/GPUDevice para
ambos canvases. Se descartó a propósito: WebGPU no lo exige (un mismo
documento puede tener varios GPUDevice, cada uno con su propio canvas
configurado), y compartir uno solo hubiera acoplado dos aplicaciones que
tienen que poder seguir viviendo separadas — un error/uncapturederror o un
device.lost de una potencialmente ensucia bind groups/pipelines de la otra
si comparten device. Aquí cada canvas pide su PROPIO adaptador+device, en su
propio script, exactamente como ya lo hacía cada archivo por separado. El
costo es memoria/overhead de driver por un segundo device activo a la vez —
insignificante en cualquier GPU real (el límite práctico de devices por
adaptador es de decenas, no de uno); si algún día se mide que es un problema
real en algún hardware concreto, ESE sería el momento de compartir uno solo,
no antes.

La otra mitad del problema (la que sí obligó a tocar la constelación QR, ver
la copia de su script más abajo) es que su fragment shader hoy "compone" el
fondo A MANO: mezcla (mix) contra un color de fondo fijo y siempre escribe
alfa=1 — si el canvas de arriba se pusiera "premultiplied" con clear en
alfa=0 sin ningún otro cambio, cada antialiasing/halo seguiría tapando el
fondo del laboratorio con parches del violeta oscuro plano de siempre. La
solución elegida NO toca el fragment shader (que es exactamente donde viven
las reglas ya validadas con jsQR: buscadores sin máscara/sin jitter, círculos
de dato con tono>=0.35 y tamaño fijo) — en cambio, el CLEAR del render pass
pasa a depender del mismo progreso de cámara que ya existía (camara.st): en
la vista en ángulo (st=0) nace transparente y se ve el laboratorio; según se
acerca a la vista cenital (st=1) vuelve gradualmente a ser el mismo opaco de
siempre, y en st=1 el frame es bit a bit IDÉNTICO al de la versión validada
— cero riesgo para el escaneo real en el instante que importa. Ver el
comentario junto a `clearValue` dentro de `dibujarFrame()`, más abajo, para
el detalle exacto (incluye por qué el color también se multiplica por el
progreso, no solo el alfa — gotcha real de premultiplied alpha).

CÓMO SE EXPONE UN "MODO SIN PANEL" DEL LABORATORIO SIN TOCAR SU FUENTE: nada
en laboratorio-galaxias-unificado-webgpu-fuente/ se modifica. Este archivo es
un segundo cascarón delgado (como ya lo es laboratorio-galaxias-unificado-
webgpu.html en sí mismo) que apunta a la MISMA carpeta -fuente/, reproduce
el mismo esqueleto de contenedores vacíos que cada capa-XXX.js llena por JS
(así ningún selector interno falla), y:
  - oculta el panel/botones flotantes/estado del laboratorio por CSS (display:
    none) — ninguna capa-XXX.js necesita que su panel sea VISIBLE, solo que
    sus contenedores EXISTAN en el DOM, así que ocultarlos no rompe nada.
  - aplica, en un <script> propio insertado ANTES de arranque.js (que arranca
    solo con el device+render loop en cuanto se carga) pero DESPUÉS de
    capa-presets.js (que expone aplicarSnapshot/cambiarModo/campoBase), un
    preset curado a mano para este uso — llamando únicamente funciones
    globales que el propio laboratorio ya expone, igual que ya hace su propio
    selector de presets. Cero líneas nuevas ni tocadas en -fuente/.

DOS COLISIONES DE NOMBRE reales entre ambas apps (comparten el mismo scope
global — sin módulos ES, a propósito, por el bloqueo de fetch()/import() bajo
file://) y cómo se resolvieron, siempre cediendo del lado de la constelación
QR (nunca tocando lo que arranque.js/utilidades.js del laboratorio esperan
encontrar):
  - id="lienzo" (canvas): el laboratorio lo tiene hardcodeado en
    arranque.js — el canvas de la constelación QR pasa a id="lienzoQR" en ESTE
    archivo (constelacion-qr-webgpu.html, sin tocar, sigue usando "lienzo").
  - variable/función global `estado` + id="estado": utilidades.js declara
    `const estado = document.getElementById('estado')` (para poder escribir
    `estado.textContent = ...` desde arranque.js) — la constelación QR pasa a
    usar `estadoQR`/id="estadoQR" en ESTE archivo.
Sin este cambio de nombres, cualquiera de los dos `<script>` que cargara
SEGUNDO lanzaría `SyntaxError: Identifier ya declarado` y rompería la mitad
de la página entera.

PRESUPUESTO DE RENDIMIENTO Y "QUÉ TAN VIVO" (decisiones tomadas sin poder
medir FPS real en un celular desde este entorno de desarrollo — ver el
mensaje de la sesión que armó este archivo para el detalle; a confirmar/
ajustar con medición real antes de publicar):
  - preset ESTÁTICO al cargar (sin auto-ciclo/aleatorización periódica): más
    predecible y liviano para algo que corre siempre de fondo.
  - nebulosaCompleja (la capa más cara por-píxel, según el propio mapa de
    arriba de laboratorio-galaxias-unificado-webgpu.html) queda APAGADA aquí;
    Vía Láctea (una sola pasada de pantalla completa, barata) queda PRENDIDA
    a propósito — apagada por defecto en TODOS los presets de fábrica del
    laboratorio salvo que se la prenda explícitamente (ver capasVisibles.
    viaLactea en capa-presets-datos.js) — y el campo de galaxias/estrellas
    queda en cantidades bajas (subsección "preset" del <script> de más abajo).
  - paleta de color: se dejó la variedad normal de la capa "campo de
    galaxias" (violeta/azul/rosa/dorado/etc. — cada galaxia sortea la suya,
    ver TIPOS_PALETAS_PERMITIDAS en utilidades.js) en vez de forzar todo a un
    solo tono: con tan pocas instancias en pantalla, cualquier variación es
    sutil y no compite con el violeta de marca del QR encima; forzar un solo
    índice de paleta hubiera significado mutar un array interno del
    laboratorio desde afuera, más fragilidad para un beneficio marginal.

UN HALLAZGO REAL DE ESTA SESIÓN, ya corregido: al probarlo en un navegador de
verdad, el "campo de galaxias" del laboratorio se veía tapado por parches
grandes de borde duro — no era ninguna capa del laboratorio (se descartó
tamano de galaxias/nebulosa uno por uno, en vivo). La causa real era que este
archivo todavía llamaba a construirEstrellasFondo()/construirNebulosa(), el
fondo decorativo CASERO de la propia constelación QR (heredado de
constelacion-qr-webgpu.html) — pintado con alfa=1 fijo, encima de todo, sin
enterarse de que ahora hay un fondo real detrás. Se eliminaron esas dos
funciones y sus llamadas en ESTE archivo (constelacion-qr-webgpu.html, sin
tocar, las sigue necesitando y las conserva intactas) — ver el comentario
junto a construirConstelacion() más abajo para el detalle completo.
Verificado visualmente después del fix: el campo de galaxias/nebulosa del
laboratorio se ve limpio, sin parches.
============================================================ -->
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Constelación QR con fondo de galaxias — WebGPU</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="laboratorio-galaxias-unificado-webgpu-fuente/estilos.css" />
<style>
  /* ---- reset compartido por las dos apps (calcado del <style> propio de
     constelacion-qr-webgpu.html) ---- */
  html, body { margin: 0; height: 100%; background: #08080a; overflow: hidden; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; }

  /* ---- apilado de los dos canvases: mismo hueco en pantalla, uno encima
     del otro por z-index. Estas reglas por ID (especificidad 100) ganan
     siempre por sobre la regla genérica `canvas{width:100%;height:100%}` de
     estilos.css del laboratorio (especificidad 1), sin importar el orden de
     las hojas de estilo — no hace falta !important. ---- */
  #lienzo, #lienzoQR { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; -webkit-tap-highlight-color: transparent; }
  #lienzo { z-index: 0; }   /* laboratorio: fondo */
  #lienzoQR { z-index: 1; cursor: pointer; }  /* constelación QR: encima, clickeable */

  /* ---- chrome del laboratorio, oculto para el visitante: sus contenedores
     siguen existiendo en el DOM (cada capa-XXX.js los necesita), solo dejan
     de pintarse y de poder recibir clicks. `#estado` aquí es el DIV del
     LABORATORIO (utilidades.js) — el de la constelación QR es #estadoQR,
     sin colisión. ---- */
  #panel, #togglePanel, #aleatorizarMaestroRapido, #autoAleatorizarRapido,
  #muestras100Rapido, #muestras500Rapido, #estado { display: none !important; }

  /* ---- estado de la constelación QR (calcado de constelacion-qr-webgpu.html,
     con el selector renombrado a #estadoQR) ---- */
  #estadoQR {
    position: fixed; left: 16px; bottom: 16px; right: 16px; max-width: 640px;
    background: rgba(15,13,20,.88); border: 1px solid #3a3348; border-radius: 12px;
    padding: 14px 18px; font-size: 13px; line-height: 1.5; color: #e7e2f2;
    white-space: pre-wrap; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); pointer-events: none;
    z-index: 2;
  }

  /* ---- fallback sin WebGPU: tarjeta con el QR clásico en SVG (createSvgTag
     genera un <rect fill="white"> + <path fill="black">; ambos son atributos
     de presentación, así que las reglas de abajo los pisan sin tocar el
     encoder compartido) — repintada con la paleta del sitio (violeta claro
     sobre casi-negro) en vez del blanco/negro por defecto, para que combine
     con el resto de la página. Sigue siendo alto contraste, se verificó que
     escanea igual que antes. Oculta por defecto, mostrarFallbackQR() en el
     <script> de más abajo la activa. ---- */
  #fallbackQR {
    display: none; position: fixed; inset: 0; z-index: 3;
    align-items: center; justify-content: center; padding: 24px; box-sizing: border-box;
  }
  #fallbackQR > svg {
    background: #08080a; border: 1px solid rgba(167,139,250,.35);
    border-radius: 16px; padding: 20px; box-sizing: content-box;
    box-shadow: 0 0 60px -10px rgba(167,139,250,.35), 0 12px 40px -12px rgba(0,0,0,.6);
    max-width: min(80vw, 420px); height: auto;
  }
  #fallbackQR > svg rect { fill: #08080a; }
  #fallbackQR > svg path { fill: #c4aeff; }

  /* ---- botón "LinkedIn": aparece solo cuando el QR ya está formado (vista
     cenital), sobre el mismo cuadro pero a distancia prudente por arriba, para
     no interferir con los módulos del código. Se muestra/oculta agregando o
     quitando .visible (ver window.__progresoCamaraQR en el <script> de más
     abajo); fallback estático la muestra directo. Mismo lenguaje visual que el
     botón "LinkedIn" (variante contorno) del pie de página del sitio. ---- */
  #botonEnlaceQR {
    position: fixed; top: max(22px, env(safe-area-inset-top, 0px) + 14px);
    left: 50%; transform: translateX(-50%);
    z-index: 4; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px;
    padding: 10px 22px; border-radius: 100px; text-decoration: none;
    color: #F4F4F6; border: 1px solid rgba(255,255,255,.16);
    background: rgba(15,13,20,.55); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity 320ms cubic-bezier(.16,1,.3,1), border-color 250ms, color 250ms;
  }
  #botonEnlaceQR.visible { opacity: 1; pointer-events: auto; }
  #botonEnlaceQR:hover { border-color: #A78BFA; color: #C4AEFF; }
</style>
</head>
<body>
<canvas id="lienzo"></canvas>
<button id="togglePanel" title="Mostrar/ocultar panel">☰</button>
<button id="aleatorizarMaestroRapido" title="Aleatorización maestra (acceso rápido, sin abrir el panel)">⚡</button>
<button id="autoAleatorizarRapido" title="Aleatorización automática cada 3 segundos (activar)">▶</button>
<button id="muestras100Rapido" title="Generar 100 muestras aleatorias y guardarlas (acceso rápido, sin abrir el panel)">100</button>
<button id="muestras500Rapido" title="Generar 500 muestras aleatorias y guardarlas (acceso rápido, sin abrir el panel)">500</button>
<div id="panel" data-modo-activo="unica">
  <h1>Laboratorio de galaxias</h1>
  <p id="versionLaboratorio" class="nota" style="color:#6a6380;font-size:10.5px;margin:0 0 4px;"></p>
  <p class="nota">Panel oculto a propósito en esta página (ver el comentario de encabezado del HTML) — sigue existiendo en el DOM porque cada capa-XXX.js lo necesita para armar sus controles, pero nunca se muestra al visitante.</p>

  <div class="modo-toggle">
    <button id="modoUnica" class="modo-btn activo">Galaxia única</button>
    <button id="modoCampo" class="modo-btn">Campo de galaxias</button>
  </div>

  <div class="presets-barra"></div>

  <div class="acciones" data-modo="unica"></div>
  <div class="acciones" data-modo="campo"></div>
  <div class="acciones-todo" data-modo="campo"></div>

  <div class="columnas" data-modo="unica"></div>

  <div class="capas-campo" id="capasCampo" data-modo="campo" data-capa-activa="galaxias">
  <div class="capas-tabs" role="tablist"></div>

  <div class="capa-panel" data-capa="galaxias"></div>
  <div class="capa-panel" data-capa="estrellasChicas"></div>
  <div class="capa-panel" data-capa="estrellasGrandes"></div>
  <div class="capa-panel" data-capa="estrellasFugaces"></div>
  <div class="capa-panel" data-capa="nebulosas" id="nebulosaSlots"></div>
  <div class="capa-panel" data-capa="nebulosaCompleja"></div>
  <div class="capa-panel" data-capa="viaLactea"></div>
  </div>
</div>
<div id="estado">iniciando WebGPU…</div>

<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/utilidades.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-galaxia-unica.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-campo-galaxias.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-estrellas-chicas.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-estrellas-grandes.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-estrellas-fugaces.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-nebulosa-simple.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-nebulosa-compleja.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-via-lactea.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/aleatorizar-todo.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-presets-datos.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-presets.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/version-build.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/capa-diagnostico.js"></script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/wgsl-shaders.js"></script>
<script>
// ============================================================================
// GLUE — el único código nuevo que "configura" el laboratorio para esta
// página. Corre DESPUÉS de capa-presets.js (necesita cambiarModo/
// aplicarSnapshot/campoBase, ya globales a esta altura) y ANTES de
// arranque.js (que arranca el device+render loop apenas se carga su
// <script>, leyendo en ese momento los controles que este bloque ya dejó
// configurados). No es una copia de ningún archivo de -fuente/, ni un nuevo
// preset de fábrica: es exactamente lo mismo que hace el selector de
// presets del panel (armar un objeto de datos con campoBase() y pasarlo a
// aplicarSnapshot), solo que fijo y disparado por código en vez de por un
// click en el <select> oculto.
// ============================================================================
cambiarModo('campo');
aplicarSnapshot({
  modo: 'campo',
  datos: campoBase({
    // campo de galaxias: pocas — un detalle disperso, no el protagonista
    // (la nebulosaCompleja, la capa más cara por-píxel, se deja apagada más
    // abajo en capasVisibles). tamano SIN override: se deja el default de
    // RANGOS_DEF (0.06-0.16, ver capa-campo-galaxias.js) en vez de un rango
    // propio — durante esta sesión se sospechó por un rato que un tamano más
    // grande era la causa de unos parches grandes de borde duro vistos en
    // vivo; la causa real (ver más abajo) era otra, así que no hace falta
    // desviarse del tamaño que el propio laboratorio ya calibró por defecto.
    cantidad: 10,
    // velocidadRotacion: el rango por defecto del laboratorio es [0,0] (ver
    // capa-campo-galaxias.js) -- las galaxias de campo NO rotan si no se
    // pide explícitamente, aunque el shader ya soporta la rotación (fase
    // "fondo más vivo" de esta sesión). Marco probó 0.06 y después 0.11 en
    // vivo y pidió subir un poco más el máximo (0.13) y también el mínimo
    // -- ver PISO_VELOCIDAD_ROTACION en generarCampo() (capa-campo-
    // galaxias.js): sin piso, el sorteo uniforme en este rango puede darle
    // a una galaxia una velocidad cercana a 0 (casi sin rotar), que es
    // justo lo que Marco pidió evitar.
    rangosGalaxias: { velocidadRotacion: [-0.13, 0.13] },
    // estrellas chicas: puntos livianos, casi gratis por-instancia — se
    // puede subir esta cantidad sin costo real si en la medición real hay
    // margen de sobra.
    cantidadEc: 120,
    // estrellas grandes: tienen resplandor/picos, algo más caras que las
    // chicas — cantidad moderada.
    cantidadEg: 8,
    // estrellas fugaces: "cantidad" es, en la práctica, la frecuencia (ver
    // capa-estrellas-fugaces.js) — con su ciclo de 25s, 3 instancias dan en
    // promedio una fugaz cada ~8s, "de vez en cuando" sin ser constante.
    cantidadEf: 3,
    // un solo slot de nebulosa simple (mucho más barata que la compleja),
    // en la paleta "Reflexión (azul)" — la más cercana al violeta/lavanda de
    // marca dentro de las 4 disponibles (ver NEBULOSA_PALETAS en
    // capa-nebulosa-simple.js). tamano moderado a propósito: en
    // nebulosa-simple.wgsl "tamano" es directamente medio-ancho en espacio de
    // recorte (mismo patrón que "campo de galaxias" — ver vs_main de ambos
    // .wgsl, `centro + cornerLocal*tam` sin matriz de proyección de por
    // medio), así que valores cercanos a 1.0 (los que usan los presets de
    // fábrica "M42"/"M16", pensados para llenar la pantalla de nebulosa)
    // cubren la mayor parte del canvas — aquí se busca un acento, no que la
    // nebulosa domine sobre el laboratorio.
    slots: [
      nebulosaSlotDefault(0, { mostrar: true, intensidad: 0.3, tamano: 0.55, paleta: 1 }),
      nebulosaSlotDefault(1, { mostrar: false }),
      nebulosaSlotDefault(2, { mostrar: false }),
    ],
    // LA CAUSA REAL de los parches grandes de borde duro vistos en vivo
    // durante esta sesión (ver mensaje de la sesión que armó este archivo)
    // NO era ninguna capa del laboratorio: eran construirEstrellasFondo()/
    // construirNebulosa(), el fondo decorativo casero de la CONSTELACIÓN QR
    // (ver el comentario grande junto a donde se las quitó, más abajo en
    // este archivo) — se pintaban con alfa=1 fijo por encima de todo, sin
    // enterarse de que ahora hay algo real detrás. Con esas ya quitadas,
    // estas capas del laboratorio quedan con sus valores por defecto/
    // moderados, sin necesidad de ningún ajuste defensivo adicional.
    capasVisibles: {
      galaxias: true, estrellasChicas: true, estrellasGrandes: true,
      nebulosas: true,
      nebulosaCompleja: false, // la capa cara por-píxel: apagada para esta pieza de fondo
      viaLactea: true,         // apagada por defecto en TODOS los presets de fábrica salvo que se pida — aquí SÍ se pide
      estrellasFugaces: true,  // ídem — apagada por defecto, aquí SÍ se pide
    },
  }),
});
</script>
<script src="laboratorio-galaxias-unificado-webgpu-fuente/js/arranque.js"></script>

<canvas id="lienzoQR"></canvas>
<a id="botonEnlaceQR" href="https://www.linkedin.com/in/marco-avaria-gonz%C3%A1lez-134801194" target="_blank" rel="noopener">LinkedIn ↗</a>
<div id="estadoQR">Iniciando…</div>
<div id="fallbackQR"></div>

<script>
//---------------------------------------------------------------------
//
// QR Code Generator for JavaScript
//
// Copyright (c) 2009 Kazuhiko Arase
//
// URL: http://www.d-project.com/
//
// Licensed under the MIT license:
//  http://www.opensource.org/licenses/mit-license.php
//
// The word 'QR Code' is registered trademark of
// DENSO WAVE INCORPORATED
//  http://www.denso-wave.com/qrcode/faqpatent-e.html
//
//---------------------------------------------------------------------

var qrcode = function() {

  //---------------------------------------------------------------------
  // qrcode
  //---------------------------------------------------------------------

  /**
   * qrcode
   * @param typeNumber 1 to 40
   * @param errorCorrectionLevel 'L','M','Q','H'
   */
  var qrcode = function(typeNumber, errorCorrectionLevel) {

    var PAD0 = 0xEC;
    var PAD1 = 0x11;

    var _typeNumber = typeNumber;
    var _errorCorrectionLevel = QRErrorCorrectionLevel[errorCorrectionLevel];
    var _modules = null;
    var _moduleCount = 0;
    var _dataCache = null;
    var _dataList = [];

    var _this = {};

    var makeImpl = function(test, maskPattern) {

      _moduleCount = _typeNumber * 4 + 17;
      _modules = function(moduleCount) {
        var modules = new Array(moduleCount);
        for (var row = 0; row < moduleCount; row += 1) {
          modules[row] = new Array(moduleCount);
          for (var col = 0; col < moduleCount; col += 1) {
            modules[row][col] = null;
          }
        }
        return modules;
      }(_moduleCount);

      setupPositionProbePattern(0, 0);
      setupPositionProbePattern(_moduleCount - 7, 0);
      setupPositionProbePattern(0, _moduleCount - 7);
      setupPositionAdjustPattern();
      setupTimingPattern();
      setupTypeInfo(test, maskPattern);

      if (_typeNumber >= 7) {
        setupTypeNumber(test);
      }

      if (_dataCache == null) {
        _dataCache = createData(_typeNumber, _errorCorrectionLevel, _dataList);
      }

      mapData(_dataCache, maskPattern);
    };

    var setupPositionProbePattern = function(row, col) {

      for (var r = -1; r <= 7; r += 1) {

        if (row + r <= -1 || _moduleCount <= row + r) continue;

        for (var c = -1; c <= 7; c += 1) {

          if (col + c <= -1 || _moduleCount <= col + c) continue;

          if ( (0 <= r && r <= 6 && (c == 0 || c == 6) )
              || (0 <= c && c <= 6 && (r == 0 || r == 6) )
              || (2 <= r && r <= 4 && 2 <= c && c <= 4) ) {
            _modules[row + r][col + c] = true;
          } else {
            _modules[row + r][col + c] = false;
          }
        }
      }
    };

    var getBestMaskPattern = function() {

      var minLostPoint = 0;
      var pattern = 0;

      for (var i = 0; i < 8; i += 1) {

        makeImpl(true, i);

        var lostPoint = QRUtil.getLostPoint(_this);

        if (i == 0 || minLostPoint > lostPoint) {
          minLostPoint = lostPoint;
          pattern = i;
        }
      }

      return pattern;
    };

    var setupTimingPattern = function() {

      for (var r = 8; r < _moduleCount - 8; r += 1) {
        if (_modules[r][6] != null) {
          continue;
        }
        _modules[r][6] = (r % 2 == 0);
      }

      for (var c = 8; c < _moduleCount - 8; c += 1) {
        if (_modules[6][c] != null) {
          continue;
        }
        _modules[6][c] = (c % 2 == 0);
      }
    };

    var setupPositionAdjustPattern = function() {

      var pos = QRUtil.getPatternPosition(_typeNumber);

      for (var i = 0; i < pos.length; i += 1) {

        for (var j = 0; j < pos.length; j += 1) {

          var row = pos[i];
          var col = pos[j];

          if (_modules[row][col] != null) {
            continue;
          }

          for (var r = -2; r <= 2; r += 1) {

            for (var c = -2; c <= 2; c += 1) {

              if (r == -2 || r == 2 || c == -2 || c == 2
                  || (r == 0 && c == 0) ) {
                _modules[row + r][col + c] = true;
              } else {
                _modules[row + r][col + c] = false;
              }
            }
          }
        }
      }
    };

    var setupTypeNumber = function(test) {

      var bits = QRUtil.getBCHTypeNumber(_typeNumber);

      for (var i = 0; i < 18; i += 1) {
        var mod = (!test && ( (bits >> i) & 1) == 1);
        _modules[Math.floor(i / 3)][i % 3 + _moduleCount - 8 - 3] = mod;
      }

      for (var i = 0; i < 18; i += 1) {
        var mod = (!test && ( (bits >> i) & 1) == 1);
        _modules[i % 3 + _moduleCount - 8 - 3][Math.floor(i / 3)] = mod;
      }
    };

    var setupTypeInfo = function(test, maskPattern) {

      var data = (_errorCorrectionLevel << 3) | maskPattern;
      var bits = QRUtil.getBCHTypeInfo(data);

      // vertical
      for (var i = 0; i < 15; i += 1) {

        var mod = (!test && ( (bits >> i) & 1) == 1);

        if (i < 6) {
          _modules[i][8] = mod;
        } else if (i < 8) {
          _modules[i + 1][8] = mod;
        } else {
          _modules[_moduleCount - 15 + i][8] = mod;
        }
      }

      // horizontal
      for (var i = 0; i < 15; i += 1) {

        var mod = (!test && ( (bits >> i) & 1) == 1);

        if (i < 8) {
          _modules[8][_moduleCount - i - 1] = mod;
        } else if (i < 9) {
          _modules[8][15 - i - 1 + 1] = mod;
        } else {
          _modules[8][15 - i - 1] = mod;
        }
      }

      // fixed module
      _modules[_moduleCount - 8][8] = (!test);
    };

    var mapData = function(data, maskPattern) {

      var inc = -1;
      var row = _moduleCount - 1;
      var bitIndex = 7;
      var byteIndex = 0;
      var maskFunc = QRUtil.getMaskFunction(maskPattern);

      for (var col = _moduleCount - 1; col > 0; col -= 2) {

        if (col == 6) col -= 1;

        while (true) {

          for (var c = 0; c < 2; c += 1) {

            if (_modules[row][col - c] == null) {

              var dark = false;

              if (byteIndex < data.length) {
                dark = ( ( (data[byteIndex] >>> bitIndex) & 1) == 1);
              }

              var mask = maskFunc(row, col - c);

              if (mask) {
                dark = !dark;
              }

              _modules[row][col - c] = dark;
              bitIndex -= 1;

              if (bitIndex == -1) {
                byteIndex += 1;
                bitIndex = 7;
              }
            }
          }

          row += inc;

          if (row < 0 || _moduleCount <= row) {
            row -= inc;
            inc = -inc;
            break;
          }
        }
      }
    };

    var createBytes = function(buffer, rsBlocks) {

      var offset = 0;

      var maxDcCount = 0;
      var maxEcCount = 0;

      var dcdata = new Array(rsBlocks.length);
      var ecdata = new Array(rsBlocks.length);

      for (var r = 0; r < rsBlocks.length; r += 1) {

        var dcCount = rsBlocks[r].dataCount;
        var ecCount = rsBlocks[r].totalCount - dcCount;

        maxDcCount = Math.max(maxDcCount, dcCount);
        maxEcCount = Math.max(maxEcCount, ecCount);

        dcdata[r] = new Array(dcCount);

        for (var i = 0; i < dcdata[r].length; i += 1) {
          dcdata[r][i] = 0xff & buffer.getBuffer()[i + offset];
        }
        offset += dcCount;

        var rsPoly = QRUtil.getErrorCorrectPolynomial(ecCount);
        var rawPoly = qrPolynomial(dcdata[r], rsPoly.getLength() - 1);

        var modPoly = rawPoly.mod(rsPoly);
        ecdata[r] = new Array(rsPoly.getLength() - 1);
        for (var i = 0; i < ecdata[r].length; i += 1) {
          var modIndex = i + modPoly.getLength() - ecdata[r].length;
          ecdata[r][i] = (modIndex >= 0)? modPoly.getAt(modIndex) : 0;
        }
      }

      var totalCodeCount = 0;
      for (var i = 0; i < rsBlocks.length; i += 1) {
        totalCodeCount += rsBlocks[i].totalCount;
      }

      var data = new Array(totalCodeCount);
      var index = 0;

      for (var i = 0; i < maxDcCount; i += 1) {
        for (var r = 0; r < rsBlocks.length; r += 1) {
          if (i < dcdata[r].length) {
            data[index] = dcdata[r][i];
            index += 1;
          }
        }
      }

      for (var i = 0; i < maxEcCount; i += 1) {
        for (var r = 0; r < rsBlocks.length; r += 1) {
          if (i < ecdata[r].length) {
            data[index] = ecdata[r][i];
            index += 1;
          }
        }
      }

      return data;
    };

    var createData = function(typeNumber, errorCorrectionLevel, dataList) {

      var rsBlocks = QRRSBlock.getRSBlocks(typeNumber, errorCorrectionLevel);

      var buffer = qrBitBuffer();

      for (var i = 0; i < dataList.length; i += 1) {
        var data = dataList[i];
        buffer.put(data.getMode(), 4);
        buffer.put(data.getLength(), QRUtil.getLengthInBits(data.getMode(), typeNumber) );
        data.write(buffer);
      }

      // calc num max data.
      var totalDataCount = 0;
      for (var i = 0; i < rsBlocks.length; i += 1) {
        totalDataCount += rsBlocks[i].dataCount;
      }

      if (buffer.getLengthInBits() > totalDataCount * 8) {
        throw 'code length overflow. ('
          + buffer.getLengthInBits()
          + '>'
          + totalDataCount * 8
          + ')';
      }

      // end code
      if (buffer.getLengthInBits() + 4 <= totalDataCount * 8) {
        buffer.put(0, 4);
      }

      // padding
      while (buffer.getLengthInBits() % 8 != 0) {
        buffer.putBit(false);
      }

      // padding
      while (true) {

        if (buffer.getLengthInBits() >= totalDataCount * 8) {
          break;
        }
        buffer.put(PAD0, 8);

        if (buffer.getLengthInBits() >= totalDataCount * 8) {
          break;
        }
        buffer.put(PAD1, 8);
      }

      return createBytes(buffer, rsBlocks);
    };

    _this.addData = function(data, mode) {

      mode = mode || 'Byte';

      var newData = null;

      switch(mode) {
      case 'Numeric' :
        newData = qrNumber(data);
        break;
      case 'Alphanumeric' :
        newData = qrAlphaNum(data);
        break;
      case 'Byte' :
        newData = qr8BitByte(data);
        break;
      case 'Kanji' :
        newData = qrKanji(data);
        break;
      default :
        throw 'mode:' + mode;
      }

      _dataList.push(newData);
      _dataCache = null;
    };

    _this.isDark = function(row, col) {
      if (row < 0 || _moduleCount <= row || col < 0 || _moduleCount <= col) {
        throw row + ',' + col;
      }
      return _modules[row][col];
    };

    _this.getModuleCount = function() {
      return _moduleCount;
    };

    _this.make = function() {
      if (_typeNumber < 1) {
        var typeNumber = 1;

        for (; typeNumber < 40; typeNumber++) {
          var rsBlocks = QRRSBlock.getRSBlocks(typeNumber, _errorCorrectionLevel);
          var buffer = qrBitBuffer();

          for (var i = 0; i < _dataList.length; i++) {
            var data = _dataList[i];
            buffer.put(data.getMode(), 4);
            buffer.put(data.getLength(), QRUtil.getLengthInBits(data.getMode(), typeNumber) );
            data.write(buffer);
          }

          var totalDataCount = 0;
          for (var i = 0; i < rsBlocks.length; i++) {
            totalDataCount += rsBlocks[i].dataCount;
          }

          if (buffer.getLengthInBits() <= totalDataCount * 8) {
            break;
          }
        }

        _typeNumber = typeNumber;
      }

      makeImpl(false, getBestMaskPattern() );
    };

    _this.createTableTag = function(cellSize, margin) {

      cellSize = cellSize || 2;
      margin = (typeof margin == 'undefined')? cellSize * 4 : margin;

      var qrHtml = '';

      qrHtml += '<table style="';
      qrHtml += ' border-width: 0px; border-style: none;';
      qrHtml += ' border-collapse: collapse;';
      qrHtml += ' padding: 0px; margin: ' + margin + 'px;';
      qrHtml += '">';
      qrHtml += '<tbody>';

      for (var r = 0; r < _this.getModuleCount(); r += 1) {

        qrHtml += '<tr>';

        for (var c = 0; c < _this.getModuleCount(); c += 1) {
          qrHtml += '<td style="';
          qrHtml += ' border-width: 0px; border-style: none;';
          qrHtml += ' border-collapse: collapse;';
          qrHtml += ' padding: 0px; margin: 0px;';
          qrHtml += ' width: ' + cellSize + 'px;';
          qrHtml += ' height: ' + cellSize + 'px;';
          qrHtml += ' background-color: ';
          qrHtml += _this.isDark(r, c)? '#000000' : '#ffffff';
          qrHtml += ';';
          qrHtml += '"/>';
        }

        qrHtml += '</tr>';
      }

      qrHtml += '</tbody>';
      qrHtml += '</table>';

      return qrHtml;
    };

    _this.createSvgTag = function(cellSize, margin, alt, title) {

      var opts = {};
      if (typeof arguments[0] == 'object') {
        // Called by options.
        opts = arguments[0];
        // overwrite cellSize and margin.
        cellSize = opts.cellSize;
        margin = opts.margin;
        alt = opts.alt;
        title = opts.title;
      }

      cellSize = cellSize || 2;
      margin = (typeof margin == 'undefined')? cellSize * 4 : margin;

      // Compose alt property surrogate
      alt = (typeof alt === 'string') ? {text: alt} : alt || {};
      alt.text = alt.text || null;
      alt.id = (alt.text) ? alt.id || 'qrcode-description' : null;

      // Compose title property surrogate
      title = (typeof title === 'string') ? {text: title} : title || {};
      title.text = title.text || null;
      title.id = (title.text) ? title.id || 'qrcode-title' : null;

      var size = _this.getModuleCount() * cellSize + margin * 2;
      var c, mc, r, mr, qrSvg='', rect;

      rect = 'l' + cellSize + ',0 0,' + cellSize +
        ' -' + cellSize + ',0 0,-' + cellSize + 'z ';

      qrSvg += '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"';
      qrSvg += !opts.scalable ? ' width="' + size + 'px" height="' + size + 'px"' : '';
      qrSvg += ' viewBox="0 0 ' + size + ' ' + size + '" ';
      qrSvg += ' preserveAspectRatio="xMinYMin meet"';
      qrSvg += (title.text || alt.text) ? ' role="img" aria-labelledby="' +
          escapeXml([title.id, alt.id].join(' ').trim() ) + '"' : '';
      qrSvg += '>';
      qrSvg += (title.text) ? '<title id="' + escapeXml(title.id) + '">' +
          escapeXml(title.text) + '</title>' : '';
      qrSvg += (alt.text) ? '<description id="' + escapeXml(alt.id) + '">' +
          escapeXml(alt.text) + '</description>' : '';
      qrSvg += '<rect width="100%" height="100%" fill="white" cx="0" cy="0"/>';
      qrSvg += '<path d="';

      for (r = 0; r < _this.getModuleCount(); r += 1) {
        mr = r * cellSize + margin;
        for (c = 0; c < _this.getModuleCount(); c += 1) {
          if (_this.isDark(r, c) ) {
            mc = c*cellSize+margin;
            qrSvg += 'M' + mc + ',' + mr + rect;
          }
        }
      }

      qrSvg += '" stroke="transparent" fill="black"/>';
      qrSvg += '</svg>';

      return qrSvg;
    };

    _this.createDataURL = function(cellSize, margin) {

      cellSize = cellSize || 2;
      margin = (typeof margin == 'undefined')? cellSize * 4 : margin;

      var size = _this.getModuleCount() * cellSize + margin * 2;
      var min = margin;
      var max = size - margin;

      return createDataURL(size, size, function(x, y) {
        if (min <= x && x < max && min <= y && y < max) {
          var c = Math.floor( (x - min) / cellSize);
          var r = Math.floor( (y - min) / cellSize);
          return _this.isDark(r, c)? 0 : 1;
        } else {
          return 1;
        }
      } );
    };

    _this.createImgTag = function(cellSize, margin, alt) {

      cellSize = cellSize || 2;
      margin = (typeof margin == 'undefined')? cellSize * 4 : margin;

      var size = _this.getModuleCount() * cellSize + margin * 2;

      var img = '';
      img += '<img';
      img += '\u0020src="';
      img += _this.createDataURL(cellSize, margin);
      img += '"';
      img += '\u0020width="';
      img += size;
      img += '"';
      img += '\u0020height="';
      img += size;
      img += '"';
      if (alt) {
        img += '\u0020alt="';
        img += escapeXml(alt);
        img += '"';
      }
      img += '/>';

      return img;
    };

    var escapeXml = function(s) {
      var escaped = '';
      for (var i = 0; i < s.length; i += 1) {
        var c = s.charAt(i);
        switch(c) {
        case '<': escaped += '&lt;'; break;
        case '>': escaped += '&gt;'; break;
        case '&': escaped += '&amp;'; break;
        case '"': escaped += '&quot;'; break;
        default : escaped += c; break;
        }
      }
      return escaped;
    };

    var _createHalfASCII = function(margin) {
      var cellSize = 1;
      margin = (typeof margin == 'undefined')? cellSize * 2 : margin;

      var size = _this.getModuleCount() * cellSize + margin * 2;
      var min = margin;
      var max = size - margin;

      var y, x, r1, r2, p;

      var blocks = {
        '██': '█',
        '█ ': '▀',
        ' █': '▄',
        '  ': ' '
      };

      var blocksLastLineNoMargin = {
        '██': '▀',
        '█ ': '▀',
        ' █': ' ',
        '  ': ' '
      };

      var ascii = '';
      for (y = 0; y < size; y += 2) {
        r1 = Math.floor((y - min) / cellSize);
        r2 = Math.floor((y + 1 - min) / cellSize);
        for (x = 0; x < size; x += 1) {
          p = '█';

          if (min <= x && x < max && min <= y && y < max && _this.isDark(r1, Math.floor((x - min) / cellSize))) {
            p = ' ';
          }

          if (min <= x && x < max && min <= y+1 && y+1 < max && _this.isDark(r2, Math.floor((x - min) / cellSize))) {
            p += ' ';
          }
          else {
            p += '█';
          }

          // Output 2 characters per pixel, to create full square. 1 character per pixels gives only half width of square.
          ascii += (margin < 1 && y+1 >= max) ? blocksLastLineNoMargin[p] : blocks[p];
        }

        ascii += '\n';
      }

      if (size % 2 && margin > 0) {
        return ascii.substring(0, ascii.length - size - 1) + Array(size+1).join('▀');
      }

      return ascii.substring(0, ascii.length-1);
    };

    _this.createASCII = function(cellSize, margin) {
      cellSize = cellSize || 1;

      if (cellSize < 2) {
        return _createHalfASCII(margin);
      }

      cellSize -= 1;
      margin = (typeof margin == 'undefined')? cellSize * 2 : margin;

      var size = _this.getModuleCount() * cellSize + margin * 2;
      var min = margin;
      var max = size - margin;

      var y, x, r, p;

      var white = Array(cellSize+1).join('██');
      var black = Array(cellSize+1).join('  ');

      var ascii = '';
      var line = '';
      for (y = 0; y < size; y += 1) {
        r = Math.floor( (y - min) / cellSize);
        line = '';
        for (x = 0; x < size; x += 1) {
          p = 1;

          if (min <= x && x < max && min <= y && y < max && _this.isDark(r, Math.floor((x - min) / cellSize))) {
            p = 0;
          }

          // Output 2 characters per pixel, to create full square. 1 character per pixels gives only half width of square.
          line += p ? white : black;
        }

        for (r = 0; r < cellSize; r += 1) {
          ascii += line + '\n';
        }
      }

      return ascii.substring(0, ascii.length-1);
    };

    _this.renderTo2dContext = function(context, cellSize) {
      cellSize = cellSize || 2;
      var length = _this.getModuleCount();
      for (var row = 0; row < length; row++) {
        for (var col = 0; col < length; col++) {
          context.fillStyle = _this.isDark(row, col) ? 'black' : 'white';
          context.fillRect(row * cellSize, col * cellSize, cellSize, cellSize);
        }
      }
    }

    return _this;
  };

  //---------------------------------------------------------------------
  // qrcode.stringToBytes
  //---------------------------------------------------------------------

  qrcode.stringToBytesFuncs = {
    'default' : function(s) {
      var bytes = [];
      for (var i = 0; i < s.length; i += 1) {
        var c = s.charCodeAt(i);
        bytes.push(c & 0xff);
      }
      return bytes;
    }
  };

  qrcode.stringToBytes = qrcode.stringToBytesFuncs['default'];

  //---------------------------------------------------------------------
  // qrcode.createStringToBytes
  //---------------------------------------------------------------------

  /**
   * @param unicodeData base64 string of byte array.
   * [16bit Unicode],[16bit Bytes], ...
   * @param numChars
   */
  qrcode.createStringToBytes = function(unicodeData, numChars) {

    // create conversion map.

    var unicodeMap = function() {

      var bin = base64DecodeInputStream(unicodeData);
      var read = function() {
        var b = bin.read();
        if (b == -1) throw 'eof';
        return b;
      };

      var count = 0;
      var unicodeMap = {};
      while (true) {
        var b0 = bin.read();
        if (b0 == -1) break;
        var b1 = read();
        var b2 = read();
        var b3 = read();
        var k = String.fromCharCode( (b0 << 8) | b1);
        var v = (b2 << 8) | b3;
        unicodeMap[k] = v;
        count += 1;
      }
      if (count != numChars) {
        throw count + ' != ' + numChars;
      }

      return unicodeMap;
    }();

    var unknownChar = '?'.charCodeAt(0);

    return function(s) {
      var bytes = [];
      for (var i = 0; i < s.length; i += 1) {
        var c = s.charCodeAt(i);
        if (c < 128) {
          bytes.push(c);
        } else {
          var b = unicodeMap[s.charAt(i)];
          if (typeof b == 'number') {
            if ( (b & 0xff) == b) {
              // 1byte
              bytes.push(b);
            } else {
              // 2bytes
              bytes.push(b >>> 8);
              bytes.push(b & 0xff);
            }
          } else {
            bytes.push(unknownChar);
          }
        }
      }
      return bytes;
    };
  };

  //---------------------------------------------------------------------
  // QRMode
  //---------------------------------------------------------------------

  var QRMode = {
    MODE_NUMBER :    1 << 0,
    MODE_ALPHA_NUM : 1 << 1,
    MODE_8BIT_BYTE : 1 << 2,
    MODE_KANJI :     1 << 3
  };

  //---------------------------------------------------------------------
  // QRErrorCorrectionLevel
  //---------------------------------------------------------------------

  var QRErrorCorrectionLevel = {
    L : 1,
    M : 0,
    Q : 3,
    H : 2
  };

  //---------------------------------------------------------------------
  // QRMaskPattern
  //---------------------------------------------------------------------

  var QRMaskPattern = {
    PATTERN000 : 0,
    PATTERN001 : 1,
    PATTERN010 : 2,
    PATTERN011 : 3,
    PATTERN100 : 4,
    PATTERN101 : 5,
    PATTERN110 : 6,
    PATTERN111 : 7
  };

  //---------------------------------------------------------------------
  // QRUtil
  //---------------------------------------------------------------------

  var QRUtil = function() {

    var PATTERN_POSITION_TABLE = [
      [],
      [6, 18],
      [6, 22],
      [6, 26],
      [6, 30],
      [6, 34],
      [6, 22, 38],
      [6, 24, 42],
      [6, 26, 46],
      [6, 28, 50],
      [6, 30, 54],
      [6, 32, 58],
      [6, 34, 62],
      [6, 26, 46, 66],
      [6, 26, 48, 70],
      [6, 26, 50, 74],
      [6, 30, 54, 78],
      [6, 30, 56, 82],
      [6, 30, 58, 86],
      [6, 34, 62, 90],
      [6, 28, 50, 72, 94],
      [6, 26, 50, 74, 98],
      [6, 30, 54, 78, 102],
      [6, 28, 54, 80, 106],
      [6, 32, 58, 84, 110],
      [6, 30, 58, 86, 114],
      [6, 34, 62, 90, 118],
      [6, 26, 50, 74, 98, 122],
      [6, 30, 54, 78, 102, 126],
      [6, 26, 52, 78, 104, 130],
      [6, 30, 56, 82, 108, 134],
      [6, 34, 60, 86, 112, 138],
      [6, 30, 58, 86, 114, 142],
      [6, 34, 62, 90, 118, 146],
      [6, 30, 54, 78, 102, 126, 150],
      [6, 24, 50, 76, 102, 128, 154],
      [6, 28, 54, 80, 106, 132, 158],
      [6, 32, 58, 84, 110, 136, 162],
      [6, 26, 54, 82, 110, 138, 166],
      [6, 30, 58, 86, 114, 142, 170]
    ];
    var G15 = (1 << 10) | (1 << 8) | (1 << 5) | (1 << 4) | (1 << 2) | (1 << 1) | (1 << 0);
    var G18 = (1 << 12) | (1 << 11) | (1 << 10) | (1 << 9) | (1 << 8) | (1 << 5) | (1 << 2) | (1 << 0);
    var G15_MASK = (1 << 14) | (1 << 12) | (1 << 10) | (1 << 4) | (1 << 1);

    var _this = {};

    var getBCHDigit = function(data) {
      var digit = 0;
      while (data != 0) {
        digit += 1;
        data >>>= 1;
      }
      return digit;
    };

    _this.getBCHTypeInfo = function(data) {
      var d = data << 10;
      while (getBCHDigit(d) - getBCHDigit(G15) >= 0) {
        d ^= (G15 << (getBCHDigit(d) - getBCHDigit(G15) ) );
      }
      return ( (data << 10) | d) ^ G15_MASK;
    };

    _this.getBCHTypeNumber = function(data) {
      var d = data << 12;
      while (getBCHDigit(d) - getBCHDigit(G18) >= 0) {
        d ^= (G18 << (getBCHDigit(d) - getBCHDigit(G18) ) );
      }
      return (data << 12) | d;
    };

    _this.getPatternPosition = function(typeNumber) {
      return PATTERN_POSITION_TABLE[typeNumber - 1];
    };

    _this.getMaskFunction = function(maskPattern) {

      switch (maskPattern) {

      case QRMaskPattern.PATTERN000 :
        return function(i, j) { return (i + j) % 2 == 0; };
      case QRMaskPattern.PATTERN001 :
        return function(i, j) { return i % 2 == 0; };
      case QRMaskPattern.PATTERN010 :
        return function(i, j) { return j % 3 == 0; };
      case QRMaskPattern.PATTERN011 :
        return function(i, j) { return (i + j) % 3 == 0; };
      case QRMaskPattern.PATTERN100 :
        return function(i, j) { return (Math.floor(i / 2) + Math.floor(j / 3) ) % 2 == 0; };
      case QRMaskPattern.PATTERN101 :
        return function(i, j) { return (i * j) % 2 + (i * j) % 3 == 0; };
      case QRMaskPattern.PATTERN110 :
        return function(i, j) { return ( (i * j) % 2 + (i * j) % 3) % 2 == 0; };
      case QRMaskPattern.PATTERN111 :
        return function(i, j) { return ( (i * j) % 3 + (i + j) % 2) % 2 == 0; };

      default :
        throw 'bad maskPattern:' + maskPattern;
      }
    };

    _this.getErrorCorrectPolynomial = function(errorCorrectLength) {
      var a = qrPolynomial([1], 0);
      for (var i = 0; i < errorCorrectLength; i += 1) {
        a = a.multiply(qrPolynomial([1, QRMath.gexp(i)], 0) );
      }
      return a;
    };

    _this.getLengthInBits = function(mode, type) {

      if (1 <= type && type < 10) {

        // 1 - 9

        switch(mode) {
        case QRMode.MODE_NUMBER    : return 10;
        case QRMode.MODE_ALPHA_NUM : return 9;
        case QRMode.MODE_8BIT_BYTE : return 8;
        case QRMode.MODE_KANJI     : return 8;
        default :
          throw 'mode:' + mode;
        }

      } else if (type < 27) {

        // 10 - 26

        switch(mode) {
        case QRMode.MODE_NUMBER    : return 12;
        case QRMode.MODE_ALPHA_NUM : return 11;
        case QRMode.MODE_8BIT_BYTE : return 16;
        case QRMode.MODE_KANJI     : return 10;
        default :
          throw 'mode:' + mode;
        }

      } else if (type < 41) {

        // 27 - 40

        switch(mode) {
        case QRMode.MODE_NUMBER    : return 14;
        case QRMode.MODE_ALPHA_NUM : return 13;
        case QRMode.MODE_8BIT_BYTE : return 16;
        case QRMode.MODE_KANJI     : return 12;
        default :
          throw 'mode:' + mode;
        }

      } else {
        throw 'type:' + type;
      }
    };

    _this.getLostPoint = function(qrcode) {

      var moduleCount = qrcode.getModuleCount();

      var lostPoint = 0;

      // LEVEL1

      for (var row = 0; row < moduleCount; row += 1) {
        for (var col = 0; col < moduleCount; col += 1) {

          var sameCount = 0;
          var dark = qrcode.isDark(row, col);

          for (var r = -1; r <= 1; r += 1) {

            if (row + r < 0 || moduleCount <= row + r) {
              continue;
            }

            for (var c = -1; c <= 1; c += 1) {

              if (col + c < 0 || moduleCount <= col + c) {
                continue;
              }

              if (r == 0 && c == 0) {
                continue;
              }

              if (dark == qrcode.isDark(row + r, col + c) ) {
                sameCount += 1;
              }
            }
          }

          if (sameCount > 5) {
            lostPoint += (3 + sameCount - 5);
          }
        }
      };

      // LEVEL2

      for (var row = 0; row < moduleCount - 1; row += 1) {
        for (var col = 0; col < moduleCount - 1; col += 1) {
          var count = 0;
          if (qrcode.isDark(row, col) ) count += 1;
          if (qrcode.isDark(row + 1, col) ) count += 1;
          if (qrcode.isDark(row, col + 1) ) count += 1;
          if (qrcode.isDark(row + 1, col + 1) ) count += 1;
          if (count == 0 || count == 4) {
            lostPoint += 3;
          }
        }
      }

      // LEVEL3

      for (var row = 0; row < moduleCount; row += 1) {
        for (var col = 0; col < moduleCount - 6; col += 1) {
          if (qrcode.isDark(row, col)
              && !qrcode.isDark(row, col + 1)
              &&  qrcode.isDark(row, col + 2)
              &&  qrcode.isDark(row, col + 3)
              &&  qrcode.isDark(row, col + 4)
              && !qrcode.isDark(row, col + 5)
              &&  qrcode.isDark(row, col + 6) ) {
            lostPoint += 40;
          }
        }
      }

      for (var col = 0; col < moduleCount; col += 1) {
        for (var row = 0; row < moduleCount - 6; row += 1) {
          if (qrcode.isDark(row, col)
              && !qrcode.isDark(row + 1, col)
              &&  qrcode.isDark(row + 2, col)
              &&  qrcode.isDark(row + 3, col)
              &&  qrcode.isDark(row + 4, col)
              && !qrcode.isDark(row + 5, col)
              &&  qrcode.isDark(row + 6, col) ) {
            lostPoint += 40;
          }
        }
      }

      // LEVEL4

      var darkCount = 0;

      for (var col = 0; col < moduleCount; col += 1) {
        for (var row = 0; row < moduleCount; row += 1) {
          if (qrcode.isDark(row, col) ) {
            darkCount += 1;
          }
        }
      }

      var ratio = Math.abs(100 * darkCount / moduleCount / moduleCount - 50) / 5;
      lostPoint += ratio * 10;

      return lostPoint;
    };

    return _this;
  }();

  //---------------------------------------------------------------------
  // QRMath
  //---------------------------------------------------------------------

  var QRMath = function() {

    var EXP_TABLE = new Array(256);
    var LOG_TABLE = new Array(256);

    // initialize tables
    for (var i = 0; i < 8; i += 1) {
      EXP_TABLE[i] = 1 << i;
    }
    for (var i = 8; i < 256; i += 1) {
      EXP_TABLE[i] = EXP_TABLE[i - 4]
        ^ EXP_TABLE[i - 5]
        ^ EXP_TABLE[i - 6]
        ^ EXP_TABLE[i - 8];
    }
    for (var i = 0; i < 255; i += 1) {
      LOG_TABLE[EXP_TABLE[i] ] = i;
    }

    var _this = {};

    _this.glog = function(n) {

      if (n < 1) {
        throw 'glog(' + n + ')';
      }

      return LOG_TABLE[n];
    };

    _this.gexp = function(n) {

      while (n < 0) {
        n += 255;
      }

      while (n >= 256) {
        n -= 255;
      }

      return EXP_TABLE[n];
    };

    return _this;
  }();

  //---------------------------------------------------------------------
  // qrPolynomial
  //---------------------------------------------------------------------

  function qrPolynomial(num, shift) {

    if (typeof num.length == 'undefined') {
      throw num.length + '/' + shift;
    }

    var _num = function() {
      var offset = 0;
      while (offset < num.length && num[offset] == 0) {
        offset += 1;
      }
      var _num = new Array(num.length - offset + shift);
      for (var i = 0; i < num.length - offset; i += 1) {
        _num[i] = num[i + offset];
      }
      return _num;
    }();

    var _this = {};

    _this.getAt = function(index) {
      return _num[index];
    };

    _this.getLength = function() {
      return _num.length;
    };

    _this.multiply = function(e) {

      var num = new Array(_this.getLength() + e.getLength() - 1);

      for (var i = 0; i < _this.getLength(); i += 1) {
        for (var j = 0; j < e.getLength(); j += 1) {
          num[i + j] ^= QRMath.gexp(QRMath.glog(_this.getAt(i) ) + QRMath.glog(e.getAt(j) ) );
        }
      }

      return qrPolynomial(num, 0);
    };

    _this.mod = function(e) {

      if (_this.getLength() - e.getLength() < 0) {
        return _this;
      }

      var ratio = QRMath.glog(_this.getAt(0) ) - QRMath.glog(e.getAt(0) );

      var num = new Array(_this.getLength() );
      for (var i = 0; i < _this.getLength(); i += 1) {
        num[i] = _this.getAt(i);
      }

      for (var i = 0; i < e.getLength(); i += 1) {
        num[i] ^= QRMath.gexp(QRMath.glog(e.getAt(i) ) + ratio);
      }

      // recursive call
      return qrPolynomial(num, 0).mod(e);
    };

    return _this;
  };

  //---------------------------------------------------------------------
  // QRRSBlock
  //---------------------------------------------------------------------

  var QRRSBlock = function() {

    var RS_BLOCK_TABLE = [

      // L
      // M
      // Q
      // H

      // 1
      [1, 26, 19],
      [1, 26, 16],
      [1, 26, 13],
      [1, 26, 9],

      // 2
      [1, 44, 34],
      [1, 44, 28],
      [1, 44, 22],
      [1, 44, 16],

      // 3
      [1, 70, 55],
      [1, 70, 44],
      [2, 35, 17],
      [2, 35, 13],

      // 4
      [1, 100, 80],
      [2, 50, 32],
      [2, 50, 24],
      [4, 25, 9],

      // 5
      [1, 134, 108],
      [2, 67, 43],
      [2, 33, 15, 2, 34, 16],
      [2, 33, 11, 2, 34, 12],

      // 6
      [2, 86, 68],
      [4, 43, 27],
      [4, 43, 19],
      [4, 43, 15],

      // 7
      [2, 98, 78],
      [4, 49, 31],
      [2, 32, 14, 4, 33, 15],
      [4, 39, 13, 1, 40, 14],

      // 8
      [2, 121, 97],
      [2, 60, 38, 2, 61, 39],
      [4, 40, 18, 2, 41, 19],
      [4, 40, 14, 2, 41, 15],

      // 9
      [2, 146, 116],
      [3, 58, 36, 2, 59, 37],
      [4, 36, 16, 4, 37, 17],
      [4, 36, 12, 4, 37, 13],

      // 10
      [2, 86, 68, 2, 87, 69],
      [4, 69, 43, 1, 70, 44],
      [6, 43, 19, 2, 44, 20],
      [6, 43, 15, 2, 44, 16],

      // 11
      [4, 101, 81],
      [1, 80, 50, 4, 81, 51],
      [4, 50, 22, 4, 51, 23],
      [3, 36, 12, 8, 37, 13],

      // 12
      [2, 116, 92, 2, 117, 93],
      [6, 58, 36, 2, 59, 37],
      [4, 46, 20, 6, 47, 21],
      [7, 42, 14, 4, 43, 15],

      // 13
      [4, 133, 107],
      [8, 59, 37, 1, 60, 38],
      [8, 44, 20, 4, 45, 21],
      [12, 33, 11, 4, 34, 12],

      // 14
      [3, 145, 115, 1, 146, 116],
      [4, 64, 40, 5, 65, 41],
      [11, 36, 16, 5, 37, 17],
      [11, 36, 12, 5, 37, 13],

      // 15
      [5, 109, 87, 1, 110, 88],
      [5, 65, 41, 5, 66, 42],
      [5, 54, 24, 7, 55, 25],
      [11, 36, 12, 7, 37, 13],

      // 16
      [5, 122, 98, 1, 123, 99],
      [7, 73, 45, 3, 74, 46],
      [15, 43, 19, 2, 44, 20],
      [3, 45, 15, 13, 46, 16],

      // 17
      [1, 135, 107, 5, 136, 108],
      [10, 74, 46, 1, 75, 47],
      [1, 50, 22, 15, 51, 23],
      [2, 42, 14, 17, 43, 15],

      // 18
      [5, 150, 120, 1, 151, 121],
      [9, 69, 43, 4, 70, 44],
      [17, 50, 22, 1, 51, 23],
      [2, 42, 14, 19, 43, 15],

      // 19
      [3, 141, 113, 4, 142, 114],
      [3, 70, 44, 11, 71, 45],
      [17, 47, 21, 4, 48, 22],
      [9, 39, 13, 16, 40, 14],

      // 20
      [3, 135, 107, 5, 136, 108],
      [3, 67, 41, 13, 68, 42],
      [15, 54, 24, 5, 55, 25],
      [15, 43, 15, 10, 44, 16],

      // 21
      [4, 144, 116, 4, 145, 117],
      [17, 68, 42],
      [17, 50, 22, 6, 51, 23],
      [19, 46, 16, 6, 47, 17],

      // 22
      [2, 139, 111, 7, 140, 112],
      [17, 74, 46],
      [7, 54, 24, 16, 55, 25],
      [34, 37, 13],

      // 23
      [4, 151, 121, 5, 152, 122],
      [4, 75, 47, 14, 76, 48],
      [11, 54, 24, 14, 55, 25],
      [16, 45, 15, 14, 46, 16],

      // 24
      [6, 147, 117, 4, 148, 118],
      [6, 73, 45, 14, 74, 46],
      [11, 54, 24, 16, 55, 25],
      [30, 46, 16, 2, 47, 17],

      // 25
      [8, 132, 106, 4, 133, 107],
      [8, 75, 47, 13, 76, 48],
      [7, 54, 24, 22, 55, 25],
      [22, 45, 15, 13, 46, 16],

      // 26
      [10, 142, 114, 2, 143, 115],
      [19, 74, 46, 4, 75, 47],
      [28, 50, 22, 6, 51, 23],
      [33, 46, 16, 4, 47, 17],

      // 27
      [8, 152, 122, 4, 153, 123],
      [22, 73, 45, 3, 74, 46],
      [8, 53, 23, 26, 54, 24],
      [12, 45, 15, 28, 46, 16],

      // 28
      [3, 147, 117, 10, 148, 118],
      [3, 73, 45, 23, 74, 46],
      [4, 54, 24, 31, 55, 25],
      [11, 45, 15, 31, 46, 16],

      // 29
      [7, 146, 116, 7, 147, 117],
      [21, 73, 45, 7, 74, 46],
      [1, 53, 23, 37, 54, 24],
      [19, 45, 15, 26, 46, 16],

      // 30
      [5, 145, 115, 10, 146, 116],
      [19, 75, 47, 10, 76, 48],
      [15, 54, 24, 25, 55, 25],
      [23, 45, 15, 25, 46, 16],

      // 31
      [13, 145, 115, 3, 146, 116],
      [2, 74, 46, 29, 75, 47],
      [42, 54, 24, 1, 55, 25],
      [23, 45, 15, 28, 46, 16],

      // 32
      [17, 145, 115],
      [10, 74, 46, 23, 75, 47],
      [10, 54, 24, 35, 55, 25],
      [19, 45, 15, 35, 46, 16],

      // 33
      [17, 145, 115, 1, 146, 116],
      [14, 74, 46, 21, 75, 47],
      [29, 54, 24, 19, 55, 25],
      [11, 45, 15, 46, 46, 16],

      // 34
      [13, 145, 115, 6, 146, 116],
      [14, 74, 46, 23, 75, 47],
      [44, 54, 24, 7, 55, 25],
      [59, 46, 16, 1, 47, 17],

      // 35
      [12, 151, 121, 7, 152, 122],
      [12, 75, 47, 26, 76, 48],
      [39, 54, 24, 14, 55, 25],
      [22, 45, 15, 41, 46, 16],

      // 36
      [6, 151, 121, 14, 152, 122],
      [6, 75, 47, 34, 76, 48],
      [46, 54, 24, 10, 55, 25],
      [2, 45, 15, 64, 46, 16],

      // 37
      [17, 152, 122, 4, 153, 123],
      [29, 74, 46, 14, 75, 47],
      [49, 54, 24, 10, 55, 25],
      [24, 45, 15, 46, 46, 16],

      // 38
      [4, 152, 122, 18, 153, 123],
      [13, 74, 46, 32, 75, 47],
      [48, 54, 24, 14, 55, 25],
      [42, 45, 15, 32, 46, 16],

      // 39
      [20, 147, 117, 4, 148, 118],
      [40, 75, 47, 7, 76, 48],
      [43, 54, 24, 22, 55, 25],
      [10, 45, 15, 67, 46, 16],

      // 40
      [19, 148, 118, 6, 149, 119],
      [18, 75, 47, 31, 76, 48],
      [34, 54, 24, 34, 55, 25],
      [20, 45, 15, 61, 46, 16]
    ];

    var qrRSBlock = function(totalCount, dataCount) {
      var _this = {};
      _this.totalCount = totalCount;
      _this.dataCount = dataCount;
      return _this;
    };

    var _this = {};

    var getRsBlockTable = function(typeNumber, errorCorrectionLevel) {

      switch(errorCorrectionLevel) {
      case QRErrorCorrectionLevel.L :
        return RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 0];
      case QRErrorCorrectionLevel.M :
        return RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 1];
      case QRErrorCorrectionLevel.Q :
        return RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 2];
      case QRErrorCorrectionLevel.H :
        return RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 3];
      default :
        return undefined;
      }
    };

    _this.getRSBlocks = function(typeNumber, errorCorrectionLevel) {

      var rsBlock = getRsBlockTable(typeNumber, errorCorrectionLevel);

      if (typeof rsBlock == 'undefined') {
        throw 'bad rs block @ typeNumber:' + typeNumber +
            '/errorCorrectionLevel:' + errorCorrectionLevel;
      }

      var length = rsBlock.length / 3;

      var list = [];

      for (var i = 0; i < length; i += 1) {

        var count = rsBlock[i * 3 + 0];
        var totalCount = rsBlock[i * 3 + 1];
        var dataCount = rsBlock[i * 3 + 2];

        for (var j = 0; j < count; j += 1) {
          list.push(qrRSBlock(totalCount, dataCount) );
        }
      }

      return list;
    };

    return _this;
  }();

  //---------------------------------------------------------------------
  // qrBitBuffer
  //---------------------------------------------------------------------

  var qrBitBuffer = function() {

    var _buffer = [];
    var _length = 0;

    var _this = {};

    _this.getBuffer = function() {
      return _buffer;
    };

    _this.getAt = function(index) {
      var bufIndex = Math.floor(index / 8);
      return ( (_buffer[bufIndex] >>> (7 - index % 8) ) & 1) == 1;
    };

    _this.put = function(num, length) {
      for (var i = 0; i < length; i += 1) {
        _this.putBit( ( (num >>> (length - i - 1) ) & 1) == 1);
      }
    };

    _this.getLengthInBits = function() {
      return _length;
    };

    _this.putBit = function(bit) {

      var bufIndex = Math.floor(_length / 8);
      if (_buffer.length <= bufIndex) {
        _buffer.push(0);
      }

      if (bit) {
        _buffer[bufIndex] |= (0x80 >>> (_length % 8) );
      }

      _length += 1;
    };

    return _this;
  };

  //---------------------------------------------------------------------
  // qrNumber
  //---------------------------------------------------------------------

  var qrNumber = function(data) {

    var _mode = QRMode.MODE_NUMBER;
    var _data = data;

    var _this = {};

    _this.getMode = function() {
      return _mode;
    };

    _this.getLength = function(buffer) {
      return _data.length;
    };

    _this.write = function(buffer) {

      var data = _data;

      var i = 0;

      while (i + 2 < data.length) {
        buffer.put(strToNum(data.substring(i, i + 3) ), 10);
        i += 3;
      }

      if (i < data.length) {
        if (data.length - i == 1) {
          buffer.put(strToNum(data.substring(i, i + 1) ), 4);
        } else if (data.length - i == 2) {
          buffer.put(strToNum(data.substring(i, i + 2) ), 7);
        }
      }
    };

    var strToNum = function(s) {
      var num = 0;
      for (var i = 0; i < s.length; i += 1) {
        num = num * 10 + chatToNum(s.charAt(i) );
      }
      return num;
    };

    var chatToNum = function(c) {
      if ('0' <= c && c <= '9') {
        return c.charCodeAt(0) - '0'.charCodeAt(0);
      }
      throw 'illegal char :' + c;
    };

    return _this;
  };

  //---------------------------------------------------------------------
  // qrAlphaNum
  //---------------------------------------------------------------------

  var qrAlphaNum = function(data) {

    var _mode = QRMode.MODE_ALPHA_NUM;
    var _data = data;

    var _this = {};

    _this.getMode = function() {
      return _mode;
    };

    _this.getLength = function(buffer) {
      return _data.length;
    };

    _this.write = function(buffer) {

      var s = _data;

      var i = 0;

      while (i + 1 < s.length) {
        buffer.put(
          getCode(s.charAt(i) ) * 45 +
          getCode(s.charAt(i + 1) ), 11);
        i += 2;
      }

      if (i < s.length) {
        buffer.put(getCode(s.charAt(i) ), 6);
      }
    };

    var getCode = function(c) {

      if ('0' <= c && c <= '9') {
        return c.charCodeAt(0) - '0'.charCodeAt(0);
      } else if ('A' <= c && c <= 'Z') {
        return c.charCodeAt(0) - 'A'.charCodeAt(0) + 10;
      } else {
        switch (c) {
        case ' ' : return 36;
        case '$' : return 37;
        case '%' : return 38;
        case '*' : return 39;
        case '+' : return 40;
        case '-' : return 41;
        case '.' : return 42;
        case '/' : return 43;
        case ':' : return 44;
        default :
          throw 'illegal char :' + c;
        }
      }
    };

    return _this;
  };

  //---------------------------------------------------------------------
  // qr8BitByte
  //---------------------------------------------------------------------

  var qr8BitByte = function(data) {

    var _mode = QRMode.MODE_8BIT_BYTE;
    var _data = data;
    var _bytes = qrcode.stringToBytes(data);

    var _this = {};

    _this.getMode = function() {
      return _mode;
    };

    _this.getLength = function(buffer) {
      return _bytes.length;
    };

    _this.write = function(buffer) {
      for (var i = 0; i < _bytes.length; i += 1) {
        buffer.put(_bytes[i], 8);
      }
    };

    return _this;
  };

  //---------------------------------------------------------------------
  // qrKanji
  //---------------------------------------------------------------------

  var qrKanji = function(data) {

    var _mode = QRMode.MODE_KANJI;
    var _data = data;

    var stringToBytes = qrcode.stringToBytesFuncs['SJIS'];
    if (!stringToBytes) {
      throw 'sjis not supported.';
    }
    !function(c, code) {
      // self test for sjis support.
      var test = stringToBytes(c);
      if (test.length != 2 || ( (test[0] << 8) | test[1]) != code) {
        throw 'sjis not supported.';
      }
    }('\u53cb', 0x9746);

    var _bytes = stringToBytes(data);

    var _this = {};

    _this.getMode = function() {
      return _mode;
    };

    _this.getLength = function(buffer) {
      return ~~(_bytes.length / 2);
    };

    _this.write = function(buffer) {

      var data = _bytes;

      var i = 0;

      while (i + 1 < data.length) {

        var c = ( (0xff & data[i]) << 8) | (0xff & data[i + 1]);

        if (0x8140 <= c && c <= 0x9FFC) {
          c -= 0x8140;
        } else if (0xE040 <= c && c <= 0xEBBF) {
          c -= 0xC140;
        } else {
          throw 'illegal char at ' + (i + 1) + '/' + c;
        }

        c = ( (c >>> 8) & 0xff) * 0xC0 + (c & 0xff);

        buffer.put(c, 13);

        i += 2;
      }

      if (i < data.length) {
        throw 'illegal char at ' + (i + 1);
      }
    };

    return _this;
  };

  //=====================================================================
  // GIF Support etc.
  //

  //---------------------------------------------------------------------
  // byteArrayOutputStream
  //---------------------------------------------------------------------

  var byteArrayOutputStream = function() {

    var _bytes = [];

    var _this = {};

    _this.writeByte = function(b) {
      _bytes.push(b & 0xff);
    };

    _this.writeShort = function(i) {
      _this.writeByte(i);
      _this.writeByte(i >>> 8);
    };

    _this.writeBytes = function(b, off, len) {
      off = off || 0;
      len = len || b.length;
      for (var i = 0; i < len; i += 1) {
        _this.writeByte(b[i + off]);
      }
    };

    _this.writeString = function(s) {
      for (var i = 0; i < s.length; i += 1) {
        _this.writeByte(s.charCodeAt(i) );
      }
    };

    _this.toByteArray = function() {
      return _bytes;
    };

    _this.toString = function() {
      var s = '';
      s += '[';
      for (var i = 0; i < _bytes.length; i += 1) {
        if (i > 0) {
          s += ',';
        }
        s += _bytes[i];
      }
      s += ']';
      return s;
    };

    return _this;
  };

  //---------------------------------------------------------------------
  // base64EncodeOutputStream
  //---------------------------------------------------------------------

  var base64EncodeOutputStream = function() {

    var _buffer = 0;
    var _buflen = 0;
    var _length = 0;
    var _base64 = '';

    var _this = {};

    var writeEncoded = function(b) {
      _base64 += String.fromCharCode(encode(b & 0x3f) );
    };

    var encode = function(n) {
      if (n < 0) {
        // error.
      } else if (n < 26) {
        return 0x41 + n;
      } else if (n < 52) {
        return 0x61 + (n - 26);
      } else if (n < 62) {
        return 0x30 + (n - 52);
      } else if (n == 62) {
        return 0x2b;
      } else if (n == 63) {
        return 0x2f;
      }
      throw 'n:' + n;
    };

    _this.writeByte = function(n) {

      _buffer = (_buffer << 8) | (n & 0xff);
      _buflen += 8;
      _length += 1;

      while (_buflen >= 6) {
        writeEncoded(_buffer >>> (_buflen - 6) );
        _buflen -= 6;
      }
    };

    _this.flush = function() {

      if (_buflen > 0) {
        writeEncoded(_buffer << (6 - _buflen) );
        _buffer = 0;
        _buflen = 0;
      }

      if (_length % 3 != 0) {
        // padding
        var padlen = 3 - _length % 3;
        for (var i = 0; i < padlen; i += 1) {
          _base64 += '=';
        }
      }
    };

    _this.toString = function() {
      return _base64;
    };

    return _this;
  };

  //---------------------------------------------------------------------
  // base64DecodeInputStream
  //---------------------------------------------------------------------

  var base64DecodeInputStream = function(str) {

    var _str = str;
    var _pos = 0;
    var _buffer = 0;
    var _buflen = 0;

    var _this = {};

    _this.read = function() {

      while (_buflen < 8) {

        if (_pos >= _str.length) {
          if (_buflen == 0) {
            return -1;
          }
          throw 'unexpected end of file./' + _buflen;
        }

        var c = _str.charAt(_pos);
        _pos += 1;

        if (c == '=') {
          _buflen = 0;
          return -1;
        } else if (c.match(/^\s$/) ) {
          // ignore if whitespace.
          continue;
        }

        _buffer = (_buffer << 6) | decode(c.charCodeAt(0) );
        _buflen += 6;
      }

      var n = (_buffer >>> (_buflen - 8) ) & 0xff;
      _buflen -= 8;
      return n;
    };

    var decode = function(c) {
      if (0x41 <= c && c <= 0x5a) {
        return c - 0x41;
      } else if (0x61 <= c && c <= 0x7a) {
        return c - 0x61 + 26;
      } else if (0x30 <= c && c <= 0x39) {
        return c - 0x30 + 52;
      } else if (c == 0x2b) {
        return 62;
      } else if (c == 0x2f) {
        return 63;
      } else {
        throw 'c:' + c;
      }
    };

    return _this;
  };

  //---------------------------------------------------------------------
  // gifImage (B/W)
  //---------------------------------------------------------------------

  var gifImage = function(width, height) {

    var _width = width;
    var _height = height;
    var _data = new Array(width * height);

    var _this = {};

    _this.setPixel = function(x, y, pixel) {
      _data[y * _width + x] = pixel;
    };

    _this.write = function(out) {

      //---------------------------------
      // GIF Signature

      out.writeString('GIF87a');

      //---------------------------------
      // Screen Descriptor

      out.writeShort(_width);
      out.writeShort(_height);

      out.writeByte(0x80); // 2bit
      out.writeByte(0);
      out.writeByte(0);

      //---------------------------------
      // Global Color Map

      // black
      out.writeByte(0x00);
      out.writeByte(0x00);
      out.writeByte(0x00);

      // white
      out.writeByte(0xff);
      out.writeByte(0xff);
      out.writeByte(0xff);

      //---------------------------------
      // Image Descriptor

      out.writeString(',');
      out.writeShort(0);
      out.writeShort(0);
      out.writeShort(_width);
      out.writeShort(_height);
      out.writeByte(0);

      //---------------------------------
      // Local Color Map

      //---------------------------------
      // Raster Data

      var lzwMinCodeSize = 2;
      var raster = getLZWRaster(lzwMinCodeSize);

      out.writeByte(lzwMinCodeSize);

      var offset = 0;

      while (raster.length - offset > 255) {
        out.writeByte(255);
        out.writeBytes(raster, offset, 255);
        offset += 255;
      }

      out.writeByte(raster.length - offset);
      out.writeBytes(raster, offset, raster.length - offset);
      out.writeByte(0x00);

      //---------------------------------
      // GIF Terminator
      out.writeString(';');
    };

    var bitOutputStream = function(out) {

      var _out = out;
      var _bitLength = 0;
      var _bitBuffer = 0;

      var _this = {};

      _this.write = function(data, length) {

        if ( (data >>> length) != 0) {
          throw 'length over';
        }

        while (_bitLength + length >= 8) {
          _out.writeByte(0xff & ( (data << _bitLength) | _bitBuffer) );
          length -= (8 - _bitLength);
          data >>>= (8 - _bitLength);
          _bitBuffer = 0;
          _bitLength = 0;
        }

        _bitBuffer = (data << _bitLength) | _bitBuffer;
        _bitLength = _bitLength + length;
      };

      _this.flush = function() {
        if (_bitLength > 0) {
          _out.writeByte(_bitBuffer);
        }
      };

      return _this;
    };

    var getLZWRaster = function(lzwMinCodeSize) {

      var clearCode = 1 << lzwMinCodeSize;
      var endCode = (1 << lzwMinCodeSize) + 1;
      var bitLength = lzwMinCodeSize + 1;

      // Setup LZWTable
      var table = lzwTable();

      for (var i = 0; i < clearCode; i += 1) {
        table.add(String.fromCharCode(i) );
      }
      table.add(String.fromCharCode(clearCode) );
      table.add(String.fromCharCode(endCode) );

      var byteOut = byteArrayOutputStream();
      var bitOut = bitOutputStream(byteOut);

      // clear code
      bitOut.write(clearCode, bitLength);

      var dataIndex = 0;

      var s = String.fromCharCode(_data[dataIndex]);
      dataIndex += 1;

      while (dataIndex < _data.length) {

        var c = String.fromCharCode(_data[dataIndex]);
        dataIndex += 1;

        if (table.contains(s + c) ) {

          s = s + c;

        } else {

          bitOut.write(table.indexOf(s), bitLength);

          if (table.size() < 0xfff) {

            if (table.size() == (1 << bitLength) ) {
              bitLength += 1;
            }

            table.add(s + c);
          }

          s = c;
        }
      }

      bitOut.write(table.indexOf(s), bitLength);

      // end code
      bitOut.write(endCode, bitLength);

      bitOut.flush();

      return byteOut.toByteArray();
    };

    var lzwTable = function() {

      var _map = {};
      var _size = 0;

      var _this = {};

      _this.add = function(key) {
        if (_this.contains(key) ) {
          throw 'dup key:' + key;
        }
        _map[key] = _size;
        _size += 1;
      };

      _this.size = function() {
        return _size;
      };

      _this.indexOf = function(key) {
        return _map[key];
      };

      _this.contains = function(key) {
        return typeof _map[key] != 'undefined';
      };

      return _this;
    };

    return _this;
  };

  var createDataURL = function(width, height, getPixel) {
    var gif = gifImage(width, height);
    for (var y = 0; y < height; y += 1) {
      for (var x = 0; x < width; x += 1) {
        gif.setPixel(x, y, getPixel(x, y) );
      }
    }

    var b = byteArrayOutputStream();
    gif.write(b);

    var base64 = base64EncodeOutputStream();
    var bytes = b.toByteArray();
    for (var i = 0; i < bytes.length; i += 1) {
      base64.writeByte(bytes[i]);
    }
    base64.flush();

    return 'data:image/gif;base64,' + base64;
  };

  //---------------------------------------------------------------------
  // returns qrcode function.

  return qrcode;
}();

// multibyte support
!function() {

  qrcode.stringToBytesFuncs['UTF-8'] = function(s) {
    // http://stackoverflow.com/questions/18729405/how-to-convert-utf8-string-to-byte-array
    function toUTF8Array(str) {
      var utf8 = [];
      for (var i=0; i < str.length; i++) {
        var charcode = str.charCodeAt(i);
        if (charcode < 0x80) utf8.push(charcode);
        else if (charcode < 0x800) {
          utf8.push(0xc0 | (charcode >> 6),
              0x80 | (charcode & 0x3f));
        }
        else if (charcode < 0xd800 || charcode >= 0xe000) {
          utf8.push(0xe0 | (charcode >> 12),
              0x80 | ((charcode>>6) & 0x3f),
              0x80 | (charcode & 0x3f));
        }
        // surrogate pair
        else {
          i++;
          // UTF-16 encodes 0x10000-0x10FFFF by
          // subtracting 0x10000 and splitting the
          // 20 bits of 0x0-0xFFFFF into two halves
          charcode = 0x10000 + (((charcode & 0x3ff)<<10)
            | (str.charCodeAt(i) & 0x3ff));
          utf8.push(0xf0 | (charcode >>18),
              0x80 | ((charcode>>12) & 0x3f),
              0x80 | ((charcode>>6) & 0x3f),
              0x80 | (charcode & 0x3f));
        }
      }
      return utf8;
    }
    return toUTF8Array(s);
  };

}();

(function (factory) {
  if (typeof define === 'function' && define.amd) {
      define([], factory);
  } else if (typeof exports === 'object') {
      module.exports = factory();
  }
}(function () {
    return qrcode;
}));

</script>
<script>
// ============================================================================
// Constelación QR — WebGPU puro (sin librerías). Sucesora de flor-qr-webgpu.html
// (esa versión queda guardada tal cual, sin tocar — el usuario decidió
// desistir del concepto de las flores porque nunca terminó de convencerle).
//
// PASO 2: ya validado el nodo "billboard" en aislado (paso 1: "se ven bien y
// mantienen la consistencia al girar y alternar vista"), aquí se escala a la
// red completa: un nodo por cada módulo OSCURO del QR real, en su (x,z)
// exacto, más las ARISTAS que conectan cada módulo con sus vecinos DIRECTOS
// en la propia grilla del QR (nunca por cercanía libre) — así una línea
// jamás cruza por encima de un módulo que debe leerse "apagado", sin
// arriesgar el escaneo. Las aristas además se desvanecen hacia el fondo a
// medida que la cámara se acerca a la vista cenital, para que en el momento
// de leer el QR solo quede la grilla limpia de puntos. Se agrega también un
// puñado de "estrellas" de fondo, decorativas, bien afuera del radio del QR.
//
// VERSIÓN "CON FONDO" (constelacion-qr-webgpu-con-fondo.html): este bloque es
// una copia de la lógica de constelacion-qr-webgpu.html (que queda intacta,
// sin tocar) con tres tipos de cambio, y nada más que estos tres:
//   1) `estado`/`#estado` -> `estadoQR`/`#estadoQR` y el canvas `#lienzo` ->
//      `#lienzoQR`, porque este archivo también carga el laboratorio de
//      galaxias completo (como fondo, panel oculto) en la MISMA página/mismo
//      scope global, y esos dos nombres ya están tomados por
//      utilidades.js/arranque.js del laboratorio (const estado = ...; canvas
//      #lienzo) — nunca se puede tocar ESE lado de la colisión (ver el mapa
//      de arriba del HTML), así que el que cede el nombre es este archivo.
//   2) el canvas de este archivo pasa a "premultiplied" con un clearValue que
//      depende del progreso de cámara (antes fijo y opaco) — así el fondo del
//      laboratorio se ve a través en la vista de constelación, y en el
//      instante exacto de escanear (vista cenital) el frame vuelve a ser
//      bit a bit idéntico al de la versión validada (ver comentario junto a
//      dibujarFrame()).
//   3) un fallback a QR estático (SVG, generado con la MISMA librería
//      qrcode.js) si WebGPU no está disponible o falla al iniciar.
// Ninguna de las reglas de escaneo ya validadas (buscadores sin máscara/sin
// jitter, círculos de dato con tono>=0.35 y tamaño fijo) se toca aquí.
// ============================================================================

var elEstado = document.getElementById("estadoQR");
function estadoQR(msg) { elEstado.textContent = msg; console.log("[constelacion-qr-con-fondo]", msg); }

// ---------- álgebra de vectores/matrices (idéntica a flor-qr-webgpu.html, sin cambios) ----------
// EXPERIMENTO ENCUADRE: offsetX/offsetY agregados (antes no existían, tenía
// solo fovY/aspect/near/far) — desplazan el frustum de forma asimétrica
// ("lens shift" fotográfico/de cine: correr el sensor sin mover ni rotar la
// cámara), así que reposicionan lo que se ve en pantalla SIN cambiar en
// nada la distorsión de perspectiva ni el tamaño aparente de nada. Se probó
// primero mover CAM_TARGET (el look-at) para recomponer el encuadre y no
// alcanzaba: un desplazamiento del tamaño de la asimetría real del QR
// (fracciones de unidad) es demasiado chico para notarse a la distancia de
// cámara actual (7.4 unidades) — hacía falta un desplazamiento GRANDE (se
// probó con [3,3,3] a modo de prueba) para ver algún efecto, pero eso
// cambia la dirección de vista entera, no solo recompone. Un lens shift es
// la herramienta correcta para este problema específico: mismo ángulo,
// misma distorsión, solo se corre dónde cae el centro en la pantalla.
function mat4Perspective(fovY, aspect, near, far, offsetX, offsetY) {
  var f = 1 / Math.tan(fovY / 2);
  var rangeInv = 1 / (near - far);
  var out = new Float32Array(16);
  out[0] = f / aspect;
  out[5] = f;
  out[8] = offsetX || 0;
  out[9] = offsetY || 0;
  out[10] = far * rangeInv;
  out[11] = -1;
  out[14] = far * near * rangeInv;
  return out;
}
function vec3Sub(a, b) { return [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; }
function vec3Normalize(v) { var l = Math.hypot(v[0], v[1], v[2]) || 1; return [v[0] / l, v[1] / l, v[2] / l]; }
function vec3Cross(a, b) { return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]]; }
function vec3Dot(a, b) { return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; }
function mat4LookAt(eye, target, up) {
  var zAxis = vec3Normalize(vec3Sub(eye, target));
  var xAxis = vec3Normalize(vec3Cross(up, zAxis));
  var yAxis = vec3Cross(zAxis, xAxis);
  var out = new Float32Array(16);
  out[0] = xAxis[0]; out[4] = xAxis[1]; out[8] = xAxis[2]; out[12] = -vec3Dot(xAxis, eye);
  out[1] = yAxis[0]; out[5] = yAxis[1]; out[9] = yAxis[2]; out[13] = -vec3Dot(yAxis, eye);
  out[2] = zAxis[0]; out[6] = zAxis[1]; out[10] = zAxis[2]; out[14] = -vec3Dot(zAxis, eye);
  out[3] = 0; out[7] = 0; out[11] = 0; out[15] = 1;
  return out;
}
function mat4Multiply(a, b) {
  var out = new Float32Array(16);
  for (var col = 0; col < 4; col++) {
    for (var row = 0; row < 4; row++) {
      var suma = 0;
      for (var k = 0; k < 4; k++) suma += a[k * 4 + row] * b[col * 4 + k];
      out[col * 4 + row] = suma;
    }
  }
  return out;
}
// EXPERIMENTO ENCUADRE: transforma un punto (x,y,z,w=1) por una matriz 4x4
// column-major -- hace falta para proyectar las esquinas de la caja
// delimitadora y ver dónde caen de verdad en pantalla (ver actualizarCamara).
function mat4TransformPoint(m, x, y, z) {
  return [
    m[0] * x + m[4] * y + m[8] * z + m[12],
    m[1] * x + m[5] * y + m[9] * z + m[13],
    m[2] * x + m[6] * y + m[10] * z + m[14],
    m[3] * x + m[7] * y + m[11] * z + m[15],
  ];
}

// ---------- una sola familia de tono violeta, IGUAL enfoque que en las flores
// pero con la polaridad invertida: aquí el fondo es oscuro, así que t=0 es el
// extremo tenue (todavía visible sobre el fondo) y t=1 el extremo brillante
// (el de máximo contraste, el que usan los buscadores del QR). ----------
var TONO_DIM = [0.32, 0.22, 0.50];
var TONO_BRILLANTE = [0.82, 0.74, 0.98];
function colorPorTono(t) {
  t = Math.max(0, Math.min(1, t));
  return [
    TONO_DIM[0] * (1 - t) + TONO_BRILLANTE[0] * t,
    TONO_DIM[1] * (1 - t) + TONO_BRILLANTE[1] * t,
    TONO_DIM[2] * (1 - t) + TONO_BRILLANTE[2] * t
  ];
}
var COLOR_FONDO = [0.0314, 0.0314, 0.0392]; // debe coincidir con clearValue y con el fragment shader

// ---------- nodo = billboard (quad que arma su orientación en el vértex
// shader a partir de camRight/camUp, ver CODIGO_WGSL). Formato de vértice:
// centro(3) + color(3) + esquina unitaria(2) + tamaño(1) + modo(1) +
// inicio(3) + fase(1) = 14 floats (los últimos 4, "inicio"/"fase", son de
// HILO 4 — ver el comentario grande junto a NIVELES_ALTURA/
// generarPoolInicioFormacion). "modo" decide cómo lo pinta el fragment shader:
//   0 = círculo duro con máscara (nodos de DATOS del QR — probado con jsQR
//       que su radio no puede variar de módulo a módulo, ver más abajo)
//   1 = cuadrado sólido sin máscara (los 3 buscadores del QR — probado con
//       jsQR que un círculo ahí, sin importar el radio, rompe la detección)
//   2 = halo/nebulosa: relleno suave sin recorte duro, se funde hacia el
//       fondo, titila y se desvanece del todo al llegar a la vista cenital
//       — decorativo, nunca es parte de lo que tiene que leerse como QR. ----------
function empujarNodo(vertices, centro, color, tamano, modo, inicio, fase) {
  var esquinas = [[-1, -1], [1, -1], [1, 1], [-1, -1], [1, 1], [-1, 1]];
  for (var i = 0; i < esquinas.length; i++) {
    var e = esquinas[i];
    vertices.push(
      centro[0], centro[1], centro[2], color[0], color[1], color[2], e[0], e[1], tamano, modo,
      inicio[0], inicio[1], inicio[2], fase
    );
  }
}

function generarQR(texto, ec) {
  var t = 1, qr;
  while (t <= 40) {
    try { qr = qrcode(t, ec); qr.addData(texto); qr.make(); return qr; } catch (e) { t++; }
  }
  throw new Error("el texto no cupo en ningún tamaño de QR");
}
function esBuscador(row, col, nMod) {
  var supIzq = row < 7 && col < 7;
  var supDer = row < 7 && col >= nMod - 7;
  var infIzq = row >= nMod - 7 && col < 7;
  return supIzq || supDer || infIzq;
}

// ---------- niveles de altura equiespaciados (la misma idea que ya había
// gustado en la versión de las flores), pero con asignación dispersa/al azar
// por módulo en vez de un perfil de copa — para que se lea como un cúmulo de
// estrellas flotando en distintos planos, no como una cúpula simétrica. ----------
var NIVELES_ALTURA = [0.15, 0.45, 0.75, 1.05, 1.35];

// ============================================================================
// HILO 4 — formación. La primera versión de este hilo (dispersión en un
// volumen ancho al azar + líneas de conexión) quedó congelada en
// constelacion-qr-webgpu-con-fondo-experimental-v2.html (checkpoint del
// proyecto, no una versión numerada del hilo en sí) cuando dejó de ser la
// dirección buscada — mismo criterio de siempre: nunca perder una idea que
// gustó, aunque no sea la elegida. ESTA versión del hilo es la segunda
// reescritura completa, a pedido de Marco después de ver en video las tres
// (checkpoint v1, checkpoint v2, y esta): (a) más lenta (DURACION_FORMACION
// subió de 3.2 a 5), (b) trayectoria en REMOLINO en vez de línea recta (ver
// posicionAnimada en CODIGO_WGSL) — con cantidad de vueltas y fase propias
// por nodo, para que no giren todas en sincronía, (c) tamaño de partida
// 5%-15% del final (antes 18% fijo) — y AHORA también los cubos de los
// buscadores arrancan a ese mismo tamaño chico (antes se quedaban a tamaño
// fijo, antes de que el propio remolino/giro necesitara que tapa y paredes
// escalen juntas), y (d) cada nodo/cubo "rueda sobre su propio eje" mientras
// vuela (ver calcularAnguloGiro/rotarAlrededorDeEje) con una velocidad
// angular en forma de campana (arranca en 0, acelera hasta la mitad del
// recorrido, frena hasta 0 justo al llegar — pedido explícito). El remolino
// también suma una componente de PROFUNDIDAD en el eje de la cámara (no del
// mundo): la mitad del giro que queda "adelante" empuja el punto hacia la
// cámara y la que queda "atrás" lo aleja, la sensación de vórtice/paralaje
// que se pidió, desde el punto de vista real de quien mira.
//
// Lo que YA traía v2 y sigue igual aquí: sin ninguna línea que una nodos/
// cubos; las estrellas de partida naciendo REALMENTE lejos, "bajando de
// profundidad" (acercándose a cámara) mientras convergen al centro; y esas
// estrellas de partida repartidas parejo a lo largo de la pantalla (grilla
// en espacio de pantalla/NDC de la cámara en su pose inicial, desproyectada
// a un plano lejano — ver generarPoolInicioFormacion — en vez de una
// dispersión en espacio de MUNDO, que bajo perspectiva se ve más densa hacia
// el centro).
//
// No hay ningún vínculo real de coordenadas con el campo de galaxias del
// laboratorio (son dos GPUDevice independientes, ver el comentario grande
// del encabezado del archivo sobre por qué) — todo esto vive dentro de ESTA
// pieza nada más.
//
// Cada módulo oscuro recibe UNA posición inicial (del pool, ya barajado) y
// UNA fase (0..1, al azar) en construirConstelacion(), una sola vez al
// construir la geometría — no en cada cuadro. Esa fase decide CUÁNDO le toca
// empezar a moverse (progresoFormacion), CUÁNTAS vueltas da su remolino y su
// giro propio, y CUÁNDO arranca a girar cada uno (todo sorteado a partir de
// la misma fase vía hash, sin agregar más atributos por vértice de los ya
// necesarios). El halo y (si es buscador) el cubo de un nodo comparten
// exactamente la misma fase que su nodo sólido — para que viajen/escalen/
// giren siempre pegados, como el mismo objeto (ver el comentario dentro de
// vs_cara para el detalle de cómo el cubo entero queda coordinado con su
// tapa usando ese mismo valor).
//
// GARANTÍA para el escaneo real: la posición, el tamaño Y el giro ANIMADOS
// convergen al valor FINAL de forma exacta (la envolvente del remolino es
// sin(pi*t) → 0 en t=1, así que su desvío desaparece sin importar cuántas
// vueltas dé; mix(a,b,1) == b bit a bit para posición/tamaño; el giro propio
// usa siempre un número ENTERO de vueltas — ver calcularAnguloGiro — así que
// en t=1 vuelve a su orientación de siempre, no solo a velocidad angular
// cero) apenas progresoFormacion llega a 1 para ese nodo — y progresoFormacion
// se fuerza a 1 en el instante en que el visitante
// hace clic (ver formacionForzada, más abajo junto a tRotObjetivo), mucho
// antes de que la cámara real llegue a acercarse a la vista cenital (esa
// transición por sí sola tarda varios segundos, ver actualizarCamara/tRot).
// Así que el frame que de verdad importa para jsQR — la vista cenital — es
// SIEMPRE bit a bit idéntico al de antes de este hilo, en cualquier orden de
// clics posible.
// ============================================================================
var CENTRO_Y_FORMACION = 0.75; // aprox. la mitad de NIVELES_ALTURA
// HILO 4: azimut/elevación/distancia/FOV de la cámara en su pose INICIAL (vista
// en ángulo, antes de cualquier clic) -- ÚNICA fuente de verdad, reusada aquí
// (para el plano de partida de la formación) y más abajo por actualizarCamara
// (para la cámara real de cada cuadro), así nunca pueden desincronizarse.
var CAM_DIST_3D = 7.4, CAM_AZIMUT_3D = (40 * Math.PI) / 180, CAM_ELEV_3D = (38 * Math.PI) / 180;
var FOV_3D = (42 * Math.PI) / 180;
// HILO 4: ejes de la cámara en una pose arbitraria (dist/azimut/elev) mirando
// hacia un target aproximado -- mismas fórmulas que usa actualizarCamara para
// eye/xAxis/yAxis/zAxis (ver más abajo), factorizadas aquí porque hacen falta
// ANTES de que exista constelacion.centroide (el target real). No hace falta
// el target exacto: la ORIENTACIÓN de la cámara no depende de a qué apunta,
// solo del azimut/elevación: y el QR ya está centrado en X/Z por
// construcción, así que [0, CENTRO_Y_FORMACION, 0] es una aproximación de
// sobra para un plano de partida que además está muchas unidades más lejos.
function calcularBaseCamara(dist, azimut, elev) {
  var eye = [
    dist * Math.sin(azimut) * Math.cos(elev),
    dist * Math.sin(elev) + 0.15,
    dist * Math.cos(azimut) * Math.cos(elev)
  ];
  var target = [0, CENTRO_Y_FORMACION, 0];
  var up = [0, 1, 0];
  var zAxis = vec3Normalize(vec3Sub(eye, target));
  var xAxis = vec3Normalize(vec3Cross(up, zAxis));
  var yAxis = vec3Cross(zAxis, xAxis);
  return { eye: eye, right: xAxis, up: yAxis, adelante: vec3Normalize(vec3Sub(target, eye)) };
}
// HILO 4: distancia (desde el ojo, a lo largo de la mirada) del plano donde
// nacen las estrellas de partida -- bastante más lejos que CAM_DIST_3D (7.4)
// para que de verdad se sientan viniendo "de atrás", no de al lado.
var DISTANCIA_FORMACION = 14;
// HILO 4: "cantidad" puntos de partida repartidos PAREJO en pantalla -- grilla
// en NDC (columnas x filas, ajustada al aspecto real del canvas) con jitter
// adentro de cada celda (para que no se note la grilla) y barajados al final
// (Fisher-Yates) para que no quede ninguna correlación entre "en qué celda de
// pantalla nace" y "a qué módulo del QR le toca" -- si no, el propio patrón
// del QR se filtraría en cómo se reparte el punto de partida.
function generarPoolInicioFormacion(cantidad, aspecto) {
  var base = calcularBaseCamara(CAM_DIST_3D, CAM_AZIMUT_3D, CAM_ELEV_3D);
  var mitadAlto = DISTANCIA_FORMACION * Math.tan(FOV_3D / 2);
  var mitadAncho = mitadAlto * aspecto;
  var columnas = Math.max(1, Math.round(Math.sqrt(cantidad * aspecto)));
  var filas = Math.max(1, Math.ceil(cantidad / columnas));
  var anchoCelda = 2 / columnas, altoCelda = 2 / filas;
  var pool = [];
  for (var f = 0; f < filas; f++) {
    for (var c = 0; c < columnas; c++) {
      var u = -1 + anchoCelda * (c + 0.5) + (Math.random() - 0.5) * anchoCelda * 0.85;
      var v = -1 + altoCelda * (f + 0.5) + (Math.random() - 0.5) * altoCelda * 0.85;
      var du = u * mitadAncho, dv = v * mitadAlto;
      pool.push([
        base.eye[0] + base.adelante[0] * DISTANCIA_FORMACION + base.right[0] * du + base.up[0] * dv,
        base.eye[1] + base.adelante[1] * DISTANCIA_FORMACION + base.right[1] * du + base.up[1] * dv,
        base.eye[2] + base.adelante[2] * DISTANCIA_FORMACION + base.right[2] * du + base.up[2] * dv,
      ]);
    }
  }
  for (var i = pool.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var tmp = pool[i]; pool[i] = pool[j]; pool[j] = tmp;
  }
  return pool;
}

// EXPERIMENTO: acento de los cubos de buscador — más brillante que el resto
// de la constelación porque es un detalle, no el patrón principal.
var COL_CUBO = colorPorTono(0.55);

// ---------- EXPERIMENTO v3: cubo con sus 6 caras REALES (no alambre) —
// segunda corrección a pedido del usuario. v1 (billboard + alambre
// separados) se sentía como dos objetos superpuestos; v2 (panel + alambre
// más ancho que el panel, tamano*1.3) seguía viéndose mal porque el marco
// de alambre no coincidía en tamaño con el panel — quedaba, en palabras del
// usuario, "un cuadro flotante solitario" sin conectar con nada. Aquí se
// resuelve de raíz: las 6 caras del cubo (arriba, abajo, y los 4 costados)
// usan TODAS el mismo ancho (medioXZ) que la tapa — un cubo real, cerrado,
// sin ninguna pieza de tamaño distinto flotando. La cara de ARRIBA sigue
// siendo el panel modo=1 de siempre (fs_nodo, sin tocar su tamaño/posición
// — es la única que tiene que llegar intacta a la vista cenital); las otras
// 5 son geometría nueva (empujarCaraCubo, pipeline propio pipelineCara/
// vs_cara/fs_cara) con el MISMO estilo de brillo (marco+esquina) que el
// panel, pero con alfa que se desvanece del todo al acercarse a la vista
// cenital (mismo umbral que aristas/halos) — así el cubo completo se
// "cierra" en la vista de constelación y en el instante de escanear
// desaparece por completo, dejando solo el panel de arriba, sin tocar. ----------
// HILO 4 (v3): "centroCuboInicial"/"centroCubo" son el MISMO par de puntos
// (centro del cubo, no delta) para las 30 esquinas del cubo entero -- vs_cara
// escala/gira/traslada cada esquina relativa a ese centro compartido, así el
// cubo entero se mueve como un solo cuerpo rígido, nunca se deforma. Ver
// empujarCuboCompleto, que calcula esos dos puntos una sola vez por cubo.
function empujarCaraCubo(vertices, esquinasMundo, color, centroCuboInicial, centroCubo, fase, normal) {
  var uvEsquinas = [[-1, -1], [1, -1], [1, 1], [-1, 1]];
  var orden = [0, 1, 2, 0, 2, 3];
  for (var i = 0; i < orden.length; i++) {
    var k = orden[i];
    var p = esquinasMundo[k], uv = uvEsquinas[k];
    vertices.push(
      p[0], p[1], p[2], color[0], color[1], color[2], uv[0], uv[1],
      centroCuboInicial[0], centroCuboInicial[1], centroCuboInicial[2],
      centroCubo[0], centroCubo[1], centroCubo[2], fase,
      // REDISEÑO NODO/CUBO: normal REAL de esta cara (fija, genuina -- cada
      // cara es un plano real, no una aproximación) -- reemplaza el truco 2D
      // "chip" de fs_cara por iluminación de verdad. Rota junto con el resto
      // del cubo en vs_cara (mismo ejeGiro/anguloGiro que la posición) para
      // seguir siendo correcta mientras el cubo tumba durante la formación.
      normal[0], normal[1], normal[2]
    );
  }
}
function empujarCuboCompleto(vertices, centroTapa, medioXZ, altura, color, inicioCentroTapa, fase) {
  var cx = centroTapa[0], cyTop = centroTapa[1], cz = centroTapa[2];
  var cyBot = cyTop - altura;
  // HILO 4 (v3): centro GEOMÉTRICO real del cubo (a media altura, no la
  // tapa) -- el mismo punto de pivote para escalar/girar las 5 caras. Su
  // vector inicio->final es idéntico al de la tapa (el offset vertical fijo
  // se cancela al restar), así el remolino/giro salen coordinados con el
  // panel de arriba sin ningún cálculo extra.
  var centroCubo = [cx, cyTop - altura / 2, cz];
  var centroCuboInicial = [inicioCentroTapa[0], inicioCentroTapa[1] - altura / 2, inicioCentroTapa[2]];
  empujarCaraCubo(vertices, [ // abajo
    [cx - medioXZ, cyBot, cz - medioXZ], [cx + medioXZ, cyBot, cz - medioXZ],
    [cx + medioXZ, cyBot, cz + medioXZ], [cx - medioXZ, cyBot, cz + medioXZ],
  ], color, centroCuboInicial, centroCubo, fase, [0, -1, 0]);
  empujarCaraCubo(vertices, [ // +X
    [cx + medioXZ, cyBot, cz - medioXZ], [cx + medioXZ, cyBot, cz + medioXZ],
    [cx + medioXZ, cyTop, cz + medioXZ], [cx + medioXZ, cyTop, cz - medioXZ],
  ], color, centroCuboInicial, centroCubo, fase, [1, 0, 0]);
  empujarCaraCubo(vertices, [ // -X
    [cx - medioXZ, cyBot, cz + medioXZ], [cx - medioXZ, cyBot, cz - medioXZ],
    [cx - medioXZ, cyTop, cz - medioXZ], [cx - medioXZ, cyTop, cz + medioXZ],
  ], color, centroCuboInicial, centroCubo, fase, [-1, 0, 0]);
  empujarCaraCubo(vertices, [ // +Z
    [cx + medioXZ, cyBot, cz + medioXZ], [cx - medioXZ, cyBot, cz + medioXZ],
    [cx - medioXZ, cyTop, cz + medioXZ], [cx + medioXZ, cyTop, cz + medioXZ],
  ], color, centroCuboInicial, centroCubo, fase, [0, 0, 1]);
  empujarCaraCubo(vertices, [ // -Z
    [cx - medioXZ, cyBot, cz - medioXZ], [cx + medioXZ, cyBot, cz - medioXZ],
    [cx + medioXZ, cyTop, cz - medioXZ], [cx - medioXZ, cyTop, cz - medioXZ],
  ], color, centroCuboInicial, centroCubo, fase, [0, 0, -1]);
}

function construirConstelacion(url, aspecto) {
  var solidos = [];
  var halos = [];
  var carasCubo = []; // EXPERIMENTO: las 5 caras decorativas del cubo (todo menos la tapa, que es un nodo modo=1 normal en "solidos")

  var qr = generarQR(url, "M");
  var nMod = qr.getModuleCount();
  var anchoObjetivo = 2.5;
  var moduloSize = anchoObjetivo / nMod;
  var mitad = (nMod - 1) / 2;

  // HILO 4: un pool de nMod*nMod puntos de partida (cota superior segura del
  // total real de módulos oscuros -- de sobra, no hace falta un prepass) ya
  // barajado, del que cada módulo oscuro consume uno (poolInicio[indicePool++])
  // según lo va encontrando el loop de abajo -- ver generarPoolInicioFormacion.
  var poolInicio = generarPoolInicioFormacion(nMod * nMod, aspecto);
  var indicePool = 0;

  // EXPERIMENTO ENCUADRE: min/max reales de los módulos oscuros, para poder
  // devolver el PUNTO MEDIO DE LA CAJA DELIMITADORA (ver más abajo) — se
  // comprobó en vivo con una cruz de referencia en el centro exacto de
  // pantalla que el centro GEOMÉTRICO de la grilla (0,Y,0) SÍ quedaba ahí,
  // perfecto — lo corrido era la nube de puntos alrededor. Primer intento:
  // el PROMEDIO (centroide) de posiciones — no cambió nada visible, porque
  // un promedio pesa por DENSIDAD de puntos, no por extensión: una nube con
  // una cola larga hacia un lado sigue quedando pareja en promedio aunque su
  // silueta completa no lo esté. Lo que realmente hace falta es el punto
  // medio entre el extremo más chico y más grande de cada eje (min+max)/2 —
  // eso sí empareja los bordes visibles de la nube contra el centro de
  // pantalla, que es lo que se percibe como "centrado".
  var minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, minZ = Infinity, maxZ = -Infinity;
  // EXPERIMENTO ENCUADRE v3: posición de CADA módulo oscuro (no solo las 8
  // esquinas de la caja delimitadora) -- ver por qué en el comentario junto
  // a donde se usa (actualizarCamara): la caja podía estar centrada en
  // EXTENSIÓN y aun así verse corrida, porque la densidad de módulos dentro
  // de esa caja no es pareja (un QR no reparte sus módulos oscuros de forma
  // uniforme). El promedio de posiciones de TODOS los módulos sí sigue esa
  // densidad real.
  var posicionesModulos = [];

  for (var row = 0; row < nMod; row++) {
    for (var col = 0; col < nMod; col++) {
      if (!qr.isDark(row, col)) continue;
      var xCentro = (mitad - col) * moduloSize;
      var zCentro = (mitad - row) * moduloSize;
      var esBusc = esBuscador(row, col, nMod);
      var nivelIdx = Math.floor(Math.random() * NIVELES_ALTURA.length);
      var y = NIVELES_ALTURA[nivelIdx] + (Math.random() - 0.5) * 0.05;
      if (xCentro < minX) minX = xCentro;
      if (xCentro > maxX) maxX = xCentro;
      if (zCentro < minZ) minZ = zCentro;
      if (zCentro > maxZ) maxZ = zCentro;
      // los buscadores tienen el cubo colgando tamano*2 hacia abajo (ver
      // empujarCuboCompleto más abajo) -- se contempla aquí para que la caja
      // delimitadora incluya ese volumen extra, no solo el punto del panel.
      var yInferior = esBusc ? y - moduloSize * 0.53 * 2 : y;
      if (yInferior < minY) minY = yInferior;
      if (y > maxY) maxY = y;
      // tono: los buscadores se quedan en el extremo brillante (máximo
      // contraste para que el lector encuentre las esquinas). Los datos
      // varían, pero NO en todo el rango [0,1] — probado con jsQR que
      // dejarlos llegar hasta el extremo tenue (tono cercano a 0, muy poco
      // contraste contra el fondo) hace fallar la decodificación real
      // cuando por azar se agrupan varios módulos tenues juntos (17/20 en
      // las pruebas); recortando el mínimo a 0.35 decodificó 40/40.
      var tono = esBusc ? 0.92 + Math.random() * 0.08 : 0.35 + Math.random() * 0.65;
      var color = colorPorTono(tono);
      // tamaño y forma: probado con jsQR (ver plan) que (a) un CÍRCULO en los
      // 3 cuadrados-guía rompe la detección sin importar el radio — van como
      // cuadrado sólido, con bordes duros y rectos; y (b) que el tamaño del
      // círculo de cada módulo de dato NO puede variar, ni siquiera un poco
      // — como esta página genera la geometría de nuevo en cada carga (con
      // Math.random() de por medio), hasta un jitter chico de tamaño hizo
      // fallar la decodificación real 1 de cada 20 veces en las pruebas. Con
      // tamaño fijo (sin jitter) decodificó 20/20 de forma determinística.
      // La variedad de "estrellas más grandes/chicas" queda solo en el
      // color/brillo (tono), nunca en el tamaño.
      var tamano, modo;
      if (esBusc) {
        tamano = moduloSize * 0.53;
        modo = 1;
      } else {
        tamano = moduloSize * 0.56;
        modo = 0;
      }
      // HILO 4: una posición inicial (del pool, ya parejo/barajado) + fase al
      // azar por MÓDULO (no por vértice ni por pieza) — se reusa tal cual en
      // el nodo, su halo y (si es buscador) su cubo, para que todo lo que
      // visualmente "es" este nodo (núcleo + resplandor + cubo) viaje como un
      // solo objeto, nunca cada pieza por separado.
      var inicioFormacion = poolInicio[indicePool++];
      var faseFormacion = Math.random();
      empujarNodo(solidos, [xCentro, y, zCentro], color, tamano, modo, inicioFormacion, faseFormacion);
      // halo: mismo centro y color que el nodo real, pero un radio bastante
      // más grande y LIBRE de variar (a diferencia del nodo sólido) — el halo
      // se desvanece del todo antes de la vista cenital (ver fs_nodo), así
      // que nunca llega a existir en el instante en que importa para el
      // escaneo, y por lo tanto no hereda ninguna de las restricciones de
      // tamaño/forma que sí aplican al nodo sólido.
      // REDISEÑO NODO/CUBO: rango reducido (antes 2.2-4.0x) -- Marco pidió
      // menos alcance para el halo de las estrellas.
      var radioHalo = tamano * (1.3 + Math.random() * 1.0);
      empujarNodo(halos, [xCentro, y, zCentro], color, radioHalo, 2, inicioFormacion, faseFormacion);
      // EXPERIMENTO: cubo de alambre real solo en los buscadores — son el
      // acento estructural del QR (las 3 esquinas de referencia), así que
      // tiene sentido que sean los que se sientan "objeto 3D" en vez de
      // "estrella plana", a diferencia de los módulos de dato. centroTapa
      // es EXACTAMENTE [xCentro,y,zCentro], la misma posición del panel
      // (empujarNodo de arriba) — la tapa del cubo y el panel son la MISMA
      // cara, no dos cosas superpuestas. medioXZ = tamano (IGUAL al panel,
      // no más ancho) para que las 6 caras cierren en un cubo real, sin
      // ninguna pieza de tamaño distinto flotando (ver empujarCuboCompleto).
      if (esBusc) {
        empujarCuboCompleto(carasCubo, [xCentro, y, zCentro], tamano, tamano * 2, COL_CUBO, inicioFormacion, faseFormacion);
      }
      posicionesModulos.push([xCentro, y, zCentro]);
    }
  }

  // EXPERIMENTO ENCUADRE: punto medio de la caja delimitadora real de los
  // módulos oscuros (incluyendo el volumen del cubo de los buscadores), para
  // que la cámara apunte al centro VISUAL de este QR en particular (fijo
  // siempre, ya que la URL codificada nunca cambia) en vez del centro
  // geométrico de la grilla — ver dónde se usa, junto a CAM_TARGET más abajo.
  var centroide = isFinite(minX)
    ? [(minX + maxX) / 2, (minY + maxY) / 2, (minZ + maxZ) / 2]
    : [0, 0.55, 0];
  // EXPERIMENTO ENCUADRE v2: la caja delimitadora completa (las 8 esquinas
  // se arman donde se usa, ver actualizarCamara) -- el punto medio solo
  // (centroide, arriba) no alcanzó para centrar de verdad: un lens shift
  // fijo, calibrado mirando UNA pantalla de prueba, se vio bien ahí pero se
  // pasó para el otro lado en el navegador real del usuario (entorno de
  // renderizado distinto). En vez de un número fijo, se calcula la
  // corrección en cada cuadro proyectando esta caja con la cámara real del
  // visitante, así generaliza sin importar hardware/navegador/ventana.
  var caja = isFinite(minX) ? { minX: minX, maxX: maxX, minY: minY, maxY: maxY, minZ: minZ, maxZ: maxZ } : null;
  return { solidos: solidos, halos: halos, carasCubo: carasCubo, centroide: centroide, caja: caja, posicionesModulos: posicionesModulos };
}

// ---------- SIN construirEstrellasFondo()/construirNebulosa() aquí (existían
// en constelacion-qr-webgpu.html, sin tocar: la versión SIN fondo real sigue
// necesitándolas). Esas dos funciones eran, textualmente, "la versión MUY
// RUDIMENTARIA de fondo decorativo" que esta pieza existe para reemplazar
// por el fondo real del laboratorio — mantenerlas activas AQUÍ, además de
// redundante, resultaba contraproducente: fs_nodo las pinta en modo 2/3/4
// con alfa=1 FIJO, mezclando su borde/caída contra el colorFondo plano de
// siempre (ver el propio comentario de fs_nodo) en vez del fondo real que
// ahora se ve detrás — en vivo (ver mensaje de la sesión que armó este
// archivo) esto se notaba como parches opacos de borde duro tapando el
// campo de galaxias/Vía Láctea del laboratorio, no como una nube difusa.
// Los halos de los propios nodos del QR (modo 2, vía `halos` de
// construirConstelacion) siguen intactos — solo se quitan los agregados
// puramente decorativos y ajenos al QR. ----------

var CODIGO_WGSL = [
  // HILO 4: camRight.w era siempre 0 (relleno sin uso) — ahora lleva
  // progresoFormacion, el progreso GLOBAL (0..1) de la animación de llegada,
  // calculado en JS en dibujarFrame(). progreso.z/progreso.w también habían
  // quedado libres (los usaba vs_arista, eliminado junto con las líneas de
  // conexión) — HILO 4 (v4) los reaprovecha para el centro X/Z del eje
  // compartido del remolino (constelacion.centroide, ver posicionAnimada más
  // abajo y dibujarFrame(), que los carga UNA sola vez porque no cambian
  // cuadro a cuadro).
  "struct Uniformes { viewProj: mat4x4<f32>, progreso: vec4<f32>, camRight: vec4<f32>, camUp: vec4<f32>, };",
  "@group(0) @binding(0) var<uniform> u: Uniformes;",
  "",
  // HILO 4: progreso LOCAL (0..1) de un nodo puntual, a partir de su fase
  // (0..1, al azar, fija por nodo) y el progreso GLOBAL de la escena. Cada
  // nodo ocupa una ventana de duración "ventana" dentro de la línea de
  // tiempo global, arrancando en un punto proporcional a su fase — así el
  // cúmulo entero llega escalonado en vez de en bloque, y CUALQUIER nodo
  // llega exactamente a t=1 (posición final exacta) mucho antes de que el
  // progreso global mismo llegue a 1, así que la vista cenital nunca ve nada
  // a mitad de camino.
  // AJUSTE: Marco notó que el arranque quedaba demasiado repartido (con
  // ventana=0.4 y DURACION_FORMACION=10s, la última estrella solo
  // arrancaba a los ~6s) y pidió que TODAS arranquen dentro de un lapso de
  // 0 a 1 segundo. La ventana de arranque queda fija en (1-ventana) de la
  // línea de tiempo global -- con ventana=0.8 eso es 0.2 de la línea de
  // tiempo, así que su duración real en segundos depende directo de
  // DURACION_FORMACION (ver más abajo, junto a su declaración).
  //
  // AJUSTE 2: 25% más rápido en total (pedido explícito), y ADEMÁS con el
  // aumento de velocidad concentrado en la primera mitad del recorrido de
  // CADA estrella -- Marco sintió que el arranque quedaba "un poco lento".
  // Antes esta función devolvía un smoothstep simétrico (t*t*(3-2t)):
  // arranca Y llega con velocidad CERO, ida y vuelta parejas. Un ease-out
  // cuadrático (1-(1-t)^2) arranca con velocidad ALTA desde el primer
  // instante (nada de "arranque lento") y sigue llegando con velocidad cero
  // -- mismo aterrizaje suave de siempre, sin ningún frenazo -- pero con
  // MÁS del recorrido total ya hecho a mitad de camino (75% del camino a
  // t=0.5, contra 50% del smoothstep original): exactamente "más velocidad
  // en la primera mitad" sin tocar cómo termina.
  "fn progresoFormacion(fase: f32, progresoGlobal: f32) -> f32 {",
  "  var ventana = 0.8;",
  "  var inicioNodo = fase * (1.0 - ventana);",
  "  var t = clamp((progresoGlobal - inicioNodo) / ventana, 0.0, 1.0);",
  "  var restante = 1.0 - t;",
  "  return 1.0 - restante * restante;",
  "}",
  "",
  // HILO 4 (v3, "remolino"): hash de una sola entrada -- envuelve hash2 (más
  // abajo, WGSL no exige declarar antes de usar) armando un vec2 a partir de
  // "fase" con dos combinaciones distintas, así dos llamados con semillas
  // distintas (p.ej. fraccionInicialTamano vs. el sorteo de vueltas de
  // posicionAnimada) no quedan correlacionados entre sí.
  "fn hash1(fase: f32, semilla: f32) -> f32 {",
  "  return hash2(vec2<f32>(fase * semilla, fase * 7.0 - semilla));",
  "}",
  // HILO 4 (v3): fracción de tamaño de partida (5%-15% del final), sorteada
  // a partir de "fase" -- misma fórmula/semilla usada por un nodo Y por el
  // cubo de su buscador (ambos reciben la MISMA fase), así arrancan
  // exactamente del mismo tamaño relativo y se sienten un solo objeto.
  "fn fraccionInicialTamano(fase: f32) -> f32 {",
  "  return 0.05 + hash1(fase, 3.7) * 0.10;",
  "}",
  // HILO 4 (v3): ángulo total girado sobre el propio eje del nodo/cubo en el
  // instante "progresoNodo" (0..1), con VELOCIDAD angular en forma de campana
  // (0 al arrancar, máxima a mitad de camino, 0 otra vez al llegar -- pedido
  // explícito: "que empiece a rotar y suba la velocidad hasta la mitad del
  // recorrido y después baje"). velocidad(t) = velMax*sin(pi*t); el ángulo es
  // la integral de esa velocidad, que tiene forma cerrada:
  // angulo(t) = vueltas*pi*(1 - cos(pi*t)), con velocidad angular
  // exactamente 0 en t=1 (sin(pi*1)=0) -- el objeto termina de girar justo
  // cuando llega, sin frenazo brusco. "vueltas" se sortea entre 1, 2 o 3
  // ENTEROS a propósito (no un valor fraccionario cualquiera): con vueltas
  // entero, angulo(1) = vueltas*2*pi es (salvo el error de redondeo normal
  // de coma flotante, insignificante) EL MISMO ángulo que 0 -- cos/sin de un
  // múltiplo entero de una vuelta completa devuelven prácticamente (1,0), así
  // que right/up (en vs_nodo) o cada esquina (en vs_cara) vuelven a su
  // orientación de siempre al llegar. Con un valor fraccionario (p.ej. 1.4
  // vueltas) el buscador/círculo quedaría inclinado a mitad de vuelta
  // JUSTO en la vista cenital -- eso sí rompería la geometría validada con
  // jsQR, así que nunca se sortea un número de vueltas que no sea entero.
  "fn calcularAnguloGiro(fase: f32, progresoNodo: f32) -> f32 {",
  "  var vueltas = floor(1.0 + hash1(fase, 5.3) * 3.0);", // 1, 2 o 3 vueltas completas
  "  var t = clamp(progresoNodo, 0.0, 1.0);",
  "  return vueltas * 3.14159265 * (1.0 - cos(3.14159265 * t));",
  "}",
  // HILO 4 (v3): rota "v" alrededor del eje unitario "eje" por "angulo"
  // radianes -- fórmula de rotación de Rodrigues, la manera estándar de
  // rotar un vector alrededor de un eje arbitrario sin pasar por matrices.
  "fn rotarAlrededorDeEje(v: vec3<f32>, eje: vec3<f32>, angulo: f32) -> vec3<f32> {",
  "  var c = cos(angulo);",
  "  var s = sin(angulo);",
  "  return v * c + cross(eje, v) * s + eje * dot(eje, v) * (1.0 - c);",
  "}",
  // HILO 4 (v4): trayectoria en REMOLINO entre "inicio" y "destino" alrededor
  // de un eje COMPARTIDO por toda la constelación -- a pedido explícito de
  // Marco tras ver la v3 (ahí cada estrella giraba alrededor de su PROPIO
  // camino recto, un remolino independiente por estrella; aquí TODAS orbitan
  // el mismo eje, como un único vórtice). El eje es vertical (mundo Y) y pasa
  // por el centro real de la constelación (u.progreso.z/w -- ver el
  // comentario junto al struct Uniformes y dibujarFrame(), donde se cargan
  // esos dos floats una sola vez con constelacion.centroide.x/z).
  //
  // Se trabaja en COORDENADAS CILÍNDRICAS relativas a ese eje: cada punto
  // (inicio y destino) se descompone en radio (distancia al eje, en el plano
  // XZ) + ángulo alrededor del eje + altura (Y, sin cambios). Radio y altura
  // se interpolan directo (mix); el ángulo va del de "inicio" al de "destino"
  // por el camino MÁS CORTO (deltaAngulo normalizado a (-pi,pi]) más una
  // cantidad ENTERA de vueltas extra (1 o 2, sorteadas por "fase") en un
  // sentido ÚNICO y compartido por todas las estrellas -- así el cúmulo
  // entero se ve orbitando/convergiendo junto, como un solo remolino, no
  // como giros individuales que se cancelan entre sí. Reconstruir la
  // posición final desde radio/ángulo/altura, con esas vueltas extra siendo
  // un múltiplo ENTERO de 2*pi, converge al "destino" exacto (mismo
  // argumento de siempre: sumar una vuelta completa no cambia dónde cae
  // cos/sin) -- la garantía de escaneo no se toca. La sensación de
  // profundidad/acercamiento que se pidió sale GRATIS aquí, como propiedad
  // real de la geometría (una estrella orbitando de verdad se acerca y aleja
  // de la cámara según en qué parte de su órbita esté), no hace falta
  // simularla aparte como en la v3.
  "fn posicionAnimada(inicio: vec3<f32>, destino: vec3<f32>, fase: f32, progresoNodo: f32) -> vec3<f32> {",
  "  var ejeX = u.progreso.z;",
  "  var ejeZ = u.progreso.w;",
  "  var t = clamp(progresoNodo, 0.0, 1.0);",
  "  var relIni = vec2<f32>(inicio.x - ejeX, inicio.z - ejeZ);",
  "  var relFin = vec2<f32>(destino.x - ejeX, destino.z - ejeZ);",
  "  var radioIni = length(relIni);",
  "  var radioFin = length(relFin);",
  "  var anguloIni = atan2(relIni.y, relIni.x);",
  "  var anguloFin = atan2(relFin.y, relFin.x);",
  "  var deltaAngulo = anguloFin - anguloIni;",
  "  deltaAngulo = deltaAngulo - 6.2831853 * floor((deltaAngulo + 3.14159265) / 6.2831853);", // camino más corto, a (-pi, pi]
  // AJUSTE: Marco pidió menos vueltas (a lo sumo la mitad de las de antes,
  // más cerca de un tercio) -- antes {1,2} (promedio 1.5), ahora {0,1}
  // (promedio 0.5, un tercio exacto de 1.5). Sigue siendo un valor ENTERO a
  // propósito (0 también lo es): la garantía de que el remolino converge
  // exacto al destino depende de sumar SIEMPRE un múltiplo entero de una
  // vuelta completa, nunca una fracción.
  "  var vueltasExtra = floor(hash1(fase, 9.1) * 2.0);", // 0 o 1 vueltas EXTRA, siempre enteras
  "  var anguloActual = anguloIni + t * (deltaAngulo + vueltasExtra * 6.2831853);", // mismo sentido (+) para todas
  "  var radioActual = mix(radioIni, radioFin, t);",
  "  var alturaActual = mix(inicio.y, destino.y, t);",
  "  return vec3<f32>(ejeX + radioActual * cos(anguloActual), alturaActual, ejeZ + radioActual * sin(anguloActual));",
  "}",
  "",
  "struct EntradaNodo {",
  "  @location(0) centro: vec3<f32>,",
  "  @location(1) color: vec3<f32>,",
  "  @location(2) esquina: vec2<f32>,",
  "  @location(3) tamano: f32,",
  "  @location(4) modo: f32,",
  "  @location(5) inicio: vec3<f32>,", // HILO 4: posición de partida (campo de fondo)
  "  @location(6) fase: f32,",         // HILO 4: cuándo le toca empezar a moverse
  "};",
  "struct SalidaNodo {",
  "  @builtin(position) posicion: vec4<f32>,",
  "  @location(0) color: vec3<f32>,",
  "  @location(1) uv: vec2<f32>,",
  "  @location(2) modo: f32,",
  "  @location(3) centroMundo: vec3<f32>,",
  "};",
  "",
  "@vertex",
  "fn vs_nodo(entrada: EntradaNodo) -> SalidaNodo {",
  "  var salida: SalidaNodo;",
  "  var right: vec3<f32>;",
  "  var up: vec3<f32>;",
  "  if (entrada.modo > 0.5) {",
  // EXPERIMENTO: los buscadores (modo=1) dejan de ser billboard-a-cámara y
  // pasan a ser un panel HORIZONTAL fijo en el plano XZ — como la tapa de
  // arriba de una caja real, no un sticker que siempre mira de frente.
  // Observación real del usuario: un cubo de alambre alrededor de un
  // billboard se veía como dos objetos superpuestos (un sticker plano +
  // un marco 3D), no como un solo objeto. Con el panel ya horizontal, ES
  // la tapa del cubo (mismas 4 esquinas que su cara de arriba, ver
  // empujarCuboAlambre) — un solo objeto. Mirado exactamente desde arriba
  // (vista cenital) un plano horizontal fijo y un billboard-a-cámara con la
  // cámara mirando derecho hacia abajo dan EXACTAMENTE el mismo resultado
  // (un billboard, en ese caso límite, ya queda horizontal solo) — por eso
  // la geometría en el instante de escanear no cambia un ápice.
  "    right = vec3<f32>(1.0, 0.0, 0.0);",
  "    up = vec3<f32>(0.0, 0.0, 1.0);",
  "  } else {",
  "    right = u.camRight.xyz;",
  "    up = u.camUp.xyz;",
  "  }",
  // HILO 4 (v3): centro ANIMADO -- ya no una línea recta, viaja en REMOLINO
  // de "inicio" (campo de fondo) a "centro" (posición final validada) según
  // el progreso local de ESTE nodo (ver posicionAnimada). Con progresoNodo=
  // 1.0 exacto sigue llegando a "centro" bit a bit (la garantía de escaneo de
  // siempre no cambia). El tamaño también arranca chico (5%-15% del final,
  // al azar por nodo) y crece con el mismo progreso -- para que se sienta una
  // estrella puntual que crece al acercarse. AHORA también aplica al panel
  // del buscador (modo=1, antes quedaba a tamaño fijo): el cubo (vs_cara)
  // pasó a escalar en sincronía usando la MISMA fase, así que tapa y paredes
  // siguen creciendo juntas sin desarmarse.
  "  var progresoNodo = progresoFormacion(entrada.fase, u.camRight.w);",
  "  var centroAnimado = posicionAnimada(entrada.inicio, entrada.centro, entrada.fase, progresoNodo);",
  "  var tamanoAnimado = mix(entrada.tamano * fraccionInicialTamano(entrada.fase), entrada.tamano, progresoNodo);",
  // HILO 4 (v3): "rodar sobre su propio eje" -- se rota la base right/up
  // alrededor de la dirección de viaje (inicio -> centro), con la misma
  // rampa de velocidad angular (arranca, acelera hasta la mitad, frena al
  // llegar) que usan las caras del cubo -- así un nodo billboard tumba en 3D
  // de verdad (se ve de canto a mitad de giro, como una moneda), no solo gira
  // plano en pantalla, y el cubo entero (tapa + paredes) gira sobre ESTE
  // MISMO eje (ver vs_cara) para que se sientan un solo objeto tumbando.
  "  var ejeGiro = normalize(entrada.centro - entrada.inicio);",
  "  if (length(entrada.centro - entrada.inicio) < 0.0001) { ejeGiro = vec3<f32>(0.0, 1.0, 0.0); }",
  "  var anguloGiro = calcularAnguloGiro(entrada.fase, progresoNodo);",
  "  right = rotarAlrededorDeEje(right, ejeGiro, anguloGiro);",
  "  up = rotarAlrededorDeEje(up, ejeGiro, anguloGiro);",
  "  var mundo = centroAnimado + (right * entrada.esquina.x + up * entrada.esquina.y) * tamanoAnimado;",
  "  salida.posicion = u.viewProj * vec4<f32>(mundo, 1.0);",
  "  salida.color = entrada.color;",
  "  salida.uv = entrada.esquina;",
  "  salida.modo = entrada.modo;",
  "  salida.centroMundo = centroAnimado;",
  "  return salida;",
  "}",
  "",
  // funciones de ruido reutilizables (hash + ruido de valor interpolado
  // bilinealmente) — sin texturas, todo matemática, usado para darle
  // textura orgánica a las galaxias.
  "fn hash2(p: vec2<f32>) -> f32 {",
  "  return fract(sin(dot(p, vec2<f32>(12.9898, 78.233))) * 43758.5453);",
  "}",
  "fn ruidoValor(p: vec2<f32>) -> f32 {",
  "  var i = floor(p);",
  "  var f = fract(p);",
  "  var a = hash2(i);",
  "  var b = hash2(i + vec2<f32>(1.0, 0.0));",
  "  var c = hash2(i + vec2<f32>(0.0, 1.0));",
  "  var d = hash2(i + vec2<f32>(1.0, 1.0));",
  "  var u = f * f * (3.0 - 2.0 * f);",
  "  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);",
  "}",
  "",
  // modo 1 = cuadrados-guía del QR, SIN máscara circular ni borde suave: los
  // lectores de QR necesitan bordes duros y rectos ahí para reconocer su
  // proporción 1:1:3:1:1 (confirmado con jsQR — un círculo, sin importar el
  // radio, rompe la detección de esos 3 cuadrados). modo 0 = nodos de datos
  // del QR, círculo con borde suave (sin este problema). modo 2 = halo o
  // nebulosa: decorativo, se funde hacia el fondo, titila, y se desvanece
  // del todo al llegar a la vista cenital — nunca interviene en el escaneo.
  "@fragment",
  "fn fs_nodo(entrada: SalidaNodo) -> @location(0) vec4<f32> {",
  "  var colorFondo = vec3<f32>(0.0314, 0.0314, 0.0392);",
  // modo 3 = galaxia: espiral procedural (núcleo + brazos + motas de
  // estrellas), armada solo con matemática (sin texturas). Los parámetros
  // (cantidad de brazos, qué tan enrollada, rotación) salen de un hash de
  // la propia posición del objeto, así cada galaxia sale distinta sin
  // necesitar ningún atributo de vértice extra. No titila (una galaxia
  // entera no debería "parpadear" como una estrella) — solo se desvanece
  // por cámara, igual que todo lo demás en modo>1.5.
  // modo 4 = nube de nebulosa simple (sin espiral): mismo criterio de caída
  // exponencial que la galaxia (ver más abajo) — separada del halo de nodo
  // (modo 2, que es chico y ya se veía bien) para poder ajustar el tamaño
  // grande de estas nubes sin arriesgar los halos que ya estaban aprobados.
  "  if (entrada.modo > 3.5) {",
  "    var radioN = length(entrada.uv);",
  "    var desvanecidoN = 1.0 - smoothstep(0.72, 1.0, u.progreso.x);",
  "    var caidaN = exp(-radioN * radioN * 3.0);",
  "    var intensidadN = caidaN * desvanecidoN;",
  "    if (intensidadN < 0.015) { discard; }",
  "    var colorNube = mix(colorFondo, entrada.color, clamp(intensidadN, 0.0, 1.0));",
  "    return vec4<f32>(colorNube, 1.0);",
  "  }",
  "  if (entrada.modo > 2.5) {",
  "    var radio = length(entrada.uv);",
  "    var desvanecidoG = 1.0 - smoothstep(0.72, 1.0, u.progreso.x);",
  // caída EXPONENCIAL (tipo gaussiana), no smoothstep — un smoothstep tiene
  // una forma de "meseta que cae"; a este tamaño tan grande esa caída se
  // notaba como el borde recto de una esfera. Una exponencial no tiene
  // ningún punto de corte, se va apagando de a poco todo el camino, que es
  // como se ve de verdad un brillo/nebulosa difusa.
  "    var caidaRadial = exp(-radio * radio * 3.0);",
  "    if (caidaRadial * desvanecidoG < 0.015) { discard; }",
  "    var semilla = entrada.centroMundo.xz;",
  "    var numBrazos = 2.0 + floor(3.0 * fract(sin(dot(semilla, vec2<f32>(4.898, 7.23))) * 23421.6));",
  "    var apretado = 2.2 + 2.2 * fract(sin(dot(semilla, vec2<f32>(9.51, 3.14))) * 19483.2);",
  "    var faseGiro = 6.2831853 * fract(sin(dot(semilla, vec2<f32>(1.23, 5.67))) * 12345.6);",
  "    var angulo = atan2(entrada.uv.y, entrada.uv.x);",
  "    var anguloBase = angulo - apretado * log(max(radio, 0.02)) + faseGiro;",
  // ruido fractal (2 octavas) que deforma el ángulo de la espiral, para que
  // los brazos se vean orgánicos/irregulares en vez de una curva matemática
  // perfecta — así se acercan más a una foto real que a un diagrama
  "    var ruidoGrande = ruidoValor(entrada.uv * 3.5 + semilla);",
  "    var ruidoChico = ruidoValor(entrada.uv * 9.0 + semilla * 1.7);",
  "    var textura = ruidoGrande * 0.7 + ruidoChico * 0.3;",
  "    var perturbacion = (textura - 0.5) * 1.4;",
  "    var anguloEspiral = anguloBase + perturbacion;",
  "    var brazos = pow(max(0.0, cos(anguloEspiral * numBrazos)), 1.5);",
  // carriles de polvo oscuro: una banda desfasada respecto a los brazos
  // brillantes que RESTA brillo en vez de sumar — es lo que en las fotos
  // reales se ve como las líneas oscuras junto a los brazos luminosos
  "    var anguloPolvo = anguloBase + (3.14159265 / numBrazos) + perturbacion;",
  "    var polvo = pow(max(0.0, cos(anguloPolvo * numBrazos)), 3.0) * clamp(radio * 2.2, 0.0, 1.0);",
  "    var nucleo = exp(-radio * radio * 14.0);",
  "    var resplandorNucleo = exp(-radio * radio * 3.0) * 0.35;",
  "    var motas = pow(ruidoValor(entrada.uv * 55.0 + semilla * 2.3), 10.0) * 2.5;",
  "    var brillo = nucleo * 1.7 + resplandorNucleo + brazos * caidaRadial * (0.55 + 0.5 * textura) + motas * caidaRadial;",
  "    brillo = brillo * (1.0 - polvo * 0.7);",
  // color: no un solo degradado, sino una mezcla de 3 familias — frío (el tono
  // asignado a esta galaxia), cálido/rosado (zonas de formación estelar,
  // donde el ruido es alto) y blanco cálido en el núcleo — como en fotos
  // reales, donde una misma galaxia tiene varios tonos a la vez
  "    var colorNucleo = vec3<f32>(1.0, 0.93, 0.78);",
  "    var colorCalido = vec3<f32>(0.95, 0.50, 0.62);",
  "    var colorFrio = entrada.color;",
  "    var colorBrazo = mix(colorFrio, colorCalido, clamp(ruidoGrande * 1.3 - 0.15, 0.0, 1.0));",
  "    var colorMezcla = mix(colorBrazo, colorNucleo, clamp(nucleo * 1.6 + resplandorNucleo * 0.7, 0.0, 1.0));",
  "    var intensidadG = clamp(brillo, 0.0, 1.0) * caidaRadial * desvanecidoG;",
  "    if (intensidadG < 0.02) { discard; }",
  "    var colorGalaxia = mix(colorFondo, colorMezcla, intensidadG);",
  "    return vec4<f32>(colorGalaxia, 1.0);",
  "  }",
  "  if (entrada.modo > 1.5) {",
  "    var d2 = length(entrada.uv);",
  // ojo: a diferencia del círculo normal (que hace "discard" antes de d>1,
  // así que su smoothstep nunca evalúa fuera de [0,1]), aquí d2 SÍ puede
  // pasar de 1.0 (hasta ~1.41 en las esquinas del billboard, que no se
  // recorta) — smoothstep con el rango invertido (1.0, 0.0) evaluado fuera
  // de ese rango es comportamiento indefinido según el estándar, y eso se
  // vio como manchas cuadradas/restos en vez de un círculo suave. Se arma a
  // mano con un clamp explícito para que quede bien definido siempre.
  "    var t = clamp(1.0 - d2, 0.0, 1.0);",
  "    var mezclaHalo = t * t * (3.0 - 2.0 * t);",
  "    var desvanecido = 1.0 - smoothstep(0.72, 1.0, u.progreso.x);",
  // el borde visible (quién hace discard) depende SOLO de la posición y del
  // desvanecido por cámara — nunca del titileo. Si el titileo también
  // corriera el punto de corte, el radio del halo "respira" con el tiempo y
  // eso se ve, contra otro halo superpuesto o el fondo, como una franja que
  // aparece y desaparece. El titileo se aplica después, solo al brillo del
  // color, sin mover el borde.
  "    var base = mezclaHalo * desvanecido;",
  "    if (base < 0.02) { discard; }",
  "    var fase = fract(sin(dot(entrada.centroMundo.xz, vec2<f32>(12.9898, 78.233))) * 43758.5453);",
  "    var titileo = 0.8 + 0.2 * sin(u.progreso.y * 1.6 + fase * 6.2831853);",
  // EXPERIMENTO: BUG real encontrado en revisión (no un tema de gusto) —
  // esto mezclaba contra colorFondo y devolvía alfa=1.0 SIEMPRE, así que en
  // casi todo el radio del halo (donde intensidad es baja, no solo en el
  // borde) el píxel pintaba OPACO un violeta casi idéntico a colorFondo.
  // Cuando el fondo era ese mismo plano, no se notaba (coincidían); con el
  // fondo real del laboratorio detrás, ese parche opaco tapaba todo lo que
  // hubiera ahí en una forma ovalada/difusa — el "óvalo feo" reportado por
  // el usuario. Mismo criterio que ya usa fs_cara: alfa real
  // (premultiplicado), sin mezclar contra ningún color de fondo fijo, con
  // blend en pipelineHalo (ver el JS) para que componga bien contra lo que
  // sea que haya detrás.
  // REDISEÑO NODO/CUBO: intensidad reducida (antes sin este factor) -- mismo
  // pedido de Marco, menos intensidad además de menos alcance (radioHalo).
  "    var intensidad = clamp(base * titileo, 0.0, 1.0) * 0.6;",
  "    return vec4<f32>(entrada.color * intensidad, intensidad);",
  "  }",
  "  if (entrada.modo > 0.5) {",
  // EXPERIMENTO: el buscador se veía "muy plano" en la vista de constelación
  // (bisel de apenas 14%, prácticamente un cuadrado sólido de un solo tono)
  // — observación real del usuario, no un defecto técnico: en la vista
  // CENITAL ese aspecto plano es exactamente lo correcto (es la geometría ya
  // validada con jsQR: relleno sólido y opaco en TODA la superficie, sin
  // discard/máscara, sin variar tono/tamaño) así que NUNCA se toca esa
  // versión. Lo que cambia es solo la vista en ÁNGULO, donde no hay ninguna
  // restricción de escaneo: ahí se agrega un tratamiento "chip"/panel
  // futurista (marco más brillante cerca del borde, esquinas acentuadas tipo
  // retícula, brillo fijo sin animación) que se funde hacia el plano de
  // siempre a medida que la cámara se acerca a la vista cenital — mismo umbral
  // (smoothstep 0.7,1.0) que ya usan aristas y halos, así el fundido de las
  // tres cosas se siente coordinado en vez de cada una a su propio ritmo.
  "    var d1 = max(abs(entrada.uv.x), abs(entrada.uv.y));", // distancia "cuadrada" al centro, 0 en el medio, 1 en el borde real del quad
  "    var fundido1 = smoothstep(0.7, 1.0, u.progreso.x);",
  // versión PLANA (cenital) — idéntica, carácter por carácter, a la fórmula
  // original: nunca se edita esta línea sin volver a validar el escaneo.
  "    var brilloPlano = 0.86 + 0.14 * clamp(0.5 - 0.5 * (entrada.uv.x + entrada.uv.y) / 1.4142, 0.0, 1.0);",
  "    var colorPlano = entrada.color * brilloPlano;",
  // versión "chip 3D" (ángulo) — puramente decorativa, nunca cambia el
  // relleno sólido en sí (sigue siendo el mismo quad sin discard, mismo
  // tamaño fijo): marco brillante cerca del borde + esquinas realzadas.
  // SIN pulso/titileo -- se sacó a pedido del usuario ("un sticker que
  // titila" se sentía como el elemento más "pegado encima" en vez de parte
  // del mismo objeto); un brillo fijo se integra mejor ahora que este panel
  // es la tapa real del cubo (ver vs_nodo) y no un sticker de cara a
  // cámara.
  "    var marco1 = smoothstep(0.65, 0.94, d1);",
  "    var esquina1 = smoothstep(0.7, 0.98, abs(entrada.uv.x)) * smoothstep(0.7, 0.98, abs(entrada.uv.y));",
  "    var brillo3D = clamp(0.55 + 0.55 * (1.0 - d1) + marco1 * 0.5 + esquina1 * 0.45, 0.0, 1.6);",
  "    var color3D = entrada.color * brillo3D;",
  "    var colorFinal = mix(color3D, colorPlano, fundido1);",
  "    return vec4<f32>(colorFinal, 1.0);",
  "  }",
  // EXPERIMENTO: los módulos de dato (círculos) se veían "muy obviamente
  // círculos" (un disco liso) y muy planos comparados con el cubo de los
  // buscadores — observación real del usuario. Mismo criterio que ya se usó
  // ahí: la vista CENITAL (mezcla/colorNodo de abajo) es la geometría YA
  // VALIDADA con jsQR — mismo tamaño, mismo borde suave, nunca se toca. Solo
  // la vista en ÁNGULO gana un tratamiento nuevo, fundido hacia la de
  // siempre con el mismo umbral que el resto (aristas/halos/buscador).
  "  var d = length(entrada.uv);",
  "  if (d > 1.0) { discard; }",
  "  var fundido0 = smoothstep(0.7, 1.0, u.progreso.x);",
  // versión PLANA (cenital) — idéntica, carácter por carácter, a la fórmula
  // original: nunca se edita esta línea sin volver a validar el escaneo.
  "  var mezclaPlano0 = smoothstep(1.0, 0.55, d);",
  "  var colorPlano0 = mix(colorFondo, entrada.color, mezclaPlano0);",
  // REDISEÑO NODO/CUBO (ángulo), 2ª vuelta: a pedido de Marco, en vez de una
  // fórmula de resplandor inventada para este archivo, se porta LITERAL la
  // técnica que ya usan las estrellas de fondo (wgsl/estrellas-chicas.wgsl y
  // wgsl/estrellas-grandes.wgsl, del laboratorio de galaxias unificado) --
  // así los nodos de la constelación se leen como hechas del mismo material
  // que las estrellas reales detrás, en vez de un efecto aparte. Núcleo+halo
  // (mismos coeficientes que estrellas-grandes) siempre presente -- ya de
  // por sí parecido a una "estrella chica" simple -- más, en un subconjunto
  // de nodos (sorteado por hash, fijo por nodo), uno de los 3 "estilos"
  // extra de estrellas-grandes (picos de difracción / halo con anillo /
  // resplandor irregular). SIN la viñeta final que usa estrellas-grandes
  // (`1-smoothstep(0.78,1.0,d)`): ahí funciona porque esa capa es
  // alfa-blended (se funde a transparente); aquí el pipeline es OPACO, así
  // que esa viñeta forzaría el color a negro puro justo en el borde --
  // misma clase de bug que el borde negro que se acaba de sacar. Sin la
  // viñeta, el propio nucleo0+halo0 ya se apaga solo hacia d=1 (nunca llega
  // a negro puro, mismo criterio que la corrección anterior).
  "  var angulo0 = atan2(entrada.uv.y, entrada.uv.x);",
  "  var nucleo0 = exp(-d * d * 5.0);",
  // REDISEÑO NODO/CUBO: halo reducido (antes coef. 3.5 / *0.55) -- a pedido
  // de Marco, menos alcance (coeficiente más alto = cae más rápido) y menos
  // intensidad.
  "  var halo0 = exp(-d * d * 6.0) * 0.3;",
  "  var semillaEstilo0 = fract(sin(dot(entrada.centroMundo.xz, vec2<f32>(21.35, 47.81))) * 33184.5453);",
  "  var brilloExtra0 = 0.0;",
  "  if (semillaEstilo0 > 0.8) {",
  "    var anguloResplandor0 = fract(sin(dot(entrada.centroMundo.xz, vec2<f32>(5.3, 9.1))) * 7614.32) * 3.14159265;",
  "    var picos0 = pow(abs(cos(2.0 * (angulo0 - anguloResplandor0))), 24.0);",
  "    brilloExtra0 = picos0 * exp(-d * 2.2) * 0.9;",
  "  } else if (semillaEstilo0 > 0.6) {",
  "    var anillo0 = exp(-pow((d - 0.55) * 6.0, 2.0));",
  "    brilloExtra0 = anillo0 * 0.35;",
  "  } else if (semillaEstilo0 > 0.4) {",
  "    var semillaRuido0 = fract(sin(dot(entrada.centroMundo.xz, vec2<f32>(3.7, 8.2))) * 5231.7);",
  "    var ruidoAngular0 = ruidoValor(vec2<f32>(cos(angulo0), sin(angulo0)) * 3.0 + vec2<f32>(semillaRuido0, semillaRuido0 * 1.7));",
  "    var dIrregular0 = d * (0.8 + 0.4 * ruidoAngular0);",
  "    brilloExtra0 = exp(-dIrregular0 * dIrregular0 * 3.0) * 0.5;",
  "  }",
  "  var intensidad0 = clamp(nucleo0 * 1.4 + halo0 + brilloExtra0, 0.0, 3.0);",
  // alfa real (mismo criterio que el halo, modo>1.5, unas líneas más
  // abajo: alfa = intensidad recortada a [0,1], color YA multiplicado por
  // la intensidad -- premultiplied de verdad, no un vec4 con 1.0 fijo) --
  // esto es lo que hace que el borde se funda con lo que sea que haya
  // detrás en vez de recortarse en seco contra un negro que no pertenece
  // a la escena. En cenital (fundido0=1) alfaFinal0 da exactamente 1.0
  // (mismo mix-a-extremo-exacto que colorFinal0), así que ahí sigue
  // siendo el disco opaco de siempre, bit a bit.
  "  var alfaEstrella0 = clamp(intensidad0, 0.0, 1.0);",
  "  var colorEstrella0 = entrada.color * intensidad0;",
  "  var alfaFinal0 = mix(alfaEstrella0, 1.0, fundido0);",
  "  var colorFinal0 = mix(colorEstrella0, colorPlano0, fundido0);",
  "  return vec4<f32>(colorFinal0, alfaFinal0);",
  "}",
  "",
  // EXPERIMENTO v3: caras decorativas del cubo (todo el cubo salvo la tapa,
  // que sigue siendo el nodo modo=1 de siempre). A diferencia de vs_nodo, aquí
  // "posicionMundo" es la esquina FINAL ya fija por vértice (cada cara la
  // arma empujarCaraCubo() con sus 4 esquinas reales, no un billboard ni un
  // plano con offset) — así cada una de las 4 caras laterales tiene su propia
  // orientación fija (una por dirección), no una sola orientación como el
  // panel de arriba. El "uv" es el mismo esquema -1..1 de marco/esquina que
  // ya usa fs_nodo modo=1, reusado tal cual para que las 6 caras del cubo se
  // vean como material del mismo objeto. HILO 4 (v3) agrega el remolino/
  // escala/giro sobre esa geometría fija -- ver el comentario dentro de
  // vs_cara.
  "struct EntradaCara {",
  "  @location(0) posicionMundo: vec3<f32>,", // esquina FINAL, validada -- nunca se toca
  "  @location(1) color: vec3<f32>,",
  "  @location(2) uv: vec2<f32>,",
  "  @location(3) centroCuboInicial: vec3<f32>,", // HILO 4 (v3): centro del cubo, punto de partida
  "  @location(4) centroCubo: vec3<f32>,",        // HILO 4 (v3): centro del cubo, punto final
  "  @location(5) fase: f32,",
  "  @location(6) normal: vec3<f32>,", // REDISEÑO NODO/CUBO: normal REAL de la cara, fija por construcción
  "};",
  "struct SalidaCara {",
  "  @builtin(position) posicion: vec4<f32>,",
  "  @location(0) color: vec3<f32>,",
  "  @location(1) uv: vec2<f32>,",
  "  @location(2) normal: vec3<f32>,",
  "};",
  "",
  "@vertex",
  "fn vs_cara(entrada: EntradaCara) -> SalidaCara {",
  "  var salida: SalidaCara;",
  // HILO 4 (v3): el cubo entero (30 vértices, 5 caras) comparte el MISMO
  // centro animado (mismo remolino que su tapa, ver vs_nodo/posicionAnimada:
  // centroCuboInicial/centroCubo difieren de inicio/centro de la tapa solo en
  // un offset vertical fijo, así que su vector inicio->final es IDÉNTICO al
  // de la tapa y el remolino sale coordinado), la MISMA fracción de tamaño
  // inicial (fraccionInicialTamano, misma fase) y el MISMO ángulo de giro
  // sobre el MISMO eje (centroCubo - centroCuboInicial == centro - inicio de
  // la tapa) -- por eso tapa y paredes escalan/rotan/viajan como un único
  // cuerpo rígido, nunca se deforman entre sí.
  "  var progresoNodo = progresoFormacion(entrada.fase, u.camRight.w);",
  "  var centroAnimado = posicionAnimada(entrada.centroCuboInicial, entrada.centroCubo, entrada.fase, progresoNodo);",
  "  var escalaAnimada = mix(fraccionInicialTamano(entrada.fase), 1.0, progresoNodo);",
  "  var ejeGiro = normalize(entrada.centroCubo - entrada.centroCuboInicial);",
  "  if (length(entrada.centroCubo - entrada.centroCuboInicial) < 0.0001) { ejeGiro = vec3<f32>(0.0, 1.0, 0.0); }",
  "  var anguloGiro = calcularAnguloGiro(entrada.fase, progresoNodo);",
  "  var offsetDesdeCentro = (entrada.posicionMundo - entrada.centroCubo) * escalaAnimada;",
  "  var offsetGirado = rotarAlrededorDeEje(offsetDesdeCentro, ejeGiro, anguloGiro);",
  "  var posAnimada = centroAnimado + offsetGirado;",
  "  salida.posicion = u.viewProj * vec4<f32>(posAnimada, 1.0);",
  "  salida.color = entrada.color;",
  "  salida.uv = entrada.uv;",
  // REDISEÑO NODO/CUBO: la normal rota con el MISMO eje/ángulo que la
  // posición -- si no, la iluminación de fs_cara quedaría "pegada" a la
  // orientación de reposo mientras el cubo tumba durante la formación (Hilo
  // 4), en vez de seguir siendo luz real sobre la cara real en cada
  // instante. La escala no afecta a una normal (solo la rotación).
  "  salida.normal = rotarAlrededorDeEje(entrada.normal, ejeGiro, anguloGiro);",
  "  return salida;",
  "}",
  "",
  "@fragment",
  "fn fs_cara(entrada: SalidaCara) -> @location(0) vec4<f32> {",
  // REDISEÑO NODO/CUBO, 4ª vuelta: a pedido de Marco -- "mismas
  // características que las estrellas, pero en forma cúbica". Se abandona
  // la iluminación real por cara (vuelta anterior) y se reusa LITERAL la
  // misma matemática núcleo+halo de fs_nodo modo=0 (mismos coeficientes ya
  // reducidos ahí mismo), evaluada sobre el uv local de CADA cara (mismo
  // cuadrado -1..1 de siempre) -- así cada cara brilla como una estrella
  // (núcleo brillante + halo corto que se apaga solo, sin negro forzado,
  // mismo criterio que el círculo) pero la GEOMETRÍA sigue siendo el cubo
  // real de siempre (caras planas, bordes rectos) -- solo cambia CÓMO se
  // ilumina cada cara, no su forma. La normal (entrada.normal) queda sin
  // usar aquí -- se deja en el vértice por si hace falta retomar iluminación
  // real más adelante, no hace falta sacarla del buffer para esto.
  "  var d3 = length(entrada.uv);",
  "  var nucleo3 = exp(-d3 * d3 * 5.0);",
  "  var halo3 = exp(-d3 * d3 * 6.0) * 0.3;",
  "  var intensidad3 = clamp(nucleo3 * 1.4 + halo3, 0.0, 3.0);",
  "  var alfaEstrella3 = clamp(intensidad3, 0.0, 1.0);",
  "  var colorEstrella3 = entrada.color * intensidad3;",
  // se desvanece del todo al acercarse a la vista cenital -- mismo umbral
  // (0.7,1.0) de siempre, combinado multiplicativamente con el propio alfa
  // de la estrella (premultiplicado: color y alfa escalados por el MISMO
  // factor extra, para que la mezcla siga siendo válida en cualquier punto
  // intermedio, no solo en los dos extremos).
  "  var desvanecido = 1.0 - smoothstep(0.7, 1.0, u.progreso.x);",
  "  var alfa = alfaEstrella3 * desvanecido;",
  "  if (alfa < 0.02) { discard; }",
  "  return vec4<f32>(colorEstrella3 * desvanecido, alfa);",
  "}"
].join("\n");

// ---------- fallback sin WebGPU: QR estático, generado con la MISMA
// librería qrcode.js ya embebida (generarQR reusa exactamente su API, no hay
// una segunda implementación de la codificación QR) y volcado a SVG con su
// propio createSvgTag() — clásico negro sobre blanco, el más robusto para
// cualquier lector, ya que aquí no hay lugar para las pruebas de tono/tamaño
// que sí se hicieron para la versión en constelación. Se muestra si falta
// navigator.gpu, si requestAdapter()/requestDevice() fallan, o si cualquier
// otro paso de main() lanza una excepción (ver el .catch al final). ----------
// URL real que codifica el QR (nodos de la constelación Y fallback estático).
// Percent-encoded a propósito: el encoder qrcode.js vendorizado más arriba
// calcula el largo del segmento de bytes con la longitud del string de JS
// (unidades UTF-16), no con los bytes UTF-8 reales -- con una tilde literal
// ("González") ese conteo queda corto en 1 byte y el QR resultante, aunque
// se ve bien formado, decodifica a contenido vacío/corrupto (confirmado con
// jsQR). Percent-encoded, todo el string es ASCII puro y ese bug no aplica.
var URL_COMPLETA = "https://www.linkedin.com/in/marco-avaria-gonz%C3%A1lez-134801194";

function mostrarFallbackQR(motivo) {
  console.warn("[constelacion-qr-con-fondo] fallback a QR estático:", motivo);
  var lienzoQR = document.getElementById("lienzoQR");
  if (lienzoQR) lienzoQR.style.display = "none";
  var contenedor = document.getElementById("fallbackQR");
  if (contenedor) {
    var qr = generarQR(URL_COMPLETA, "M");
    contenedor.innerHTML = qr.createSvgTag({ cellSize: 6, margin: 16 });
    contenedor.style.display = "flex";
  }
  // fallback: el QR queda formado desde el primer instante (no hay clic que
  // dispare la transición cenital), así que el botón se muestra directo.
  var botonEnlaceFallback = document.getElementById("botonEnlaceQR");
  if (botonEnlaceFallback) botonEnlaceFallback.classList.add("visible");
  estadoQR("Tu navegador no pudo iniciar WebGPU, así que este es el QR en su versión simple (igual de escaneable).");
}

async function main() {
  if (!("gpu" in navigator)) { mostrarFallbackQR("navigator.gpu no existe"); return; }
  var adapter = await navigator.gpu.requestAdapter();
  if (!adapter) { mostrarFallbackQR("requestAdapter() devolvió null"); return; }
  var device = await adapter.requestDevice();
  device.lost.then(function (info) { estadoQR("El device se perdió: " + info.message); });
  // diagnóstico: si un shader/pipeline no compila, WebGPU no siempre lo
  // lanza como excepción de JS (createShaderModule/createRenderPipeline
  // pueden "tener éxito" y reportar el error de forma asíncrona) — esto lo
  // muestra en el panel de estado en vez de fallar en silencio
  var erroresGPU = [];
  device.addEventListener("uncapturederror", function (evento) {
    erroresGPU.push(evento.error.message);
    estadoQR("ERROR DE GPU: " + erroresGPU.join(" | "));
    console.error("[constelacion-qr-con-fondo] error de GPU:", evento.error);
  });

  var canvas = document.getElementById("lienzoQR");
  var dpr = Math.min(window.devicePixelRatio || 1, 2);
  function ajustarTamano() {
    canvas.width = Math.floor(window.innerWidth * dpr);
    canvas.height = Math.floor(window.innerHeight * dpr);
  }
  ajustarTamano();

  var contexto = canvas.getContext("webgpu");
  var formato = navigator.gpu.getPreferredCanvasFormat();
  // "premultiplied" (antes "opaque"): este canvas queda ARRIBA del canvas del
  // laboratorio de galaxias (mismo <body>, apilados por CSS) — con alfa
  // premultiplicado, el navegador compone este canvas sobre el de abajo
  // usando el alfa que de verdad quede en su textura. Ver el resto del
  // razonamiento junto a `clearValue` en dibujarFrame(): con esto solo, todo
  // lo que HOY se dibuja aquí sigue dibujándose exactamente igual (a=1 en
  // cada nodo/arista/halo, ninguno de esos cambia) — el único efecto nuevo es
  // que el "vacío" (donde hoy no se dibuja nada) deja de ser plano y pasa a
  // dejar ver lo que hay detrás.
  contexto.configure({ device: device, format: formato, alphaMode: "premultiplied" });

  // HILO 4: aspecto real del canvas -- generarPoolInicioFormacion() lo
  // necesita para que el plano de partida cubra el mismo encuadre que la
  // pantalla del visitante, no un aspecto genérico.
  var constelacion = construirConstelacion(URL_COMPLETA, canvas.width / canvas.height);
  // sin estrellas/nebulosa decorativas propias aquí (ver el comentario junto a
  // construirConstelacion): el fondo rico ahora lo pone el laboratorio de
  // galaxias detrás, a través de la transparencia — solidos/halos son
  // exclusivamente la red del QR.
  var nodosCompletos = constelacion.solidos;
  var halosCompletos = constelacion.halos;

  var datosNodos = new Float32Array(nodosCompletos);
  var datosHalos = new Float32Array(halosCompletos);
  var datosCaras = new Float32Array(constelacion.carasCubo); // EXPERIMENTO: 5 caras decorativas del cubo por buscador
  var vertsNodos = datosNodos.length / 14; // HILO 4: 14 floats/vértice (antes 10)
  var vertsHalos = datosHalos.length / 14;
  var vertsCaras = datosCaras.length / 18; // REDISEÑO NODO/CUBO: 18 floats/vértice (antes 15, +normal)

  var bufferNodos = device.createBuffer({
    size: Math.max(datosNodos.byteLength, 4),
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });
  device.queue.writeBuffer(bufferNodos, 0, datosNodos);
  var bufferHalos = device.createBuffer({
    size: Math.max(datosHalos.byteLength, 4),
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });
  device.queue.writeBuffer(bufferHalos, 0, datosHalos);
  var bufferCaras = device.createBuffer({
    size: Math.max(datosCaras.byteLength, 4),
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
  });
  device.queue.writeBuffer(bufferCaras, 0, datosCaras);

  var uniformBuffer = device.createBuffer({
    size: 16 * 4 + 4 * 4 + 4 * 4 + 4 * 4, // mat4x4<f32> + 3 vec4<f32>
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
  });

  var modulo = device.createShaderModule({ code: CODIGO_WGSL });
  modulo.getCompilationInfo().then(function (info) {
    var problemas = info.messages.filter(function (m) { return m.type === "error" || m.type === "warning"; });
    if (problemas.length > 0) {
      estadoQR("WGSL " + problemas[0].type.toUpperCase() + " (línea " + problemas[0].lineNum + "): " + problemas.map(function (m) { return m.message; }).join(" | "));
      console.error("[constelacion-qr-con-fondo] problemas de compilación WGSL:", problemas);
    }
  });
  var vertexLayoutNodo = {
    // HILO 4: 14 floats/vértice (antes 10) — se agregan inicio(3)+fase(1),
    // ver empujarNodo().
    arrayStride: 14 * 4,
    attributes: [
      { shaderLocation: 0, offset: 0, format: "float32x3" },
      { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
      { shaderLocation: 2, offset: 6 * 4, format: "float32x2" },
      { shaderLocation: 3, offset: 8 * 4, format: "float32" },
      { shaderLocation: 4, offset: 9 * 4, format: "float32" },
      { shaderLocation: 5, offset: 10 * 4, format: "float32x3" },
      { shaderLocation: 6, offset: 13 * 4, format: "float32" }
    ]
  };
  var vertexLayoutCara = {
    // HILO 4 (v3): 15 floats/vértice (antes 12) — posicionInicial(3)+fase(1)
    // pasan a ser centroCuboInicial(3)+centroCubo(3)+fase(1), ver
    // empujarCaraCubo(). REDISEÑO NODO/CUBO: +3 floats más (18 en total) —
    // normal REAL de la cara, para iluminación de verdad en fs_cara en vez
    // del truco 2D "chip".
    arrayStride: 18 * 4,
    attributes: [
      { shaderLocation: 0, offset: 0, format: "float32x3" },
      { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
      { shaderLocation: 2, offset: 6 * 4, format: "float32x2" },
      { shaderLocation: 3, offset: 8 * 4, format: "float32x3" },
      { shaderLocation: 4, offset: 11 * 4, format: "float32x3" },
      { shaderLocation: 5, offset: 14 * 4, format: "float32" },
      { shaderLocation: 6, offset: 15 * 4, format: "float32x3" },
    ]
  };
  // layout explícito compartido entre los dos pipelines (nodos y aristas):
  // con layout:"auto" cada pipeline generaría su propio layout opaco, no
  // intercambiable entre sí para el mismo bind group (lección de la versión
  // anterior, ver PROCESO-TECNICO.md de las flores)
  var bindGroupLayout = device.createBindGroupLayout({
    // el fragment shader del halo (fs_nodo, rama modo==2) lee u.progreso
    // directamente (titileo + desvanecido), así que el uniform necesita ser
    // visible también en el fragment stage, no solo en el vertex
    entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }]
  });
  var pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });
  var depthComun = { format: "depth24plus", depthWriteEnabled: true, depthCompare: "less" };
  // los halos/nebulosa comparten exactamente el mismo shader que los nodos
  // (vs_nodo/fs_nodo, rama modo==2) pero en un pipeline aparte que NO
  // escribe profundidad — así el glow nunca "pelea" con el núcleo sólido de
  // su propio nodo (mismo centro, radio distinto) ni con otros halos
  // superpuestos, y sigue quedando ocluido por lo que sí esté más cerca
  var depthSinEscritura = { format: "depth24plus", depthWriteEnabled: false, depthCompare: "less" };
  // EXPERIMENTO: sample_count 4 (MSAA) en los 3 pipelines — antialiasing real
  // de hardware en vez de depender solo del smoothstep manual de fs_nodo, que
  // sigue ahí (necesita seguir así — MSAA suaviza el CONTORNO del triángulo/
  // discard, no reemplaza el degradado interno). Requiere que el color
  // attachment y la textura de profundidad tengan el mismo sampleCount (ver
  // texturaMSAA/recrearTexturaMSAA y recrearTexturaProfundidad más abajo).
  var MUESTRAS_MSAA = 4;
  var pipelineNodo = device.createRenderPipeline({
    layout: pipelineLayout,
    vertex: { module: modulo, entryPoint: "vs_nodo", buffers: [vertexLayoutNodo] },
    // REDISEÑO NODO/CUBO, 3ª vuelta: blend premultiplied-over agregado aquí
    // también (antes SIN blend a propósito -- ver comentario viejo,
    // reemplazado por este). Motivo: sin alfa real, el círculo modo=0 es un
    // disco OPACO -- por más que su color se apague suave hacia el borde
    // (visto en la 2ª vuelta), un disco opaco recortado en seco contra un
    // fondo real más claro (el laboratorio de galaxias) siempre se iba a
    // ver como un anillo oscuro, sin importar la fórmula de color (bug
    // real reportado por Marco con captura: "no se parecen a las estrellas
    // del fondo", que SÍ son alfa-blended). La única forma real de que se
    // fundan igual que esas estrellas es que AQUÍ TAMBIÉN haya alfa de
    // verdad. Esto es seguro para jsQR porque fs_nodo ya devuelve alfa=1.0
    // EXACTO en los dos casos que importan para el escaneo: modo=1
    // (buscador, sin cambios, siempre 1.0) y modo=0 en el instante cenital
    // (fundido0=1 fuerza alfaFinal0 a 1.0 exacto, mismo mix-a-extremo-
    // exacto que ya usa colorFinal0) -- con alfa=1.0, blend "premultiplied
    // over" da el mismo resultado bit a bit que sin blend (reemplazo
    // opaco), así que la vista validada no cambia un ápice.
    fragment: {
      module: modulo, entryPoint: "fs_nodo",
      targets: [{
        format: formato,
        blend: {
          color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
          alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
        },
      }],
    },
    primitive: { topology: "triangle-list", cullMode: "none" },
    depthStencil: depthComun,
    multisample: { count: MUESTRAS_MSAA }
  });
  var pipelineHalo = device.createRenderPipeline({
    layout: pipelineLayout,
    vertex: { module: modulo, entryPoint: "vs_nodo", buffers: [vertexLayoutNodo] },
    // EXPERIMENTO: blend premultiplied-over (mismo criterio que pipelineNodo
    // ahora también usa, ver arriba -- el halo fue el primero en necesitarlo,
    // antes pintaba opaco con alfa=1 fijo).
    fragment: {
      module: modulo, entryPoint: "fs_nodo",
      targets: [{
        format: formato,
        blend: {
          color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
          alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
        },
      }],
    },
    primitive: { topology: "triangle-list", cullMode: "none" },
    depthStencil: depthSinEscritura,
    multisample: { count: MUESTRAS_MSAA }
  });
  // EXPERIMENTO v3: caras del cubo — mismo criterio de blend/profundidad que
  // pipelineHalo (alfa variable, sin escritura de profundidad porque se
  // desvanecen del todo antes de la vista cenital).
  var pipelineCara = device.createRenderPipeline({
    layout: pipelineLayout,
    vertex: { module: modulo, entryPoint: "vs_cara", buffers: [vertexLayoutCara] },
    fragment: {
      module: modulo, entryPoint: "fs_cara",
      targets: [{
        format: formato,
        blend: {
          color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
          alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
        },
      }],
    },
    primitive: { topology: "triangle-list", cullMode: "none" },
    depthStencil: depthSinEscritura,
    multisample: { count: MUESTRAS_MSAA }
  });
  var bindGroup = device.createBindGroup({
    layout: bindGroupLayout,
    entries: [{ binding: 0, resource: { buffer: uniformBuffer } }]
  });

  var texturaProfundidad = null;
  function recrearTexturaProfundidad() {
    if (texturaProfundidad) texturaProfundidad.destroy();
    texturaProfundidad = device.createTexture({
      size: [canvas.width, canvas.height],
      format: "depth24plus",
      sampleCount: MUESTRAS_MSAA, // debe calzar con el sampleCount de texturaMSAA
      usage: GPUTextureUsage.RENDER_ATTACHMENT
    });
  }
  recrearTexturaProfundidad();

  // EXPERIMENTO: color attachment multisampled — con MSAA no se puede dibujar
  // directo sobre la textura del canvas (esa es siempre de 1 muestra); se
  // dibuja aquí y dibujarFrame() la resuelve hacia el canvas real con
  // resolveTarget (ver más abajo). storeOp puede ser "discard": no hace
  // falta conservar esta textura entre cuadros, solo su resolución.
  var texturaMSAA = null;
  function recrearTexturaMSAA() {
    if (texturaMSAA) texturaMSAA.destroy();
    texturaMSAA = device.createTexture({
      size: [canvas.width, canvas.height],
      format: formato,
      sampleCount: MUESTRAS_MSAA,
      usage: GPUTextureUsage.RENDER_ATTACHMENT
    });
  }
  recrearTexturaMSAA();

  // ============================================================================
  // HILO 2 — bloom real (post-procesado). Reglas de seguridad, no negociables:
  // en la vista CENITAL exacta (stFondo>=1, el instante en que alguien
  // realmente escanea) el frame tiene que salir por el MISMO camino de código
  // de siempre -- un solo render pass, resolveTarget directo al canvas, cero
  // pasos nuevos -- en vez de depender de que la matemática del bloom dé
  // "prácticamente cero": un camino de código idéntico es una garantía más
  // fuerte que cualquier argumento numérico. Por eso todo lo de aquí (texturas/
  // pipelines nuevos) se arma pero SOLO se usa cuando stFondo<1 (ver
  // dibujarFrame más abajo) -- y por eso vive en su PROPIO shader module
  // (CODIGO_WGSL_BLOOM), nunca mezclado con CODIGO_WGSL (el ya validado con
  // jsQR), para que no haya ninguna posibilidad de tocar por error una línea ahí.
  //
  // Técnica: extraer-brillo (downsample a mitad de resolución + umbral) ->
  // desenfoque separable (horizontal, después vertical, 9 taps c/u, mismos
  // pesos gaussianos que ya se usan en post-procesado estándar) -> componer
  // (escena original + bloom desenfocado * intensidad) sobre el canvas. Todo
  // triángulos de pantalla completa (mismo patrón que ya usa la Vía Láctea del
  // laboratorio de galaxias), sin buffer de vértices.
  // ============================================================================
  var CODIGO_WGSL_BLOOM = [
    "struct SalidaPantalla {",
    "  @builtin(position) posicion: vec4<f32>,",
    "  @location(0) uv: vec2<f32>,",
    "};",
    "@vertex",
    "fn vs_pantalla(@builtin(vertex_index) vi: u32) -> SalidaPantalla {",
    "  var pos = array<vec2<f32>, 3>(vec2<f32>(-1.0, -1.0), vec2<f32>(3.0, -1.0), vec2<f32>(-1.0, 3.0));",
    "  var salida: SalidaPantalla;",
    "  salida.posicion = vec4<f32>(pos[vi], 0.0, 1.0);",
    "  salida.uv = vec2<f32>(pos[vi].x * 0.5 + 0.5, 1.0 - (pos[vi].y * 0.5 + 0.5));",
    "  return salida;",
    "}",
    "",
    "@group(0) @binding(0) var muestreador: sampler;",
    "@group(0) @binding(1) var texturaEntrada: texture_2d<f32>;",
    "",
    // umbral empírico -- ver el comentario de esta constante en la sesión
    // que la agregó: el pico de brillo real de fs_nodo (modo==0) cambió con
    // el rediseño del resplandor (colorEstrella0, sin sombreado de esfera) y
    // puede llegar más alto que antes cerca del centro -- si el bloom se ve
    // excesivo (todo el disco encendido en vez de solo el núcleo), este es
    // el primer valor a subir.
    "const UMBRAL_BRILLO: f32 = 1.05;",
    "@fragment",
    "fn fs_extraer(entrada: SalidaPantalla) -> @location(0) vec4<f32> {",
    "  var color = textureSample(texturaEntrada, muestreador, entrada.uv);",
    "  var brillo = max(color.r, max(color.g, color.b));",
    "  var factor = smoothstep(UMBRAL_BRILLO, UMBRAL_BRILLO + 0.35, brillo);",
    "  return color * factor;",
    "}",
    "",
    "struct UniformesDesenfoque { direccion: vec4<f32> };", // xy = offset de 1 texel en uv, zw sin uso
    "@group(0) @binding(2) var<uniform> ud: UniformesDesenfoque;",
    "@fragment",
    "fn fs_desenfoque(entrada: SalidaPantalla) -> @location(0) vec4<f32> {",
    // 9 taps, pesos binomiales normalizados (mismo kernel gaussiano
    // aproximado que ya es estándar para blur separable de bajo costo).
    "  var pesos = array<f32, 5>(0.227027, 0.1945946, 0.1216216, 0.054054, 0.016216);",
    "  var total = textureSample(texturaEntrada, muestreador, entrada.uv) * pesos[0];",
    "  for (var i = 1; i < 5; i = i + 1) {",
    "    var d = ud.direccion.xy * f32(i);",
    "    total = total + textureSample(texturaEntrada, muestreador, entrada.uv + d) * pesos[i];",
    "    total = total + textureSample(texturaEntrada, muestreador, entrada.uv - d) * pesos[i];",
    "  }",
    "  return total;",
    "}",
    "",
    "@group(0) @binding(3) var texturaEscenaOriginal: texture_2d<f32>;",
    "struct UniformesComposicion { intensidad: f32 };",
    "@group(0) @binding(4) var<uniform> uc: UniformesComposicion;",
    "@fragment",
    "fn fs_composicion(entrada: SalidaPantalla) -> @location(0) vec4<f32> {",
    "  var escena = textureSample(texturaEscenaOriginal, muestreador, entrada.uv);",
    "  var bloom = textureSample(texturaEntrada, muestreador, entrada.uv);",
    "  return escena + bloom * uc.intensidad;",
    "}",
  ].join("\n");
  var moduloBloom = device.createShaderModule({ code: CODIGO_WGSL_BLOOM });
  var muestreadorBloom = device.createSampler({ magFilter: "linear", minFilter: "linear" });
  var pipelineExtraer = device.createRenderPipeline({
    layout: "auto",
    vertex: { module: moduloBloom, entryPoint: "vs_pantalla" },
    fragment: { module: moduloBloom, entryPoint: "fs_extraer", targets: [{ format: formato }] },
    primitive: { topology: "triangle-list" }
  });
  var pipelineDesenfoque = device.createRenderPipeline({
    layout: "auto",
    vertex: { module: moduloBloom, entryPoint: "vs_pantalla" },
    fragment: { module: moduloBloom, entryPoint: "fs_desenfoque", targets: [{ format: formato }] },
    primitive: { topology: "triangle-list" }
  });
  var pipelineComposicion = device.createRenderPipeline({
    layout: "auto",
    vertex: { module: moduloBloom, entryPoint: "vs_pantalla" },
    // sin blend state (default = reemplaza el píxel, no lo compone): esta
    // pasada es la única que escribe sobre el canvas real ese cuadro (el
    // primer pase, en la rama con bloom, resuelve en texturaEscena, no en el
    // canvas -- ver dibujarFrame), así que fs_composicion ya devuelve el
    // color FINAL completo (escena + bloom*intensidad, con su propio alfa
    // premultiplicado, heredado de texturaEscena) y no hay nada debajo con
    // qué mezclarlo.
    fragment: { module: moduloBloom, entryPoint: "fs_composicion", targets: [{ format: formato }] },
    primitive: { topology: "triangle-list" }
  });
  var bufferDesenfoqueH = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
  var bufferDesenfoqueV = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
  // intensidad SÍ cambia por frame (depende de stFondo) -- buffer propio,
  // escrito y consumido dentro del mismo frame antes del próximo writeBuffer
  // (mismo patrón ya seguro que usa uniformBuffer más abajo en dibujarFrame).
  var bufferComposicion = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });

  var texturaEscena = null, texturaBloomA = null, texturaBloomB = null;
  var bindGroupExtraer = null, bindGroupDesenfoqueH = null, bindGroupDesenfoqueV = null, bindGroupComposicion = null;
  var anchoBloom = 1, altoBloom = 1;
  function recrearTexturasBloom() {
    if (texturaEscena) texturaEscena.destroy();
    if (texturaBloomA) texturaBloomA.destroy();
    if (texturaBloomB) texturaBloomB.destroy();
    texturaEscena = device.createTexture({
      size: [canvas.width, canvas.height], format: formato,
      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT
    });
    // mitad de resolución a propósito: además de más barato, un desenfoque
    // sobre un bloom ya downsampleado se ve más suave con el mismo kernel de
    // 9 taps -- mismo truco que cualquier bloom estándar (Unreal, Unity, etc).
    anchoBloom = Math.max(1, Math.floor(canvas.width / 2));
    altoBloom = Math.max(1, Math.floor(canvas.height / 2));
    texturaBloomA = device.createTexture({
      size: [anchoBloom, altoBloom], format: formato,
      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT
    });
    texturaBloomB = device.createTexture({
      size: [anchoBloom, altoBloom], format: formato,
      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT
    });
    // dirección del desenfoque en espacio UV -- un texel de texturaBloomA/B,
    // no de texturaEscena (el desenfoque corre siempre entre las dos texturas
    // ya downsampleadas). Constante mientras no cambie el tamaño del canvas,
    // así que se escribe aquí (al crear/recrear texturas) y no por-frame --
    // evita el riesgo de reescribir un uniform buffer compartido entre dos
    // draw calls del mismo frame antes de que la GPU los consuma.
    device.queue.writeBuffer(bufferDesenfoqueH, 0, new Float32Array([1 / anchoBloom, 0, 0, 0]));
    device.queue.writeBuffer(bufferDesenfoqueV, 0, new Float32Array([0, 1 / altoBloom, 0, 0]));
    // bind groups: dependen de las VIEWS de las texturas recién creadas --
    // hay que rearmarlos aquí también, no solo la primera vez, porque destruir
    // y recrear una textura (arriba) invalida cualquier bind group que
    // apuntara a su view anterior.
    bindGroupExtraer = device.createBindGroup({
      layout: pipelineExtraer.getBindGroupLayout(0),
      entries: [
        { binding: 0, resource: muestreadorBloom },
        { binding: 1, resource: texturaEscena.createView() },
      ]
    });
    bindGroupDesenfoqueH = device.createBindGroup({
      layout: pipelineDesenfoque.getBindGroupLayout(0),
      entries: [
        { binding: 0, resource: muestreadorBloom },
        { binding: 1, resource: texturaBloomA.createView() },
        { binding: 2, resource: { buffer: bufferDesenfoqueH } },
      ]
    });
    bindGroupDesenfoqueV = device.createBindGroup({
      layout: pipelineDesenfoque.getBindGroupLayout(0),
      entries: [
        { binding: 0, resource: muestreadorBloom },
        { binding: 1, resource: texturaBloomB.createView() },
        { binding: 2, resource: { buffer: bufferDesenfoqueV } },
      ]
    });
    bindGroupComposicion = device.createBindGroup({
      layout: pipelineComposicion.getBindGroupLayout(0),
      entries: [
        { binding: 0, resource: muestreadorBloom },
        { binding: 1, resource: texturaBloomA.createView() }, // resultado final del ping-pong (ver dibujarFrame)
        { binding: 3, resource: texturaEscena.createView() },
        { binding: 4, resource: { buffer: bufferComposicion } },
      ]
    });
  }
  recrearTexturasBloom();

  window.addEventListener("resize", function () {
    ajustarTamano();
    recrearTexturaProfundidad();
    recrearTexturaMSAA();
    recrearTexturasBloom();
  });

  // ---------- cámara: idéntica a flor-qr-webgpu.html (mismo truco de FOV
  // angosto + distancia compensada para aproximar una cámara ortográfica en
  // la vista cenital), pero ahora también expone camRight/camUp — los ejes
  // reales de la cámara, que ya calculaba mat4LookAt por dentro pero no
  // devolvía — para poder orientar los billboards de los nodos.
  // CAM_DIST_3D/CAM_AZIMUT_3D/CAM_ELEV_3D/FOV_3D ya están declarados más
  // arriba (HILO 4 los necesita ANTES de construirConstelacion) — se reusan
  // aquí tal cual, sin redeclararlos, para que sigan siendo una única fuente
  // de verdad. ----------
  var CAM_ELEV_TOP = (89.9 * Math.PI) / 180;
  // EXPERIMENTO ENCUADRE: antes fijo en [0, 0.55, 0] (el centro geométrico
  // de la grilla) — se cambia al centroide REAL de los módulos oscuros
  // (constelacion.centroide, calculado en construirConstelacion()). Se
  // comprobó con una cruz de referencia en el centro exacto de pantalla que
  // la cámara SÍ apuntaba perfecto al [0,0.55,0] de siempre — lo corrido era
  // la nube de puntos alrededor, porque el patrón de un QR no es simétrico
  // (lo decide la codificación de la URL, no hay forma de controlarlo desde
  // aquí). Apuntar al centroide real, en vez del centro geométrico de la
  // grilla, centra lo que de verdad se ve en pantalla. Como la URL nunca
  // cambia, este valor es siempre el mismo entre cargas — no es un cálculo
  // que dependa de nada aleatorio.
  var CAM_TARGET = constelacion.centroide;
  // EXPERIMENTO ENCUADRE v3: posición de cada módulo oscuro (no las 8
  // esquinas de la caja delimitadora — ver por qué en el comentario junto a
  // donde se usa, en actualizarCamara: v2 con la caja midió una vez con una
  // etiqueta de depuración en el título de la pestaña y el resultado daba
  // prácticamente centrado en EXTENSIÓN [ndcX centrado en -0.01] aunque a
  // simple vista la nube se veía corrida — la caja completa puede estar
  // centrada aunque la DENSIDAD real de puntos adentro no lo esté, que es
  // justo el caso de un QR). Un valor fijo calibrado a mano (probado antes:
  // 0.5/-0.3) se veía bien en la pantalla de prueba usada para calibrarlo,
  // pero se pasaba para el otro lado en el navegador real del usuario
  // (Brave, otra máquina) — el renderizado de software del entorno de
  // pruebas no se comporta igual que un navegador real, así que cualquier
  // número fijo calibrado ahí no generaliza. Esto reemplaza ese número fijo
  // por un cálculo sobre la posición real de cada módulo, no otro número
  // adivinado.
  var POSICIONES_MODULOS = constelacion.posicionesModulos;
  var FOV_TOP = (5 * Math.PI) / 180; // FOV_3D ya declarado más arriba, ver comentario de CAM_ELEV_TOP
  var TAN_MITAD_FOV_3D = Math.tan(FOV_3D / 2), TAN_MITAD_FOV_TOP = Math.tan(FOV_TOP / 2);
  function suavizado(x) { return x * x * (3 - 2 * x); }

  function actualizarCamara(t) {
    var st = suavizado(Math.min(1, Math.max(0, t)));
    var elev = CAM_ELEV_3D + (CAM_ELEV_TOP - CAM_ELEV_3D) * st;
    var fov = FOV_3D + (FOV_TOP - FOV_3D) * st;
    var tanMitadFov = TAN_MITAD_FOV_3D + (TAN_MITAD_FOV_TOP - TAN_MITAD_FOV_3D) * st;
    var dist = CAM_DIST_3D * (TAN_MITAD_FOV_3D / tanMitadFov);
    var eye = [
      dist * Math.sin(CAM_AZIMUT_3D) * Math.cos(elev),
      dist * Math.sin(elev) + 0.15,
      dist * Math.cos(CAM_AZIMUT_3D) * Math.cos(elev)
    ];
    var up = vec3Normalize([0, 1 - st, st]);
    var view = mat4LookAt(eye, CAM_TARGET, up);
    // EXPERIMENTO ENCUADRE v3: se proyecta la posición de CADA módulo oscuro
    // (no las 8 esquinas de una caja delimitadora — ver comentario junto a
    // POSICIONES_MODULOS, más arriba, sobre por qué la caja no alcanzaba) con
    // la proyección SIN offset (aspecto/FOV/distancia YA correctos para este
    // cuadro, con la cámara real del visitante) y se promedian sus
    // posiciones NDC resultantes -- ese promedio SÍ sigue la densidad real
    // de la nube, a diferencia del punto medio de una caja delimitadora. El
    // offset que hace falta es, por construcción de la fórmula de
    // mat4Perspective (ver ahí), exactamente ese promedio: eso es lo que hay
    // que restar para que el CENTRO DE MASA real de la nube quede en el
    // medio de la pantalla. Se desvanece a 0 según se acerca a la vista
    // cenital (*(1-st)), así que en st=1 el offset es exactamente 0 y la
    // vista de escaneo queda IDÉNTICA a la validada, sin ningún corrimiento.
    var offsetLensX = 0, offsetLensY = 0;
    if (POSICIONES_MODULOS && POSICIONES_MODULOS.length > 0 && st < 0.999) {
      var projSinOffset = mat4Perspective(fov, canvas.width / canvas.height, 0.1, 300);
      var viewProjSinOffset = mat4Multiply(projSinOffset, view);
      var sumaNdcX = 0, sumaNdcY = 0, cantidadValida = 0;
      for (var ip = 0; ip < POSICIONES_MODULOS.length; ip++) {
        var pm = POSICIONES_MODULOS[ip];
        var clip = mat4TransformPoint(viewProjSinOffset, pm[0], pm[1], pm[2]);
        if (clip[3] <= 0.001) continue; // detrás de la cámara, no debería pasar aquí pero por precaución
        sumaNdcX += clip[0] / clip[3];
        sumaNdcY += clip[1] / clip[3];
        cantidadValida++;
      }
      if (cantidadValida > 0) {
        var fundidoEncuadre = 1 - st;
        offsetLensX = (sumaNdcX / cantidadValida) * fundidoEncuadre;
        offsetLensY = (sumaNdcY / cantidadValida) * fundidoEncuadre;
      }
    }
    var proj = mat4Perspective(fov, canvas.width / canvas.height, 0.1, 300, offsetLensX, offsetLensY);
    var zAxis = vec3Normalize(vec3Sub(eye, CAM_TARGET));
    var xAxis = vec3Normalize(vec3Cross(up, zAxis));
    var yAxis = vec3Cross(zAxis, xAxis);
    return { st: st, viewProj: mat4Multiply(proj, view), camRight: xAxis, camUp: yAxis };
  }

  // ---------- interacción: un clic alterna entre el modelo 3D y el código QR ----------
  var tRot = 0, tRotObjetivo = 0;
  // EXPERIMENTO: ayuda de testing — abrir el archivo con #cenital al final de
  // la URL arranca directo en la vista de escaneo, sin depender de simular un
  // clic (la automatización de clics resultó poco confiable para verificar
  // esto durante la sesión que armó los experimentos de esta copia). No
  // afecta el uso normal: sin el hash, se comporta exactamente igual que
  // siempre (arranca en la vista de constelación, un clic alterna).
  // salta el lerp por completo (tRot=1 de entrada, no solo el objetivo) para
  // no depender de cuántos cuadros llegue a dibujar el navegador — en un
  // entorno que renderiza muy lento, esperar a que el lerp converja podía
  // tardar minutos reales.
  if (location.hash === "#cenital") { tRotObjetivo = 1; tRot = 1; }
  canvas.addEventListener("click", function () {
    tRotObjetivo = tRotObjetivo > 0.5 ? 0 : 1;
  });

  // HILO 4: temporización de la formación (ver el comentario grande junto a
  // NIVELES_ALTURA/generarPoolInicioFormacion, y el de progresoFormacion en
  // CODIGO_WGSL, para el diseño completo). RETRASO_INICIAL: pausa antes de
  // que arranque el primer nodo, para que la página no "salte" apenas
  // termina de cargar. DURACION: cuánto tarda la formación COMPLETA (todos
  // los nodos ya en su lugar) de punta a punta — 10 bajó a 5 (arranque
  // demasiado repartido), y ahora a 4 (Marco pidió 25% más rápido en total:
  // 5/1.25=4). Con esto, el arranque de todas las estrellas queda dentro de
  // los primeros 0.8s (antes 1s) y la formación completa entre 3.2s y 4s
  // (antes 4-5s) — la MISMA proporción de siempre, solo comprimida un 20%
  // (que es exactamente "25% más rápido": 1/1.25=0.8).
  var RETRASO_INICIAL_FORMACION = 0.15;
  var DURACION_FORMACION = 4;
  // respeta prefers-reduced-motion: arranca directo con la formación ya
  // completa, sin ninguna animación de llegada.
  var prefiereMenosMovimiento = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  // se pone en true apenas el visitante hace el PRIMER clic (aunque sea antes
  // de que la formación termine sola) y queda así para siempre: fuerza la
  // formación a completarse al instante y evita cualquier posibilidad de que
  // la transición hacia la vista cenital (que de por sí tarda varios
  // segundos, ver el lerp de tRot arriba) llegue a superponerse con nodos
  // todavía en vuelo. Nunca vuelve a false, así que tampoco puede haber una
  // regresión visual (nodos "desarmándose") si el visitante alterna la vista
  // varias veces.
  var formacionForzada = prefiereMenosMovimiento;

  var uniformData = new Float32Array(28);
  // HILO 4 (v4): centro X/Z del eje compartido del remolino -- constante
  // durante toda la vida de la página (la URL codificada nunca cambia, así
  // que el centroide tampoco), se carga UNA sola vez aquí en vez de en cada
  // cuadro de dibujarFrame(). Ver el comentario junto al struct Uniformes y
  // junto a posicionAnimada (CODIGO_WGSL) para el resto del diseño.
  uniformData[18] = constelacion.centroide[0];
  uniformData[19] = constelacion.centroide[2];
  var tiempoInicio = performance.now();
  // HILO 3: expone el progreso de cámara (0=constelación, 1=cenital) como
  // variable global -- lo lee el bloque de "fondo coordinado" más abajo,
  // que vive en un rAF propio, separado del render loop de WebGPU, porque
  // solo toca CSS (filter/transform) del canvas del laboratorio, nunca su
  // propio código ni el device/pipeline de esta pieza.
  window.__progresoCamaraQR = 0;
  function dibujarFrame() {
    // HILO 4: si el visitante ya hizo clic (tRotObjetivo pasa a 1 en el mismo
    // evento, antes de que tRot empiece a moverse), la formación se fuerza a
    // completa desde este mismo cuadro en adelante -- ver el comentario junto
    // a formacionForzada, más arriba.
    if (tRotObjetivo > 0.5) formacionForzada = true;
    var tiempo = (performance.now() - tiempoInicio) / 1000;
    var progresoFormacionValor = formacionForzada
      ? 1
      : Math.min(1, Math.max(0, (tiempo - RETRASO_INICIAL_FORMACION) / DURACION_FORMACION));
    tRot += (tRotObjetivo - tRot) * 0.007;
    var camara = actualizarCamara(tRot);
    window.__progresoCamaraQR = camara.st;
    uniformData.set(camara.viewProj, 0);
    uniformData[16] = camara.st;
    uniformData[17] = tiempo;
    // uniformData[18]/[19] (progreso.z/w) ya quedaron cargados una sola vez,
    // antes de este loop -- ver el comentario junto a su asignación, más
    // arriba.
    uniformData.set(camara.camRight, 20);
    // HILO 4: camRight.w era relleno sin uso -- ahora lleva progresoFormacion
    // (ver progresoFormacion() en CODIGO_WGSL, y el comentario junto al
    // struct Uniformes).
    uniformData[23] = progresoFormacionValor;
    uniformData.set(camara.camUp, 24);
    uniformData[27] = 0;
    device.queue.writeBuffer(uniformBuffer, 0, uniformData);

    // clearValue premultiplicado y dependiente de camara.st (0 = vista en
    // ángulo, 1 = vista cenital): a diferencia de la versión sin fondo, aquí
    // el "vacío" (todo lo que no es nodo/arista/halo del QR) no puede ser
    // plano y opaco todo el tiempo, porque tiene que dejar ver el canvas del
    // laboratorio de galaxias que queda debajo. En vez de tocar el fragment
    // shader (que es exactamente donde viven las reglas ya validadas con
    // jsQR), se resuelve en el clear: en st=0 el clear nace en (0,0,0,0)
    // -transparente de verdad, no solo "negro"- y el fondo del laboratorio
    // se ve al 100%; en st=1 el clear es {r:0.0314,g:0.0314,b:0.0392,a:1},
    // IDÉNTICO al valor fijo que ya tenía la versión validada, así que el
    // frame en el instante exacto de escanear (vista cenital) es bit a bit
    // el mismo de siempre. En premultiplied alpha, rgb debe ir multiplicado
    // por alfa (si a=0 pero rgb no fuera 0, ese rgb se sumaría igual al
    // fondo por debajo — por eso "* camara.st" también en los canales de
    // color, no solo en alfa).
    var stFondo = camara.st;
    // HILO 2: en la vista CENITAL exacta (stFondo>=1) el resolveTarget va
    // DIRECTO al canvas -- el mismo único-pase de siempre, cero pasos nuevos
    // de por medio. El bloom (resolver a texturaEscena + extraer/desenfoque/
    // componer) solo se arma cuando stFondo<1, así que el frame que de verdad
    // importa para escanear nunca pasa por código nuevo, ni siquiera
    // numéricamente equivalente: es literalmente el mismo camino de antes.
    var haciaTexturaEscena = stFondo < 1;
    var encoder = device.createCommandEncoder();
    var pase = encoder.beginRenderPass({
      colorAttachments: [{
        // EXPERIMENTO (MSAA): se dibuja sobre texturaMSAA (multisampled) y
        // se resuelve — al canvas real directo si stFondo>=1 (sin cambios),
        // o a texturaEscena si stFondo<1 (HILO 2: insumo del bloom, ver
        // abajo) — storeOp "discard" porque la textura multisampled en sí no
        // hace falta conservarla, solo su resolución.
        view: texturaMSAA.createView(),
        resolveTarget: haciaTexturaEscena ? texturaEscena.createView() : contexto.getCurrentTexture().createView(),
        clearValue: { r: 0.0314 * stFondo, g: 0.0314 * stFondo, b: 0.0392 * stFondo, a: stFondo },
        loadOp: "clear",
        storeOp: "discard"
      }],
      depthStencilAttachment: {
        view: texturaProfundidad.createView(),
        depthClearValue: 1.0,
        depthLoadOp: "clear",
        depthStoreOp: "store"
      }
    });
    pase.setBindGroup(0, bindGroup);
    // orden: nebulosa+halos (sin escribir profundidad) -> caras del cubo ->
    // nodos sólidos, para que el núcleo nítido de cada nodo/cuadrado quede
    // siempre visible por encima de su propio glow. Sin aristas (HILO 4 v2
    // las elimina a pedido de Marco — ver la v2 congelada para la versión
    // que sí las tenía).
    if (vertsHalos > 0) {
      pase.setVertexBuffer(0, bufferHalos);
      pase.setPipeline(pipelineHalo);
      pase.draw(vertsHalos, 1, 0);
    }
    if (vertsCaras > 0) {
      pase.setVertexBuffer(0, bufferCaras);
      pase.setPipeline(pipelineCara);
      pase.draw(vertsCaras, 1, 0);
    }
    pase.setVertexBuffer(0, bufferNodos);
    pase.setPipeline(pipelineNodo);
    pase.draw(vertsNodos, 1, 0);
    pase.end();

    // HILO 2: bloom -- 3 pasadas más de pantalla completa, SOLO si stFondo<1
    // (ver comentario grande arriba de dibujarFrame). intensidad = (1-stFondo)
    // así que se desvanece solo, en el mismo tramo final (0.7→1.0 de
    // u.progreso.x) que ya usan fundido0/fundido1/desvanecido para todo lo
    // demás -- consistente con el resto de los efectos que se apagan antes
    // de cenital, aunque aquí ni siquiera hace falta: la rama de arriba ya
    // garantiza que este bloque entero no corre en absoluto en stFondo=1.
    if (haciaTexturaEscena) {
      var intensidadBloom = 1 - stFondo;
      device.queue.writeBuffer(bufferComposicion, 0, new Float32Array([intensidadBloom, 0, 0, 0]));

      var paseExtraer = encoder.beginRenderPass({
        colorAttachments: [{ view: texturaBloomA.createView(), clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: "clear", storeOp: "store" }]
      });
      paseExtraer.setPipeline(pipelineExtraer);
      paseExtraer.setBindGroup(0, bindGroupExtraer);
      paseExtraer.draw(3);
      paseExtraer.end();

      var paseDesenfoqueH = encoder.beginRenderPass({
        colorAttachments: [{ view: texturaBloomB.createView(), clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: "clear", storeOp: "store" }]
      });
      paseDesenfoqueH.setPipeline(pipelineDesenfoque);
      paseDesenfoqueH.setBindGroup(0, bindGroupDesenfoqueH); // lee texturaBloomA
      paseDesenfoqueH.draw(3);
      paseDesenfoqueH.end();

      var paseDesenfoqueV = encoder.beginRenderPass({
        colorAttachments: [{ view: texturaBloomA.createView(), clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: "clear", storeOp: "store" }]
      });
      paseDesenfoqueV.setPipeline(pipelineDesenfoque);
      paseDesenfoqueV.setBindGroup(0, bindGroupDesenfoqueV); // lee texturaBloomB, escribe de vuelta en A
      paseDesenfoqueV.draw(3);
      paseDesenfoqueV.end();

      var paseComposicion = encoder.beginRenderPass({
        colorAttachments: [{ view: contexto.getCurrentTexture().createView(), clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: "clear", storeOp: "store" }]
      });
      paseComposicion.setPipeline(pipelineComposicion);
      paseComposicion.setBindGroup(0, bindGroupComposicion); // lee texturaBloomA (resultado final) + texturaEscena
      paseComposicion.draw(3);
      paseComposicion.end();
    }

    device.queue.submit([encoder.finish()]);

    requestAnimationFrame(dibujarFrame);
  }
  dibujarFrame();

  // copia orientada a un visitante real (la versión sin fondo deja aquí un
  // resumen técnico de conteos — útil en desarrollo, fuera de lugar en la
  // pieza publicada).
  estadoQR("Hace clic para pasar de la red de constelación al código QR visto desde arriba y escanéalo.");
}

// ============================================================================
// HILO 3 — fondo y constelación coordinados. Dos efectos, los dos puramente
// CSS sobre el canvas del laboratorio (#lienzo) desde AFUERA — nunca se toca
// ni una línea de -fuente/, el laboratorio no tiene ni idea de que esto
// existe. Corre en su propio requestAnimationFrame, separado del loop de
// WebGPU de esta pieza (dibujarFrame) — si algo llegara a fallar aquí, nunca
// puede tumbar el render de la constelación/QR.
//
// (a) atenuado coordinado: el fondo se va oscureciendo/desaturando a medida
//     que la cámara se acerca a la vista cenital (mismo window.__progreso
//     CamaraQR que ya expone dibujarFrame) — de paso mejora el contraste
//     justo en el momento de escanear, en vez de competir con el QR.
// (b) paralaje sutil con el mouse: el fondo se desplaza un poco en la
//     dirección opuesta al puntero — un truco barato y muy usado (ninguna
//     cámara 3D real de por medio) para que las dos capas independientes se
//     perciban como una sola escena con profundidad, no dos imágenes
//     apiladas. Se apaga por completo en pantallas táctiles (no hay mouse
//     que seguir) revisando "matches" de una media query, así no queda un
//     valor de paralaje "pegado" tras el último toque.
// ============================================================================
(function () {
  var lienzoLab = document.getElementById("lienzo");
  if (!lienzoLab) return;
  // botón "LinkedIn": visible solo cerca del final de la transición hacia la
  // vista cenital (QR ya formado), oculto de nuevo apenas se vuelve a la
  // constelación -- mismo t que ya gobierna el atenuado del fondo, sin un
  // segundo rAF ni un segundo lugar donde leer window.__progresoCamaraQR.
  var botonEnlace = document.getElementById("botonEnlaceQR");
  var botonEnlaceVisible = false;
  var UMBRAL_BOTON_ENLACE = 0.85;
  var mouseX = 0.5, mouseY = 0.5; // 0..1, centro = 0.5,0.5
  var hayMouse = window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
  if (hayMouse) {
    window.addEventListener("mousemove", function (ev) {
      mouseX = ev.clientX / window.innerWidth;
      mouseY = ev.clientY / window.innerHeight;
    });
  }
  var PARALAJE_PX = 18; // desplazamiento máximo del fondo, en píxeles físicos
  function actualizarFondoCoordinado() {
    var t = window.__progresoCamaraQR || 0;
    var brillo = 1 - 0.5 * t; // hasta 50% más oscuro en cenital
    var saturacion = 1 - 0.35 * t;
    lienzoLab.style.filter = "brightness(" + brillo.toFixed(3) + ") saturate(" + saturacion.toFixed(3) + ")";
    var dx = hayMouse ? (0.5 - mouseX) * PARALAJE_PX : 0;
    var dy = hayMouse ? (0.5 - mouseY) * PARALAJE_PX : 0;
    lienzoLab.style.transform = "translate(" + dx.toFixed(1) + "px, " + dy.toFixed(1) + "px) scale(1.03)";
    if (botonEnlace) {
      var mostrarBoton = t > UMBRAL_BOTON_ENLACE;
      if (mostrarBoton !== botonEnlaceVisible) {
        botonEnlaceVisible = mostrarBoton;
        botonEnlace.classList.toggle("visible", mostrarBoton);
      }
    }
    requestAnimationFrame(actualizarFondoCoordinado);
  }
  // scale(1.03) de arriba: sin ese margen, el paralaje podía dejar un
  // filo del canvas (fuera de #lienzo, mostrando el negro plano del body)
  // visible en una esquina en el extremo del desplazamiento -- 3% de más
  // tamaño alcanza y sobra para los 18px de PARALAJE_PX.
  requestAnimationFrame(actualizarFondoCoordinado);
})();

main().catch(function (e) {
  mostrarFallbackQR(e && e.stack ? e.stack : e);
});
</script>
</body>
</html>