Un motor de videojuego basado en WebGL


Br. Andrés Alvarez Sordo

Br. Carlos Leopoldo Zapata Conforto


Tutor Prof. Esmitt Ramírez

Agenda

  • Introducción
  • Problema de investigación
  • Marco teórico
  • EZ3.js
  • Pruebas y resultados
  • Conclusiones
  • Trabajos futuros

Introducción

  • Surgimiento de WebGL en los navegadores
  • Gráficos 3D acelerados por hardware
  • Videojuegos
  • Proceso de elaboración complejo y tedioso
  • Motores de videojuegos
    • Despliegue gráfico
    • Efectos físicos
    • Manejo
      • Recursos
      • Eventos
      • Redes

Problema de investigación

Planteamiento del problema


  • Motores de videojuegos
  • Comunidad
  • Licencia
    • Propietaria
    • Libre
  • Hardware requerido
  • Documentación
  • Alta curva de aprendizaje
  • Rango de plataformas
  • Género

Problema de investigación

Objetivos


  • Objetivo general
    • Desarrollar un motor de videojuego basado en WebGL
  • Objetivos específicos
    • Desarrollar una arquitectura debilmente acoplada
    • Emplear diversos modelos de iluminación local y sombreado
    • Implementar diferentes efectos de texturizado
    • Permitir la selección y descarte de geometría
    • Agrupar los objetos en un grafo de escena
    • Realizar una documentación completa pero sencilla
    • Realizar pruebas comparativas con otros motores que usan WebGL

Problema de investigación

Antecedentes

Problema de investigación

Alcance


  • Arquitectura
    • Módulos debilmente acoplados
    • Despliegue gráfico
    • Manejo
      • Recursos
      • Eventos
  • Documentación
    • Código fuente
    • Aplicación web
  • Legibilidad y escalabilidad

Marco teórico

Videojuego


  • Aplicación interactiva
  • Escenarios virtuales
  • Aplicación gráfica de despliegue en tiempo real
  • Despliegue
  • Rendimiento

Marco teórico

Motor de videojuego


  • Videojuegos pensandos unicamente en ellos
  • Doom
      Orientado a reutilización
      Seperación en módulos
  • Evolución
  • Diseñadores y compañias

Marco teórico

Motor de videojuego

Marco teórico

Motor de videojuego





Marco teórico

Motor de videojuego




Marco teórico

Motor de videojuego





Marco teórico

Motor de videojuego


Marco teórico

Motor de despliegue

Marco teórico

WebGL


  • Orígenes
    • OpenGL
    • OpenGL ES
  • Sombreadores
  • Estructura de una aplicación
     

EZ3.js

  • Fácil uso
  • Despliegue 3D
  • JavaScript
  • Manejo de versiones empleando Git
  • Repositorio en Github
  • Licencia MIT

EZ3.js

Estilo de programación y documentación


  • Orientado a objetos
  • Guía de estilo de JavaScript Airbnb
  • Atom
    • Editor de texto
    • Plug-ins
  • JSHint
    • Herramienta para detectar errores
    • atom-jshint
  • YUIDoc
    • Aplicación para generar documentación
    • Comentarios en el código fuente

EZ3.js

Arquitectura


  • Modulos
    • Clases
    • Directorios
  • Subsistemas principales
    • Matemáticas
  • Gestor de recursos
    • Grafo de escena
    • Carga
    • Pantallas
  • Interfaces de usuario
  • Motor de despliegue

EZ3.js

Compilación


  • Empaquetado, oscurecimiento y documentación
  • Grunt
    • Manejador de tareas
    • Plug-ins
  • Node.js
    • Entorno en tiempo de ejecución
    • Multiplataforma
    • Capa de servidor
    • npm
    • package.json

EZ3.js

Compilación


  • Tareas
    • Depuración o debug
    • Lanzamiento o release
  • Modulos principales

EZ3.js

Metodología

EZ3.js

Matemáticas


  • Vectores
  • Matrices
  • Ángulos de Euler
  • Cuaterniones
  • Plano
  • Pirámide de visualización
  • Caja
  • Esfera

EZ3.js

Grafo de escena


  • Grafo dirigido acíclico
  • Jerarquia
  • Transformaciones

EZ3.js

Grafo de escena



EZ3.js

Carga


  • Gestión de elementos a introducir al videojuego
  • Archivos
  • Imágenes
    • BMP
    • JPG
    • PNG
    • TGA
  • Entidades
    • OFF
    • OBJ
    • MDL

EZ3.js

Pantalla



EZ3.js

Interfaces de usuario


  • Gestión de dispositivos de entrada
  • Teclado
  • Ratón
    • Puntero y botones
    • Bloqueo de puntero
  • Pantalla táctil
    • Diez punteros

