Chisme 161 del Lince: formas 3D A-Frame, tu primer mundo virtual

Víctor Vílchez, el Lince de la Noche cuando se quita la camisa, tenía los planos de una nueva Cámara de la Verdad extendidos por la sala de ensayo de Lynx Enterprises. Había un dragón, una ciudad flotante y, en una esquina, un cubo.

—Quiero un mundo virtual con dragón —dijo.

—Delightex te dejó con dos proyectos y muchos candados —contestó la Gata Montesa—. Vamos a probar algo gratuito de verdad. Y no empieces por el dragón.

—¿Por dónde, entonces?

—Por el cubo. Y por nueve figuras más. Un mundo virtual, al final, es texto.

Introducción: formas 3d A-Frame

En este chisme descubrimos cómo se hace un mundo virtual con A-Frame, una herramienta de código abierto. Vamos a trabajar con formas 3D A-Frame: diez figuras geométricas que aparecen en un mundo que se puede recorrer en el ordenador y, con un navegador adecuado, en unas gafas de realidad virtual.

No tienes que cambiar el código: tienes que aprender a leerlo. Cuando sepas qué significa cada línea, escribir tu propio mundo será cuestión de copiar y cambiar números.

Por qué este chisme

Este curso estáis estudiando las formas geométricas en tres dimensiones: caras, aristas, cuerpos curvos y poliedros. Aquí las vais a ver girar, de colores, y a la vez vais a ver cómo se escriben.

También es el paso siguiente al chisme 160, donde probamos Delightex y nos encontramos con los límites del plan gratuito. A-Frame no tiene cuentas ni límites de proyectos: es una página web.

Qué es A-Frame

A-Frame es una librería de código abierto que dibuja mundos en 3D dentro de una página web. Cada objeto del mundo es una etiqueta parecida a las que ya conoces del HTML para hacer formas 3D A-Frame.

Funciona con WebXR, una tecnología del navegador que permite entrar en realidad virtual. Puedes leer más en la documentación de WebXR de MDN.

Qué necesitamos

• Un ordenador con Chrome o Edge y conexión a internet.
• La página del chisme: probador de formas y mundo completo.
• Opcional: unas gafas con navegador, para entrar en el mundo.

Paso 1: el probador de formas 3d A-Frame.

Abre la página del probador. Arriba tienes la pantalla en 3D y debajo los botones.

1. Elige una forma: cubo, esfera, cilindro, cono, pirámide, prisma triangular, toro, tetraedro, octaedro o dodecaedro.
2. Elige un color.
3. Mira la línea de código que ha escrito la página y la forma que ha dibujado al lado.
4. Lee la tabla de debajo: explica cada trozo de la línea.

Cómo se lee una línea

Una línea de A-Frame tiene tres partes. Fíjate en la del cono de la imagen.

• La etiqueta de apertura, <a-cone, que dice qué forma es. Todas empiezan por a-.
• Los atributos, como position, height o color. Cada uno tiene un nombre y un valor entre comillas.
• La etiqueta de cierre, ></a-cone>. Lo que se abre, se cierra.

El atributo más importante es position, con tres números: x (izquierda o derecha), y (altura) y z (delante o detrás). Todo se mide en metros. Un valor negativo de z es hacia delante: -3 es tres metros delante de ti.

Las diez formas 3D A-Frame

Forma	Etiqueta	Dato
Cubo	a-box	6 caras cuadradas
Esfera	a-sphere	1 superficie curva
Cilindro	a-cylinder	2 bases y 1 superficie curva
Cono	a-cone	1 base y 1 superficie curva
Pirámide	a-cone con 4 lados	base cuadrada y 4 triángulos
Prisma triangular	a-cylinder con 3 lados	2 triángulos y 3 rectángulos
Toro	a-torus	la forma de un donut
Tetraedro	a-tetrahedron	4 caras triangulares
Octaedro	a-octahedron	8 caras triangulares
Dodecaedro	a-dodecahedron	12 caras pentagonales

Fíjate en que la pirámide y el prisma triangular no tienen etiqueta propia: son un cono y un cilindro con pocos lados. Eso se llama segments-radial.

Paso 2: el mundo completo en formas 3D A-Frame

En la pestaña El mundo completo están las diez formas en círculo a tu alrededor. Debajo hay una tabla con todo el código del mundo, línea a línea, con lo que significa cada una.

Pulsa una fila y la forma correspondiente se agita en la pantalla. Así ves que cada línea de código es un objeto del mundo.

Para ver el mundo con gafas

Hay una versión a pantalla completa, sin código: el mundo de las formas. Ábrela en el navegador de las gafas y busca el icono de las gafas, abajo a la derecha.

Si el icono aparece, púlsalo y estarás en el centro del círculo. Si no aparece, el navegador de tus gafas no permite entrar en realidad virtual desde esa página. Es un dato útil: cuéntaselo al profesor.

Antes de instalar nada en unas gafas del centro, pide permiso. Aquí no hace falta instalar nada: es una página web.

Qué estamos mirando realmente con formas 3D A-Frame

Una esfera «perfecta» no existe en el ordenador. Lo que ves es una esfera formada por muchos triángulos pequeños. Cuantos más triángulos, más redonda parece, pero más trabajo tiene que hacer el ordenador.

Todo lo que se ve en 3D se dibuja así: con puntos unidos en triángulos. Un cubo necesita muy pocos; una esfera, bastantes más. Por eso hay un truco: los mundos virtuales usan formas simples siempre que pueden.

Y recuerda: las medidas son metros virtuales. Si no las ajustas, nada impide que un perro sea más grande que una casa, como vimos en el chisme 160.

Para el aula

• ¿Qué forma tiene más caras: el dodecaedro o el octaedro? ¿Y cuál tiene menos?
• En la línea del cono aparece radius-top="0". ¿Qué pasaría si fuese 0.7? ¿Qué forma saldría?
• ¿Por qué la pirámide y el prisma triangular no tienen etiqueta propia?
• En el mundo completo, ¿qué dos números de position cambian de una forma a otra? ¿Cuál casi no cambia?
• Dos grupos escriben el mismo mundo con dos colores distintos. ¿Es el mismo mundo?

Retos de formas 3D A-Frame

• Reto 1: haz que funcione. Abre el probador y prueba las diez formas.
• Reto 2: lee y predice. Antes de pulsar cada forma, di cuántas caras crees que tiene.
• Reto 3: en la tabla del mundo, explica con tus palabras qué hace a-sky y qué hace a-plane.
• Reto 4: descarga el archivo del mundo, cambia un color y ábrelo. ¿Qué ha cambiado?
• Reto 5: añade una forma más copiando una línea y cambiando su posición.
• Reto 6: compara este chisme con el taller de diseño 3D. ¿Qué se parece y qué no?

Qué hemos aprendido

Con A-Frame hemos visto que un mundo virtual es una lista de objetos escritos en código, cada uno con su posición, su tamaño y su color. También hemos repasado las diez formas 3D y la anatomía de una línea.

Lo más importante: no hace falta escribir código para entenderlo. Basta con leerlo con cuidado, como un texto. Ya sabéis leer un mundo virtual.