Mostrando entradas con la etiqueta 3D. Mostrar todas las entradas
Mostrando entradas con la etiqueta 3D. Mostrar todas las entradas

viernes, 13 de abril de 2018

Motor 3D para GameBoy Advance: Consiguiendo lo imposible

Versión 2:
Descarga ROM y código fuente aquí.
Esta versión ya se mueve fluida a 60fps y permite girar la cámara.
Cambios:
Aparte de las optimizaciones de la versión 1, he añadido mas optimizaciones, y he implementado la rotación de la camara.
-Todo el código es copiado a la RAM y se ejecuta desde ahí. Se usa código ARM en vez de Thumb.
-Para ganar mas velocidad utilizo el modo5, que baja un poco la resolución y permite tener dos framebuffer en la memoria de video evitando tener que usar la RAM para luego copiarla a la VRAM en cada frame. También uso las técnicas de escalado y desplazamiento de la GBA para crear un par de frames intermedios mientras se renderiza el siguiente frame final.

Para la rotación utilizo aproximaciones rápidas de lo que serían los auténticos cálculos de la rotación. Ademas, cada vez que se gira, desplazo la posición de referencia para evitar aun mas cálculos al transformar las coordenadas durante el dibujado.

Para evitar aun mas perdidas de velocidad, he replicado la función crítica Render para cada angulo posible, de forma que las transformaciones de coordenadas están hard-coodeadas dentro de las funciónes Render-n, evitando llamadas a funciones y comprobaciones de angulo cada vez que se procesa un pixel.

Versión 1:
Descarga ROM y código fuente aquí.
La GameBoy Advance fue una de las primeras videoconsolas portatiles que intentó en algunos de sus juegos simular el efecto 3D. Juegos como Driv3r, Asterix y Obelix XXL, o Craxy Taxi. No obstante en la mayoría de dichos juegos el efecto 3D era muy, muy básico. Es por eso que yo, como friki ingeniero informático que soy me puse a investigar de que manera se podría conseguir un motor 3D decente. Tras un día investigando y picando código...¡Este fue el resultado!
Como habréis comprobado, la calidad del efecto 3D casi no se puede comparar con la de ningún otro juego de GBA. El motor es de tipo voxel space y el video fue acelerado algo así como x200 ya que la demo en su versión original (la del vídeo) tardaba 11 segundos en generar cada frame. Esto es debido a la gran cantidad de multiplicaciones y divisiones que debía hacer el motor en cada frame. Para los que no sepáis muy bien como funciona un motor voxel space os lo explico de manera muy sencilla:

Tenemos una imagen de color y otra imagen de profundidad. Dibujamos el entorno desde el frente hacia atras aplicando perspectiva (podeis ver el triangulito con el campo de visión en el GIF), para ello trazamos en la pantalla lineas verticales del color proporcional al pixel horizontal de la pantalla y el pixel horizontal de la linea de campo de visión actual. Esta linea vertical empezará desde la ultima altura dibujada hasta un nuevo valor calculado a partir de la altura en el mapa de profundidad y la distancia con el punto de vista (Si el valor obtenido es menor, no se dibuja la linea).

