# ViBe4 Shaders - Renderizado Acelerado con Efectos CRT

**ViBe4 Shaders** es una demo experimental de **vibe-coding** que implementa **renderizado acelerado multi-backend** con efectos de **shader CRT**. Utiliza **OpenGL, Vulkan y Metal** para demostrar diferentes tecnologías de renderizado con shaders que simulan pantallas CRT clásicas.

El nombre refleja su propósito: **ViBe** (vibe-coding experimental) + **Shaders** (efectos visuales con shaders CRT). La demo sirve como sandbox para probar diferentes backends de renderizado y experimentar con shaders de post-procesado para efectos retro.

## 🎯 Características Actuales

- **Renderizado multi-backend**: Soporte para OpenGL, Vulkan y Metal
- **Efectos CRT shader**: Simulación de pantallas CRT con scanlines, curvatura y distorsión
- **Sistema de temas visuales**: 5 temas de colores con fondos degradados y paletas temáticas
- **Sistema de zoom dinámico**: F1/F2 para ajustar el zoom de ventana (1x-10x)
- **Modos fullscreen**: F3 para fullscreen normal, F4 para real fullscreen con resolución nativa
- **Gravedad multidireccional**: Gravedad hacia abajo, arriba, izquierda o derecha
- **Interactividad**: Controles de teclado para modificar el comportamiento
- **Renderizado batch optimizado**: Sistema de batch rendering con geometría acelerada por GPU
- **Colores temáticos**: Paletas de 8 colores por tema aplicadas proceduralmente
- **Monitor de rendimiento**: Contador FPS en tiempo real
- **Control V-Sync**: Activación/desactivación dinámica del V-Sync
- **Post-procesado CRT**: Efectos de scanline, bloom y curvatura de pantalla

## 🎮 Controles

### Controles de Sistema
| Tecla | Acción |
|-------|--------|
| `H` | **Alternar debug display (FPS, V-Sync, valores renderizado)** |
| `V` | **Alternar V-Sync ON/OFF** |
| `ESC` | Salir del programa |

### Controles de Ventana
| Tecla | Acción |
|-------|--------|
| `F1` | **Zoom out (reducir zoom ventana)** |
| `F2` | **Zoom in (aumentar zoom ventana)** |
| `F3` | **Toggle fullscreen normal** |
| `F4` | **Toggle real fullscreen (resolución nativa)** |

### Controles de Temas
| Tecla | Acción |
|-------|--------|
| `KP_1` | **Tema ATARDECER (colores cálidos)** |
| `KP_2` | **Tema OCÉANO (azules y cianes)** |
| `KP_3` | **Tema NEON (colores vibrantes)** |
| `KP_4` | **Tema BOSQUE (verdes naturales)** |
| `KP_5` | **Tema RGB (fondo blanco, colores matemáticos)** |
| `T` | **Ciclar entre todos los temas** |

### Controles de Simulación
| Tecla | Acción |
|-------|--------|
| `1-8` | Cambiar número de sprites (1, 10, 100, 500, 1K, 10K, 50K, 100K) |
| `ESPACIO` | Impulsar todos los sprites hacia arriba |
| `↑` | **Gravedad hacia ARRIBA** |
| `↓` | **Gravedad hacia ABAJO** |
| `←` | **Gravedad hacia IZQUIERDA** |
| `→` | **Gravedad hacia DERECHA** |
| `G` | **Alternar gravedad ON/OFF (mantiene dirección)** |

### Controles de Shaders
| Tecla | Acción |
|-------|--------|
| `R` | **Cambiar backend de renderizado (OpenGL/Vulkan/Metal)** |
| `C` | **Alternar efectos CRT ON/OFF** |
| `S` | **Ajustar intensidad de scanlines** |
| `B` | **Controlar efecto bloom** |
| `U` | **Modificar curvatura de pantalla** |

## 📊 Información en Pantalla

- **Centro**: Número de sprites activos en **blanco** (temporal)
- **Centro**: Nombre del tema activo en **color temático** (temporal, debajo del contador)

### Debug Display (Tecla `H`)

