Pipeline GPU con OpenGL: Editor de Materiales en una Startup de Mueble Virtual
Visión general
De qué trata este proyecto.
Carga modelos GLB, combina texturas con shaders y ajusta parámetros con sliders. Renderiza a 60 FPS y obtén un certificado verificable.
El escenario
La startup (alrededor de 30 personas, marketplace activo en 4 ciudades CO) ha visto que los clientes que interactúan con el configurador 3D convierten 2.4× más; un editor de materiales añade tiempo en página y permite mostrar combinaciones que de otro modo no caben en el catálogo fotográfico.
El Briefing
Lo que harás y lo que demostrarás.
Construir editor de materiales web con shader propio y 4 sliders que mantenga 60 FPS sobre 6 modelos demo y se entienda como ejercicio de pipeline GPU.
Earning criteria — what you'll demonstrate
- Construir un ShaderMaterial three.js con shader propio
- Mapear uniforms a controles de UI con actualizaciones reactivas
- Aplicar normal mapping con TBN matrix calculada en vertex shader
- Razonar sobre cada etapa del pipeline GPU (vertex → primitive → fragment → output)
Encaje académico
Dónde encaja esto en tus estudios.
Afina las mismas habilidades que tu titulación espera de ti.
Introduction to Computer Graphics
Bachelor · Graphics And Visualization
Strong alignment
This challenge maps to Introduction to Computer Graphics at the Bachelor level. It sharpens the same practical skills your coursework expects — but in a real industry context with actual constraints and deliverables.
Habilidades
Habilidades que demostrarás.
Cada una aparece en tu credencial verificada.
- Opengl
Apply opengl to solve real industry problems and demonstrate production-level capability.
- Shaders
Apply shaders to solve real industry problems and demonstrate production-level capability.
- Rendering Pipeline
Apply rendering pipeline to solve real industry problems and demonstrate production-level capability.
- Threejs
Apply threejs to solve real industry problems and demonstrate production-level capability.
- Frontend Performance
Apply frontend performance to solve real industry problems and demonstrate production-level capability.
- Javascript
Develop interactive web applications using modern JavaScript and ES6+ features.
Carreras
Roles para los que esto te prepara.
Títulos reales. Puentes de habilidades reales. Elige el que más se acerque a tu trayectoria.