Tools and Languages
By Romualdo Villalobos
Estas herramientas son útiles para trabajar con WebGL a un bajo nivel, ejemplo, crear una librería 3d, un framework de visualización, un engine, o aprender WebGL.
Low-Level
1.
2.
3.
4.
...Si por el contrario, necesitas hacer un videojuego, un efecto interactivo para una página web, o algún proyecto donde el objetivo es hacer un producto de alta calidad y que se vea bonito (en poco tiempo), las siguientes herramientas serán de ayuda.
Three.js (3D).
Babylon.js (3D) (API estable y Mantenida por Microsoft).
Pixi.js (2D y efectos interactivos para páginas).
Phaser (2D).
Engines
1.
2.
3.
4.
Tal como ocurre en el desarrollo web a nivel profesional en el desarrollo de videojuegos/experiencias también se tiende a usar bundlers como Webpack para automatizar el “bundling” y brindar una experiencia de desarrollo cómoda.
Workflow
Entre las ventajas se encuentran las de:
Poder escribir el juego en ES6/TypeScript, La mayoría de engines discutidos están escritos en alguno de estos dos lenguajes y se integran bien a cualquiera de los dos.
Ejemplo, Babylon está escrito principalmente en TypeScript, sin embargo se puede usar fácilmente en un proyecto que usa ES6.
Hot Reloading.
Manejo de dependencias con npm/yarn como cualquier otro proyecto front-end.
Posibilidad de implementar tests automatizados con frameworks como Jest, Mocha, etc.
Integración trivial con pipelines de CI/CD (Travis, CircleCI, Github Actions, AWS Code Pipeline).
Workflow
1.
2.
3.
4.
5.
a.
Ejemplo de demo escrita en Pixi.js usando TypeScript y WebPack
https://github.com/jorovipe97/pixi-game
(El aspecto visual de la demo, es muy bajo, sin embargo el código sirve como un buen ejemplo).
Ejemplo
Por el corto tiempo disponible, no utilizaremos un bundler en las siguientes secciones del curso, pero se recomienda jugar un poco con ellos de forma independiente.
...Sin embargo
A non-exhaustive list of WebGL and WebGPU frameworks and libraries. https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc
Alternatives to Webpack (2019) https://www.reddit.com/r/Frontend/comments/ak95x3/what_are_the_best_alternatives_to_webpack_in_2019/
Does Phaser 3 use Pixi.js? https://www.html5gamedevs.com/topic/34261-does-phaser-3-use-pixijs/
Webpack home page https://webpack.js.org/
Referencias
1.
2.
3.
4.