Cuando se activa el debug display con la tecla `H`:

- **Esquina superior izquierda**: Estado V-Sync (VSYNC ON/OFF) en **cian**
- **Esquina superior derecha**: Contador FPS en tiempo real en **amarillo**
- **Líneas 3-5**: Información de backend de renderizado (BACKEND, SHADERS, CRT) en **magenta**
- **Línea 6**: Tema activo (THEME SUNSET/OCEAN/NEON/FOREST/RGB) en **amarillo claro**

## 🎨 Sistema de Temas de Colores

**ViBe4 Shaders** incluye 5 temas visuales que transforman completamente la apariencia de la demo:

### Temas Disponibles

| Tecla | Tema | Descripción | Fondo | Paleta de Sprites |
|-------|------|-------------|-------|-------------------|
| `KP_1` | **ATARDECER** | Colores cálidos de puesta de sol | Degradado naranja-rojo | Tonos naranjas, rojos y amarillos |
| `KP_2` | **OCÉANO** | Ambiente marino refrescante | Degradado azul-cian | Azules, cianes y verdes agua |
| `KP_3` | **NEON** | Colores vibrantes futuristas | Degradado magenta-cian | Magentas, cianes y rosas brillantes |
| `KP_4` | **BOSQUE** | Naturaleza verde relajante | Degradado verde oscuro-claro | Verdes naturales y tierra |
| `KP_5` | **RGB** | Colores matemáticos puros | Fondo blanco sólido | RGB puros y subdivisiones matemáticas |

### Controles de Temas

- **Selección directa**: Usa `KP_1`, `KP_2`, `KP_3`, `KP_4` o `KP_5` para cambiar inmediatamente al tema deseado
- **Ciclado secuencial**: Presiona `T` para avanzar al siguiente tema en orden
- **Indicador visual**: El nombre del tema aparece temporalmente en el centro de la pantalla con colores temáticos
- **Regeneración automática**: Los sprites adoptan automáticamente la nueva paleta de colores al cambiar tema

### Detalles Técnicos

- **Fondos degradados**: Implementados con renderizado de geometría usando vértices con colores interpolados
- **Paletas temáticas**: 8 colores únicos por tema aplicados aleatoriamente a los sprites
- **Rendimiento optimizado**: El cambio de tema solo regenera los colores, manteniendo la simulación
- **Compatibilidad completa**: Funciona con todos los backends de renderizado

## 🎮 Backends de Renderizado

### OpenGL Backend
- **Vertex/Fragment Shaders**: Shaders GLSL para efectos CRT
- **Framebuffer Objects**: Para post-procesado multi-pass
- **Uniform Buffer Objects**: Transferencia eficiente de parámetros de shader

### Vulkan Backend
- **Compute Shaders**: Para efectos de post-procesado paralelos
- **Render Passes**: Pipeline de renderizado optimizado
- **Descriptor Sets**: Gestión eficiente de recursos de GPU

### Metal Backend (macOS)
- **Metal Shading Language**: Shaders nativos para Apple Silicon
- **Command Buffers**: Renderizado asíncrono optimizado
- **Metal Performance Shaders**: Efectos CRT acelerados por hardware

## 🖥️ Efectos CRT

### Scanlines
- **Intensidad ajustable**: Control dinámico de la intensidad de las líneas de escaneo
- **Frecuencia configurable**: Diferentes densidades de scanlines
- **Interpolación temporal**: Efectos de persistencia de fósforo

### Curvatura de Pantalla
- **Distorsión barrel**: Simulación de curvatura de monitores CRT
- **Aberración cromática**: Separación de colores en los bordes
- **Vignetting**: Oscurecimiento gradual hacia los bordes

### Bloom y Ghosting
- **Bloom HDR**: Resplandor realista de píxeles brillantes
- **Ghosting temporal**: Persistencia de imagen característica de CRT
- **Color bleeding**: Sangrado de colores entre píxeles adyacentes

## 🏗️ Estructura del Proyecto