Optimizando el código:
Pues seguramente la baja potencia del procesador de la GameBoy fue lo que hizo que no apareciera ningún juego usando este tipo de motor, las multiplicaciones y divisiones son muy lentas en su procesador. Estas operaciones son vitales tanto para calcular las posiciones horizontales del campo de vision y pantalla como las de las alturas. ¿Que solucion tenemos? ¡Crear una estructura de datos con estos valores precalculados! En el archivo comprimido podeis encontrar generarmatriz.c que puede ser compilado para PC y usando los datos de matrizalturas.h (compartido con el proyecto devkit) generar una estructura de datos con las alturas precalculadas matrizalturas.raw y posiciones horizontales matrizx.raw las cuales se añaden al ROM. También, para realizar otras divisiones y multiplicaciones con multiplos de 2, utilizo a ser posible las operaciones de desplazamiento << y >> las cuales son mas rápidas.
Ademas, calcularemos el campo de visión menos frecuentemente en posiciones alejadas y limitamos la distancia de dibujado a 512 pixeles.
Estos cambios, junto con otras cuantas optimizaciones de código, permiten tras un gran esfuerzo y sudor conseguir unos gloriosos...
¡5fps!
Lo cual supone aproximadamente un speedup del 3000% y seguiría siendo insuficiente para cualquier juego en condiciones, pero al menos se mueve decentemente.
Se podría decir que la optimización es del 95% ya que los limites técnicos de la consola están ahí. Estas son algunas otras optimizaciones menores posibles que ni me he molestado en hacer:
  • Alinear matrizx.raw a 256 bytes cada linea para asi a la hora de leer sus datos podamos cambiar SCREEN_WIDTH*(step-minstep) por (step-minstep)<<8 aunque esto nos hará desperdiciar 16 bytes de memoria en la estructura de datos en la ROM por cada linea.
  • Dibujar las lineas verticales una por una, de forma que si una alcanza el valor maximo se haga un break y se pase a la siguiente sin seguir avanzando en profundidad. Solo habría aceleración en los casos que el mapa alcanzase la parte de arriba de la pantalla y la aceleración sería irregular. Habría que almacenar los valores de step en una estructura de datos.
  • Si se os ocurriese alguna mas, ¡comentad!
Curiosidad:
Uso de memoria en la demo:

ElementoEspacio (KB)PorcentajeNotas
Código9.790.18%El corasón de la demo. La parte que controla todo el funcionamiento.
Imagen Background39.10.72%La imagen del cielo tan bonica para la mitad superior de la pantalla (240x80) a 16 bit bgr555
Mapa colores204838.07%1024x1024 a 16 bit bgr555
Mapa profundidad102419.03%1024x1024 a 8 bit (valores 0-255)
Matriz x2384.42%Valores para cada pixel horizontal (1-240) en cada profundidad (8-512) de la posición horizontal del campo de visión (valores de 16 bit)
Matriz Alturas202137.57%Valores de altura en la pantalla de 8 bit para cada altura del mapa (0-255) en cada profundidad (8-512) para distintas alturas de camara posibles (16)
Total5379.89100%

miércoles, 4 de octubre de 2017

Presentacion de diapositivas (PowerPoint) en 3D desde el navegador

Como de costumbre, vuelvo a sorprenderos con una nueva app. En este caso se trata de una aplicación web (funciona a través del navegador) en la que podréis mostrar vuestras presentaciones de diapositivas PowerPoint en un entorno 3D totalmente personalizable. Ademas, de diapositivas PowerPoint, también se pueden añadir otros elementos como fotos, vídeos, aplicaciones, paginas web,...



De momento no voy a hacer pública la app por ausencia total de interés por parte del publico. Podéis contarme vuestra opinión en los comentarios, y como sería vuestro entorno 3D favorito.

viernes, 1 de septiembre de 2017

Un videojuego 3D con tecnologia WebGL: Flappy Adventure 2

Descarga aplicación android aquí.
Windows, IOS, Mac y Linux acceded a versión online aquí.




Solo una semana es lo que he tardado en hacer el juego que tantos deseabais poder jugar. Flappy adventure 2 no solo es el primer videojuego 3D 100% hellinero, sino que es uno de los muy pocos implementados en tecnologia web (La mayoria de los juegos Indie 3D se crean en Unity) Esto significa que podeis jugarlo practicamente en cualquier sitio: PC, Mac, Iphone, Ipad, Android, Linux,...


Ademas dentro de la aplicación web tambien podeis jugar a la ya conocida Aventura de Flappy en su versión 2D la cual he mejorado en su versión 1.2, o jugar a la ya anticuada version GB o al Retro Stack Tower 2017 mediante su emulador de gameboy incluido.

Problemas relativos al lag:
-La velocidad de avance se ve reducida impidiendo pasar el primer nivel. Solucion: multiplicar velocidad x delta en control.js pasando delta como parametro a la funcion update.
-Al caer se puede atravesar el suelo si el lag es muy grande. Solución: RaycasterDown= Math.max(la distancia que flappy baja en el siguiente frame , 10).

Mejoras para touchscreen:

