Quake 3 Arena en WebGL.

Quake 3 es un juego de finales de los 90 en primera persona En este caso convertieron todo un escenario para ser jugado utilizando solo WebGl

Composición del espacio Quake 3

El escenario esta originalmente guardado en el formato .bsp que guarda todos los atributos posibles en estructuras tipo lumps. En el caso de Quake 3 los guardó así:

Cada estructura tiene una cantidad especifica de números, arreglos o índices que referencian a otro lump específico. Para entender más de cada lump y sus atributos se puede averiguar en [2]

Composición de la aplicación

La arquitectura general de la aplicación se muestra a continuación:

Cada script tiene una función específica:
  1. main.js: Iniciar la aplicación, actualizar cada frame y por ende la matriz de ModelView.
  2. Q3bsp.js: Carga los shaders y los buffers, permitiendo dibujar cada escena con primitivas de WebGL.
  3. Worker.js: Realiza el parse del archivo .bsp para transformarlo en toda la información que necesita renderizar WebGL
  4. Q3Shader.js: Carga shaders externos y los crea en lenguaje GLSL.
  5. Q3glshader.js Carga el shader ya en GLSL con los datos decodificados.
  6. Q3Movement.js: implementa la interacción para el usuario (caminar, saltar, reaparecer)

BSP Worker (Parser)

El worker.js parsea de acuerdo al arreglo de lectura de bytes, el tamaño de cada lump y las posiciones del arreglo. Cada lump es una posicion del arreglo guardandolo ya como un atributo especifico.


Renderizado de cada escena

Como se ha mencionado antes, cada escena es cargada, leida y dibujada por Q3bsp.js

Interacción con el usuario

EL movimiento del usuario es a partir de manejo de vectores y fuerza (aceleración y gravedad). Por ejemplo para moverse, chequea si esta en el piso o saltando y lo ubica en dicho estado. Si está en el piso, acelera pero aplicando fricción. Acto seguido se mueve en la dirección del vector velocidad así este en el aire (saltando) o no.

Propuesta de valor del ejemplo escogido

Este caso fue escogido para mostrar todo lo que se puede realizar utilizando únicamente WebGL, sin necesidad de otra librería adicional como THREE.js o gl-utils.js. Fue posible recrear el espacio de un juego de los finales de los años 90. Para su mejor comprensión, los scripts utilizados se encuentran comentados mas detalladamente con la nota "CVI" en el siguiente link.
Bibliografia:
  1. Quake 3 WebGL DemoL
  2. Unofficial Quake 3 Map Specs

Comentarios

Entradas populares