EZ3.js

Motor de despliegue


  • Gestión
    • Estado
    • Extensiones
    • Capacidades
  • Escena y cámara
    • Recorrido y actualización
    • Clasificación y descarte por pirámide de visualización
    • Ordenamiento por profundidad de mallas
    • Depliegue de mapas de sombra por fuente de luz
    • Depliegue de mallas

EZ3.js

HTML

<html>
  <head>
    <title>EZ3.js example :D</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="js/ez3.min.js"></script>
  </body>
</html>

EZ3.js

JavaScript

var canvas = document.getElementById('canvas');
var engine = new EZ3.Engine(canvas, {
  preload: preload,
  create: create,
  update: update,
  onKeyPress: onKeyPress
});
function preload() {}
function create(assets) {}
function update() {}
function onKeyPress(key) {}

EZ3.js

Función de carga

function preload() {
  // this.load.file('assets/files/input.json');

  this.load.image('assets/images/diffuse.png');
  this.load.image('assets/images/normal.jpg');
  this.load.file('assets/models/sponza.obj');
}

EZ3.js

Función de creación

function create(assets) {
  this.camera = new EZ3.PerspectiveCamera(70, 1);
  this.camera.position.set(3, 3, 2);
  this.camera.lookAt();

  var box = new EZ3.Mesh(new EZ3.BoxGeometry());
  box.material.fill = EZ3.Material.WIREFRAME;

  this.scene.add(box);
}

EZ3.js

Función de actualización

function update() {
  var keyboard = this.manager.input.keyboard;

  if (keyboard.getKey(EZ3.Keyboard.R).isDown())
    // Do something
}

EZ3.js

Entidad

EZ3.js

Entidad










box.position.set(-5, 2, 0);

EZ3.js

Entidad










box.rotation.z += 2 * Math.PI;

EZ3.js

Entidad










box.scale.set(4, 4, 4);

EZ3.js

Cámara


  • Punto de vista
  • Volumen de visualización
  • Tipos
    • Perspectiva
      • Líneas convergentes
      • No se conservan las proporciones
    • Ortográfica
      • Líneas paralelas
      • Se conservan las proporciones

EZ3.js

Cámara perspectiva










camera = new EZ3.PerspectiveCamera();

EZ3.js

Cámara ortográfica










camera = new EZ3.OrthographicCamera();

EZ3.js

Geometría

EZ3.js

Caja

EZ3.js

Plano









var plane = new EZ3.Mesh(new EZ3.PlaneGeometry());
this.scene.add(plane);

EZ3.js

Esfera









var sphere = new EZ3.Mesh(new EZ3.SphereGeometry());
this.scene.add(sphere);

EZ3.js

Toro









var torus = new EZ3.Mesh(new EZ3.TorusGeometry());
this.scene.add(torus);

EZ3.js

Elipsoide









var ellipsoid = new EZ3.Mesh(new EZ3.EllipsoidGeometry());
this.scene.add(ellipsoid);

EZ3.js

Elipsoide astroidal









var astroidal = new EZ3.Mesh(new EZ3.AstroidalGeometry());
this.scene.add(astroidal);

EZ3.js

Vértices


  • Posición
  • Normal
  • Coordenada de textura
  • Color

EZ3.js

Índices


  • Conexión
  • Líneas
  • Triángulos

EZ3.js

Material


  • Apariencia
  • Sombreadores
  • Tipos
    • Estandar
      • Atributos
      • Cadena de definiciones
      • Descarte por el compilador
    • Propio
      • Suministrar sombreadores
      • Conocimiento a priori de las variables

EZ3.js

Iluminación


  • Local
  • Superficies
  • Interpolación
  • Reflexión difusa
  • Reflexión especular

EZ3.js

Tipos de superficies


  • Difusas
  • Especulares
  • Brillosas

EZ3.js

Contribución emisiva










sphere.material.emissive.set(0.9, 0.1, 0.1);

EZ3.js

Contribución difusa










sphere.material.diffuse.set(0.1, 0.9, 0.1);

EZ3.js

Contribución especular










sphere.material.specular.set(0.9, 0.9, 0.9);

EZ3.js

Interpolación


  • Algoritmos
  • Hardware gráfico
  • Calidad aceptable

EZ3.js

Interpolación planar










sphere.material.shading = EZ3.MeshMaterial.FLAT;

EZ3.js

Interpolación de Phong










sphere.material.shading = EZ3.MeshMaterial.SMOOTH;

EZ3.js

Modelo de reflexión difuso

Lambert


  • Superficies lambertianas
  • Reflexión uniforme





