El Renderer
¿Qué es el Renderer?
Hemos construido nuestro estudio de cine (Scene) y posicionado nuestra cámara (Camera). Pero nadie puede ver nada sin un proyector. El WebGLRenderer es el motor incansable que procesa todas las matemáticas de luces, formas y cámara, y decide qué color exacto pintar en cada píxel de tu pantalla.
Calidad vs Rendimiento
El Renderer te da el poder absoluto sobre la calidad visual. Siendo desarrolladores creativos, queremos que todo se vea espectacular, pero debemos tener cuidado de no incendiar la tarjeta gráfica del usuario.
Antialiasing
En el mundo digital, las líneas diagonales se construyen con píxeles cuadrados, lo que produce "bordes de sierra" (pixeles dentados). El antialias: true es un proceso matemático que suaviza estos bordes mezclando los colores. Es crucial para un aspecto premium.
Device Pixel Ratio
Los teléfonos modernos y pantallas Retina (Mac) tienen más píxeles físicos por cada píxel "lógico" de CSS. Si no le avisas a Three.js sobre esto, tu 3D se verá borroso en pantallas caras. El método setPixelRatio(window.devicePixelRatio) soluciona esto instantáneamente.
Responsividad
En la web clásica, CSS se encarga de adaptar el diseño si la ventana cambia de tamaño. En WebGL, el canvas actúa como una imagen estática. Si el usuario gira el teléfono o cambia el tamaño del navegador, tú eres el responsable de actualizar el tamaño del renderer y la proporción de la cámara.
Consejo profesional
En pantallas de muy alta resolución (como un iPhone 15 o un MacBook), el pixel ratio puede ser 3 o más. Renderizar 3D complejo en esas densidades puede causar lag severo. Un truco ninja en producción es limitar el pixel ratio a 2: renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
El Setup Perfecto del Renderer
// 1. Instanciación con Antialias (bordes suaves) y Alpha (fondo transparente)
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
// 2. Establecer el tamaño exacto de la pantalla
renderer.setSize(window.innerWidth, window.innerHeight);
// 3. Soporte para pantallas Retina / Móviles
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// 4. Inyectar el canvas mágico en nuestro HTML
document.body.appendChild(renderer.domElement);
// 5. El Evento de Resize (Crucial)
window.addEventListener('resize', () => {
// Actualizar cámara
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
// Actualizar renderer
renderer.setSize(window.innerWidth, window.innerHeight);
});Una geometría suave y de alta definición sobre un fondo transparente de la web.
Errores comunes
Practica lo aprendido
Configura un Renderer profesional listo para producción.