# Threejs Webgpu Relighting

> Luz monocualar web con Three.js WebGPU y Transformers.js.

- Skill: `ntizar/threejs-webgpu-relighting` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ntizar/threejs-webgpu-relighting`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ntizar/threejs-webgpu-relighting/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- License: MIT
- Author: ntizar (https://skillmd.com/u/ntizar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ntizar/threejs-webgpu-relighting

---

# Monocular Light Injection — Three.js + Transformers.js

## Resumen
Port independiente con Three.js (WebGPU + TSL) del ejemplo `monocular-light-injection` de TypeGPU: toma un feed de webcam o una foto, estima profundidad pixel a pixel con una red neuronal en el navegador e inyecta una **luz puntual virtual móvil** en la escena, con sombreado difuso/especular dependiente de profundidad, sombras suaves ray-marched y un sprite de bombilla brillante. **Sin dependencia de TypeGPU** (el original usa una red DepthART custom como shaders de compute).

## Uso (nombres reales del código)
- Demo: https://radames.github.io/relight-three-js-transformers-js/ (requiere navegador WebGPU).
- **Render**: `WebGPURenderer` de Three.js + TSL en `src/relight/` (pass temporal de estabilización de profundidad, pass de superficie slope+AO a storage texture, frag de relighting fullscreen: Lambert envuelto, specular tipo Blinn-Phong, sombras ray-marched de 32 pasos, sprite de bombilla, tonemap Reinhard extendido + dither). Bucle único `requestAnimationFrame`.
- **Profundidad**: [Depth Anything V2](https://huggingface.co/onnx-community/depth-anything-v2-small) (small/base/large, seleccionable) en el backend WebGPU de transformers.js, en `fp16` si el dispositivo soporta `shader-f16`. Red corre a la "depth res" seleccionable (252/392/448/518 px). Código en `src/depth/`.
- **Backend/engine** (dropdown en el panel): `webgpu` (default, shared device), `wasm`, y `webnn-gpu`/`webnn-npu` donde el navegador exponga WebNN. El backend reportado (read-only) muestra p. ej. `webgpu · fp16 · shared device`, `wasm · q8`.

## Patrones / Arquitectura
- **`webgpu` (default) — shared device**: ONNX Runtime y Three.js comparten un único `GPUDevice`; el frame nunca sale de la GPU hacia la red: un compute pass muestrea la textura de video y escribe el tensor NCHW normalizado en un storage buffer que la sesión lee *in situ*. Elimina el draw de canvas por-frame, el readback `getImageData` y el rescale/normalize/pack de CPU (~39% menos latencia de profundidad; 245 ms → 150 ms en Depth Anything V2 small, fp16, 448 px, cámara en vivo, Chrome headless en Apple Silicon — figura relativa, no absoluta del hardware).
- Un `GPUBuffer` no cruza el límite de thread, así que este backend corre en el hilo principal.
- ONNX Runtime acepta un adapter pero nunca un device, así que siempre crea el suyo y el renderer lo toma prestado.

## Pitfalls
- Requiere navegador con WebGPU; fallback `wasm` (q8) disponible.
- El coste del relight es ~1–3 ms de GPU por frame; una webcam de 30 fps no limita el framerate (solo se intercambia el último frame de video).

## Verificación
- Cargar el demo con un navegador WebGPU; mover la luz y ver sombreado dependiente de profundidad y sombras; consultar las filas "depth"/"backend".

## Referencia
- Repo: https://github.com/radames/relight-three-js-transformers-js. Original: TypeGPU `monocular-light-injection` (docs.swmansion.com/TypeGPU).