- Un sitio de portafolio 3D creado por el desarrollador web Bruno Simon, que ofrece un entorno interactivo donde el usuario explora conduciendo un automóvil
- Construido sobre Three.js, implementa renderizado 3D en tiempo real aprovechando tanto WebGL como WebGPU
- El sitio incluye elementos de juego como sistema de logros, elementos secretos y la función de mensajes de visitantes (Whisper)
- Todo el código y los archivos de Blender están publicados en GitHub bajo licencia MIT, y la música puede usarse libremente bajo licencia CC0
- Como ejemplo de la combinación entre tecnología web e interacción creativa, es un portafolio representativo que muestra el potencial de las experiencias web 3D
Resumen del portafolio 3D de Bruno Simon
- Tiene la forma de un portafolio interactivo en el que se puede explorar un mundo 3D basado en la web y experimentar los proyectos y pruebas de su creador
- El usuario puede conducir un automóvil por el espacio virtual e interactuar con distintos objetos
- La frase “Don’t break anything!” crea una atmósfera de exploración divertida
- Es compatible tanto con controles de teclado como WASD, flechas, espacio y enter como con entrada táctil y gamepad
- Ofrece varias acciones como movimiento, salto, freno, booster, claxon y suspensión
Elementos de juego y sistema de logros
- El sitio cuenta con 38 logros (Achievements), que pueden desbloquearse mediante acciones específicas
- Ej.: “Traveler” (visitar todas las áreas), “Cookie Clicker” (aceptar 1000 cookies), “Flip of faith” (lograr un backflip), etc.
- Incluye condiciones variadas como distancia recorrida, experimentar el clima o destruir cajas explosivas
- El tiempo de obtención de los logros y el progreso se muestran en tiempo real, y también existe una función de tabla de clasificación del servidor (Leaderboard)
- Sin embargo, si el servidor está fuera de línea, no se pueden guardar los puntajes
Whisper y funciones de comunidad
- Los visitantes pueden dejar mensajes cortos mediante la función Whisper
- Máximo de 30 caracteres y un mensaje por usuario
- Cuando se agrega un mensaje nuevo, se eliminan los más antiguos
- Se prohíben insultos y se puede elegir una bandera por país
- Si el servidor de Whisper está fuera de línea, la función de mensajes se desactiva
Stack técnico y componentes open source
- El renderizado 3D está implementado con Three.js
- Three.js es una librería creada por mr.doob, y gracias a TSL (Three.js Shading Language) añadido por Sunag, admite tanto WebGL como WebGPU
- El motor de física es Rapier, el audio usa Howler.js, y las fuentes son Amatic SC y Nunito
- Todo el código fuente está publicado en GitHub (brunosimon/folio-2025) y usa licencia MIT
- También incluye archivos de Blender, por lo que se puede modificar y estudiar libremente
- El código del servidor no es público por razones de seguridad, pero el portafolio funciona incluso sin servidor
Música y materiales adicionales
- La música de fondo fue creada especialmente para el portafolio por Kounine
- Se distribuye bajo licencia CC0, por lo que puede descargarse y reutilizarse libremente
- Está disponible en la ruta
/static/sounds/musics dentro del repositorio de GitHub
- También se ofrecen materiales para aprender Three.js mediante el curso en línea Three.js Journey
- Cubre todo el proceso de creación de una web 3D con Three.js
- El proceso de desarrollo del portafolio quedó documentado en una serie Devlog de YouTube
- Incluso después de completarlo, sigue trabajando en la producción del último video
Significado general
- El portafolio de Bruno Simon es un ejemplo de la combinación de tecnología web, interacción de juego y expresión artística
- Gracias a su carácter open source y sus licencias libres, puede aprovecharse como proyecto web 3D reutilizable y apto para aprendizaje
- Como ejemplo de implementación real del ecosistema Three.js y del renderizado basado en WebGPU, muestra la dirección de los gráficos web de próxima generación
4 comentarios
Es literalmente solo un juego...
El director de desarrollo que ignoró la opinión de usar tjs para el proyecto clave de la empresa y dijo que usáramos babylon.js... El director de desarrollo que, lejos de asumir la responsabilidad por su decisión, se llevó a la empresa y al personal para fundar otra... ¿Le está yendo bien, verdad?
Lo dejé abierto un momento mientras lo probaba... y mi MacBook M1 ya parece que va a despegar. Pero eso sí, está excelente.
Opiniones en Hacker News
Tras recargar 1 o 2 veces sí cargó bien y, en general, es un trabajo genial
Eso sí, estaría bien poder hacer más zoom out. Mis respetos para Bruno
Hay pequeños templos-objeto que representan cada red social, y si los chocas con el auto se caen, aunque los enlaces siguen siendo clicables
También hay estado global, como un contador de “sacrificios al dios del caos” que sube cuando te lanzas a un portal
En general, el estilo artístico es consistente y, tras explorarlo unos 5 minutos, se siente bastante bien logrado
Aun así, más que “el sitio web 3D más genial”, como dice el título en HN, parece más bien un sitio de portafolio muy bien hecho
Me pasó con el juego gratis Chex Quest que venía en las cajas de cereal
Pero ahora miré el sitio unos 30 segundos, pensé “qué genial” y lo cerré enseguida
Supongo que se debe a (A) el cambio en el valor del tiempo, (B) el aumento del estándar de inmersión en juegos, y (C) que ya he gastado demasiado tiempo jugando
En los últimos 10 años ha habido montones de demos de three.js/babylon.js, y este está como en el 10% superior
Es divertido y tiene buena calidad, pero no hay nada nuevo y la eficiencia para transmitir información es baja
Si se compara con juegos indie 3D, todavía está lejos en nivel de acabado
Si sirve de algo la recomendación de alguien principiante en threejs, lo recomiendo mucho
Aunque al conducir con el dedo, el menú de pulsación prolongada de iOS aparecía seguido y rompía la inmersión
Se sentía el cuidado por los pequeños detalles y lo disfrutable que era, y me puse a jugar con mi hijo al minijuego de carreras
Me pregunté cómo hicieron quienes marcaron 20 segundos. ¿Habrá algún speed boost?
Creo que el verdadero valor de una tecnología está en si te permite hacer algo que antes no podías hacer
Por ejemplo, cuando alguien de la Edad de Piedra descubre un hacha de acero, lo importante no es el hacha en sí, sino la metalurgia
Del mismo modo, más importante que bitcoin es la criptografía, y más importante que threejs es qué cosas nuevas puedes crear con eso
Personalmente, siento que con threejs, react-three-fiber, shaders, etc., se puede hacer muchísimo más
Para mí, lo “genial” es aquello que te hace ver el mundo de otra manera
Como ejemplo, pondría esta demo de CodePen
Esperaba una innovación en la experiencia de navegación que justificara el uso de 3D, y en eso se queda corto