Diseña tu entrada al Metaverso con WordPress (Parte 2/3)

A continuación, lo vamos a meter en una batidora y el resultado va a ser WPVR. Yo le he puesto mis propias siglas, pero sería algo así como un WordPress en tres dimensiones. Esto lo vamos a construir gracias a A-Frame, que es una librería que nos permite generar experiencias de realidad virtual en la web. No será algo que esté aislado en nuestro ordenador o en un disco o en un cartucho que metemos en nuestra videoconsola y lo ejecutamos, sino que nos permitirá optimizar y subir elementos a un servidor para que la web sea tridimensional. Y entonces, con un dispositivo de realidad virtual, nosotros podremos navegar de forma inmersiva por estos entornos.

Construyendo una escena básica

Voy a hacer una demo muy sencilla porque aquí tenemos que tener en cuenta que el ancho de banda es crucial al trabajar con polígonos. En las tres dimensiones pesan muchísimo y si le añadimos texturas, aún más. Entonces, cualquier cosa que nosotros subimos a este mundo tiene que estar muy optimizada porque estamos hablando de una transferencia de datos brutal.

Al final, la herramienta en sí misma, la librería, ya la tenemos. Y el problema es que funciona prácticamente solo a base de código. El que sabe programar código puede generar experiencias inmersivas con esta librería (También hay un editor visual, pero no termina de funcionar demasiado bien). Pero claro, esto no es algo práctico, porque luego cuando quieres cambiar una propiedad de un elemento tienes que volver a entrar en el código.

A mí, esto me recuerda mucho a lo que pasaba con Flash. El flash era un conjunto cerrado, un paquete que subías a la web y cuando querías modificarlo había que volver a abrir el paquete, modificar lo que querías, empaquetarlo de nuevo y subirlo. Entonces, con este experimento, intento romper esta limitación. 

DISCLAIMER: WordPress es licencia GPL y A-Frame tiene una licencia MIT, que son muy parecidas, son licencias open source compatibles, pero no son exactamente iguales.

En una escena básica de A-Frame hay tres elementos principales. El primero es la propia librería. Tenemos que llamar a una serie de archivos JavaScript en nuestro en nuestra web para que todo eso funcione de verdad.

El segundo elemento es una escena que se abre con una etiqueta HTML, metemos el contenido y cerramos la escena. 

Y el tercer elemento son todos los componentes que nosotros vamos a introducir en esa escena, que se llaman entidades y son, por ejemplo, los polígonos. 

Estructuras similares

Dándole vueltas a esto, me di cuenta de que A-Frame tiene una estructura bastante similar a la de WordPress: tenemos nuestro tema, que es un poco lo que nosotros pintamos. La librería de A-Frame lo que hace es darnos ese marco, ese lienzo donde nosotros podemos empezar a pintar. 

Tenemos unos post, unas páginas o entradas que son similares a la escena. Nosotros creamos una escena y dentro de esa escena metemos elementos. Pueden ser imágenes, puede ser texto, etc. 

Y por último, tenemos bloques (de Gutenberg, por ejemplo).

Entonces resulta que con esa estructura similar, podemos decir que ya que WordPress es un gestor de contenido, podríamos utilizarlo para gestionar todo ese contenido que nosotros vamos a utilizar para crear nuestro mundo tridimensional. Esta es la idea: la potencia de la base de datos de WordPress, lo que nos permite es tener nuestros nuestros assets, nuestros elementos, llamarlos para construir escenas y modificar sus propiedades.

Siguiendo la estructura de los tres puntos que vimos al principio, lo primero que necesitamos es un tema. Yo he creado el tema personalizado por dos razones: la primera, porque en el header de ese tema vamos a cargar nuestras librerías y la segunda, porque realmente es un tema que de momento no nos pinta nada, tan solo tenemos un lienzo en blanco.

Esto me recuerda poco a Matrix, cuando los protagonistas están en la habitación blanca donde no hay absolutamente nada y entonces de repente empiezan a meter elementos, esto sería algo similar. Tiene otras peculiaridades, ya que es un tema que no tiene footer y solo lo tiene la llamada a la librería en el header y el resto es el típico loop de WordPress.

Otro elemento que voy a utilizar son los Custom Post Types. Esto lo que nos permite es crear nuestro tipo de post o de página personalizada, que en este caso va a ser un tipo de post “Escena”. Para ello, creamos nuestro CPT y entonces abrimos la etiqueta <a-scene>, metemos nuestro contenido y cerramos la etiqueta. 

Y el tercer elemento, como comenté anteriormente, serían los bloques. Estos son los elementos que necesitamos para construir nuestro mundo. Hay muchos plugins de bloques personalizados. Yo he probado Genesis, que de momento me funciona muy bien con su versión gratuita.

Continúa en el siguiente artículo.