WebGL StarterPack 📦

Punto de partida para el desarrollo de proyectos con WebGL, aprovechando el poder de Webpack y las ultimas tecnologías web.

Requisitos

• node.js

Instalación

Clonar el repositorio (o descargar el zip y descomprimirlo) y desde dentro de la carpeta creada ejecutar el siguiente comando desde el terminal:

npm install

Uso

El proyecto presenta los siguientes comandos (ejecutables estando dentro de la carpeta del proyecto):

• npm run serve corre un servidor local en http://localhost:8080/ y lo accede con el buscador por defecto, detectando cambios y refrescando su contenido automáticamente (i.e. live reloading).

• npm run build compila el proyecto y deja los archivos generados en la carpeta dist/, esta vez aplicando una serie de optimizaciones teniendo en cuenta que ésta es la version que accederá el usuario final (minificación de javascript, etc).

Durante el desarrollo se trabaja sobre la carpeta src/, donde se encuentra el archivo raíz index.ts, el html y assets que se usaran en el proyecto. Ese archivo raíz es el que usa Webpack como punto de partida para construir su grafo de dependencias y compilar el proyecto para su acceso via el servidor local. Webpack es un herramienta excelente y se recomienda la lectura de sus conceptos básicos.

Demo

A fin de dar un ejemplo de uso, el repositorio por defecto implementa el clásico Hello Triangle.

Para un ejemplo mas avanzado con manejo de texturas, modelos 3D y librerías externas referirse a este demo.

Algunos beneficios 📄

Live Reloading

Ante cualquier cambio en un archivo el buscador se refresca automáticamente. Chau Ctrl + F5.

Shaders / Texturas / Modelos 3D en su lugar

Assets en sus carpetas correspondientes sin cadenas de strings enormes, shaders en el html, etc.

Conversion a base 64

Opción para convertir imágenes a base 64 agregando -- --env.base64 al final de cualquiera de las opciones de ejecución (e.g. npm run serve -- --env.base64).

⚠️ La conversion es innecesaria si al proyecto se lo va a publicar en un servidor, cumple la función de esquivar las restricciones definidas en varios buscadores y facilita el compartir proyectos (con abrir el .html alcanza) pero puede generar archivos .js muy grandes (pensar que las imágenes que estarían en una carpeta assets pasan a formar parte del código en forma de texto).