Inicio > Blog > Robotics > Despliega tu Robot en 3D: Guía para Crear un Visor URDF

¿Qué es URDF?

El Formato Unificado de Descripción de Robótica (URDF) es un archivo XML que incluye la descripción física de un robot. Básicamente, es un modelo 3D con información sobre articulaciones, motores, masa, etc. Para más detalles sobre cómo crear tu propio robot en formato URDF, revisa nuestro post anterior.

¿Por dónde empezar?

Para crear nuestra aplicación y alojarla en un host web para presentar nuestro robot, utilizaremos las herramientas creadas con Three.js de gkjohnson/urdf-loaders. Es necesario tener conocimientos básicos sobre Three.js y cómo instalarlo localmente en nuestra PC. Puedes comenzar con este ejemplo básico desde su documentación oficial. Este demo fue realizado en un entorno Windows, pero se puede replicar en otros sistemas operativos. Al final de este post, dejaré algunos recursos útiles para usuarios de Windows que se utilizaron en este tutorial.

Para verificar una correcta instalación, basta con ejecutar en el terminal. Deberá devolver una salida con la versión como 10.7.0.

npm -v

Tip

Todo lo indicado en este post se basa en la poca experiencia como desarrollador de aplicaciones con JavaScript o Three.js. Sin embargo, la intención es documentar los buenos resultados obtenidos para proyectos personales 🎴🕹️. Es posible (y seguro) que existan mejores maneras de administrar la aplicación, y espero que este post sirva como guía general 😊.

Realizar una copia o fork del repositorio “urdf-loaders”

Dirígete a gkjohnson/urdf-loaders y realiza una copia, ya sea de forma manual (descarga en .zip) o con Git. No todos los archivos serán necesarios para este tutorial.

Crear tu propia estructura del proyecto

your-project/
├── docs/                    # Carpeta de salida para GitHub Pages
│   ├── index.html           # ¡Contenido creado automáticamente!
│   └── ...                  # Otros archivos generados por Parcel
├── urdf/                    # Carpeta de archivos URDF
│   ├── robot/
│   │   ├── urdf/
│   │   │   ├── meshes/      # Archivos de malla para el robot
│   │   │   └── urdf/        # Archivos URDF del robot
│   │   └── ...              # Otros robots generados
├── src/                     # Código fuente de tu aplicación
│   ├── index.html           # Archivo HTML principal
│   ├── main.js              # Archivo JS principal
│   └── styles.css           # Archivo CSS principal
├── utils/                    # Código fuente de tu aplicación
│   ├── urdf-viewer-element.js  # Archivo del paquete urdf-loaders
│   └── ...                 # Otros archivos el paquete
├── test/                   # Carpeta de pruebas para compilar y servir
│   ├── index.html          # ¡Contenido creado automáticamente!
│   └── ...                 # Otros archivos generados por Parcel durante las pruebas
├── package.json            # Archivo de configuración de npm
└── .gitignore              # Archivos a ignorar por Git

Modificaciones necesarias

1. Actualizar las dependencias

Luego de estructurar tu proyecto, el primer paso es reutilizar el archivo de configuración package.json, encargado de instalar todas las dependencias y definir los comandos para probar y crear finalmente nuestra aplicación. Así, se reemplazó la sección devDependencies por sus versiones actualizadas.

"devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "@types/three": "^0.164.0",
    "@webcomponents/webcomponentsjs": "^2.4.4",
    "babel-jest": "^29.5.0",
    "concurrently": "^6.2.1",
    "cssnano": "^7.0.4",
    "eslint": "^7.10.0",
    "eslint-plugin-jest": "^24.1.0",
    "jest": "^27.1.1",
    "jest-cli": "^27.1.1",
    "jsdom": "^17.0.0",
    "node-fetch": "^3.0.0",
    "nyc": "^15.1.0",
    "parcel-bundler": "^1.12.5",
    "postcss": "^8.4.39",
    "rollup": "^2.29.0",
    "static-server": "^3.0.0",
    "three": "^0.164.1",
    "typescript": "^4.4.3",
    "http-server": "^14.1.1"
  },
  "dependencies": {
    "parcel": "^2.12.0"
  }

2. Modificar los comandos de ejecución

Luego, en la sección de scripts se deben reemplazar los comandos start y build por sus versiones actualizadas (según la estructura de tu proyecto y algunos comandos nuevos como --dist-dir debido a la actualización de las dependencias). El resto de comandos como build-examples o test fueron eliminados.

"scripts": {
    "start": "concurrently \"parcel watch ./src/index.html --dist-dir ./test/ --public-url . --no-cache\" \"http-server ./\"",
    "build": "parcel build ./src/index.html --dist-dir ./docs/ --public-url ./ --no-cache --no-source-maps --no-content-hash"
}

Nota

