Esta es una traducción generada por IA del artículo original en polaco y puede contener errores menores.

Construyendo un Cubo de Rubik 3D Interactivo en Vue 3 y WebGL

Los gráficos tridimensionales en el navegador han dejado de ser solo una curiosidad tecnológica desde hace mucho tiempo, convirtiéndose en una herramienta poderosa para construir experiencias altamente interactivas. Cuando pensamos en 3D en la web, la primera asociación a menudo es la biblioteca Three.js. En esta entrada, sin embargo, me gustaría presentar un enfoque arquitectónico que consiste en construir un Cubo de Rubik 3D Interactivo totalmente dentro del framework Vue 3, dependiendo fuertemente de la API de la interfaz nativa de WebGL y de la gestión precisa del estado de las fracciones de rotación.

Puedes estudiar mi último proyecto de código abierto – rubic-cube – por completo en mi instancia pública de Gitea. ¡Disfruta la lectura!

Arquitectura y Retos

El principal problema al implementar juegos de lógica como el Cubo de Rubik no es solo "dibujar" cubos en el espacio, sino la gestión libre de colisiones de sus rotaciones a través de los ejes individuales.

¿Por qué Vue 3?

El uso del estado reactivo de Vue 3 (gracias a la Composition API – ref, computed, watch) nos permite separar elegantemente la lógica y las matemáticas del propio cubo (el estado de los 27 cubos más pequeños, llamados Cubies) de la capa de renderizado que lanza fotogramas al <canvas>. El motor reactivo de Vue funciona de manera brillante al rastrear la "intención" del usuario de rotar una cara determinada (por ejemplo, al deslizar un dedo por la pantalla).

Bucle de renderizado vs Tablero de reactividad

En un flujo web 3D típico, tenemos un bucle requestAnimationFrame que calcula y redibuja el mundo 60 (o 120) veces por segundo. Arrojar todo el estado reactivo de Vue allí dentro mataría drásticamente el rendimiento en dispositivos más débiles (móviles).

Mi solución para mantener 60 FPS fue limitar la reactividad. La representación de la disposición del cubo (modelo de datos) se actualiza solo bajo demanda durante movimientos específicos del algoritmo, mientras que WebGL simplemente proyecta polígonos hacia el espacio cósmico en un bucle sin procesar consultando matrices de transformación, evitando casi por completo el proxy de Vue durante el pintado puro (renderizado).

TIP

La mejor táctica de optimización en Vue para operaciones pesadas de proyección de renderizado es separar las matrices de transformación como objetos JS sin procesar y sin la sobrecarga de la reactividad.

Modelo Matemático – Cuaterniones y Ángulos de Euler

Para evitar el famoso problema del Gimbal Lock (bloqueo de rotación), implementamos las rotaciones de toda la matriz 3x3x3 de los planos individuales utilizando Cuaterniones en lugar de Ángulos de Euler. Cuando hacemos un "giro rápido" de la cara derecha, una animación CSS es demasiado poco confiable para depender de ella.

La rotación se produce al mapear posiciones relativas a la iteración central:

// Fragmento conceptual del algoritmo de rotación de columnas en Vue
function rotateSlice(axis, index, direction) {
  state.isAnimating = true;
  const targetAngle = direction * (Math.PI / 2); // 90 grados
  
  animateValue(0, targetAngle, 300, (currentAngle) => {
    // Actualización de la matriz de rotación de los cubos activos
    updateActiveCubiesMatrix(axis, currentAngle);
  }).then(() => {
    snapToGrid();
    state.isAnimating = false;
  });
}

Gracias a esto conseguimos el efecto de que el cubo se "encaje" en sus lugares duros exactamente cada 90 grados manteniendo una rotación proyectada isométricamente perfectamente fluida.

Responsividad y Táctil en Móviles

Un Cubo de Rubik requiere arrastre tridimensional; aquí no tenemos un desplazamiento plano. Esto se resolvió registrando eventos nativos touchstart, touchmove en el objeto <canvas>, lo que permite analizar los vectores delta de arrastre:

<template>
  <div class="cube-container">
    <canvas 
      ref="webglCanvas" 
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
    ></canvas>
  </div>
</template>

Todo es completamente jugable en una pantalla táctil y funciona con una latencia notablemente baja, casi tan bien como una aplicación nativa, lo cual es un éxito fenomenal de los estándares web modernos.

¡Pruébalo tú mismo!

Construir gráficos basados en matemáticas espaciales desarrolla la mente de un ingeniero mucho más que ensamblar formularios REST y consultas de forma estándar. Te abre los ojos a las optimizaciones de hardware.

Echa un vistazo al repositorio público en mi dominio para descargar el código tú mismo y ejecutar localmente: 👉 Repositorio de Rubic Cube en Gitea 7u.pl

¡Resuélvelo entero y presume de tu tiempo récord de PR del algoritmo de mezcla! 🚀