vinyl · AT-LP120XUSB WebGPU viewer
Visor 3D en tiempo real de una bandeja giradisco profesional (Audio-Technica
AT-LP120XUSB, acabado negro) construido con Next.js 16 y vgpu,
la librería WebGPU de Vercel Labs. Todo el render corre en WebGPU a través de la API
de vgpu (draw, effect, target, frameLoop, uniforms, módulos WGSL con
import/export), sin three.js.
Qué renderiza
- PBR metálico‑rugoso con normal mapping, oclusión ambiental y emisivo, leído
directamente del GLB por un parser propio (
lib/gltf/glb.ts, sin dependencias).
- Iluminación de estudio basada en imagen: un entorno HDR procedural con tres
softboxes (key, fill, rim) se hornea al arrancar en un mapa especular prefiltrado
GGX (7 niveles de rugosidad), un mapa de irradiancia y una LUT BRDF split‑sum.
- Sombra suave desde la luz principal (shadow map 2048², 16 taps Poisson rotados).
- HDR + MSAA 4×, bloom (threshold + gaussiano separable) y tone mapping ACES.
- Cámara orbital de vgpu (
orbitControls) con auto‑rotación, plato girando a 33⅓ rpm,
y un acabado "Negro" que recolorea el dorado del modelo original a negro satinado.
Ejecutar
pnpm install
pnpm dev
# http://localhost:3000 -> bandeja giradisco
# http://localhost:3000/?model=helmet -> Damaged Helmet (Khronos), prueba de pipeline
Requiere un navegador con WebGPU (Chrome/Edge 113+, Safari 26+).
Modelos
Los .glb viven en public/models/ y están fuera de git por tamaño.
No existe un modelo libre del AT‑LP120XUSB; el PLX‑1000 comparte la misma
arquitectura (clon del Technics SL‑1200: brazo en S, plato con puntos de estrobo,
pitch fader) y el acabado "Negro" lo acerca al AT‑LP120X negro. Para usar otro GLB,
añade una entrada en lib/models.ts.
Estructura
app/ layout + página (Server Component) que monta el visor
components/ TurntableViewer.tsx (client) + HUD
lib/gltf/glb.ts parser GLB -> buffers intercalados, materiales, instancias
lib/render/engine.ts ciclo de render vgpu: sombra -> PBR HDR -> bloom -> post
lib/render/environment.ts horneado IBL (entorno, prefiltro GGX, irradiancia, LUT)
lib/render/textures.ts subida de imágenes + mipmaps, blit, samplers glTF
lib/render/shaders/*.wgsl módulos WGSL (common, pbr, shadow, env, prefilter, ...)
Atajos: arrastrar orbita, rueda acerca, R reinicia la cámara, H oculta la UI.
Disco y brazo
lib/models.ts describe la escena además del GLB principal:
attachments: el disco (public/models/vinyl.glb) se recoloca sobre el plato
detectado geométricamente (mallas finas de huella casi cuadrada), se escala a su
diámetro real (fitDiameter: 0.3 m) y gira con él a 33⅓ rpm. Los GLB de Sketchfab
traen una inclinación de presentación en el nodo raíz; ignoreNodeTransforms usa el
espacio de malla en bruto y upAxis lo endereza.tonearm: lista de mallas que forman el brazo (tubo, headshell, cápsula, cables,
contrapeso). El visor lo gira sobre su eje hasta que la púa queda a playRadius
(146 mm, surco de entrada) y lo inclina hasta apoyarla en la superficie del disco.
La geometría de la púa es la original del modelo, sin simplificar.
Los console.info [viewer] resumen tiempos de carga y el ángulo aplicado al brazo.
Gestos y audio
- Brazo: toca el headshell/brazo para levantarlo y llevarlo al reposo, o para
bajarlo sobre el surco de entrada (secuencia: levanta, gira, baja). Mientras suena,
el brazo avanza lentamente hacia el final del disco.
- START/STOP: toca el botón redondo del frente. El plato acelera y frena con inercia,
y el audio sigue esa velocidad (arranque y frenada audibles).
- Pitch: arrastra la corredera del lado derecho (±8 %). Cambia la velocidad del plato
y el
playbackRate del audio; el HUD muestra % y rpm.
- Audio:
public/audio/track.m4a + public/audio/cover.jpg (carátula pintada en la
etiqueta del disco). Ambos están fuera de git y del deploy público: son material con
derechos, descargado para uso local con yt-dlp desde el enlace indicado en
lib/models.ts. Sin ellos el visor funciona igual (sin sonido y con la etiqueta original). El sonido se
activa con el botón "Activar sonido" (política de autoplay) y solo suena con la púa
apoyada; el espectro del HUD sale de un AnalyserNode.
El picking usa las cajas envolventes de cada malla (rayo desde la cámara) con prioridad
para las piezas interactivas; el arrastre del pitch captura el puntero y no orbita la cámara.
Vista "mesa" (por defecto) y estudio
La página usa siempre la vista "mesa" (añade ?layout=studio para el set oscuro con
cámara orbital y panel de controles): fondo blanco, cámara fija
picada (~54°) ajustada al ancho, sombra suave (PCF ancho) compuesta en post sobre el blanco,
y debajo solo la carátula y el título. No hay botones: el primer toque activa el audio y los
gestos sobre la escena (brazo, START/STOP, pitch) siguen activos. La cámara se mueve con un
dedo sobre la mesa (fuera de la bandeja) o con dos dedos (pinza = zoom, giro = yaw).
El reposabrazos se oculta mientras el brazo está sobre el disco, y los LED azules solo se
encienden con el motor en marcha.
Botones físicos
START/STOP, 33, 45 y QUARTZ son cajas en el espacio de la escena (controls.buttons en
lib/models.ts). Al tocarlas su LED parpadea un instante (feedback de pulsación, sin deformar
geometría) y luego sigue el estado: 33/45 seleccionan la velocidad
nominal del plato (el audio sube a 45 rpm como en un disco real), QUARTZ bloquea el pitch
a 0 % (LED encendido) hasta volver a pulsarlo. El brazo avanza hacia el centro al ritmo del
plato como en una cara real (~20 min de surco).
Assets para móvil
En teléfonos (puntero táctil) el visor carga turntable.mobile.glb y vinyl.mobile.glb:
piezas pequeñas decimadas (≤10k triángulos por malla, scripts/build-mobile-assets.mjs),
placas intactas, texturas a 1k (WebP en la bandeja, PNG en el disco) y vértices cuantizados
(KHR_mesh_quantization). Además baja el DPR a 1.25, usa shadow map 1024 con 8 taps, omite el
bloom y limita a 60 fps. Fuerza un modo con ?quality=mobile o ?quality=high.
node scripts/build-mobile-assets.mjs public/models/turntable.glb /tmp/t3.glb 10000
npx @gltf-transform/cli@4 resize /tmp/t3.glb /tmp/t4.glb --width 1024 --height 1024
npx @gltf-transform/cli@4 webp /tmp/t4.glb /tmp/t5.glb --quality 90
npx @gltf-transform/cli@4 quantize /tmp/t5.glb public/models/turntable.mobile.glb --quantize-position 14 --quantize-normal 8 --quantize-texcoord 12
Calidad adaptativa
El motor mide los fps reales y sube o baja por una escalera de calidad (escala de render del
target HDR 0.5→1.0 con reescalado en post, taps de sombra 4/8/16, bloom on/off). Baja un
escalón si cae de 30 fps y sube si supera 54 fps con margen; un nivel que falló no se
reintenta durante 20 s. El escritorio arranca arriba del todo; el móvil en el nivel medio y
sube hasta 2× de DPR si el teléfono lo aguanta. La consola registra cada cambio ([viewer] quality level).
Despliegue privado (con la canción)
La web pública no incluye el audio ni la carátula (material con derechos). Para uso personal
existe un segundo proyecto de Vercel, saturday-night-private, desplegado directamente desde
la carpeta local (incluye public/audio/, ver .vercelignore) y protegido con contraseña
mediante proxy.ts (HTTP Basic, variable SITE_PASSWORD). Para actualizarlo:
vercel link --yes --project saturday-night-private && vercel --prod && vercel link --yes --project saturday-night