Para el comando start se prefirió utilizar el paquete “http-server” en vez del “static-server” por ser más ligero y estar familiarizado.

3. Modificar las referencias a los archivos principales

Algunos de nuestro archivos se verán afectados y son compilados en este punto, ya que no estarán correctamente enlazados debido a la nueva estructura del proyecto. Lo siguiente será revisar el contenido de nuestro principales archivos del paquete ubicados en src y utils (archivos js y html). Sin embargo, para nuestro beneficio, estos ya fueron identificados y son los siguientes:

En src/

En index.js

/* globals */
...
import URDFManipulator from '../utils/urdf-manipulator-element.js';

En index.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    ...
    <link href="styles.css" type="text/css" rel="stylesheet">
</head>

<body>
    ...
    <script type="module" src="./index.js"></script>
</body>'

4. Mantener solo archivos necesarios

Dado que solo se mantuvo los comandos start y build, los siguientes archivos de la carpeta original pueden eliminarse de nuestro proyecto:

umd/
.eslintrc.json
babel.config.json
jest.config.js
package-lock.json (se volverá a crear al compilar)
rollup.config.json
example/index.bundle.html
example/simple.html
example/vr.html
example/src/index.js
example/src/simple.js
example/src/vr.js

Relizando pruebas

Finalmente, llegó la parte más interesante y fácil de toda esta guía. Simplemente con el siguiente comando, se puede probar nuestra aplicación en un servidor local desde nuestro navegador. Para realizar un cambio, solo basta con guardar el archivo luego de modificar. Se recomienda fuertemente utilizar VSCode para editar e implementar todo nuestro proyecto. Recuerda que los archivos creados para ello se almacenan en la carpeta /test, por lo que hay que tener en cuenta en nuestra dirección del localhost.

npm start

Algunas modificaciones incluyen, cambiar la posición de la cámara y zoom de nuestro robot, según:

initCamera() {
        this.camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
        this.camera.position.z = 7;
        this.camera.zoom = 8;
    }

Realizando la exportación final

Luego de modificar todo lo necesario, probar con los robots incluidos por defecto y agregar nuestro propio archivo URDF, finalmente se procede a compilar los archivos necesarios en la carpeta /docs para subirlo a nuestro host con Github Pages, utilizando simplemente:

npm run build

Modificación final

Para poder visualizar correctamente nuestra aplicación con ayuda de Github Pages (según lo explicado más adelante), se procederá a modificar el contenido de la carpeta /docs:

Realizar una copia de nuestra carpeta urdf dentro de /docs
Modificar el archivo index.html creado en /docs, indicando que nuestro urdf se encuentra ahora en la misma carpeta:

<li urdf="./urdf/UR5/urdf/UR5.URDF" color="#37B7C3"><b>UR5</b></li>

De esta manera, se asegura que todo nuestro proyecto y sus dependencias corran desde en la web /docs. Por lo que nuestro nueva jerarquía de archivos sería ahora:

your-project/
├── docs/                    # Carpeta de salida para GitHub Pages
│   ├── index.html
│   ├── urdf/                # Carpeta de archivo del robot
│   └── ...                  # Otros archivos creados al compilar

Subiendo a Github Pages

La carpeta docs es importante porque nos permitirá almacenar todo nuestro visualizador URDF. Para ello, ir a la sección de Settings de nuestro repositorio público previamente creado. Eb la sección de Pages --> Github Pages --> Build and deployment seleccionar la opción Deploy from a branch. Luego, indicar ruta del folder base para la creación nuestro página a /docs. Por defecto es /root.

Luego de unos minutos, aparecerá que nuestro sitio se creó correctamente y aparecerá un enlace a nuestra página web de nuestro visualizador URDF completamente funcional.

Y eso es todo, disfruta de tu robot en la web !!! o prueba el mío en Github.

Recursos recomendados

Instalador de Node.js y npm según su página oficial mediante un gestor de versiones de Node como coreybutler/nvm-windows.

Este artículo está licenciado bajo Creative Commons Attribution 4.0 (CC BY 4.0) Licencia Internacional.

Como citar: Jácobo-Zavaleta, Sergio. 2024. “Despliega tu Robot en 3D: Guía para Crear un Visor URDF”, Third Foundation, 11 de julio, 2024. URL

Volver arriba

Reutilización

CC BY-SA 4.0

Cómo citar

BibTeX

@online{jácobo2024,
  author = {Jácobo, Sergio},
  title = {Despliega tu Robot en 3D: Guía para Crear un Visor URDF},
  date = {2024-06-15},
  url = {https://sergiojacobo.com/blog/posts/2024/02/02.html},
  langid = {es}
}

Por favor, cita este trabajo como:

Jácobo, Sergio. 2024. “Despliega tu Robot en 3D: Guía para Crear un Visor URDF.” June 15, 2024. https://sergiojacobo.com/blog/posts/2024/02/02.html.