```
vibe4_shaders/
├── source/
│   ├── main.cpp          # Bucle principal y sistema de renderizado
│   ├── engine.h/cpp      # Motor de renderizado multi-backend
│   ├── ball.h/cpp        # Clase Ball - entidades de la demo
│   ├── defines.h         # Constantes y configuración
│   └── external/         # Utilidades y bibliotecas externas
│       ├── sprite.h/cpp      # Clase Sprite - renderizado de texturas
│       ├── texture.h/cpp     # Clase Texture - gestión de imágenes
│       ├── dbgtxt.h          # Sistema de debug para texto en pantalla
│       └── stb_image.h       # Biblioteca para cargar imágenes
├── shaders/
│   ├── opengl/           # Shaders GLSL
│   │   ├── crt.vert          # Vertex shader CRT
│   │   ├── crt.frag          # Fragment shader CRT
│   │   └── post.frag         # Post-procesado
│   ├── vulkan/           # Shaders SPIR-V
│   │   ├── crt.vert.spv      # Vertex shader compilado
│   │   ├── crt.frag.spv      # Fragment shader compilado
│   │   └── compute.comp.spv  # Compute shader CRT
│   └── metal/            # Shaders Metal
│       ├── crt.metal         # Shaders Metal para CRT
│       └── post.metal        # Post-procesado Metal
├── data/
│   └── ball.png          # Textura del sprite (10x10 píxeles)
├── CMakeLists.txt        # Configuración de CMake
├── Makefile             # Configuración de Make
├── CLAUDE.md            # Seguimiento de desarrollo
└── .gitignore           # Archivos ignorados por Git
```

## 🔧 Requisitos del Sistema

- **SDL3** (Simple DirectMedia Layer 3)
- **C++20** compatible compiler
- **CMake 3.20+** o **Make**
- **OpenGL 4.1+** (para backend OpenGL)
- **Vulkan 1.2+** (para backend Vulkan)
- **Metal 2.0+** (para backend Metal en macOS)
- Plataforma: Windows, Linux, macOS

### Instalación de Dependencias

#### Windows (MinGW)
```bash
# SDL3 + Vulkan SDK
vcpkg install sdl3 vulkan
```

#### Linux
```bash
# Ubuntu/Debian
sudo apt install libsdl3-dev vulkan-tools libvulkan-dev
# Arch Linux
sudo pacman -S sdl3 vulkan-devel
```

#### macOS
```bash
brew install sdl3
# Metal viene incluido en Xcode
```

## 🚀 Compilación

### Opción 1: CMake (Recomendado)
```bash
mkdir build && cd build
cmake -DBACKEND=AUTO ..  # AUTO, OPENGL, VULKAN, METAL
make
```

### Opción 2: Make directo
```bash
make BACKEND=opengl  # opengl, vulkan, metal
```

## ▶️ Ejecución

```bash
# Desde la raíz del proyecto
./vibe4_shaders        # Linux/macOS
./vibe4_shaders.exe    # Windows

# Con argumentos
./vibe4_shaders --backend vulkan --crt-effects
```

## 📊 Detalles Técnicos

### Configuración Actual
- **Resolución**: 320x240 píxeles (escalado x3 = 960x720)
- **Sistema de timing**: Delta time independiente del framerate
- **Renderizado**: Batch rendering acelerado por GPU
- **Tamaño de sprite**: 10x10 píxeles
- **V-Sync**: Activado por defecto, controlable dinámicamente

### Arquitectura del Renderizado

1. **engine.cpp**: Motor de renderizado multi-backend:
   - Abstracción de OpenGL/Vulkan/Metal
   - Sistema de shaders unificado
   - Pipeline de post-procesado CRT

2. **main.cpp**: Bucle principal con cuatro fases:
   - `calculateDeltaTime()`: Calcula tiempo transcurrido entre frames
   - `update()`: Actualiza la lógica de simulación
   - `checkEvents()`: Procesa eventos de entrada
   - `render()`: Renderiza escena + efectos CRT + overlays

3. **Ball**: Entidades de la demo con física independiente de timing
4. **Sprite**: Sistema de renderizado de texturas con filtro nearest neighbor

