Presentaciones web 3D: lo que siete conceptos de VITON13 enseñan sobre el formato

Siete presentaciones conceptuales sobre un mismo motor

En septiembre de 2026, VITON13 Studio añadió a su portafolio un conjunto de siete conceptos de presentación. Cada uno responde a un encargo que los clientes llevan una y otra vez a un estudio: el club de fútbol Avrora, que vende un paquete de patrocinio; la start-up logística NEXORA, que busca levantar una ronda A; el lanzamiento del anillo inteligente NOVA; las viviendas de la torre residencial NORD 81; la empresa espacial ORBITA; los paquetes para socios del festival PULSE 2027, y la clínica genómica HELIX. Todas las marcas, cifras, nombres y teléfonos que aparecen en ellas son inventados, y la última diapositiva de cada presentación lo advierte.

En conjunto suman 78 diapositivas en ruso: doce en el pitch para inversores y once en cada una de las otras seis. Una página índice recoge las presentaciones con su número de diapositivas, su transición y una descarga en PDF. Las siete funcionan en tarasovvitalii.com/demos/presentations/, el portafolio del fundador del estudio, y el estudio las documenta en un caso práctico con sus pantallas y sus mediciones.

Diapositivas que hacen volar la cámara en lugar de cortar

En este conjunto, una presentación web 3D es una página web con dos capas. Al fondo hay una escena three.js en vivo: un estadio de noche, una torre de cristal, un satélite sobre la Tierra. Delante hay diapositivas HTML corrientes, con titulares, cifras y gráficos. Cada diapositiva tiene su propia estación de cámara dentro de la escena, de modo que, cuando quien presenta avanza, la cámara vuela hasta el plano siguiente mientras el texto cambia por encima.

Las diapositivas cambian con una de siete transiciones 3D elegidas para cada marca: un sprint con estelas de velocidad para el club de fútbol, un cubo giratorio para el pitch de inversión, un vuelo a través de la diapositiva para el anillo, una página de libro que se pasa para la residencia, una órbita para la empresa espacial, un giro con glitch para el festival y un ascenso suave para la clínica. Las cifras se animan contando cuando se abre una diapositiva, los gráficos de barras crecen y pequeñas etiquetas 3D se anclan a distintas partes de la escena.

Como el texto sigue siendo HTML, se puede seleccionar, copiar y leer con un lector de pantalla, y se mantiene nítido en cualquier monitor. Esa es la diferencia principal frente a un vídeo o una exportación animada, donde cada palabra acaba convertida en píxeles.

Escenas generadas por código, sin material de archivo

Ninguna de las siete presentaciones usa un modelo 3D descargado, una foto o un vídeo. El estadio se construye con unos 43.000 asientos y aficionados, la torre NORD 81 crece planta a planta en la diapositiva de la obra, el anillo se desmonta en seis piezas rotuladas y la Tierra que hay bajo el satélite de ORBITA se genera con shaders. Los objetos repetidos, como asientos y ventanas, se dibujan con InstancedMesh de three.js, que representa muchas copias de un mismo objeto en una sola llamada de dibujo, y el bloom es el único efecto de posprocesado.

Generar las escenas mantiene ligeros los archivos y permite que una diapositiva modifique la propia escena: se encienden las luces, un público se mueve a 124 BPM, una hélice cambia de material. También significa que nada de lo que aparece en una presentación es una imagen con licencia que pueda caducar o exigir un crédito.

Controles de presentación heredados del software de diapositivas

Una presentación tiene que sobrevivir a una sala de reuniones, así que el motor respeta los hábitos que la gente ya tiene. Las teclas de flecha, la barra espaciadora, PageDown y PageUp pasan de una diapositiva a otra, que es justo lo que envían la mayoría de los mandos de presentación; la rueda del ratón y un deslizamiento del dedo hacen lo mismo. La tecla O abre una vista general de todas las diapositivas como tarjetas inclinadas sobre una cuadrícula 3D, la F activa la pantalla completa y la A inicia la reproducción automática.

