diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b32bd24 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +shaders_lab +shaders_lab.exe +build/ +*.zip +operations.db* diff --git a/NEXT_STEPS_BORDERLESS_WINDOW.md b/NEXT_STEPS_BORDERLESS_WINDOW.md new file mode 100644 index 0000000..5209a2d --- /dev/null +++ b/NEXT_STEPS_BORDERLESS_WINDOW.md @@ -0,0 +1,231 @@ +# shaders_lab — proximos pasos: ventana sin decoraciones del SO + botones min/max/close en la MainMenuBar + +## Motivacion + +Hoy la ventana lleva la titlebar nativa de Windows/Linux ademas de la +MainMenuBar de ImGui (View). Son dos barras consumiendo ~60 px verticales. +Queremos: + +1. **Recuperar ese espacio** quitando la titlebar del SO. +2. **Integrar los botones min / max / close** en la MainMenuBar de ImGui + (la que renderiza `panel_menu_cpp_core`), alineados a la derecha. +3. Resultado: una sola barra superior compacta con menus + botones de + ventana, igual que VSCode/Spotify/etc. + +Aplicable a **todas las apps** del registry, no solo shaders_lab — debe +materializarse como funcion(es) reusables en `cpp/functions/core/`. + +--- + +## Que hace falta + +### 1. Crear la ventana sin decoraciones + +Una linea en `cpp/framework/app_base.cpp` (donde se crea la GLFW window, +linea ~37): + +```cpp +glfwWindowHint(GLFW_DECORATED, GLFW_FALSE); +``` + +Detras de un nuevo flag `AppConfig::borderless = false` para que las apps +existentes sigan iguales por defecto. + +### 2. Dibujar la titlebar custom + +Hoy `panel_menu_cpp_core` ya pinta una `BeginMainMenuBar()` con el menu +"View". Ampliamos esa misma barra con: + +- Titulo de la app a la izquierda (antes del primer menu) — opcional. +- Espacio para drag en el centro (la propia barra ya es draggeable + porque ImGui detecta clicks fuera de los items). +- Tres botones a la derecha alineados con `SameLine` + offset: + min (—), max (□ / ⧉ segun estado), close (✕). + +Glifos: ImGui::ImDrawList con lineas/rect, sin necesidad de fuente +de iconos. O symbols Unicode si la fuente los soporta. + +### 3. Lo que el SO te daba gratis y hay que reimplementar + +**Drag de la ventana** + +```cpp +// Detectar mouse-down en la titlebar (no sobre items): +if (!ImGui::IsAnyItemHovered() && ImGui::IsMouseDragging(0)) { + double cx, cy; glfwGetCursorPos(window, &cx, &cy); + int wx, wy; glfwGetWindowPos(window, &wx, &wy); + // guardar offset al iniciar drag, aplicar glfwSetWindowPos cada frame +} +``` + +**Doble-click en titlebar → toggle maximize** + +```cpp +if (ImGui::IsMouseDoubleClicked(0) && !ImGui::IsAnyItemHovered()) { + if (glfwGetWindowAttrib(window, GLFW_MAXIMIZED)) + glfwRestoreWindow(window); + else + glfwMaximizeWindow(window); +} +``` + +**Botones** + +```cpp +glfwIconifyWindow(window); // min +glfwMaximizeWindow(window) / glfwRestoreWindow(window); // max toggle +glfwSetWindowShouldClose(window, true); // close +``` + +**Resize desde bordes** — la parte fea. Sin decoraciones GLFW no expone +hit-test de bordes. Hay que detectar mouse en franjas de ~6 px en +los 8 lados, cambiar cursor (`glfwSetCursor` con `GLFW_HRESIZE_CURSOR` +etc.), y arrastrar reposicionando+resizing manualmente. + +--- + +## Lo que se pierde + +| Comportamiento | Recuperable | +|---------------------------------------------------------|----------------------------------------------------------------------------| +| Snap zones de Windows (Win+flecha, drag al borde) | Solo con codigo nativo Win32 (`WM_NCHITTEST`) — GLFW no lo expone | +| Aero shake, sombras nativas, animacion de minimizar | No facilmente | +| Snap del WM en Linux (i3/sway/KDE) | Igual | +| Bugs Wayland posicionando ventanas borderless | Si Linux es WSLg/X11 sin problema; en Wayland nativo verificar primero | +| Multi-viewport ImGui (`ConfigFlags_ViewportsEnable`) | Cada ventana secundaria tambien sin titlebar → custom en todas. Mas curro | +| Touch / accesibilidad (lectores de pantalla) | Marginal para nuestro caso | + +--- + +## Plan de implementacion + +### Fase 1 — funcion reusable + flag en app_base + +**Funcion nueva**: `custom_titlebar_cpp_core` (componente, pure desde el +punto de vista del registry — solo dibuja UI; los efectos GLFW se aplican +fuera o se pasan como callbacks). Idealmente fusionada con +`panel_menu_cpp_core` o coordinada con ella para que el menu y los botones +vivan en la **misma** MainMenuBar. + +Opcion A (mejor): extender `panel_menu` con parametros opcionales para +los botones del SO: + +```cpp +struct WindowControls { + GLFWwindow* window; + bool show_min = true; + bool show_max = true; + bool show_close = true; +}; + +bool panel_menu(const char* menu_label, + const PanelToggle* items, std::size_t count, + const WindowControls* controls = nullptr); // opcional +``` + +Pero esto crea acople de `core` con GLFW. Mejor opcion B: + +Opcion B (limpia): funcion separada `custom_titlebar_cpp_core` que se +llama **dentro** del menu existente (despues de los menus, antes del +EndMainMenuBar) usando `ImGui::SameLine` con offset al borde derecho. Y +una funcion auxiliar `window_controls_cpp_core` para los tres botones, +que recibe callbacks (`on_min`, `on_max`, `on_close`) sin saber nada de +GLFW. La app las cablea. + +```cpp +namespace fn_ui { + +struct WindowButtons { + bool min_clicked = false; + bool max_clicked = false; + bool close_clicked = false; + bool is_maximized = false; // input: pinta el icono correcto +}; + +// Renderiza tres iconos al borde derecho de la barra activa +// (BeginMainMenuBar o cualquier otro contenedor horizontal). +// Devuelve los flags que clico el usuario. +WindowButtons window_controls(bool is_maximized); + +// Drag handler: llamar cada frame cuando mouse esta sobre la barra. +// Devuelve delta a aplicar a la posicion de ventana. +// (signature por afinar) +struct WindowDrag { int dx, dy; bool dragging; }; +WindowDrag titlebar_drag_handler(); + +} // namespace fn_ui +``` + +La app conecta: +```cpp +auto wb = fn_ui::window_controls(glfwGetWindowAttrib(window, GLFW_MAXIMIZED)); +if (wb.min_clicked) glfwIconifyWindow(window); +if (wb.max_clicked) { /* toggle */ } +if (wb.close_clicked) glfwSetWindowShouldClose(window, true); +``` + +Asi `core` no toca GLFW; `framework/app_base` o cada app cablean lo +nativo. + +**Cambio en app_base**: + +```cpp +struct AppConfig { + // ...existing... + bool borderless = false; // true → GLFW_DECORATED=false +}; + +// en run_app(): +if (config.borderless) glfwWindowHint(GLFW_DECORATED, GLFW_FALSE); +``` + +### Fase 2 — integracion en shaders_lab + +```cpp +fn::AppConfig cfg; +cfg.borderless = true; +// ... +``` + +En `render()` despues del `panel_menu("View", ...)`, en la misma barra +(reorganizar para que `panel_menu` no cierre `EndMainMenuBar` y deje +hacer SameLine al borde derecho con `window_controls`). + +### Fase 3 (opcional) — resize por bordes + +Manejador de hit-test en 8 px alrededor del borde de la ventana. +Cambia cursor con `glfwSetCursor`, en mouse-down inicia resize manual +con `glfwSetWindowSize` + `glfwSetWindowPos`. + +### Fase 4 (solo si se nota la perdida) — snap de Windows nativo + +`WM_NCHITTEST` via HWND. `#ifdef _WIN32`, `glfwGetWin32Window`, +SetWindowLongPtr para subclassear. Trabajo significativo; postponer +hasta haber medido si la falta de snap molesta de verdad. + +--- + +## Decisiones pendientes para el dia que se haga + +1. Resize manual por bordes en v1 o solo arrastre + maximizar. +2. Si hacemos `WM_NCHITTEST` o aceptamos sin snap de Windows. +3. Multi-viewport ImGui: queda off mientras la titlebar sea custom, o se + replica el control en cada secondary window. +4. Forma final del API: `panel_menu` extendido vs `window_controls` aparte + (preferencia actual: aparte, mas limpia). + +--- + +## Mi recomendacion practica + +Empezar minimal: +- Borderless ON +- Drag arrastrando la MainMenuBar +- Doble-click maximiza/restaura +- Botones min/max/close al borde derecho +- **Sin resize manual** (la ventana es solo maximizable; util para apps tipo lab/dashboard) +- **Sin WM_NCHITTEST** (sin snap de Windows) +- Multi-viewport off + +Eso es 80% del valor con 20% del trabajo. Si despues echamos en falta el +resize manual o el snap, se anaden incremental. diff --git a/NEXT_STEPS_DATA_TYPES.md b/NEXT_STEPS_DATA_TYPES.md new file mode 100644 index 0000000..ba00a01 --- /dev/null +++ b/NEXT_STEPS_DATA_TYPES.md @@ -0,0 +1,151 @@ +# shaders_lab — proximos pasos: tipos de datos en las aristas del DAG + +## Estado actual + +Por cada arista del DAG circula **un solo tipo**: `vec4` (RGBA por pixel). +El DAG no es un grafo de pasadas de render — es una plantilla que se compila +a **un unico fragment shader GLSL 330 core** (ver `cpp/functions/gfx/dag_compile.cpp`). +Cada nodo se compila a `vec4 node_(vec4 a, ..., vec2 uv)`. Las conexiones +del editor son llamadas a funcion dentro del mismo `main()`. + +Datos accesibles dentro de cualquier nodo, **sin pasar por aristas**: +- `u_time`, `u_resolution`, `u_mouse` (preamble de `gl_shader`) +- `u_params[64]` (vec4 array global con todos los parametros del DAG) +- `u_preview_target` (int, para thumbnails per-nodo) +- `uv` (pasado explicitamente como ultimo argumento) + +Tipos de nodo (`DagKind` en `cpp/functions/gfx/dag_types.h`): + +| Kind | num_inputs | Recibe | Produce | +|--------|-----------:|------------------------------|------------------------| +| Gen | 0 | `uv`, `u_params` | `vec4` generado | +| Op | 1 | `vec4 a, vec2 uv` | `vec4` transformado | +| Blend | 2 | `vec4 a, vec4 b, vec2 uv` | `vec4` combinado | +| Output | 1 | (sumidero) | `fragColor` directo | + +--- + +## Tier 0 — Pins tipados (otros tipos GLSL escalares/vectoriales) + +Mismo modelo single-pass. Solo hay que **declarar tipo por pin** y ajustar +el fallback de input vacio en `dag_compile.cpp:75-89`. + +| Tipo | Para que | Coste | +|--------|--------------------------------------------------|----------| +| float | mascaras, alpha, heightmaps, distance fields | trivial | +| vec2 | UVs deformadas, gradientes, flow fields | trivial | +| vec3 | normales, posiciones, color sin alpha | trivial | +| mat2/3 | warps, rotaciones, transforms 2D | trivial | + +Desbloquea **Op de displacement**: nodo que toma `vec2` (offset) + `vec4` +(textura) y devuelve `vec4` muestreado con offset. + +Cambios necesarios: +- `DagNodeDef` declara tipo por pin de entrada y por salida +- `dag_compile` genera `node_` con esas firmas +- `dag_node_editor` pinta colores de pin distintos y rechaza conexiones incompatibles + +--- + +## Tier 1 — Imagenes rasterizadas (texturas) + +Sigue siendo single-pass. Anade un **Gen `image_load`** con `uniform sampler2D` +y emite `texture(u_img_, uv)` como `vec4`. Lo mismo aplica a: + +- **Video** → `sampler2D` re-subido cada frame +- **Webcam** → idem +- **Audio FFT** → `sampler1D` (espectro) o `sampler2D` con historial + +Coste: **medio**. Hace falta gestor de texturas (slot binding, hot-reload, +resize). La primitiva `Framebuffer` ya existe (`gl_framebuffer.h`) y +`gl_shader` ya gestiona uniforms — solo falta el camino de carga PNG/JPG → GL. + +--- + +## Tier 2 — Multi-pass (rompe el modelo de un solo shader) + +**Salto arquitectonico**. Hay operaciones imposibles en un solo pase porque +cada nodo solo "ve" su propio pixel: + +- Blur real con kernel grande (lee vecinos) +- Downsample / mipmap / piramides +- FFT, convoluciones, dilations +- Bloom, glow, SSAO +- Reaction-diffusion, fluidos, feedback (frame anterior) +- Cualquier filtro que requiera la imagen ya rasterizada + +Una arista deja de ser `vec4` y pasa a ser **texture handle (FBO completo)**. +Cada nodo se compila a su propio fragment shader, renderiza a su FBO, y el +siguiente lo muestrea como `sampler2D`. + +`dag_compile` cambia de naturaleza: pasa de "compilar a un main()" a +**planificar passes** (orden topologico, asignar FBOs con pool reusable, +ejecutar en orden). + +**Modos coexisten**: cada nodo declara `mode: inline` (se inlinea como hoy) +o `mode: pass` (FBO propio). En cruces `pass→inline` se muestrea el FBO; en +`inline→inline` sigue siendo llamada a funcion. Mejor de los dos mundos. + +Coste: **alto** pero la base ya esta (`Framebuffer`, `fullscreen_quad`). +Es trabajo de arquitectura, no de OpenGL. + +--- + +## Tier 3 — SDF (Signed Distance Fields) + +Sub-dominio aparte. Sigue siendo single-pass. **Mucho retorno por poco +codigo** — solo necesita pins de tipo `float` (Tier 0) + nuevos nodos. + +- Aristas llevan `float` (distancia con signo) +- Gens: `sdf_sphere`, `sdf_box`, `sdf_torus`, `sdf_plane` +- Ops: `sdf_smooth_union`, `sdf_intersect`, `sdf_subtract`, `sdf_round`, `sdf_displace` +- Terminator: `sdf_raymarch` toma SDF + material → `vec4` (raymarching dentro del fragment) + +Te da **3D real (esferas, mezclas organicas, fractales tipo Mandelbulb) sin +mallas, vertices ni camara fuera del shader**. Es el truco de la mitad de Shadertoy. + +--- + +## Tier 4 — Geometria 3D real + +Aqui ya **no es solo un fragment shader**. Necesita: + +- Vertex buffers (`GL_ARRAY_BUFFER`) con posiciones, normales, UVs +- Vertex shader + fragment shader emparejados +- Depth buffer +- Matrices `model/view/projection`, camara +- Posiblemente indices, instancing, geometry/tess shaders + +El DAG cambia de naturaleza: dos sub-grafos distintos. + +1. **Grafo de geometria** (mallas, transforms, materiales, luces) +2. **Grafo de imagen** (post-process del render final) + +Forma realista de integrarlo: un nodo "Render 3D Scene" (con mini-DAG +interno de mallas/camara/luces) **produce una textura** que entra en el +grafo 2D existente como cualquier otro `vec4`. + +Coste: **muy alto**. Practicamente otra app dentro de la app. + +--- + +## Tier 5 — Compute / particulas / simulaciones + +Compute shaders (`GL_COMPUTE_SHADER`), SSBOs, transform feedback. Para +sistemas de particulas con miles/millones de elementos, simulaciones +fisicas, reaction-diffusion masivo, etc. + +Coste muy alto, valor medio salvo que el objetivo del lab cambie. + +--- + +## Recomendacion de orden + +1. **Pins tipados** (Tier 0) — desbloquea displacement, mascaras, base para SDFs. +2. **Texturas** (Tier 1) — `image_load`, `video`, `webcam`, `audio_fft`. +3. **SDF + raymarch** (Tier 3) — maximo retorno por linea de codigo. +4. **Multi-pass** (Tier 2) — el salto arquitectonico. Permite blur real, bloom, feedback. +5. **Geometria 3D** (Tier 4) — solo si el caso de uso lo justifica; Tier 3 ya cubre mucho 3D estetico. + +Tier 2 es el cruce de caminos: hasta ahi puedes ir extendiendo el modelo +actual; a partir de ahi toca redisenar `dag_compile` como planificador de passes. diff --git a/SPEC.md b/SPEC.md new file mode 100644 index 0000000..556ae55 --- /dev/null +++ b/SPEC.md @@ -0,0 +1,825 @@ +# Shader Playground — MVP Spec + +> Editor web de shaders GLSL con: +> - **Auto-UI** generada a partir de anotaciones en `uniform`s. +> - **Integración con Claude API** para generar y modificar shaders desde chat. +> - **Registro mínimo de funciones** reutilizables que el LLM puede consultar e inyectar. +> - **Sistema de sidebars modulares** estilo apps de VJing: canvas central protagonista, paneles acoplables/ocultables a los lados. +> - **Output fullscreen** para sesiones de VJing. +> +> Pensado para completarse en un finde (fase A sábado + fase B domingo). + +--- + +## 0. Filosofía y no-objetivos + +### Objetivos del MVP + +- Escribir GLSL en un editor web, ver el resultado en vivo, con el canvas como protagonista visual. +- Declarar `uniform`s anotados → panel de controles se genera solo (sliders, color pickers, xy-pads, knobs). +- Chat lateral con Claude que genera shaders, los modifica, y **usa el fn-registry como herramienta** para reutilizar código existente. +- Biblioteca de funciones GLSL con búsqueda, tal que el usuario pueda "guardar este fbm" o "guardar este efecto de nube" y reutilizarlo en futuros shaders. +- Guardar/cargar shaders y funciones GLSL en `localStorage`. +- Modo fullscreen del canvas para usar en sesiones reales de VJ. + +### NO objetivos (explícitamente fuera del MVP) + +- ❌ Backend propio / base de datos / multi-usuario. +- ❌ Visualizaciones matemáticas auxiliares (FFT, campos, derivadas). +- ❌ MIDI / OSC / audio FFT / Syphon / Spout / NDI. +- ❌ Multi-pass / buffers encadenados tipo Shadertoy. +- ❌ Vertex shader custom (solo fullscreen quad fijo). +- ❌ Compute shaders. +- ❌ Fine-tuning del LLM, RAG elaborado, embeddings. +- ❌ Categorías/taxonomía compleja del registry (flat namespace con tags es suficiente). +- ❌ Múltiples shaders simultáneos con crossfade / capas estilo Photoshop. +- ❌ Sidebars flotantes arrastrables tipo Ableton/Resolume (siempre acoplados a los bordes). + +Si el MVP se usa de verdad durante un mes, las features de arriba entran en futuras iteraciones **una a una**. + +--- + +## 1. Stack técnico + +- **Package manager / runtime dev:** Bun. +- **Build:** Vite. +- **UI:** React 18 + TypeScript strict. +- **Estilos:** Tailwind + shadcn/ui. +- **Iconos:** lucide-react. +- **Estado:** Zustand. +- **Editor de código:** CodeMirror 6 (paquetes `@codemirror/state`, `@codemirror/view`, `@codemirror/legacy-modes` para GLSL). +- **Renderer:** WebGL2 directo (sin regl ni Three.js). Wrapper propio minimal en `src/renderer/`. +- **Layout:** CSS Grid + `react-resizable-panels` para los sidebars acoplados. +- **Color picker:** `react-colorful`. +- **LLM:** Claude API (`@anthropic-ai/sdk`) usando `claude-opus-4-7` con streaming. +- **Persistencia:** `localStorage` directo, envuelto en módulo fino. + +### Por qué WebGL2 puro y no regl + +- Vamos a hacer cosas específicas (hot-swap de programas, introspección de uniforms activos, manejo fino de errores de compilación con números de línea) que regl abstrae de formas que más tarde querríamos revertir. +- Aprender la API te deja preparado para WebGPU/wgpu en v2. +- El wrapper que necesitamos son ~200 líneas de TypeScript. Aceptable. + +### Estructura de carpetas + +``` +src/ + editor/ # CodeMirror wrapper y modo GLSL + renderer/ # WebGL2 wrapper, compile pipeline, fullscreen quad + parser/ # Extracción de uniforms desde GLSL source + registry/ # fn-registry: CRUD, búsqueda, inyección + llm/ # Cliente de Claude + tool definitions + prompt templates + ui/ + layout/ # Icon rail, sidebar containers, canvas stage + sidebars/ # CodeSidebar, ControlsSidebar, AgentSidebar, RegistrySidebar + controls/ # Slider, ColorPicker, XYPad, Knob, Toggle (widgets individuales) + components/ # shadcn/ui imports + store/ # Zustand stores (uno dedicado a layout) + storage/ # localStorage wrapper + schema + seed/ # Shaders y funciones de ejemplo que se cargan la primera vez + App.tsx + main.tsx +``` + +--- + +## 2. Layout de la aplicación (sistema de sidebars) + +### Principios + +- **El canvas del preview es siempre el protagonista visual.** Ocupa el área central y nunca se reduce a menos de ~60% del viewport salvo en layouts atípicos. Nada de mandarlo a un rincón. +- **Dos sidebars visibles a la vez** como configuración por defecto: uno a la izquierda (típicamente el Code), uno a la derecha (típicamente los Controls). El resto se invocan cuando hacen falta y reemplazan al que esté en ese lado. +- **Sidebars acoplados a los bordes**, no flotantes ni arrastrables. Simplicidad > flexibilidad en MVP. +- **Ancho de sidebar arrastrable** (min 240px, max ~600px), persistido por sidebar. +- **Toggle suave** (show/hide con animación corta, 150ms). + +### Zonas y componentes + +``` +┌──┬────────────────────┬────────────────────────┬────────────────────┐ +│ │ │ │ │ +│ │ │ │ │ +│I │ Left sidebar │ Canvas (preview) │ Right sidebar │ +│c │ (CODE o │ WebGL2 fullscreen │ (CONTROLS o │ +│o │ REGISTRY) │ quad │ AGENT) │ +│n │ │ │ │ +│ │ │ │ │ +│R │ │ │ │ +│a │ │ │ │ +│i │ │ │ │ +│l │ │ │ │ +│ │ │ │ │ +└──┴────────────────────┴────────────────────────┴────────────────────┘ +``` + +### Icon rail (columna vertical fija, siempre visible) + +Ancho ~48px en el borde izquierdo. Iconos verticales con `lucide-react`: + +- 📄 **Code** (ícono `FileCode2`) — toggle del CodeSidebar. +- 🎛️ **Controls** (ícono `Sliders`) — toggle del ControlsSidebar. +- 💬 **Agent** (ícono `Sparkles` o `MessageSquare`) — toggle del AgentSidebar. +- 📚 **Registry** (ícono `Library` o `BookOpen`) — toggle del RegistrySidebar. +- ─── separador ─── +- 💾 **Shaders** (ícono `Save`) — abre el panel de shaders guardados (también es un sidebar, en el lado opuesto al que esté libre). +- ⚙️ **Settings** (ícono `Settings`) — abre modal de settings (API key, modelo, tema). +- ⏏️ **Fullscreen** (ícono `Maximize2`) — entra en modo fullscreen VJ. + +Cada botón del rail muestra un indicador visual si su sidebar está activo (punto de color al lado del icono, o fondo resaltado). + +### Reglas de apertura de sidebars + +Cada sidebar tiene un "lado preferido": + +- `CODE` → izquierda (preferente). +- `CONTROLS` → derecha (preferente). +- `AGENT` → derecha (preferente). +- `REGISTRY` → izquierda (preferente). +- `SHADERS` → izquierda (preferente). + +Al pulsar el icono: + +1. Si ese sidebar ya está abierto → cerrarlo. +2. Si no está abierto → abrirlo en su lado preferido, sustituyendo lo que hubiera en ese lado. +3. Modificador `Alt + click` sobre el icono → abrirlo en el lado opuesto (forzar). + +Solo puede haber **un sidebar por lado**. No se apilan, no hay tabs superpuestos en el MVP. + +### Estado del layout en Zustand + +```ts +type SidebarId = 'code' | 'controls' | 'agent' | 'registry' | 'shaders'; +type Side = 'left' | 'right'; + +interface LayoutState { + sidebars: { + left: SidebarId | null; + right: SidebarId | null; + }; + widths: Record; // px, persistido + fullscreen: boolean; + + toggle: (id: SidebarId, opts?: { forceSide?: Side }) => void; + close: (side: Side) => void; + setWidth: (side: Side, width: number) => void; + enterFullscreen: () => void; + exitFullscreen: () => void; +} +``` + +### Layout por defecto al primer arranque + +``` +Left: CODE +Right: CONTROLS +``` + +Esto es el "layout trabajo": editor + controles en vivo alrededor del canvas. Persiste en localStorage. + +### Modo fullscreen (modo VJ) + +- Icon rail, sidebars y topbar desaparecen completamente. +- Canvas ocupa el 100% del viewport. +- Atajos siguen funcionando: `F` o `Esc` salen. +- Teclas `1..9` cargan shaders guardados por índice (útil para directo). +- **Overlay botón transparente** en esquina inferior derecha (icono `Maximize2` inverso, solo visible al mover el ratón en los últimos ~2 segundos, fade-out después). Click → salida de fullscreen. Esto es el "como en Resolume": para cuando estás tocando y quieres volver sin buscar tecla. +- Para ajustar uniforms en fullscreen sin salir, el camino es salir con `Esc`, ajustar, y volver a `F`. El MVP no tiene edge panels translúcidos — eso se evaluará en v2 tras uso real. + +### Topbar (fuera de fullscreen) + +Encima del canvas, arriba del todo, ~40px de alto: + +- Izq: nombre del shader actual (editable en línea con doble click). +- Centro: botones Play / Pause / Reset time. +- Der: indicador de compile (verde OK / rojo con `error on line X`), botón nuevo, selector de shader (dropdown). + +--- + +## 3. Contenido de cada sidebar + +### CODE sidebar + +- Header: título "Code" + indicador de modo actual (sidebar / overlay). +- Body: CodeMirror 6 con GLSL syntax highlight, números de línea, error underlining. +- Footer: info line con bytes, líneas, último compile time, estado (OK / Error línea N). + +**Dos modos de visualización, elegibles en Settings:** + +1. **Sidebar mode** (default): el editor vive acoplado al borde izquierdo, como cualquier otro sidebar. Coexiste con el preview y los controles. Es el modo "trabajo". + +2. **Overlay mode** (estilo apps VJ): al activar CODE, en lugar de abrir un sidebar, aparece un **modal semitransparente** (70% opacidad, fondo oscurecido) flotante sobre el canvas. El canvas sigue renderizando por debajo. `Esc` o click fuera cierra el modal. Es el modo "live coding / VJ" donde el canvas al máximo es lo importante y el código es una ventana que aparece y desaparece. + +La elección vive en el modal de Settings (ver §9). El usuario puede cambiar entre modos en cualquier momento. El comportamiento del icono "Code" en el rail se adapta automáticamente: en sidebar mode abre el sidebar, en overlay mode abre el modal. + +**Atajo `Cmd/Ctrl + /`** — independientemente del modo configurado, abre el editor en overlay temporalmente. Útil para un vistazo rápido sin cambiar preferencia. + +### CONTROLS sidebar + +- Header: "Controls" + botón "Reset to defaults" (devuelve todos los uniforms a su `default` del shader actual). +- Body: lista vertical de widgets autogenerados desde los uniforms anotados. Cada uniform es una "card" con: + - Nombre del uniform. + - Widget (Slider / ColorPicker / XYPad / Knob / Toggle / Slider2D). + - Valor actual formateado numéricamente. +- Footer: contador "N uniforms detected". +- Scroll vertical si no caben. + +Si el shader no tiene uniforms anotados: mensaje placeholder *"Declare uniforms with `// @slider ...` annotations to see controls here."* con un link "See annotation format" que abre un popover con ejemplos. + +### AGENT sidebar + +- Header: "Agent" + selector de modelo (dropdown: Opus/Sonnet/Haiku) + botón "Clear conversation". +- Body: lista de mensajes con markdown rendering, bloques de código GLSL con highlight, colapsables para `tool_use` y `tool_result` ("🔧 Searched registry: 3 results"). +- Botón "Apply this shader" junto a bloques de código en respuestas del LLM (ver §7). +- Below body: chips con prompts de demostración. +- Footer: textarea de input multilínea, `Cmd/Ctrl + Enter` envía, `Shift + Enter` nueva línea. + +### REGISTRY sidebar + +- Header: "Functions" + input de búsqueda (filtra en vivo por name/description/tags). +- Body: lista de funciones registradas. Cada item: + - Nombre + signature. + - Tags como pills (color distinto por tag). + - Descripción corta (2 líneas max, truncada). + - Acciones hover: "Insert into current shader" (añade al `@registry_inject_begin/end` markers), "View code" (expande inline), "Edit", "Delete". +- Footer: botón "+ New function" (abre modal de creación), "Import/Export JSON". + +### SHADERS sidebar + +- Header: "Saved shaders" + botón "+ New". +- Body: lista de shaders guardados. Cada item: + - Thumbnail pequeño (64x36 px) generado rasterizando el shader en un canvas offscreen al guardar. + - Nombre + fecha de última edición. + - Acciones hover: "Load", "Rename", "Duplicate", "Delete", "Export". +- Search por nombre en la cabecera. + +Los thumbnails son una mejora visual importante para VJing (reconocimiento instantáneo). Si no da tiempo, fallback a iconos/gradientes generados deterministicamente desde el nombre (tipo GitHub identicons). + +--- + +## 4. Invocación de sidebars + +### Canal principal: icon rail + +El **icon rail vertical permanente** en el borde izquierdo es el único camino de descubrimiento y uso habitual. Siempre visible (excepto en fullscreen VJ). Click en el icono → toggle del sidebar. Alt+click → abrir en lado opuesto al preferido. + +El rail es la fuente de verdad del layout: cualquier usuario, sin leer documentación, sabe qué sidebars existen y puede abrirlos con un click. + +### Atajos de teclado (para usuarios avanzados) + +Existen pero no son el canal principal — duplican funcionalidad del rail para quien quiera manos en el teclado: + +- `F1..F5` — toggle de cada sidebar (ver §11 para la tabla completa). +- `Cmd/Ctrl + B` — colapsar ambos sidebars (canvas máximo sin fullscreen). +- `F` — fullscreen VJ. +- `Esc` — cerrar lo que esté abierto en cascada. + +### Modo VJ: botón flotante para salir de fullscreen + +En modo fullscreen, al mover el ratón aparece un único botón flotante translúcido en la esquina inferior derecha para salir. Fade-out tras 2s. No hay más invocaciones flotantes — todo lo demás via `Esc` o teclas de atajo. + +--- + +## 5. Renderer (WebGL2 puro) + +### Fullscreen quad fijo + +Vertex shader no editable: + +```glsl +#version 300 es +in vec2 a_position; +void main() { + gl_Position = vec4(a_position, 0.0, 1.0); +} +``` + +Geometría: dos triángulos cubriendo `[-1,1]²`. + +### Fragment shader — lo escribe el usuario + +El wrapper antepone automáticamente: + +```glsl +#version 300 es +precision highp float; +out vec4 fragColor; + +uniform vec2 u_resolution; +uniform float u_time; +uniform vec2 u_mouse; +``` + +Estos tres uniforms siempre están disponibles, el parser los ignora (no aparecen en controls). + +### Render loop + +- `requestAnimationFrame`, `performance.now()` → `u_time` en segundos. +- Play/pause congela/descongela `u_time`. +- Reset pone `u_time = 0`. +- Canvas se redimensiona vía `ResizeObserver` al tamaño del stage central (cambia cuando se abren/cierran sidebars). + +### Compile pipeline + +- Al cambiar source: debounce 250 ms. +- `gl.createShader` → `gl.shaderSource` → `gl.compileShader`. +- Si `COMPILE_STATUS` es false: `gl.getShaderInfoLog()`, parsear línea (formato `ERROR: 0:: `), propagar al editor. +- Si compila: link program, swap atómico con el anterior, delete del anterior. +- Si el programa nuevo falla: mantener el anterior, canvas NUNCA se queda en negro por un error. +- Introspección post-link: `gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)` para validar que el parser encontró lo mismo que GLSL realmente expone. Discrepancias → warning en consola (no error). + +### Wrapper API + +```ts +interface Renderer { + compile(source: string): Promise; + setUniform(name: string, value: number | number[] | boolean): void; + setPlaying(playing: boolean): void; + resetTime(): void; + resize(w: number, h: number): void; + snapshot(w: number, h: number): Promise; // para thumbnails + dispose(): void; +} + +type CompileResult = + | { ok: true; activeUniforms: string[] } + | { ok: false; line: number; message: string }; +``` + +--- + +## 6. Parser de uniforms + +### Formato de anotación + +```glsl +uniform float u_speed; // @slider min=0 max=5 default=1 +uniform float u_freq; // @slider min=0.1 max=100 default=10 log=true +uniform vec3 u_colorA; // @color default=0.1,0.2,0.5 +uniform vec4 u_tint; // @color default=1,0.5,0,1 +uniform vec2 u_origin; // @xy min=-1 max=1 default=0,0 +uniform vec2 u_offset; // @slider2d min=-10,-10 max=10,10 default=0,0 +uniform float u_angle; // @knob min=0 max=6.283 default=0 +uniform int u_iter; // @slider min=1 max=50 default=10 step=1 +uniform bool u_debug; // @toggle default=false +``` + +### Algoritmo (regex, suficiente para MVP) + +Para cada línea: +1. Match `^\s*uniform\s+(\w+)\s+(\w+)\s*;\s*(?:\/\/\s*@(\w+)(.*))?$` +2. Grupo 1: tipo GLSL. Grupo 2: nombre. Grupo 3: widget kind (opcional). Grupo 4: resto de props. +3. Si no hay widget kind, usar defaults: + - `float` → `slider(min=0, max=1, default=0)` + - `vec2` → `xy(min=0,0 max=1,1 default=0.5,0.5)` + - `vec3` → `color(default=1,1,1)` + - `vec4` → `color(default=1,1,1,1)` + - `int` → `slider(step=1, min=0, max=10, default=0)` + - `bool` → `toggle(default=false)` +4. Parse props `key=value` separados por whitespace. Números: `parseFloat`. Vectores: split por `,`. Bools: `"true"/"false"`. +5. Ignorar uniforms con nombre en `{u_resolution, u_time, u_mouse}` (reservados). +6. Ignorar uniforms cuyo tipo sea `sampler2D` (no soportados, warning en consola). + +### Tipos TS + +```ts +type GLSLType = 'float' | 'vec2' | 'vec3' | 'vec4' | 'int' | 'bool'; + +type WidgetKind = 'slider' | 'slider2d' | 'color' | 'xy' | 'knob' | 'toggle'; + +interface UniformDescriptor { + name: string; + glslType: GLSLType; + widget: WidgetKind; + props: Record; + defaultValue: number | number[] | boolean; +} + +type ParseResult = { uniforms: UniformDescriptor[]; warnings: string[] }; +``` + +### Tests (Vitest, en `src/parser/parser.test.ts`) + +1. Uniform sin anotación → defaults por tipo. +2. `@slider min=0 max=10 default=5`. +3. `@color default=1,0,0` sobre `vec3`. +4. `@xy default=0.5,0.5` sobre `vec2`. +5. Uniforms reservados ignorados. +6. Comentario malformado → fallback a defaults, warning. +7. Múltiples uniforms en el mismo source, orden preservado. +8. Comentarios de bloque `/* ... */` no interfieren. + +--- + +## 7. Widgets de control + +Todos reciben `{value, onChange, descriptor}`, **controlados**, sin estado interno. + +### Slider (float, int) +- shadcn/ui ``. +- Label con valor numérico, click para editar. +- Si `log=true`: mapeo logarítmico. +- Si `step` definido: respetarlo. + +### ColorPicker (vec3, vec4) +- `react-colorful` `RgbaColorPicker`. +- Almacena internamente como array `[r,g,b]` o `[r,g,b,a]` en `[0,1]`. + +### XYPad (vec2 con @xy) +- Cuadrado ~150×150 px. +- Drag con `pointerdown/move/up`. +- Mapea `[0,1]²` del DOM a `[min.x, max.x] × [min.y, max.y]` con Y invertida. +- Valores numéricos debajo. + +### Slider2D (vec2 con @slider2d) +- Dos sliders apilados con labels `x` / `y`. + +### Knob (float con @knob) +- Círculo SVG con marca. +- Drag vertical u horizontal cambia el valor. +- Visual distinto al slider para que se distinga. + +### Toggle (bool) +- shadcn/ui ``. + +--- + +## 8. fn-registry (diseñado para ser usado por el LLM) + +Biblioteca mínima de funciones GLSL reutilizables, guardadas en `localStorage` y consultables tanto por el usuario (REGISTRY sidebar) como por el LLM (vía tool use). + +### Modelo de datos + +```ts +interface RegisteredFunction { + id: string; // nanoid + name: string; // nombre GLSL, e.g. "hash12" + signature: string; // "float hash12(vec2 p)" + description: string; // 1-2 frases: qué hace + tags: string[]; // ["noise", "hash"] + body: string; // cuerpo GLSL completo (función entera, firma incluida) + dependencies: string[]; // nombres de otras funciones del registry que usa + createdAt: number; + updatedAt: number; +} +``` + +### Operaciones + +- `list()` → `RegisteredFunction[]`. +- `search(query: string)` → `RegisteredFunction[]` (match en name, description, tags). +- `get(name: string)` → `RegisteredFunction | null`. +- `save(fn: RegisteredFunction)` → upsert. +- `delete(id: string)` → void. +- `resolveDependencies(names: string[])` → devuelve el conjunto cerrado transitivo ordenado topológicamente. + +### Inyección en el shader actual + +Se usa el patrón de **markers**: el shader tiene un bloque marker, y el renderer — antes de compilar — reemplaza el contenido entre markers con el cuerpo de las funciones declaradas más sus dependencias transitivas. + +```glsl +// @registry_inject_begin +// hash12, perlin2d, rotate2d +// @registry_inject_end + +void main() { ... } +``` + +Si el usuario edita dentro del bloque manualmente, se regenera al guardar (con confirmación si hay cambios). + +### Semilla inicial (seed) + +Cargar ~15 funciones clásicas la primera vez que se abre la app. Mínimo: + +- `hash11`, `hash12`, `hash22` (hashes deterministas sin `sin()`). +- `value_noise_2d`, `perlin_noise_2d`, `simplex_noise_2d`. +- `fbm` (fractal brownian motion). +- `rotate2d`. +- `sdf_circle`, `sdf_box`, `sdf_line`. +- `smoothmin`. +- `palette` (Inigo Quilez cosine palette). +- `hsv2rgb`, `rgb2hsv`. + +Cada una con `tags` y `description` relevantes para que el LLM pueda buscarlas semánticamente. + +### Panel Functions (ya descrito en §3 como REGISTRY sidebar) + +--- + +## 9. Integración con Claude (LLM) + +### Configuración + +- Usuario pega su API key en un modal de Settings → se guarda en `localStorage` (warning claro: "se guarda en local, no la uses en ordenadores compartidos"). +- Selector de modelo: `claude-opus-4-7` (default, mejor calidad), `claude-sonnet-4-6` (más rápido), `claude-haiku-4-5-20251001` (muy rápido, para iteración). + +### Cliente + +- `@anthropic-ai/sdk` con `dangerouslyAllowBrowser: true`. +- Streaming siempre activo. +- Historial de conversación persistido en `localStorage` (último N mensajes, truncable). + +### System prompt (template) + +``` +You are a creative shader programmer helping the user write WebGL2 fragment shaders for visual art and VJing. + +The host environment provides these uniforms automatically — never redeclare them: + uniform vec2 u_resolution; + uniform float u_time; + uniform vec2 u_mouse; + +The target is WebGL2 / GLSL ES 3.00. Use `fragColor` as the output (it's predeclared as `out vec4 fragColor`). The `#version 300 es` directive is prepended automatically — don't include it. + +When you declare uniforms the user should be able to tweak, annotate them with a magic comment so the UI generates a control automatically. Supported annotations: + + uniform float u_speed; // @slider min=0 max=5 default=1 + uniform float u_freq; // @slider min=0.1 max=100 default=10 log=true + uniform vec3 u_color; // @color default=0.1,0.2,0.5 + uniform vec4 u_tint; // @color default=1,1,1,1 + uniform vec2 u_pos; // @xy min=-1 max=1 default=0,0 + uniform float u_angle; // @knob min=0 max=6.283 default=0 + uniform bool u_debug; // @toggle default=false + +Guidelines: +- Prefer to REUSE functions from the registry when possible. You have tools to search and insert registry functions. +- Keep shaders self-contained and working on first compile. +- Use functional style: pure functions, no side effects inside helpers, compose via explicit parameters. +- When producing a complete shader, annotate uniforms the user is likely to want to tweak live. +- Prefer hash functions that don't rely on `sin()` (use hash12/hash22 from the registry). +- If the user asks for a modification, return the full updated shader via apply_shader, not a diff. +- Keep aspect-ratio correctness in mind: use `(gl_FragCoord.xy - 0.5*u_resolution.xy) / u_resolution.y` for centered, non-stretched coordinates unless a different framing is asked for. + +Tools available: +- search_registry(query): find functions by name/description/tags. +- get_function(name): retrieve a function's full body. +- list_registry(): list all available function names and signatures. +- apply_shader(source): replace the user's current shader with this source. Use this when the user explicitly asks you to generate or modify their shader. +- save_function({name, signature, description, tags, body, dependencies}): add a function to the registry. +``` + +### Tools (Anthropic tool use) + +```ts +const tools = [ + { + name: 'search_registry', + description: 'Search for reusable GLSL functions in the local registry by name, description, or tags.', + input_schema: { type: 'object', properties: { query: { type: 'string' } }, required: ['query'] }, + }, + { + name: 'get_function', + description: 'Retrieve the full body of a registered function by name.', + input_schema: { type: 'object', properties: { name: { type: 'string' } }, required: ['name'] }, + }, + { + name: 'list_registry', + description: 'List all functions in the registry with their signatures and tags.', + input_schema: { type: 'object', properties: {} }, + }, + { + name: 'apply_shader', + description: 'Replace the user\'s current fragment shader with new source. Use when the user asks to generate or modify their shader.', + input_schema: { type: 'object', properties: { source: { type: 'string' } }, required: ['source'] }, + }, + { + name: 'save_function', + description: 'Save a reusable GLSL function to the registry so it can be used in future shaders.', + input_schema: { + type: 'object', + properties: { + name: { type: 'string' }, + signature: { type: 'string' }, + description: { type: 'string' }, + tags: { type: 'array', items: { type: 'string' } }, + body: { type: 'string' }, + dependencies: { type: 'array', items: { type: 'string' } }, + }, + required: ['name', 'signature', 'body'], + }, + }, +]; +``` + +### Loop de tool use + +Loop estándar de Anthropic: mandar mensaje con `tools`, si `stop_reason === 'tool_use'` ejecutar las tools, añadir resultados como `tool_result`, volver a llamar al API, repetir hasta `stop_reason === 'end_turn'`. + +Las tools son **locales y síncronas**: todas tocan `localStorage` o el store Zustand. No hay red más allá de la llamada al API de Anthropic. + +### Confirmación antes de aplicar + +- `apply_shader` **no reemplaza silenciosamente** el código actual. Muestra un diff side-by-side y el usuario confirma. Crítico para que el LLM no borre trabajo del usuario. +- `save_function` aplica directamente (es aditivo, no destructivo), pero muestra toast con undo. + +### Prompts de demostración (chips en el AgentSidebar) + +- "Make a lava lamp shader" +- "Add audio-reactive colors using u_time" +- "Refactor the current shader to use registry functions" +- "Explain what this shader does line by line" +- "Create a kaleidoscope with 8 segments" + +--- + +## 10. Persistencia (localStorage) + +### Schema + +```ts +interface StorageSchema { + version: 1; + currentShader: string; // id del shader actualmente cargado + shaders: Record; + thumbnail?: string; // dataURL pequeño para mostrar en SHADERS sidebar + updatedAt: number; + }>; + functions: Record; + conversations: Array<{ + id: string; + messages: Array<{ role: string; content: unknown }>; + updatedAt: number; + }>; + settings: { + apiKey: string | null; + model: string; + theme: 'dark' | 'light'; + codeMode: 'sidebar' | 'overlay'; // modo del editor: acoplado o flotante + }; + layout: { + sidebars: { left: string | null; right: string | null }; + widths: { left: number; right: number }; + }; +} +``` + +### Claves + +- Una única clave root: `shader-playground:v1`. +- Migraciones: si se encuentra `version < 1` o key vieja, crear backup con sufijo timestamp y regenerar. +- Debounce 500 ms en todas las escrituras. +- API key jamás incluida en exports/imports manuales del usuario. + +--- + +## 11. Atajos de teclado (completos) + +### Sidebars + +- `F1` — toggle CODE sidebar. +- `F2` — toggle CONTROLS sidebar. +- `F3` — toggle AGENT sidebar. +- `F4` — toggle REGISTRY sidebar. +- `F5` — toggle SHADERS sidebar. +- `Cmd/Ctrl + B` — colapsar ambos sidebars (canvas máximo, no fullscreen). +- `Cmd/Ctrl + /` — abrir CODE como modal overlay sobre canvas. + +### Render / modo VJ + +- `F` — toggle fullscreen VJ. +- `Esc` — cerrar modal → cerrar sidebars → salir fullscreen (en cascada). +- `Space` (fuera del editor) — play/pause. +- `Cmd/Ctrl + R` — reset time. +- `1..9` (en fullscreen) — cargar shader guardado N. + +### Trabajo + +- `Cmd/Ctrl + S` — guardar snapshot inmediato. +- `Cmd/Ctrl + Enter` — forzar recompile (desde editor) o enviar mensaje (desde chat). +- `Cmd/Ctrl + K` — focus en chat input (abre AGENT si está cerrado). + +--- + +## 12. Criterios de aceptación + +### Fase A — Sábado (core + layout) + +- [ ] Editor GLSL funcional con CodeMirror y highlight. +- [ ] WebGL2 renderer con fullscreen quad, hot-recompile con debounce. +- [ ] Error de compilación con línea, canvas mantiene el último válido. +- [ ] Parser de uniforms con todas las anotaciones funcionando. +- [ ] 6 widgets de control conectados. +- [ ] Icon rail visible con 6-7 iconos y toggles funcionales. +- [ ] Los 4 sidebars principales (CODE, CONTROLS, SHADERS, settings modal) funcionan con toggle y ancho redimensionable. +- [ ] Layout default (CODE izq + CONTROLS der) al primer arranque. +- [ ] Setting `codeMode` (sidebar / overlay) funciona: al cambiarlo en Settings, el icono "Code" del rail abre el editor en el modo elegido. +- [ ] Estado del layout persiste en localStorage. +- [ ] Cambiar un slider actualiza el render sin lag. +- [ ] Persistencia: recarga la página y vuelve todo igual, incluidos qué sidebars estaban abiertos. +- [ ] 4 shaders de ejemplo cargan correctamente. +- [ ] Fullscreen funciona con `F` y `Esc`, icon rail y sidebars desaparecen limpiamente. +- [ ] Modo "code overlay" funciona cuando está activado en Settings: el icono "Code" abre un modal flotante sobre el canvas en vez del sidebar. +- [ ] Tests del parser pasan. + +**Si la fase A está completa y funciona, ya hay algo usable.** La fase B es aditiva. + +### Fase B — Domingo (LLM + registry) + +- [ ] REGISTRY sidebar con búsqueda, lista filtrable, acciones "insert / view / edit / delete". +- [ ] Seed inicial de ~15 funciones cargadas al primer arranque. +- [ ] Markers `@registry_inject_begin/end` funcionan, se reemplazan antes de compilar. +- [ ] Modal de Settings para API key de Claude. +- [ ] AGENT sidebar con chat funcional, streaming visible. +- [ ] Tool use funcional (`search_registry`, `get_function`, `list_registry`, `apply_shader`, `save_function`). +- [ ] `apply_shader` muestra diff y pide confirmación. +- [ ] Chips de prompts de demostración. +- [ ] Conversación persiste entre recargas. + +### Features opcionales (solo si sobra tiempo) + +- [ ] Thumbnails generados en el SHADERS sidebar. +- [ ] Botón overlay flotante en fullscreen para salir (si no, queda `Esc`). +- [ ] Export/import del registry como JSON. + +### Criterio global + +- [ ] Puedo usar la app para: (1) pedirle a Claude "haz un shader de nubes con double domain warping, guardado como función en el registry", (2) verlo aparecer en el REGISTRY sidebar, (3) abrir un shader nuevo en blanco, (4) pedirle "carga la función de nubes del registry y úsala con una paleta roja-naranja", (5) ajustar los sliders que aparezcan automáticamente, (6) guardarlo, (7) entrar en fullscreen, (8) recargar la página y seguir teniendo todo. **Si este flujo end-to-end no funciona, el MVP no está hecho.** + +--- + +## 13. Orden de implementación + +### Sábado (Fase A) + +1. Scaffold: Bun init, Vite, React, Tailwind, shadcn CLI, Zustand. Layout con icon rail + stage central + sidebar containers vacíos. +2. WebGL2 wrapper: fullscreen quad, fragment shader hardcoded sólido. Verifica render. +3. CodeMirror con GLSL en CODE sidebar. Source en store. Recompile al cambiar (debounce). +4. Error handling: parse del infoLog, display en editor. +5. Layout store: toggle de sidebars, reglas de lado preferido, persistencia del layout. +6. Parser de uniforms + tests. +7. Store de uniformValues sincronizado con descriptors (diff al cambiar shader). +8. CONTROLS sidebar renderizando widgets autogenerados. +9. Widgets uno a uno: Slider → Toggle → Color → XY → Knob → Slider2D. Cada uno end-to-end. +10. Persistencia localStorage con debounce (shaders + layout + uniformValues). +11. SHADERS sidebar: lista, guardar/cargar/renombrar/duplicar. +12. Shaders de ejemplo en seed. +13. Fullscreen + atajos de teclado + setting `codeMode` con ambas variantes (sidebar y overlay). + +### Domingo (Fase B) + +14. fn-registry: modelo, CRUD, búsqueda, seed, tests. +15. Markers `@registry_inject_begin/end` y preprocesado antes de compilar. +16. REGISTRY sidebar con búsqueda y acciones. +17. Settings modal con API key. +18. Cliente Claude con streaming (sin tools). +19. AGENT sidebar: chat, markdown rendering, persistencia. +20. Tool definitions y loop de tool use. +21. Diff + confirmación para `apply_shader`. +22. Chips de prompts de demostración. +23. Pulido visual, toasts, mensajes de error amigables. + +### Qué sacrificar si algo se alarga (en orden, de menos a más crítico) + +1. Thumbnails del SHADERS sidebar (fallback: icon/gradient generado desde el nombre). +2. Botón flotante de salida de fullscreen (queda solo `Esc`). +3. `Slider2D` y `Knob` (los `vec2` usan XY, los `float` normal Slider). +4. Setting `codeMode` — dejar solo modo sidebar; overlay va a v2. +5. Modal de creación de función en registry (solo insert, edit a mano en JSON). +6. Chips de prompts de demostración. +7. Markers `@registry_inject_*` (el LLM pega código directo). + +--- + +## 14. Calidad de código + +- TypeScript strict mode, `noImplicitAny`, `strictNullChecks`. +- Módulos `parser/`, `renderer/`, `registry/`, `llm/` son **puros y testables sin DOM ni React**. +- Widgets reciben `value`/`onChange` y son ignorantes del store (el puente se hace en `ControlsSidebar`). +- Render loop NO pasa por React. Subscribe al store de Zustand y lee valores directamente cada frame. +- Cada sidebar es un componente React autocontenido que lee/escribe en su slice del store. +- Vitest para tests del parser y del registry (resolver dependencias transitivas). +- Prettier + ESLint básicos, sin fanatismo. +- Commits en imperativo corto ("Add icon rail", "Wire AGENT sidebar to Claude client"). + +--- + +## 15. Lo que NO hay que hacer aunque apetezca + +- No añadir audio / MIDI en el MVP. +- No añadir multi-pass "porque es solo un buffer más". +- No refactorizar los widgets a una abstracción genérica antes de tener los 6 implementados. +- No hacer los sidebars flotantes/arrastrables tipo Ableton/Resolume. Siempre acoplados a bordes. +- No permitir más de un sidebar por lado en MVP. Si quieres ver REGISTRY y CONTROLS a la vez, abres uno en cada lado. No tabs apilados. +- No meter un sistema de plugins. +- No añadir LangChain, vector DBs, ni RAG. La tool `search_registry` es un string match simple y es suficiente. +- No hacer backend en Go para persistir "cuando sea". Todo en `localStorage` hasta que duela de verdad. +- No soportar vertex shaders custom. +- No soportar múltiples shaders simultáneos con crossfade. Un shader activo, fullscreen, listo. + +Cada una de estas es un día comido y medio MVP menos. Después del MVP y de un mes usándolo de verdad, vuelvo a mirar qué duele y decido. + +--- + +## 16. Referencias útiles + +- The Book of Shaders: https://thebookofshaders.com +- Shadertoy: https://www.shadertoy.com +- ISF (precedente de las anotaciones): https://isf.video +- Dave Hoskins "Hash without Sine": https://www.shadertoy.com/view/4djSRW +- Inigo Quilez articles: https://iquilezles.org/articles/ +- Resolume / VDMX / KodeLife (referencias de UX de VJing): cómo los sidebars se esconden y la importancia del canvas central. +- Claude API docs: https://docs.claude.com +- `@anthropic-ai/sdk` con navegador: usar `dangerouslyAllowBrowser: true`, warning explícito en la UI sobre la exposición de la API key. diff --git a/extracted/ARCHITECTURE.md b/extracted/ARCHITECTURE.md new file mode 100644 index 0000000..c7b556d --- /dev/null +++ b/extracted/ARCHITECTURE.md @@ -0,0 +1,254 @@ +# Shader DAG Lab — Arquitectura y hoja de ruta + +Este documento resume el diseño acumulado tras iterar en artifacts desde +"composición funcional sobre listas" hasta "DAG de shaders WebGPU con fan-in". +Sirve como contexto para retomar el proyecto en Claude Code sin perder las +decisiones de diseño. + +## El problema que resuelve + +Un entorno para componer fragment shaders WGSL visualmente: el usuario arrastra +"nodos" (primitivas shader) desde una paleta a un pipeline, configura +parámetros con sliders / XY pads / color pickers, y el sistema compila el DAG +resultante a un único fragment shader ejecutado en WebGPU. + +Las dos vistas — grafo y código — son proyecciones del mismo modelo interno. +El usuario casual arrastra cajas; el usuario avanzado lee el WGSL generado. + +## Arquitectura en una frase + +``` +Pipeline state (árbol JSON) + ↓ compileDagToWGSL() +WGSL source + ↓ device.createShaderModule() +GPU pipeline + ↓ render loop, escribe uniforms cada frame +Canvas +``` + +Separación crítica: la **topología** del DAG (qué nodos, en qué orden, con qué +aristas) dispara recompilación del shader. Los **valores de parámetros** NO +disparan recompilación — solo se escriben al uniform buffer cada frame. Esto +hace que mover un slider sea instantáneo mientras que añadir/quitar nodos +paga el coste de compilar un nuevo pipeline. + +## Modelo de datos + +Un `step` del pipeline es: + +```ts +type Step = { + id: string; // UUID estable (sobrevive reorders) + name: string; // clave en el catálogo NODES + params: { // valores de parámetros editables + [key: string]: number + }; + meta?: { // metadatos que afectan compilación + sourceId?: string; // para blends: id del otro nodo fuente + }; +}; +``` + +El `topologyKey` que dispara recompilación se computa como: +``` +pipeline.map(s => `${s.name}:${s.meta?.sourceId ?? ''}`).join('|') +``` + +## Catálogo de nodos + +Cada entrada en `NODES` declara: + +```ts +{ + kind: 'gen' | 'op' | 'blend' | 'warp' | 'sdf' | 'filter' | 'modulator', + label: string, + desc: string, + params: [{ k: string, d: number }], // hasta 4 slots del vec4 + controls: Control[], // descriptores de UI + body: (idx: number) => string, // emite el cuerpo WGSL +} +``` + +### Tipos de control UI actualmente soportados +- `slider`: rango numérico con thumb +- `xy`: pad 2D que controla dos params contiguos +- `color`: picker RGB que controla tres params contiguos +- `select`: dropdown con opciones discretas (valor = índice) +- `source`: selector del nodo fuente para blends (escribe a `meta.sourceId`) + +## Compilación del DAG a WGSL + +`compileDagToWGSL(pipeline)` emite un shader con esta estructura: + +```wgsl +struct Uniforms { + time: f32, + _pad: f32, + resolution: vec2, + params: array, 16>, +}; + +@group(0) @binding(0) var u: Uniforms; + +@vertex fn vs(...) { /* fullscreen triangle */ } + +// Una función por nodo, nombrada node_ +fn node_0(c: vec4, uv: vec2) -> vec4 { ... } +fn node_1(a: vec4, b: vec4, uv: vec2) -> vec4 { ... } // blend + +@fragment fn fs(@builtin(position) pos: vec4) -> @location(0) vec4 { + let uv = pos.xy / u.resolution; + let out_0 = node_0(vec4(0.0), uv); + let out_1 = node_1(out_0, out_0, uv); // blend con source=out_0 + return out_1; +} +``` + +Los outputs intermedios `out_` se preservan como variables locales para +que los blends puedan referenciar nodos anteriores arbitrarios. Esto es lo +que hace que el DAG sea más que un pipeline lineal. + +## Estado actual de tipos de nodo + +**Implementados (lab 004):** +- `gen`: solid, gradient, plasma, checker, circle, stripes, noise (hash) +- `op`: invert, gamma, contrast, saturate, hueShift, tint, posterize, vignette, ripple, pulse +- `blend`: mix, multiply, screen, add, difference, darken, lighten, mask + +**Pendientes de implementar (ver hoja de ruta abajo):** +- `warp`: distorsiones de UV (twirl, polar, kaleidoscope, pixelate, chromatic) +- `sdf`: campos de distancia con compositing (smooth_union, subtract, intersect) +- `modulator`: LFOs que producen escalares animados para alimentar parámetros +- Ruidos procedurales reales: perlin, simplex, worley, fbm +- Filtros de luminancia: threshold, levels, duotone, channel_swap +- Inputs externos: mouse como uniform adicional + +## Hoja de ruta post-artifact + +### Lab 005 — Warps + Ruidos + Filtros de luma + Mouse +Cambios que requiere: +- **Refactor de compilación**: generadores pasan a ser `fn sample_gen_(uv) -> vec4` + para que los warps puedan modificar uv antes del muestreo. +- La cadena main mantiene dos estados: `uv` (mutable por warps) y `c` (color). +- Nuevo kind `warp` con snippets que transforman `uv`. +- Nuevo uniform `mouse: vec2` (coords 0..1) actualizado desde pointer events. +- Perlin/FBM como snippets WGSL copiados de implementaciones conocidas + (hash-based gradient noise). + +### Lab 006 — Multi-pass (convoluciones + feedback) +Cambio arquitectónico mayor: cada nodo puede escribir a una textura offscreen, +el siguiente samplea esa textura. Requiere: +- Render targets intermedios (pool de texturas) +- Múltiples bind groups +- Double buffer para feedback temporal (frame N+1 lee frame N) +- Detección de qué nodos necesitan aislar su pass y cuáles pueden fusionarse + +Desbloquea: blur gaussiano, sobel, edge detection, bloom, reaction-diffusion, +trails, motion blur. + +### Lab 007 — SDFs tipados +Introduce heterogeneidad de tipos en las aristas del DAG: +- Aristas de tipo `field` (`f32`) vs `color` (`vec4`) +- Validación de tipos en compilación: un operador de color no acepta un field +- Nodo terminal `render_sdf` que convierte field → color con shading opciones + (planar, gradient, stroke, inflate/outline) +- Operadores SDF: `smooth_union`, `subtract`, `intersect`, `round`, `onion` + +Este es el salto conceptual a "DAG tipado" que formaliza lo que el lab 001 +insinuaba (el fold cambiaba de tipo la arista). + +### Lab 008 — Bidireccional código ↔ grafo +Hasta ahora solo va grafo → código. El inverso requiere: +- Parser acotado del WGSL que nosotros mismos emitimos (no WGSL general) +- Marcadores en comentarios `// @meta node= id=` para robustez +- Detección de diff estructural para mantener posiciones / parámetros al editar +- Editor de código integrado (CodeMirror) sincronizado con el pipeline + +### Lab 009 — Nodos custom definidos por usuario +Modal donde el usuario escribe body WGSL + declara params, y se registra en +la paleta como si viniera del catálogo. Cierra la asimetría código→grafo sin +necesitar parser completo. Persiste en localStorage o export/import JSON. + +## Decisiones de diseño que vale la pena recordar + +1. **Los IDs de nodo son UUIDs, no índices posicionales**. Las referencias + de `sourceId` sobreviven a reorderings. Los índices se re-derivan en + compilación. + +2. **El patrón "armed drag"** para el drag handle: el nodo es `draggable=false` + por defecto y solo se arma a `true` cuando ocurre pointerdown sobre el + header con el handle. Esto evita que los sliders internos activen drag + accidentalmente. + +3. **Uniform packing**: todos los parámetros de un nodo van en `u.params[idx]` + (un `vec4`). Si un nodo necesita más de 4 floats, habría que + reasignar slots o usar dos slots. No hay nodos hasta ahora que lo pidan. + +4. **MAX_NODES = 16** es arbitrario, limitado solo por el tamaño del array + de params en el uniform buffer. Subir es trivial: cambia la constante. + +5. **Las arbitrary values de Tailwind no funcionan** en algunos entornos + sin JIT. Grid templates, min-h con calc, etc. se escriben con + `style={{...}}` inline. En el proyecto de Claude Code esto no debería + ser problema si usas Tailwind 3+ con su compilador. + +## Stack sugerido para Claude Code + +- **Vite + React + TypeScript**: setup estándar, HMR inmediato +- **Tailwind 3+** con JIT: los arbitrary values funcionarán esta vez +- **Zustand o Jotai** para el pipeline state (se va a hacer más complejo) +- **Biome o ESLint + Prettier** para formato consistente +- Opcional pero recomendado en cuanto crezca: + - **Vitest** para tests unitarios del compilador (`compileDagToWGSL`) + - **React Testing Library** si tests de UI + - **reactflow** si en lab 008 quieres visualizar el DAG como grafo editable + +## Organización de archivos sugerida + +``` +src/ + nodes/ + index.ts # export del catálogo completo + generators.ts # gen kind + operators.ts # op kind + blends.ts # blend kind + warps.ts # (lab 005) + sdfs.ts # (lab 007) + types.ts # tipos compartidos NodeDef, Control, etc. + compiler/ + compileDagToWGSL.ts # la función principal + uniforms.ts # packing y escritura del buffer + validate.ts # validación de tipos (lab 007+) + webgpu/ + useWebGPU.ts # el hook + renderer.ts # setup del device, context, pipeline + ui/ + PipelineNode.tsx + controls/ + Slider.tsx + XYPad.tsx + ColorPicker.tsx + Select.tsx + SourceSelector.tsx + Palette.tsx + Canvas.tsx + WGSLView.tsx + store/ + pipeline.ts # Zustand store + App.tsx + main.tsx +``` + +## Primeros pasos en Claude Code + +1. `npm create vite@latest shader-dag -- --template react-ts` +2. Copiar `shader-dag-blends.jsx` como base monolítica, renombrar a `.tsx` +3. Arreglar los tipos TypeScript (muchas funciones del artifact no están tipadas) +4. Romper el monolito según la estructura de arriba +5. Implementar lab 005: refactor de compilación para habilitar warps + +Nota: el artifact de base (`shader-dag-blends.jsx`) funciona pero tiene el +tipado implícito de JSX. Convertir a TS te va a revelar varios tipos que +merece la pena modelar explícitamente (especialmente `Control`, que ahora es +un union discriminado informal). diff --git a/extracted/functional-lab.jsx b/extracted/functional-lab.jsx new file mode 100644 index 0000000..800f352 --- /dev/null +++ b/extracted/functional-lab.jsx @@ -0,0 +1,598 @@ +import { useState, useMemo, useRef } from 'react'; +import { X, Trash2, GripVertical } from 'lucide-react'; + +// ───────────────────────────────────────────────────────────────── +// Categorías morfológicas — cada una con su identidad visual +// ───────────────────────────────────────────────────────────────── +const CATEGORIES = { + gen: { + label: 'Generadores', + subtitle: 'Anamorfismos', + signature: 'seed → [a]', + color: '#7dd3fc', + }, + map: { + label: 'Transformaciones', + subtitle: 'Functor · map', + signature: '(a→b) → [a]→[b]', + color: '#c4b5fd', + }, + filter: { + label: 'Filtros', + subtitle: 'Refinamientos', + signature: '[a] → [a]', + color: '#fcd34d', + }, + scan: { + label: 'Scans', + subtitle: 'Folds acumulativos', + signature: '[a] → [a]', + color: '#86efac', + }, + fold: { + label: 'Plegados', + subtitle: 'Catamorfismos', + signature: '[a] → b', + color: '#fda4af', + }, +}; + +// PRNG determinista para que `random` sea reproducible +function mulberry32(seed) { + let a = seed; + return function() { + a = (a + 0x6D2B79F5) | 0; + let t = a; + t = Math.imul(t ^ (t >>> 15), t | 1); + t ^= t + Math.imul(t ^ (t >>> 7), t | 61); + return ((t ^ (t >>> 14)) >>> 0) / 4294967296; + }; +} + +// ───────────────────────────────────────────────────────────────── +// Catálogo de funciones disponibles +// ───────────────────────────────────────────────────────────────── +const FUNCTIONS = { + // — GENERADORES (anamorfismos: producen estructura desde un seed) — + range: { cat: 'gen', symbol: 'range', sig: 'n → [1..n]', params: [{k:'n',d:20,min:1,max:120}], run: (_,p) => Array.from({length:p.n}, (_,i)=>i+1) }, + linspace: { cat: 'gen', symbol: 'linspace', sig: 'n → [0..2π]', params: [{k:'n',d:60,min:2,max:200}], run: (_,p) => Array.from({length:p.n}, (_,i)=>(i/(p.n-1))*2*Math.PI) }, + sine: { cat: 'gen', symbol: 'sine', sig: 'n → sin(4π·t)', params: [{k:'n',d:80,min:4,max:200}], run: (_,p) => Array.from({length:p.n}, (_,i)=>Math.sin((i/(p.n-1))*4*Math.PI)) }, + noise: { cat: 'gen', symbol: 'noise', sig: 'seed → U(-1,1)', params: [{k:'n',d:50,min:2,max:200},{k:'seed',d:7,min:1,max:9999}], run: (_,p) => { const r=mulberry32(p.seed); return Array.from({length:p.n}, ()=>r()*2-1); } }, + fib: { cat: 'gen', symbol: 'fib', sig: 'n → Fibₙ', params: [{k:'n',d:12,min:2,max:25}], run: (_,p) => { const r=[1,1]; while(r.length a.map(x=>x*2) }, + square: { cat: 'map', symbol: 'x²', sig: 'x ↦ x²', run: (a) => a.map(x=>x*x) }, + negate: { cat: 'map', symbol: '-x', sig: 'x ↦ -x', run: (a) => a.map(x=>-x) }, + abs: { cat: 'map', symbol: '|x|', sig: 'x ↦ |x|', run: (a) => a.map(x=>Math.abs(x)) }, + sqrt: { cat: 'map', symbol: '√', sig: 'x ↦ √|x|', run: (a) => a.map(x=>Math.sqrt(Math.abs(x))) }, + sin: { cat: 'map', symbol: 'sin', sig: 'x ↦ sin x', run: (a) => a.map(x=>Math.sin(x)) }, + log: { cat: 'map', symbol: 'ln', sig: 'x ↦ ln(1+|x|)', run: (a) => a.map(x=>Math.log(1+Math.abs(x))) }, + + // — FILTROS (refinamiento) — + positive: { cat: 'filter', symbol: '>0', sig: 'x > 0', run: (a) => a.filter(x=>x>0) }, + even: { cat: 'filter', symbol: 'par', sig: 'x even', run: (a) => a.filter(x=>Math.round(x)%2===0) }, + gt: { cat: 'filter', symbol: '>t', sig: 'x > t', params: [{k:'t',d:0,min:-50,max:50,step:0.5}], run: (a,p) => a.filter(x=>x>p.t) }, + + // — SCANS (folds acumulativos: dejan rastro) — + cumsum: { cat: 'scan', symbol: 'Σ*', sig: 'Σ prefix', run: (a) => { let s=0; return a.map(x=>s+=x); } }, + cummax: { cat: 'scan', symbol: 'max*', sig: 'max prefix', run: (a) => { let m=-Infinity; return a.map(x=>{m=Math.max(m,x); return m;}); } }, + diff: { cat: 'scan', symbol: 'Δ', sig: 'xₙ - xₙ₋₁', run: (a) => a.map((x,i)=>i===0?0:x-a[i-1]) }, + mavg: { cat: 'scan', symbol: 'μ_k', sig: 'media móvil k', params: [{k:'k',d:3,min:1,max:15}], run: (a,p) => a.map((_,i)=>{ const s=Math.max(0,i-p.k+1); const sl=a.slice(s,i+1); return sl.reduce((t,v)=>t+v,0)/sl.length; }) }, + + // — FOLDS (catamorfismos: colapsan a escalar · terminales) — + sum: { cat: 'fold', symbol: 'Σ', sig: '[a] → Σa', run: (a) => a.reduce((s,x)=>s+x, 0) }, + product: { cat: 'fold', symbol: '∏', sig: '[a] → ∏a', run: (a) => a.reduce((s,x)=>s*x, 1) }, + max: { cat: 'fold', symbol: 'max', sig: '[a] → max', run: (a) => a.length ? Math.max(...a) : 0 }, + min: { cat: 'fold', symbol: 'min', sig: '[a] → min', run: (a) => a.length ? Math.min(...a) : 0 }, + mean: { cat: 'fold', symbol: 'μ', sig: '[a] → μ', run: (a) => a.length ? a.reduce((s,x)=>s+x,0)/a.length : 0 }, + count: { cat: 'fold', symbol: '#', sig: '[a] → ℕ', run: (a) => a.length }, +}; + +const BY_CATEGORY = Object.entries(CATEGORIES).map(([catKey, catMeta]) => ({ + ...catMeta, + key: catKey, + items: Object.entries(FUNCTIONS).filter(([, f]) => f.cat === catKey).map(([name, f]) => ({ name, ...f })), +})); + +// ───────────────────────────────────────────────────────────────── +// Ejecutor: aplica el pipeline y conserva salidas intermedias +// ───────────────────────────────────────────────────────────────── +function executePipeline(pipeline) { + const steps = []; + let current = Array.from({length: 10}, (_, i) => i + 1); // semilla si no hay generador + let terminated = false; + + for (const item of pipeline) { + const def = FUNCTIONS[item.name]; + if (!def) continue; + if (terminated) { steps.push({ ...item, def, unreachable: true }); continue; } + try { + const value = def.run(current, item.params || {}); + steps.push({ ...item, def, value }); + if (def.cat === 'fold') terminated = true; + else current = value; + } catch (e) { + steps.push({ ...item, def, error: e.message }); + terminated = true; + } + } + return { steps, terminated }; +} + +// ───────────────────────────────────────────────────────────────── +// Helpers de id y parámetros +// ───────────────────────────────────────────────────────────────── +let _uid = 0; +const uid = () => `n${++_uid}_${Date.now().toString(36)}`; + +function defaultParams(name) { + const def = FUNCTIONS[name]; + if (!def.params) return {}; + return Object.fromEntries(def.params.map(p => [p.k, p.d])); +} + +// ───────────────────────────────────────────────────────────────── +// Sparkline compacto (SVG manual) +// ───────────────────────────────────────────────────────────────── +function Sparkline({ data, color = '#888', w = 180, h = 34 }) { + if (!Array.isArray(data) || data.length === 0) { + return
∅
; + } + const min = Math.min(...data); + const max = Math.max(...data); + const span = max - min || 1; + const n = data.length; + const xStep = n > 1 ? (w - 6) / (n - 1) : 0; + const pts = data.map((v, i) => [3 + i * xStep, h - 3 - ((v - min) / span) * (h - 6)]); + const path = pts.map((p, i) => (i === 0 ? `M${p[0].toFixed(1)},${p[1].toFixed(1)}` : `L${p[0].toFixed(1)},${p[1].toFixed(1)}`)).join(' '); + const zeroY = h - 3 - ((0 - min) / span) * (h - 6); + const showZero = min < 0 && max > 0; + return ( + + {showZero && } + + {n <= 40 && pts.map((p, i) => ( + + ))} + + ); +} + +// ───────────────────────────────────────────────────────────────── +// Ficha en la paleta (draggable) +// ───────────────────────────────────────────────────────────────── +function PaletteItem({ fnName, fn, color, onDragStart, onClick }) { + return ( +
{ e.dataTransfer.setData('text/fn-name', fnName); e.dataTransfer.effectAllowed = 'copy'; onDragStart?.(); }} + onClick={onClick} + className="group flex items-center gap-2 px-2.5 py-1.5 rounded-md cursor-grab active:cursor-grabbing select-none transition-colors hover:bg-neutral-800/60" + style={{ borderLeft: `2px solid ${color}` }} + title={`${fnName} :: ${fn.sig}`} + > + {fn.symbol} + {fnName} + drag +
+ ); +} + +// ───────────────────────────────────────────────────────────────── +// Nodo del pipeline +// ───────────────────────────────────────────────────────────────── +function PipelineNode({ step, index, isLast, onRemove, onParamChange, onDragStart, onDragOver, onDrop, isDragging }) { + const { def, value, unreachable, error } = step; + const cat = CATEGORIES[def.cat]; + const color = cat.color; + const isScalar = def.cat === 'fold'; + + return ( +
{ e.dataTransfer.setData('text/reorder-index', String(index)); e.dataTransfer.effectAllowed = 'move'; onDragStart?.(index); }} + onDragOver={(e) => { e.preventDefault(); onDragOver?.(index); }} + onDrop={(e) => onDrop?.(e, index)} + className="relative group" + style={{ opacity: isDragging ? 0.4 : 1 }} + > +
+ {/* cabecera */} +
+ + {def.symbol} + {step.name} + +
+ + {/* params */} + {def.params && ( +
+ {def.params.map(p => ( + + ))} +
+ )} + + {/* preview */} +
+ {unreachable ? ( +
inalcanzable · fold anterior terminó el pipeline
+ ) : error ? ( +
error: {error}
+ ) : isScalar ? ( +
+ resultado + {formatScalar(value)} +
+ ) : ( +
+ +
+ n={value?.length ?? 0} · range [{formatScalar(Math.min(...(value?.length?value:[0])))}, {formatScalar(Math.max(...(value?.length?value:[0])))}] +
+
+ )} +
+
+ + {/* flecha de composición */} + {!isLast && ( +
→
+ )} +
+ ); +} + +function formatScalar(v) { + if (v === undefined || v === null || !isFinite(v)) return '—'; + if (Number.isInteger(v)) return String(v); + const abs = Math.abs(v); + if (abs >= 1000 || (abs > 0 && abs < 0.01)) return v.toExponential(2); + return v.toFixed(3); +} + +// ───────────────────────────────────────────────────────────────── +// Visualización grande del output final +// ───────────────────────────────────────────────────────────────── +function FinalView({ lastStep }) { + if (!lastStep) { + return ( +
+ arrastra una función para empezar +
+ ); + } + const { def, value, error, unreachable } = lastStep; + if (error || unreachable) return null; + const color = CATEGORIES[def.cat].color; + + if (def.cat === 'fold') { + return ( +
+ resultado · escalar + {formatScalar(value)} +
+ ); + } + + // plot grande + if (!Array.isArray(value) || value.length === 0) { + return
∅ (lista vacía)
; + } + const W = 720, H = 180, pad = 20; + const min = Math.min(...value), max = Math.max(...value); + const span = max - min || 1; + const n = value.length; + const xStep = n > 1 ? (W - 2 * pad) / (n - 1) : 0; + const pts = value.map((v, i) => [pad + i * xStep, H - pad - ((v - min) / span) * (H - 2 * pad)]); + const path = pts.map((p, i) => (i === 0 ? `M${p[0].toFixed(1)},${p[1].toFixed(1)}` : `L${p[0].toFixed(1)},${p[1].toFixed(1)}`)).join(' '); + const areaPath = `${path} L${pts[pts.length-1][0]},${H-pad} L${pts[0][0]},${H-pad} Z`; + const zeroY = H - pad - ((0 - min) / span) * (H - 2 * pad); + const showZero = min < 0 && max > 0; + + return ( +
+
+ resultado · señal + n={n} · [{formatScalar(min)}, {formatScalar(max)}] +
+ + + + + + + + {/* grid */} + {[0.25, 0.5, 0.75].map(f => ( + + ))} + {showZero && } + + + {n <= 80 && pts.map((p, i) => ( + + ))} + {/* eje */} + + + +
+ ); +} + +// ───────────────────────────────────────────────────────────────── +// APP principal +// ───────────────────────────────────────────────────────────────── +export default function App() { + const [pipeline, setPipeline] = useState([ + { id: uid(), name: 'range', params: defaultParams('range') }, + { id: uid(), name: 'square', params: defaultParams('square') }, + { id: uid(), name: 'cumsum', params: defaultParams('cumsum') }, + ]); + const [dragIndex, setDragIndex] = useState(null); + const [hoverIndex, setHoverIndex] = useState(null); + const dropZoneRef = useRef(null); + + const { steps } = useMemo(() => executePipeline(pipeline), [pipeline]); + const lastStep = steps[steps.length - 1]; + + // expresión simbólica: fold_sum ∘ map_square ∘ gen_range(20) + const expression = useMemo(() => { + if (pipeline.length === 0) return '∅'; + const parts = pipeline.map(s => { + const def = FUNCTIONS[s.name]; + const paramStr = def.params ? '(' + def.params.map(p => `${p.k}=${s.params?.[p.k] ?? p.d}`).join(',') + ')' : ''; + return `${s.name}${paramStr}`; + }).reverse(); + return parts.join(' ∘ '); + }, [pipeline]); + + const addFunction = (name) => { + setPipeline(p => [...p, { id: uid(), name, params: defaultParams(name) }]); + }; + + const removeFunction = (index) => { + setPipeline(p => p.filter((_, i) => i !== index)); + }; + + const changeParam = (index, key, value) => { + setPipeline(p => p.map((s, i) => i === index ? { ...s, params: { ...s.params, [key]: value } } : s)); + }; + + const handleDropOnZone = (e) => { + e.preventDefault(); + const fnName = e.dataTransfer.getData('text/fn-name'); + const reorderIdx = e.dataTransfer.getData('text/reorder-index'); + if (fnName && FUNCTIONS[fnName]) { + addFunction(fnName); + } else if (reorderIdx !== '') { + // soltar al final si vino de un nodo + const from = Number(reorderIdx); + setPipeline(p => { + const copy = [...p]; + const [moved] = copy.splice(from, 1); + copy.push(moved); + return copy; + }); + } + setDragIndex(null); + setHoverIndex(null); + }; + + const handleDropOnNode = (e, targetIdx) => { + e.preventDefault(); + e.stopPropagation(); + const fnName = e.dataTransfer.getData('text/fn-name'); + const reorderIdx = e.dataTransfer.getData('text/reorder-index'); + if (fnName && FUNCTIONS[fnName]) { + setPipeline(p => { + const copy = [...p]; + copy.splice(targetIdx, 0, { id: uid(), name: fnName, params: defaultParams(fnName) }); + return copy; + }); + } else if (reorderIdx !== '') { + const from = Number(reorderIdx); + if (from === targetIdx) return; + setPipeline(p => { + const copy = [...p]; + const [moved] = copy.splice(from, 1); + const adjusted = from < targetIdx ? targetIdx - 1 : targetIdx; + copy.splice(adjusted, 0, moved); + return copy; + }); + } + setDragIndex(null); + setHoverIndex(null); + }; + + return ( +
+ + +
+ {/* HEADER */} +
+
+
+
+ lab · 001 + / + composición funcional +
+

