WebGL puro
Mucho control, pero también mucho trabajo manual: shaders, buffers, atributos y estados de GPU.
WebGL no es Three.js
El motor bajo la escena y la librería que lo vuelve usable
WebGL es la API de bajo nivel que habla con la GPU desde el navegador. Three.js construye una capa más cómoda encima: escena, cámara, geometrías, materiales, luces y render loop. React Three Fiber lleva esa misma escena al lenguaje de componentes de React.
Three.js
La misma idea visual expresada con objetos de escena: cámara, geometría, material y malla.
Cadena mental de una escena 3D web
Cuando una demo no funciona, localizar la capa que falla evita tocar valores al azar.
Idea visualQué objeto se ve y qué sensación debe producir.
EscenaEl mundo que contiene cámara, luces y objetos.
MallaGeometría más material: forma y apariencia.
RendererThree.js prepara el render sobre WebGL.
GPUWebGL ejecuta el dibujo en el canvas.
En producción rara vez conviene escribir WebGL puro para una landing. Lo normal es usar Three.js o R3F y bajar de nivel solo cuando necesitas shaders, optimización fina o un efecto muy específico.
| Capa | Qué resuelve | Cuándo te interesa |
|---|---|---|
WebGL |
Acceso directo a la GPU desde el canvas del navegador. | Shaders propios, investigación visual, render muy especializado. |
Three.js |
Escenas 3D con cámara, luces, materiales, geometrías y loaders. | Demos interactivas, producto 3D, fondos animados, experiencias web. |
React Three Fiber |
Organiza Three.js como componentes dentro de React. | Interfaces React donde la escena 3D debe convivir con estado, rutas y UI. |