Semana 18. Networked Aframe

Nos adentramos en la decimoctava semana del blog. Los retos indicados son:

Versión Kibotics-Websim

Versión Networked Aframe

Introducción de Networked Aframe en Kibotics-Websim

Versión Kibotics-Websim

Durante las semanas anteriores habia llegado a la siguiente conclusión: Networked Aframe únicamente funciona si la versión de Aframe utilizada es la 1.3.0, pero ¿es esto cierto?

Dada la alta complejidad que tiene modificar el código para adaptarlo a esta nueva versión he decidido dar un paso para atrás, es decir, cerciorarme de que realmente Networked Aframe no funciona en la versión actual, la 1.2.0.

Versión Networked Aframe

¿Es posible que la versión utilizada hasta ahora de Networked Aframe no soporte la versión deseada, pero otras si lo hagan? Efectivamente. Tras realizar diversas pruebas me he lanzado a preguntar en la plataforma Slack, concretamente en el grupo dedicado a Aframe, y he recibido la siguiente respuesta:

Networked-aframe 0.8.3 is the latest version supporting aframe 1.2.0, so be sure to use that version.

Por tanto, tras crear el entorno con el siguiente archivo package.json he obtenido los siguientes resultados.

    {
        "name": "naf-tutorial",
        "version": "1.0.0",
        "description": "My first multi-user virtual reality",
        "scripts": {
        "start": "node ./server/easyrtc-server.js"
        },
        "author": "YOUR_NAME",
        "dependencies": {
        "networked-aframe": "^0.8.3"
        }
    }

¡FUNCIONA!

¿Por qué he pensado que sería posible usar Networked Aframe con la versión 1.2.0 de Aframe?

El motor de físicas ammo funciona a la perfección con la versión 1.2.0 y, por otro lado, ciertas funcionalidades en Networked Aframe iban con esta versión. ¿Cómo cuáles? Por ejemplo, la modificación del color repetidas veces mediante el evento ‘click’. ¿Qué no funcionaba? La modificación de los parámetros por medio de bucles, ya que solo era posible que se diera un cambio, dandose el siguiente error:

Uncaught TypeError: target.slerpQuaternions is not a function

Conclusión

Networked Aframe funciona perfectamente con Aframe 1.2.0, pero hemos de usar las versiones correctas.

Introducción de Networked Aframe en Kibotics-Websim

Ya tenemos el motor de físicas adaptado a Kibotics-Websim y tenemos la certeza de que Networked Aframe funciona con la versión 1.2.0 de Aframe, por tanto, podemos empezar a introducir la última pieza que falta, es decir, Networked Aframe.

Consejos dados por Marta Quintana

Entre los consejos dados por Marta para introducir Networked Aframe encontramos lo siguiente:

• Añadir archivo javascript:

• Añadir los siguientes enlaces:

¿Se dan fallos por consola al introducir los enlaces anteriores?

Tras introducir los enlaces no se dan problemas.

Problemas

La definición de los elementos ha cambiado por completo.

1. a-assets - Creación obligatoria.

2. a-entity - Creación que permite visualizar el contenido en el navegador.

Por tanto, ¿cómo puedo adaptar el código existente? Antes de iniciar la adaptación he de observar como puedo definir la escena en un archivo .html.

• Primer modo

  <a-scene physics=”driver: ammo; debug: true; debugDrawMode: 1” networked-scene> a-assets template id=”sphere-template”> a-entity
  geometry=”primitive: sphere” material=”color: red” position=”0 10 -10” >/a-entity> /template> template id=”floor-template”> a-entity geometry=”primitive: plane” material=”color: blue” position=”0 0 -10” scale=”15 15 15” rotation=”-90 0 0”>/a-entity> /template> /a-assets> a-entity id=”sphere” networked=”template:#sphere-template;networkId:sphere;persistent:true;owner:scene”> /a-entity> a-entity id=”floor” networked=”template:#floor-template;networkId:floor;persistent:true;owner:scene”> /a-entity> /a-scene>

• Segundo modo

  a-scene physics=”driver: ammo; debug: true; debugDrawMode: 1” networked-scene> a-assets> template id=”sphere-template”> a-entity >/a-entity> /template> template id=”floor-template”> a-entity >/a-entity> /template> /a-assets> a-entity id=”sphere” networked=”template:#sphere-template;networkId:sphere;persistent:true;owner:scene” geometry=”primitive: sphere” material=”color: red” position=”0 10 -10” > /a-entity> a-entity id=”floor” networked=”template:#floor-template;networkId:floor;persistent:true;owner:scene” geometry=”primitive: plane” material=”color: blue” position=”0 0 -10” scale=”15 15 15” rotation=”-90 0 0”> /a-entity> /a-scene>

El segundo modo de definición parece ser más sencillo, ya que se asemeja en mayor medida a la definición de la escena típica. La diferencia es la existencia de en el interior de la etiqueta , aunque es importante que en su interior se cree , ya que en caso contrario no se crea el elemento en la escena.

De nuevo, antes de adaptar el código fuente he decidido reproducir la escena típica de Kibotics-Websim en Networked Aframe. Resultado:

<a-scene
  physics="driver: ammo; debug: true; debugDrawMode: 1"
  networked-scene>
  <!-- Templates -->
  <a-assets>
    <template id="sphere-template">
      <a-entity 
      ></a-entity>
    </template>
    <template id="floor-template">
        <a-entity
        ></a-entity>
    </template>
    <template id="sceneCamWrapper-template">
        <a-entity> 
        </a-entity>
    </template>
    <template id="sceneCam-template">
        <a-entity>
        </a-entity>
    </template>
  </a-assets>
  <!--
    Permmite visualizar el contenido en el navegador
  -->
  <a-entity 
  id="sceneCamWrapper"
  camera
  position="1 9 15"
  rotation="0 0 0"
  movement-controls="fly: true"
  networked="template:#sceneCamWrapper-template;networkId:sceneCamWrapper;persistent:true;owner:scene"
  >
    <a-entity
    id="sceneCam"
    camera
    position="0 0 0"
    rotation="0 0 0"
    active="true"
    wasd-controls-enabled="true"
    look-controls-enabled="true"
    networked="template:#sceneCam-template;networkId:sceneCam;persistent:true;owner:scene"
    ></a-entity>
  </a-entity>
  <a-entity 
    id="sphere" 
    networked="template:#sphere-template;networkId:sphere;persistent:true;owner:scene"
    geometry="primitive: sphere" 
    material="color: red" 
    position="0 10 -10" >
  </a-entity>
  <a-entity 
    id="floor" 
    networked="template:#floor-template;networkId:floor;persistent:true;owner:scene"
    geometry="primitive: plane" 
    material="color: blue" 
    position="0 0 -10"
    scale="15 15 15"
    rotation="-90 0 0">
  </a-entity>
</a-scene>

Por tanto, los pasos que considero he de seguir son los siguientes:

1. Añadir networked-scene
2. Añadir las cámaras. En primer lugar, poner los assets y, en segundo lugar, definir de forma normal junto con la siguiente línea: networked=”template:#sceneCamWrapper-template;networkId:sceneCamWrapper;persistent:true;owner:scene”. Una vez la cámara haya sido posible de instalar podemos seguir los mismos pasos con el resto de elementos, aunque probablemente encontremos problemas con los robots.