sphere.material.diffuseReflec = EZ3.MeshMaterial.LAMBERT;

EZ3.js

Modelo de reflexión difuso

Oren-Nayar


  • Superficies asperas
  • Obscurecimiento
  • Facetas




sphere.material.diffuseReflec = EZ3.MeshMaterial.O_NAYAR;

EZ3.js

Modelo de reflexión especular

Phong


  • Vector de reflexión






sphere.material.specularReflec = EZ3.MeshMaterial.PHONG;

EZ3.js

Modelo de reflexión especular

Blinn-Phong


  • Vector del camino medio
  • Eficiencia





sphere.material.specularReflec = EZ3.MeshMaterial.B_PHONG;

EZ3.js

Modelo de reflexión especular

Cook-Torrance


  • Mayor realismo
  • Microfacetas





sphere.material.specularReflec = EZ3.MeshMaterial.TORRANCE;

EZ3.js

Transparencia










sphere.material.transparent = true;
sphere.material.opacity = 0.5;

EZ3.js

Descarte de caras










sphere.material.faceCulling = EZ3.Material.FRONT;

EZ3.js

Texturizado 2D










var image = assets.get('diffuse.jpg');
sphere.material.diffuseMap = new EZ3.Texture2D(image);

EZ3.js

Mapeado de normales










var image = assets.get('normal.png');
sphere.material.normalMap = new EZ3.Texture2D(image);

EZ3.js

Mapeado de ambiente


  • Representación intermedia del ambiente
  • Cubemap
  • Se asume un observador en el medio del cubo
  • Efecto de reflexión
  • Efecto de refracción

EZ3.js

Reflexión










sphere.material.reflective = true;

EZ3.js

Refracción










sphere.material.refractive = true;

EZ3.js

Fuentes de Luz


  • Puntual
  • Direccional
  • Reflector

EZ3.js

Luz puntual










var light = new EZ3.PointLight();
this.scene.add(light);

EZ3.js

Contribución difusa










light.diffuse.set(0.4, 0.4, 1.0);

EZ3.js

Contribución especular










light.specular.set(0.4, 1.0, 0.4);

EZ3.js

Mapeado de sombras










sphere.shadowCaster = true;
plane.shadowReceiver = true;

EZ3.js

Luz reflector










var light = new EZ3.SpotLight();
this.scene.add(light);

EZ3.js

Luz direccional










var light = new EZ3.DirectionalLight();
this.scene.add(light);

EZ3.js

Carga de entidades










var sponza = assets.get('sponza.obj');
this.scene.add(sponza);

EZ3.js

Control libre










var control = new EZ3.FreeControl(camera);

EZ3.js

Control objetivo










var control = new EZ3.TargetControl(camera);

Pruebas y resultados

Características del entorno de pruebas


  • Procesador Intel Core i7-4700MQ 3.40 GHz
  • 8 GB de memoria RAM DDR3
  • Disco duro de 500 GB
  • Tarjeta gráfica NVIDIA GeForce GT 740m 2GB DDR5
  • Sistema operativo Windows 10


Pruebas y resultados

Descripción de las pruebas


  • Comparación con Three.js y Babylon.js
  • Escena sencilla
    • 13.180 triángulos
    • 7 mallas
  • Escena intermedia
    • 275.222 triángulos
    • 399 mallas
  • Escena compleja
    • 88.239 triángulos
    • 1.093 mallas

Pruebas y resultados

Escena sencilla


Pruebas y resultados

Escena intermedia


Pruebas y resultados

Escena compleja


Pruebas y resultados

Estudio del rendimiento en Google Chrome


Pruebas y resultados

Estudio del rendimiento en Mozilla Firefox


Pruebas y resultados

Estudio del rendimiento en Microsoft Edge


Pruebas y resultados

Estudio de la memoria en Google Chrome


Pruebas y resultados

Estudio de la memoria en Mozilla Firefox


Pruebas y resultados

Estudio de la memoria en Microsoft Edge


Pruebas y resultados

Estudio de la cantidad de líneas de código


Conclusiones

  • Motor de videojuego
  • Arquitectura debilmente acoplada
  • Despliegue gráfico, manejo de eventos y recursos
  • Licencia de código abierto
  • Favorece la retroalimentación
  • Documentación completa y sencilla
  • Pruebas comparativas con Babylon.js y Three.js
  • Alternativa emergente

Trabajos futuros

  • Módulos adicionales
  • Soporte a más formatos de imágenes y mallas
  • Varios efectos gráficos no contemplados
  • Diversos ejemplos ordenados por su complejidad
  • Generador de plantillas de proyecto





Preguntas

/

ccg.ciens.ucv.ve
Andres Alvarez
Carlos Zapata