+ laboratorio de morfismos +

+

+ arrastra funciones al pipeline y componlas de izquierda a derecha. cada tipo corresponde a un esquema de recursión distinto. +

+
+ +
+
+ + {/* MAIN GRID · 2 columnas: paleta | (expresión + pipeline + visualizador apilados) */} +
+ {/* ─── IZQUIERDA · PALETA ─── */} + + + {/* ─── DERECHA · EXPRESIÓN + PIPELINE + VISUALIZADOR ─── */} +
+ {/* Expresión simbólica */} +
+
+ expresión + se aplica de derecha a izquierda +
+
+ + {expression} + +
+
+ + {/* Pipeline */} +
+
+ pipeline + {pipeline.length} {pipeline.length === 1 ? 'nodo' : 'nodos'} +
+
{ e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }} + onDrop={handleDropOnZone} + className="rounded-xl border border-dashed border-white/10 p-5 transition-colors hover:border-white/20" + style={{background: 'rgba(255,255,255,0.015)', minHeight: '180px'}} + > + {pipeline.length === 0 ? ( +
+
zona de composición
+
arrastra una primitiva desde la izquierda. los nodos se encadenan de izquierda a derecha.
+
+ ) : ( +
+ {steps.map((step, i) => ( + + ))} +
+ )} +
+
+ + {/* Visualizador */} +
+
visualizador
+
+
+ +
+
+
+ + {/* Nota didáctica */} +
+ anamorfismo genera estructura · functor map transforma punto a punto ·{' '} + filtro refina · scan acumula dejando rastro ·{' '} + catamorfismo colapsa (es terminal) +
+
+
+
+
+ ); +} diff --git a/extracted/shader-dag-blends.jsx b/extracted/shader-dag-blends.jsx new file mode 100644 index 0000000..c30b7cf --- /dev/null +++ b/extracted/shader-dag-blends.jsx @@ -0,0 +1,1241 @@ +import { useState, useEffect, useRef, useCallback, useMemo } from 'react'; +import { X, AlertCircle, RotateCcw, ChevronDown, ChevronRight, Trash2, GripVertical } from 'lucide-react'; + +// ═══════════════════════════════════════════════════════════════════ +// CATÁLOGO DE NODOS +// Cada nodo declara: +// - kind: 'gen' | 'op' | 'blend' +// - params: hasta 4 floats · slots del vec4 en u.params[idx] +// - controls: descriptores de UI (pueden agrupar varios params) +// - body: snippet WGSL del cuerpo de la función +// ═══════════════════════════════════════════════════════════════════ + +const MAX_NODES = 16; +const ACCENT = '#5eead4'; +const GEN_COLOR = '#5eead4'; +const OP_COLOR = '#c4b5fd'; +const BLEND_COLOR = '#fbbf24'; + +const NODES = { + // ─── GENERADORES ─────────────────────────────────────────────── + solid: { + kind: 'gen', label: 'solid', desc: 'color constante', + params: [ + { k: 'r', d: 0.35 }, { k: 'g', d: 0.25 }, { k: 'b', d: 0.55 }, { k: '_', d: 0 }, + ], + controls: [ + { kind: 'color', keys: ['r', 'g', 'b'], label: 'color' }, + ], + body: (i) => ` + let p = u.params[${i}]; + return vec4(p.x, p.y, p.z, 1.0);`, + }, + + gradient: { + kind: 'gen', label: 'gradient', desc: 'gradiente direccional', + params: [ + { k: 'angle', d: 0.8 }, { k: 'hue', d: 0.5 }, { k: '_', d: 0 }, { k: '_', d: 0 }, + ], + controls: [ + { kind: 'slider', key: 'angle', label: 'ángulo', min: 0, max: 6.2832, step: 0.01 }, + { kind: 'slider', key: 'hue', label: 'tono', min: 0, max: 1, step: 0.01 }, + ], + body: (i) => ` + let p = u.params[${i}]; + let dir = vec2(cos(p.x), sin(p.x)); + let t = dot(uv - 0.5, dir) + 0.5; + let col = 0.5 + 0.5 * cos(6.28318 * (p.y + vec3(0.0, 0.33, 0.67) + t)); + return vec4(col, 1.0);`, + }, + + plasma: { + kind: 'gen', label: 'plasma', desc: 'onda trigonométrica', + params: [ + { k: 'speed', d: 1 }, { k: 'scale', d: 2 }, { k: '_', d: 0 }, { k: '_', d: 0 }, + ], + controls: [ + { kind: 'slider', key: 'speed', label: 'velocidad', min: 0, max: 3, step: 0.01 }, + { kind: 'slider', key: 'scale', label: 'escala', min: 0.5, max: 10, step: 0.1 }, + ], + body: (i) => ` + let p = u.params[${i}]; + let col = 0.5 + 0.5 * cos(u.time * p.x + uv.xyx * p.y + vec3(0.0, 2.0, 4.0)); + return vec4(col, 1.0);`, + }, + + checker: { + kind: 'gen', label: 'checker', desc: 'tablero rotando', + params: [ + { k: 'scale', d: 8 }, { k: 'rot', d: 0.25 }, { k: '_', d: 0 }, { k: '_', d: 0 }, + ], + controls: [ + { kind: 'slider', key: 'scale', label: 'escala', min: 1, max: 30, step: 0.5 }, + { kind: 'slider', key: 'rot', label: 'rotación', min: -2, max: 2, step: 0.01 }, + ], + body: (i) => ` + let p = u.params[${i}]; + let aspect = u.resolution.x / u.resolution.y; + let q0 = vec2((uv.x - 0.5) * aspect, uv.y - 0.5); + let a = u.time * p.y; + let rm = mat2x2(cos(a), -sin(a), sin(a), cos(a)); + let q = rm * q0 * p.x; + let chk = (floor(q.x) + floor(q.y)) - 2.0 * floor((floor(q.x) + floor(q.y)) * 0.5); + return vec4(vec3(chk), 1.0);`, + }, + + circle: { + kind: 'gen', label: 'circle', desc: 'sdf de círculo', + params: [ + { k: 'cx', d: 0 }, { k: 'cy', d: 0 }, { k: 'radius', d: 0.35 }, { k: 'soft', d: 0.01 }, + ], + controls: [ + { kind: 'xy', keys: ['cx', 'cy'], label: 'centro', min: -0.8, max: 0.8, step: 0.01 }, + { kind: 'slider', key: 'radius', label: 'radio', min: 0, max: 1, step: 0.01 }, + { kind: 'slider', key: 'soft', label: 'suavidad', min: 0.001, max: 0.1, step: 0.001 }, + ], + body: (i) => ` + let p = u.params[${i}]; + let aspect = u.resolution.x / u.resolution.y; + let pos = vec2((uv.x - 0.5) * aspect - p.x, uv.y - 0.5 - p.y); + let d = length(pos) - p.z; + let fill = smoothstep(p.w, -p.w, d); + return mix(c, vec4(1.0), fill);`, + }, + + stripes: { + kind: 'gen', label: 'stripes', desc: 'rayas animadas', + params: [ + { k: 'freq', d: 20 }, { k: 'speed', d: 1 }, { k: 'angle', d: 0.5 }, { k: '_', d: 0 }, + ], + controls: [ + { kind: 'slider', key: 'freq', label: 'frecuencia', min: 1, max: 80, step: 0.5 }, + { kind: 'slider', key: 'speed', label: 'velocidad', min: -5, max: 5, step: 0.05 }, + { kind: 'slider', key: 'angle', label: 'ángulo', min: 0, max: 3.1416, step: 0.01 }, + ], + body: (i) => ` + let p = u.params[${i}]; + let dir = vec2(cos(p.z), sin(p.z)); + let x = dot(uv, dir); + let v = 0.5 + 0.5 * sin(x * p.x + u.time * p.y); + return vec4(vec3(v), 1.0);`, + }, + + noise: { + kind: 'gen', label: 'noise', desc: 'hash pseudo-aleatorio', + params: [ + { k: 'scale', d: 80 }, { k: 'seed', d: 7 }, { k: 'anim', d: 0 }, { k: '_', d: 0 }, + ], + controls: [ + { kind: 'slider', key: 'scale', label: 'escala', min: 1, max: 200, step: 1 }, + { kind: 'slider', key: 'seed', label: 'seed', min: 0, max: 100, step: 1 }, + { kind: 'slider', key: 'anim', label: 'animar', min: 0, max: 10, step: 0.1 }, + ], + body: (i) => ` + let p = u.params[${i}]; + let q = floor(uv * p.x + p.y + u.time * p.z); + let h = fract(sin(dot(q, vec2(12.9898, 78.233))) * 43758.5453); + return vec4(vec3(h), 1.0);`, + }, + + // ─── OPERADORES (toman c, devuelven c') ──────────────────────── + invert: { + kind: 'op', label: 'invert', desc: '1 − rgb', + params: [{ k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [], + body: () => ` + return vec4(1.0 - c.rgb, c.a);`, + }, + + gamma: { + kind: 'op', label: 'gamma', desc: 'pow(rgb, γ)', + params: [{ k: 'g', d: 1 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [{ kind: 'slider', key: 'g', label: 'γ', min: 0.1, max: 5, step: 0.01 }], + body: (i) => ` + let g = max(0.01, u.params[${i}].x); + return vec4(pow(max(c.rgb, vec3(0.0)), vec3(g)), c.a);`, + }, + + contrast: { + kind: 'op', label: 'contrast', desc: '(rgb − 0.5)·k + 0.5', + params: [{ k: 'k', d: 1 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [{ kind: 'slider', key: 'k', label: 'k', min: 0, max: 3, step: 0.01 }], + body: (i) => ` + return vec4((c.rgb - vec3(0.5)) * u.params[${i}].x + vec3(0.5), c.a);`, + }, + + saturate: { + kind: 'op', label: 'saturate', desc: 'lerp(luma, rgb, s)', + params: [{ k: 's', d: 1 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [{ kind: 'slider', key: 's', label: 's', min: 0, max: 2, step: 0.01 }], + body: (i) => ` + let luma = dot(c.rgb, vec3(0.2126, 0.7152, 0.0722)); + return vec4(mix(vec3(luma), c.rgb, u.params[${i}].x), c.a);`, + }, + + hueShift: { + kind: 'op', label: 'hue shift', desc: 'rotar matiz', + params: [{ k: 'h', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [{ kind: 'slider', key: 'h', label: 'h', min: 0, max: 1, step: 0.01 }], + body: (i) => ` + let p = u.params[${i}]; + let k = vec3(0.57735); + let ca = cos(p.x * 6.2832); + let sa = sin(p.x * 6.2832); + let rot = c.rgb * ca + cross(k, c.rgb) * sa + k * dot(k, c.rgb) * (1.0 - ca); + return vec4(rot, c.a);`, + }, + + tint: { + kind: 'op', label: 'tint', desc: 'rgb × color', + params: [{ k: 'r', d: 1 }, { k: 'g', d: 0.8 }, { k: 'b', d: 0.7 }, { k: '_', d: 0 }], + controls: [{ kind: 'color', keys: ['r', 'g', 'b'], label: 'tinte' }], + body: (i) => ` + let p = u.params[${i}]; + return vec4(c.rgb * vec3(p.x, p.y, p.z) * 2.0, c.a);`, + }, + + posterize: { + kind: 'op', label: 'posterize', desc: 'cuantizar a N niveles', + params: [{ k: 'levels', d: 5 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [{ kind: 'slider', key: 'levels', label: 'niveles', min: 2, max: 16, step: 1 }], + body: (i) => ` + let n = max(2.0, u.params[${i}].x); + return vec4(floor(c.rgb * n) / n, c.a);`, + }, + + vignette: { + kind: 'op', label: 'vignette', desc: 'oscurecer bordes', + params: [{ k: 'cx', d: 0 }, { k: 'cy', d: 0 }, { k: 'strength', d: 1 }, { k: 'radius', d: 0.5 }], + controls: [ + { kind: 'xy', keys: ['cx', 'cy'], label: 'centro', min: -0.5, max: 0.5, step: 0.01 }, + { kind: 'slider', key: 'strength', label: 'fuerza', min: 0, max: 2, step: 0.01 }, + { kind: 'slider', key: 'radius', label: 'radio', min: 0, max: 1.4, step: 0.01 }, + ], + body: (i) => ` + let p = u.params[${i}]; + let d = length((uv - vec2(0.5)) - vec2(p.x, p.y)); + let v = 1.0 - smoothstep(p.w, p.w + 0.3, d) * p.z; + return vec4(c.rgb * v, c.a);`, + }, + + ripple: { + kind: 'op', label: 'ripple', desc: 'ondas radiales', + params: [{ k: 'freq', d: 30 }, { k: 'amp', d: 0.2 }, { k: 'speed', d: 2 }, { k: '_', d: 0 }], + controls: [ + { kind: 'slider', key: 'freq', label: 'frecuencia', min: 1, max: 100, step: 1 }, + { kind: 'slider', key: 'amp', label: 'amplitud', min: 0, max: 1, step: 0.01 }, + { kind: 'slider', key: 'speed', label: 'velocidad', min: -5, max: 5, step: 0.05 }, + ], + body: (i) => ` + let p = u.params[${i}]; + let d = length(uv - vec2(0.5)); + let w = sin(d * p.x - u.time * p.z) * p.y; + return vec4(c.rgb * (1.0 + w), c.a);`, + }, + + pulse: { + kind: 'op', label: 'pulse', desc: 'onda temporal', + params: [{ k: 'freq', d: 2 }, { k: 'amount', d: 0.3 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [ + { kind: 'slider', key: 'freq', label: 'frecuencia', min: 0, max: 10, step: 0.05 }, + { kind: 'slider', key: 'amount', label: 'cantidad', min: 0, max: 1, step: 0.01 }, + ], + body: (i) => ` + let p = u.params[${i}]; + return vec4(c.rgb * (1.0 + p.y * sin(u.time * p.x)), c.a);`, + }, + + // ─── BLENDS (fan-in: toman a + b + amount) ───────────────────── + blend_mix: { + kind: 'blend', label: 'mix', desc: 'interpolación · mix(a, b, t)', + params: [{ k: 't', d: 0.5 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [ + { kind: 'source', label: 'source b' }, + { kind: 'slider', key: 't', label: 't', min: 0, max: 1, step: 0.01 }, + ], + body: (i) => ` + return mix(a, b, u.params[${i}].x);`, + }, + + blend_multiply: { + kind: 'blend', label: 'multiply', desc: 'a · b', + params: [{ k: 'amount', d: 1 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [ + { kind: 'source', label: 'source b' }, + { kind: 'slider', key: 'amount', label: 'amount', min: 0, max: 1, step: 0.01 }, + ], + body: (i) => ` + let r = vec4(a.rgb * b.rgb, a.a); + return mix(a, r, u.params[${i}].x);`, + }, + + blend_screen: { + kind: 'blend', label: 'screen', desc: '1 − (1−a)(1−b)', + params: [{ k: 'amount', d: 1 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [ + { kind: 'source', label: 'source b' }, + { kind: 'slider', key: 'amount', label: 'amount', min: 0, max: 1, step: 0.01 }, + ], + body: (i) => ` + let r = vec4(1.0 - (1.0 - a.rgb) * (1.0 - b.rgb), a.a); + return mix(a, r, u.params[${i}].x);`, + }, + + blend_add: { + kind: 'blend', label: 'add', desc: 'clamp(a + b)', + params: [{ k: 'amount', d: 1 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [ + { kind: 'source', label: 'source b' }, + { kind: 'slider', key: 'amount', label: 'amount', min: 0, max: 1, step: 0.01 }, + ], + body: (i) => ` + let r = vec4(min(a.rgb + b.rgb, vec3(1.0)), a.a); + return mix(a, r, u.params[${i}].x);`, + }, + + blend_difference: { + kind: 'blend', label: 'difference', desc: '|a − b|', + params: [{ k: 'amount', d: 1 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [ + { kind: 'source', label: 'source b' }, + { kind: 'slider', key: 'amount', label: 'amount', min: 0, max: 1, step: 0.01 }, + ], + body: (i) => ` + let r = vec4(abs(a.rgb - b.rgb), a.a); + return mix(a, r, u.params[${i}].x);`, + }, + + blend_darken: { + kind: 'blend', label: 'darken', desc: 'min(a, b)', + params: [{ k: 'amount', d: 1 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [ + { kind: 'source', label: 'source b' }, + { kind: 'slider', key: 'amount', label: 'amount', min: 0, max: 1, step: 0.01 }, + ], + body: (i) => ` + let r = vec4(min(a.rgb, b.rgb), a.a); + return mix(a, r, u.params[${i}].x);`, + }, + + blend_lighten: { + kind: 'blend', label: 'lighten', desc: 'max(a, b)', + params: [{ k: 'amount', d: 1 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [ + { kind: 'source', label: 'source b' }, + { kind: 'slider', key: 'amount', label: 'amount', min: 0, max: 1, step: 0.01 }, + ], + body: (i) => ` + let r = vec4(max(a.rgb, b.rgb), a.a); + return mix(a, r, u.params[${i}].x);`, + }, + + blend_mask: { + kind: 'blend', label: 'mask', desc: 'usa luma(b) como alpha', + params: [{ k: 'invert', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }, { k: '_', d: 0 }], + controls: [ + { kind: 'source', label: 'source b (máscara)' }, + { kind: 'select', key: 'invert', label: 'invertir', options: ['no', 'sí'] }, + ], + body: (i) => ` + let luma = dot(b.rgb, vec3(0.2126, 0.7152, 0.0722)); + let m = select(luma, 1.0 - luma, u.params[${i}].x > 0.5); + return vec4(a.rgb * m, a.a);`, + }, +}; + +const NODES_BY_KIND = { + gen: Object.entries(NODES).filter(([, v]) => v.kind === 'gen') .map(([k, v]) => ({ name: k, ...v })), + op: Object.entries(NODES).filter(([, v]) => v.kind === 'op') .map(([k, v]) => ({ name: k, ...v })), + blend: Object.entries(NODES).filter(([, v]) => v.kind === 'blend').map(([k, v]) => ({ name: k, ...v })), +}; + +// ═══════════════════════════════════════════════════════════════════ +// Compilador: DAG → WGSL (con soporte para blends / fan-in) +// ═══════════════════════════════════════════════════════════════════ + +function compileDagToWGSL(pipeline) { + const safe = pipeline.slice(0, MAX_NODES); + + const fns = safe.map((step, idx) => { + const def = NODES[step.name]; + const sig = def.kind === 'blend' + ? '(a: vec4, b: vec4, uv: vec2)' + : '(c: vec4, uv: vec2)'; + return `fn node_${idx}${sig} -> vec4 {${def.body(idx)} +}`; + }).join('\n\n'); + + let chain; + if (safe.length === 0) { + chain = ' var c = vec4(0.04, 0.04, 0.06, 1.0);'; + } else { + const lines = safe.map((step, idx) => { + const def = NODES[step.name]; + const prev = idx === 0 ? 'vec4(0.0, 0.0, 0.0, 1.0)' : `out_${idx - 1}`; + if (def.kind === 'blend') { + // resolver source por id (robusto ante reordenamientos) + let srcIdx = -1; + const srcId = step.meta?.sourceId; + if (srcId) { + srcIdx = safe.findIndex(s => s.id === srcId); + } + if (srcIdx < 0 || srcIdx >= idx) srcIdx = Math.max(0, idx - 2); // fallback: el de hace dos + const src = idx === 0 ? prev : `out_${Math.min(srcIdx, idx - 1)}`; + return ` let out_${idx} = node_${idx}(${prev}, ${src}, uv);`; + } + return ` let out_${idx} = node_${idx}(${prev}, uv);`; + }); + chain = lines.join('\n'); + } + + const finalExpr = safe.length === 0 ? 'c' : `out_${safe.length - 1}`; + + return `struct Uniforms { + time: f32, + _pad: f32, + resolution: vec2, + params: array, ${MAX_NODES}>, +}; + +@group(0) @binding(0) var u: Uniforms; + +@vertex +fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4 { + let p = array, 3>( + vec2(-1.0, -1.0), + vec2( 3.0, -1.0), + vec2(-1.0, 3.0) + ); + return vec4(p[i], 0.0, 1.0); +} + +${fns} + +@fragment +fn fs(@builtin(position) pos: vec4) -> @location(0) vec4 { + let uv = pos.xy / u.resolution; +${chain} + return ${finalExpr}; +} +`; +} + +// ═══════════════════════════════════════════════════════════════════ +// Uniform buffer +// ═══════════════════════════════════════════════════════════════════ + +const UNIFORM_FLOATS = 4 + MAX_NODES * 4; +const UNIFORM_BYTES = UNIFORM_FLOATS * 4; + +function writeUniforms(device, buffer, time, width, height, pipeline) { + const data = new Float32Array(UNIFORM_FLOATS); + data[0] = time; + data[1] = 0; + data[2] = width; + data[3] = height; + for (let i = 0; i < Math.min(pipeline.length, MAX_NODES); i++) { + const step = pipeline[i]; + const def = NODES[step.name]; + const offset = 4 + i * 4; + for (let j = 0; j < 4; j++) { + const p = def.params[j]; + data[offset + j] = p && p.k !== '_' ? (step.params[p.k] ?? p.d) : (p ? p.d : 0); + } + } + device.queue.writeBuffer(buffer, 0, data); +} + +// ═══════════════════════════════════════════════════════════════════ +// Hook WebGPU + DAG +// ═══════════════════════════════════════════════════════════════════ + +function useWebGPUDag(canvasRef, pipeline, topologyKey) { + const gpu = useRef({ + device: null, context: null, format: null, + pipeline: null, bindGroup: null, uniformBuffer: null, + startTime: 0, + }); + const pipelineRef = useRef(pipeline); + useEffect(() => { pipelineRef.current = pipeline; }, [pipeline]); + + const [status, setStatus] = useState('init'); + const [shaderError, setShaderError] = useState(null); + const [fps, setFps] = useState(0); + + useEffect(() => { + let cancelled = false; + (async () => { + try { + if (!navigator.gpu) { setStatus('unsupported'); return; } + const adapter = await navigator.gpu.requestAdapter(); + if (!adapter) { setStatus('unsupported'); return; } + const device = await adapter.requestDevice(); + if (cancelled) return; + const canvas = canvasRef.current; + if (!canvas) return; + canvas.width = 400; canvas.height = 400; + const context = canvas.getContext('webgpu'); + const format = navigator.gpu.getPreferredCanvasFormat(); + context.configure({ device, format, alphaMode: 'premultiplied' }); + const uniformBuffer = device.createBuffer({ + size: UNIFORM_BYTES, + usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, + }); + gpu.current = { ...gpu.current, device, context, format, uniformBuffer, startTime: performance.now() }; + device.lost.then(() => setStatus('error')); + setStatus('ready'); + } catch (e) { + console.error(e); + setShaderError(String(e.message || e)); + setStatus('error'); + } + })(); + return () => { cancelled = true; }; + }, [canvasRef]); + + const compileShader = useCallback(async (wgsl) => { + const { device, format, uniformBuffer } = gpu.current; + if (!device) return; + device.pushErrorScope('validation'); + const module = device.createShaderModule({ code: wgsl }); + const info = await module.getCompilationInfo(); + const errors = info.messages.filter(m => m.type === 'error'); + if (errors.length > 0) { + setShaderError(errors.map(m => `línea ${m.lineNum}: ${m.message}`).join('\n')); + await device.popErrorScope(); + return; + } + try { + const p = device.createRenderPipeline({ + layout: 'auto', + vertex: { module, entryPoint: 'vs' }, + fragment: { module, entryPoint: 'fs', targets: [{ format }] }, + primitive:{ topology: 'triangle-list' }, + }); + const bg = device.createBindGroup({ + layout: p.getBindGroupLayout(0), + entries: [{ binding: 0, resource: { buffer: uniformBuffer } }], + }); + gpu.current.pipeline = p; + gpu.current.bindGroup = bg; + setShaderError(null); + } catch (e) { + setShaderError(String(e.message || e)); + } + const err = await device.popErrorScope(); + if (err) setShaderError(err.message); + }, []); + + useEffect(() => { + if (status !== 'ready') return; + const wgsl = compileDagToWGSL(pipelineRef.current); + compileShader(wgsl); + }, [topologyKey, status, compileShader]); + + useEffect(() => { + if (status !== 'ready') return; + let running = true; + let frames = 0; + let lastFpsSample = performance.now(); + + const loop = () => { + if (!running) return; + const { device, context, pipeline: gpuPipe, bindGroup, uniformBuffer, startTime } = gpu.current; + const canvas = canvasRef.current; + if (device && context && gpuPipe && bindGroup && canvas) { + const dpr = Math.min(window.devicePixelRatio || 1, 2); + const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); + const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); + if (canvas.width !== w || canvas.height !== h) { + canvas.width = w; canvas.height = h; + } + const t = (performance.now() - startTime) / 1000; + writeUniforms(device, uniformBuffer, t, canvas.width, canvas.height, pipelineRef.current); + + const encoder = device.createCommandEncoder(); + const pass = encoder.beginRenderPass({ + colorAttachments: [{ + view: context.getCurrentTexture().createView(), + clearValue: { r: 0, g: 0, b: 0, a: 1 }, + loadOp: 'clear', storeOp: 'store', + }], + }); + pass.setPipeline(gpuPipe); + pass.setBindGroup(0, bindGroup); + pass.draw(3); + pass.end(); + device.queue.submit([encoder.finish()]); + + frames++; + const now = performance.now(); + if (now - lastFpsSample >= 500) { + setFps(Math.round((frames * 1000) / (now - lastFpsSample))); + frames = 0; lastFpsSample = now; + } + } + requestAnimationFrame(loop); + }; + requestAnimationFrame(loop); + return () => { running = false; }; + }, [status, canvasRef]); + + const resetTime = useCallback(() => { gpu.current.startTime = performance.now(); }, []); + return { status, shaderError, fps, resetTime }; +} + +// ═══════════════════════════════════════════════════════════════════ +// Utilidades +// ═══════════════════════════════════════════════════════════════════ +let _uid = 0; +const uid = () => `n${++_uid}_${Date.now().toString(36)}`; +function defaultParams(name) { + const d = NODES[name]; + const obj = {}; + for (const p of d.params) if (p.k !== '_') obj[p.k] = p.d; + return obj; +} + +// ═══════════════════════════════════════════════════════════════════ +// Controles UI +// ═══════════════════════════════════════════════════════════════════ + +function ParamSlider({ ctrl, value, onChange, color }) { + const display = ctrl.step >= 1 ? Math.round(value) : Number(value).toFixed(ctrl.step < 0.01 ? 3 : 2); + return ( +
+ {ctrl.label} + onChange(Number(e.target.value))} + onPointerDown={(e) => e.stopPropagation()} + className="flex-1" + style={{ accentColor: color, minWidth: '60px' }} + /> + {display} +
+ ); +} + +function XYPad({ ctrl, xValue, yValue, onChange, color }) { + const ref = useRef(null); + const [dragging, setDragging] = useState(false); + + const xNorm = (xValue - ctrl.min) / (ctrl.max - ctrl.min); + const yNorm = (yValue - ctrl.min) / (ctrl.max - ctrl.min); + + const update = useCallback((clientX, clientY) => { + const el = ref.current; + if (!el) return; + const rect = el.getBoundingClientRect(); + const nx = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)); + const ny = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height)); + const xv = ctrl.min + nx * (ctrl.max - ctrl.min); + const yv = ctrl.min + ny * (ctrl.max - ctrl.min); + onChange(xv, yv); + }, [ctrl.min, ctrl.max, onChange]); + + useEffect(() => { + if (!dragging) return; + const onMove = (e) => update(e.clientX, e.clientY); + const onUp = () => setDragging(false); + window.addEventListener('pointermove', onMove); + window.addEventListener('pointerup', onUp); + return () => { + window.removeEventListener('pointermove', onMove); + window.removeEventListener('pointerup', onUp); + }; + }, [dragging, update]); + + return ( +
+
+ {ctrl.label} + + {xValue.toFixed(2)} , {yValue.toFixed(2)} + +
+
{ + e.stopPropagation(); + e.preventDefault(); + setDragging(true); + update(e.clientX, e.clientY); + }} + className="relative rounded cursor-crosshair select-none" + style={{ + width: '100%', + height: '70px', + background: `${color}0a`, + border: `1px solid ${color}30`, + }} + > +
+
+
+
+
+ ); +} + +function ColorPicker({ ctrl, r, g, b, onChange, color }) { + const toHex = () => { + const h = (v) => Math.round(Math.max(0, Math.min(1, v)) * 255).toString(16).padStart(2, '0'); + return `#${h(r)}${h(g)}${h(b)}`; + }; + const fromHex = (hex) => { + const rr = parseInt(hex.slice(1, 3), 16) / 255; + const gg = parseInt(hex.slice(3, 5), 16) / 255; + const bb = parseInt(hex.slice(5, 7), 16) / 255; + return [rr, gg, bb]; + }; + return ( +
+ {ctrl.label} +