-La sensibilidad de los controles depende de la resolucion de la pantalla. Solución: usar ScreenHeight como referencia.
-Camara podría estar quieta al desplazar el dedo a una posicion (2º cuadrado). Solucion: actualizar posicion touchstart a la actual en cada update. (En Galaxy S8 funciona bien, vaya misterio)

Otros:

-Mirar si se puede arreglar spawn inicial.

Si experimentais problemas y teneis especial interes en una version 1.0.1 hacedmelo saber.


Actualización 1 aniversario de Flappy Adventure 2
Para celebrar el 1 aniversario de Flappy Adventure 2, aparte de solucionar la mayoría de los problemas apuntados anteriormente, he implementado la versión VR (Virtual Reality) del juego. Esta versión era mi principal intención cuando decidí hacer FA2, y que lamentablemente tuve que descartar por varios motivos:

  • No tenia gafas VR. Hace un año eran caras, la mayoría eran de cartón, y habría supuesto que mi juego no llegase a ningún publico.
  • Era novato usando WebGL y Three.js y solo me faltaba complicarme aun más la vida con FA2 (El cual quería tener hecho en menos de una semana)
  • No tenía de idea de como poder controlar a Flappy sin poder tocar la pantalla tactil.
Tras abrir el código por primera vez desde 1 año del lanzamiento, me quedé sorprendido de que no tuviera mas fallos. Era la primera vez que usaba Three.js y que desarrollaba un juego en 3D (Ademas con prisas). Arreglé los fallos que pude, e implementé la versión VR sin preocuparme demasiado en dejar el código bonito.

¿Como solucioné el problema del controlador?
Para controlar a Flappy finalmente se me ocurrió poder utilizar un dispositivo móvil auxiliar como controlador y que mediante Websockets se comunicaran con un servidor Java (también creado por mi).

Dudo mucho que nadie quiera probar Flappy Adventure 2 VR así que os adjunto el vídeo y vais sobraos.

domingo, 2 de julio de 2017

Frikada del verano: Tower Stack en Gameboy Color??


DESCARGA ROM -> AQUÍ

Terminan los examenes, comienza el verano y como viene siendo tradición me apetece hacer un nuevo juego retro para gameboy.
Esta vez, uno de los juegos de moda (seguido de flappy bird, 2048...) se llama Stack Tower, en el que vas haciendo caer de forma alineada plataformas en 3D que se van haciendo cada vez mas pequeñas.

¿¡Pero como voy a hacer un juego 3D en una consola cuyas capacidades graficas eran... Bueno...
Y es que la Gameboy y la Gameboy color son consolas con graficos basados en tiles con un único background sin escalado ni rotación, y que de forma resumida estan limitadas a un 2D bastante basico.
La cuestión es que como soy friki ingeniero informatico me pongo a diseñar un "motor grafico" para Gameboy que permita crear tiles de forma dinamica via software con los bloques 3D renderizados mediante unas rutinas software. Algo nunca visto. Estoy loco, sí.
Y sí... ¡funcionó! no me digais que no me ha quedado bonico.

No lo hice para Gameboy Original por dos motivos:
  • Aunque funciona, la potencia de la CPU en la Gameboy original se queda escasa.
  • En blanco y negro el juego queda bastante feo.
Como os habreis fijado, el contador de puntos tiene antialiasing, lo cual tampoco se habia visto hasta ahora en Gameboy.
Y este es el resultado :') ayy que lloro... Ahora solo me falta ponerle una imagen de portada bien fea.


Los bloques se imprimen por dos lados:

  • El bloque en movimiento, se dibuja en los sprites. Como sabreis (o no) hay un límite de 10 sprites por scanline, son solo 40 y pueden tener un tamaño de 8x8px o 8x16px. Para dibujar los bloques lo mas grandes posibles, alineo todos los sprites en modo 8x16 px en un único "objeto" de 10x4 sprites. ¡Apuro los límites tecnicos al maximo!
  • Los bloques ya colocados se dibujan en el background. Mi "motor grafico" se encarga de dibujar unos encima de otros y de actualizar el tilemap de forma dinamica.