Una crónica de ingeniería creativa, diseño tipográfico y web 3D “vanilla” que acabó en uno de los Doodles más complejos publicados por Google. Detrás está el diseñador y desarrollador Stewart Smith, autor de ERNO, un “widget factory” para cubos de Rubik en la Web que separó estado y visualización, apostó por DOM + CSS-3D (sin Canvas) y demostró que Three.js podía sostener experiencias masivas y accesibles.
El contexto: de Flash a la Web “sin plugins”
A comienzos de la década de 2010, con Flash en retirada y HTML5/WebGL ganando tracción, el equipo de Google Creative Lab buscaba ejemplos que sustituyeran anuncios y microsites construidos en el viejo runtime de Adobe. Smith, entonces en el Lab, empezó jugueteando con CSS-3D y Three.js (el proyecto de Ricardo Cabello, mrdoob) para crear un “fold-in” al estilo Mad Magazine… hasta que el azar cruzó el camino con Ernő Rubik y una exposición internacional que Google co-patrocinaba con Liberty Science Center: Beyond Rubik’s Cube (estreno en 2014).
Lo que nació como pruebas de CSS-3D y Three.js acabó madurando en Cuber, luego ERNO: una caja de herramientas abierta para construir cubos “físicos” en el navegador, con interacción por teclado, picking de elementos y hasta inspección detallada desde la consola del navegador.
Ingeniería con oficio: ERNO, “fábrica de widgets” y diseño de API
Smith diseñó ERNO con varias decisiones poco comunes, pensando tanto en pedagogía como en robustez:
- Separación estricta de estado y render: el modelo lógico del cubo (centros, aristas, esquinas, direcciones, rotaciones) vive independiente de la capa visual. Eso permitió alternar CSS-3D, WebGL con Three.js o incluso salidas no gráficas.
- Hackeable desde la consola: en lugar de esconderlo todo tras cierres y módulos, ERNO expone métodos de inspección y manipulación (
cube.inspect(),cube.hasColors(...), grupos, slices, radios, opacidades). La depuración se convierte en parte de la experiencia. - Cartografía cuidada: notación inspirada en Singmaster, utilidades de orientaciones y vecinos (
getClockwise,getOpposite,getUp), y diagramas ASCII en comentarios para comprender cómo se mueven cubelets y caras. - Prototypal mindset: pese a la época pre-ES6 módulos, el diseño empuja hacia composición y prototipos, con “clases” separadas por claridad y legibilidad.
El resultado práctico se ve en el Rubik’s Cube Explorer: una demo que explica el cubo por dentro, alterna “veneer” (sólido, wireframe, “glass”), explota/contrae el modelo variando el radio de cada cubelet y permite seguir IDs y tipos (centro/arista/esquina). Todo renderizado con DOM y CSS-3D: “son solo divs”.
De la demo a la portada: el Doodle de 2014
Con Cuber/ERNO ya sólidos, el proyecto se bifurcó en tres líneas:
- Kioscos interactivos para la exposición Beyond Rubik’s Cube (LSC + Google).
- Chrome Cube Lab, un sitio comunitario —hoy descontinuado— que liberó el toolkit ERNO y mostró variaciones creadas sobre él.
- El Google Doodle conmemorativo del 40º aniversario del cubo (19 de mayo de 2014), uno de los más complejos publicados hasta entonces: Three.js, Tween.js y CSS-3D en la página más visitada del planeta.
El equipo Doodle, guardián de la simplicidad y estabilidad de la portada de Google (sin plugins y con estándares web), dio luz verde. Para llegar ahí se cuidaron rendimiento, degradación, tamaño de bundle, interacción accesible y consistencia cross-browser.
Branding y tipografía: cuando el 3D impulsa la identidad
A partir del simulador, el equipo del Lab (Brenda Fogg, Thomas Gayno, Richard The, Johnny Selman y otros) evolucionó la identidad de la exposición: títulos en perspectiva como si estuvieran impresos en las caras del cubo. Aquella dirección gráfica derivó, además, en la tipografía Rubik (por Philipp Hubert), publicada en Google Fonts y hoy omnipresente en la Web.
La convergencia es llamativa: años después, la autobiografía de Ernő Rubik llegó con una portada que recuerda el enfoque del Lab, y —como gesto conceptual— el propio libro “habla” desde la voz del cubo, eco del “Hi. I am the Cube” con el que Smith presentaba su Explorer.
Decisiones técnicas que siguen siendo actuales
Para un medio tecnológico, las lecciones del caso siguen frescas:
- CSS-3D y DOM siguen siendo una alternativa válida cuando se busca accesibilidad, SEO y integración con contenido semántico. No todo 3D web exige Canvas o WebGL.
- Separar estado y vista permite migraciones (CSS→WebGL→WebGPU), tests más fiables y reutilización en kioscos, web y archivo.
- Telemetría y degradación: si el FPS caía, el sistema reducía detalles o pixel ratio; si el navegador no soportaba el 3D, había fallbacks.
- Docstring y ASCII: la documentación “explicable” en el código no es lujo; es inversión. Una década después, ERNO se entiende porque se lee bien.
El lado humano: creatividad, obsesión y oficio
El relato de Smith parte de una obsesión personal con el cubo (aprendizaje por capas, viajes con el cubo como fidget), pasa por docencia (NYU/ITP) y desemboca en una oportunidad industrial en Google que alineó arte, ingeniería y marca: desde el “no construyas el widget, construye la fábrica de widgets”, hasta el respeto reverencial por la figura de Ernő Rubik (que llegó a probar la demo y aprobó su enfoque “explicativo”).
También hay franqueza sobre los límites: el solver quedó esbozado (top cross, hooks para algoritmos de capa por capa y un camino más general que no dio tiempo a culminar). Aun así, la arquitectura dejaba espacio para que otros completaran el camino.
Por qué importa hoy (más allá de la nostalgia)
- Three.js y su comunidad han crecido, WebGPU asoma y el 3D web “de autor” vuelve a subir el listón —como se ve en Japón y otros polos creativos—, pero los fundamentos que se aplicaron aquí (separación, accesibilidad, toolkits, open source) siguen siendo buenas prácticas.
- La historia recuerda que la Web abierta puede albergar experiencias masivas sin renunciar a estándares ni a la simplicidad de la portada más exigente.
- Es un caso de estudio sobre cómo ingeniería creativa y dirección de arte pueden reforzarse mutuamente hasta fijar iconografía (branding, tipografías) que trasciende el proyecto.
Puntos clave (para equipos técnicos y creativos)
- Empieza por el modelo: define bien estado (caras, vecinos, ejes) antes del renderer. Cambiar de CSS-3D a WebGL/WebGPU será mucho más barato.
- Hazlo inspeccionable: deja “orejas” en la consola para ver el sistema por dentro (
inspect, groups, slices…). La depuración es parte de la UX de desarrollo. - Mide en producción: FPS, tiempos de frame, memoria, Core Web Vitals; planifica degradación progresiva.
- Documenta como si otro fuera a mantenerlo (spoiler: ocurrirá). Diagramas ASCII y comentarios que expliquen el “por qué”, no sólo el “qué”.
- No subestimes el DOM: cuando SEO, accesibilidad o entornos restringidos importan, CSS-3D con fallbacks puede ser la elección ganadora.
Pruébalo online en I am the Cube.
Preguntas frecuentes
¿Qué papel jugó Three.js realmente?
Fue fundacional para entender y orquestar la escena y la interacción; en el Doodle convivió con CSS-3D y Tween.js. En el Explorer, Smith enfatizó DOM + CSS-3D como decisión consciente (semántica, accesibilidad, control fino del layout).
¿Dónde está hoy ERNO y el Chrome Cube Lab?
El sitio fue retirado, pero sobreviven repos tempranos del autor y una huella amplia: muchos simuladores actuales declaran —o dejan entrever— que usan ideas o piezas del toolkit.
¿Por qué no se completó el solver general?
Tiempo y prioridad. Quedaron hooks y un esqueleto de capa-por-capa. El propio autor cita intentos paralelos más abstractos, pero la ventana de proyecto se cerró.
¿Sigue teniendo sentido CSS-3D en 2025?
Sí, si tu prioridad es UX accesible, SEO y degradación amable. Para materiales PBR pesados o compute, WebGL/WebGPU rinde mejor; pero no es excluyente: el patrón de estado separado deja usar el renderer óptimo en cada caso.
Fuente base: ensayo detallado de Stewart Smith sobre la gestación de ERNO, el Rubik’s Cube Explorer, la colaboración con Google Creative Lab, la exposición Beyond Rubik’s Cube y el Google Doodle de 2014.