Cada diapositiva tiene su propia dirección, así que un responsable comercial puede mandar un enlace que se abre directamente en la diapositiva cinco. En los móviles, la escena se queda en la parte superior de la pantalla y el texto de la diapositiva pasa a un panel desplazable situado debajo, de modo que las diapositivas largas siguen siendo legibles en una pantalla estrecha. Un script aparte convierte cada presentación en un PDF 16:9, que sirve para los adjuntos de correo, para imprimir y para cualquiera que la abra en un equipo al que le cuesta mover el 3D.

Peso y fotogramas medidos el 28 de septiembre de 2026

El 28 de septiembre de 2026, el estudio contó fotogramas con requestAnimationFrame, la función del navegador que se ejecuta una vez en cada refresco de pantalla, durante tres segundos en dos diapositivas de cada presentación. La prueba se hizo en Chrome headless, en un MacBook con chip Apple M5 y en una ventana de 1600 × 1000 con escala Retina. Las 14 lecturas dieron 60 fps, entre 60,1 y 60,2.

Cada presentación carga entre 235 y 252 KB de JavaScript con compresión gzip, three.js y GSAP incluidos. La build completa pesa 27 MB, y 14 MB de ellos corresponden a las siete versiones en PDF, que el visitante solo descarga si las pide. Son cifras de laboratorio obtenidas en una sola máquina reciente: no dicen nada de un portátil de oficina antiguo ni de un móvil económico, que no se midieron.

Cuándo gana una presentación en el navegador a un PDF, y cuándo pierde

Una presentación en el navegador justifica su coste cuando se envía como enlace y se abre en una pantalla decente: una oferta de patrocinio que tiene que transmitir el ambiente de una noche de partido, un proyecto residencial en el que el edificio es el producto, un pitch en el que un gráfico que crece se sigue mejor que uno estático. También resulta útil cuando la misma presentación se expone en directo y después se reenvía, porque quien la recibe ve exactamente lo que vio la sala.

Pierde cuando la presentación se va a imprimir casi siempre, se va a leer en un equipo antiguo, la van a editar varias personas en una herramienta de diapositivas o se va a abrir sin conexión a internet. En esos casos, la copia en PDF transporta el contenido, y un archivo de diapositivas clásico puede ser, sencillamente, la mejor opción. La pregunta honesta antes de encargar una es dónde se va a abrir de verdad.

También existe un camino intermedio. Una empresa puede conservar su archivo de diapositivas habitual para la edición interna y encargar una presentación web 3D solo para la versión que sale hacia patrocinadores, inversores o compradores. La presentación web se convierte entonces en la edición pulida de una historia ya acordada, lo que acorta la parte cara del trabajo y evita reconstruir escenas cada vez que cambia una cifra en la hoja de cálculo.

Límites del conjunto conceptual

Las siete presentaciones son un concepto que muestra un formato, no un trabajo para clientes. El club de fútbol, la start-up, el anillo, la torre, la empresa espacial, el festival y la clínica no existen, así que el conjunto no demuestra nada sobre rondas levantadas, patrocinios vendidos o viviendas reservadas. Las presentaciones están solo en ruso, y la demo se mantiene fuera de los buscadores a propósito, para que lo que la gente encuentre sea la página del caso y no la demo.

La tasa de fotogramas se midió en una sola máquina y en un solo día. Un proyecto real añadiría pruebas en los dispositivos que el público usa de verdad, un modo más ligero para chips gráficos modestos y las cifras propias del cliente en lugar de las inventadas.

Material que conviene reunir antes de encargar una presentación 3D

La escena es la parte más visible de una presentación así, pero son las diapositivas las que sostienen el argumento. El trabajo avanza más rápido cuando el cliente llega con la historia ya ordenada: la única frase que el público debe recordar, las cinco a siete cifras que la demuestran, los archivos del logotipo y los colores, y una idea del objeto que debe mostrar la escena, ya sea un edificio, un producto, un recinto o una ruta sobre un mapa.

También ayuda decidir pronto quién va a presentar y dónde. Una presentación proyectada desde un portátil, otra enviada por correo a inversores y otra abierta en un móvil durante un evento necesitan una cantidad distinta de texto por diapositiva y un equilibrio diferente entre la escena y las palabras.