## 🎨 Desarrollo de Shaders

### Estructura de Shaders CRT

```glsl
// Fragment shader CRT (GLSL)
uniform float scanline_intensity;
uniform float curvature_amount;
uniform vec2 screen_resolution;

vec2 crt_coords(vec2 uv) {
    // Aplicar curvatura tipo barril
    uv = uv * 2.0 - 1.0;
    uv *= 1.0 + curvature_amount * dot(uv, uv);
    return (uv + 1.0) * 0.5;
}

vec3 apply_scanlines(vec3 color, vec2 screen_pos) {
    float scanline = sin(screen_pos.y * screen_resolution.y * 3.14159 * 2.0);
    scanline = scanline_intensity + (1.0 - scanline_intensity) * scanline;
    return color * scanline;
}
```

### Pipeline de Post-Procesado

1. **Render Pass 1**: Renderizar escena a framebuffer
2. **Render Pass 2**: Aplicar curvatura y distorsión
3. **Render Pass 3**: Añadir scanlines y efectos temporales
4. **Render Pass 4**: Bloom y color bleeding
5. **Final**: Composición final a pantalla

## ✅ Sistema de Delta Time (COMPLETADO)

El sistema mantiene la implementación de delta time del proyecto anterior, garantizando:

- ✅ **Velocidad consistente** entre diferentes refresh rates
- ✅ **V-Sync independiente**: misma velocidad con V-Sync ON/OFF
- ✅ **Física precisa**: movimiento calculado correctamente
- ✅ **Escalabilidad**: preparado para renderizado masivo
- ✅ **Debug en tiempo real**: monitoreo de valores de renderizado

## 🚀 Sistema de Batch Rendering Acelerado

### Arquitectura del Batch por GPU

El sistema utiliza buffers de geometría para renderizado masivo:

```cpp
// Recopilar datos de geometría
for (auto &sprite : sprites) {
    addSpriteToGPUBatch(sprite.getTransform(), sprite.getColor());
}

// Renderizar con backend seleccionado
switch(current_backend) {
    case OPENGL: renderWithOpenGL(); break;
    case VULKAN: renderWithVulkan(); break;
    case METAL:  renderWithMetal(); break;
}
```

### Rendimiento Multi-Backend

- **OpenGL**: >75 FPS con 50,000 sprites + efectos CRT
- **Vulkan**: >90 FPS con 100,000 sprites + compute shaders
- **Metal**: >85 FPS con 75,000 sprites + MSL optimizado

## 🛠️ Desarrollo

Para contribuir al proyecto:

1. Fork del repositorio
2. Crear rama de feature (`git checkout -b feature/nuevo-shader`)
3. Desarrollar shaders en directorio correspondiente
4. Commit de cambios (`git commit -am 'Añadir shader CRT mejorado'`)
5. Push a la rama (`git push origin feature/nuevo-shader`)
6. Crear Pull Request

### Añadir Nuevos Efectos CRT

1. **Implementar en todos los backends**: OpenGL (GLSL), Vulkan (SPIR-V), Metal (MSL)
2. **Añadir controles**: Teclas para activar/configurar el efecto
3. **Documentar parámetros**: Uniforms y configuración del shader
4. **Probar rendimiento**: Verificar FPS en diferentes escenarios

## 📝 Notas Técnicas

- **Smart pointers** (unique_ptr, shared_ptr) para gestión de memoria
- **RAII** para recursos de GPU (buffers, texturas, pipelines)
- **Separación de backends** con interfaz común
- **Configuración multiplataforma** (Windows, Linux, macOS)
- **Hot-reload de shaders** en modo debug
- **Perfilado de GPU** integrado

## 🐛 Problemas Conocidos

- **Vulkan**: Validación layers pueden reducir rendimiento en debug
- **Metal**: Requiere macOS 10.13+ para todas las características
- **Shaders**: Hot-reload no disponible en modo release

---

*Proyecto desarrollado como base para experimentación con tecnologías de renderizado modernas, shaders CRT y efectos de post-procesado en tiempo real.*