Div Games en Html5 y Canvas

[AmakaSt]

Hola,

Hace unos días que estoy mirando de pasar Div GO a WebGL con el engine PixiJS y aquí dejo la primera comparativa de Div GO corriendo con PixiJS (WebGL) y con el original (Canvas2d).

Original (Canvas2d): https://www.divgo.net/proyectos/benchmark/normal/
PixiJS (WebGL): https://www.divgo.net/proyectos/benchmark/webgl/

El ejemplo va generando procesos hasta que caen los fps, aquí os pongo el código del ejemplo: https://www.divgo.net/c-e6420ee6

Y mis resultados utilizando Firefox:
Original (Canvas2d): 3845 procesos
PixiJS (WebGL): 6897 procesos

Un saludo.

[panreyes]

Interesante test :)

Me he permitido portar dicho código a PixTudio, BennuGD y Fénix, para ver las diferencias de rendimiento entre los diferentes DivLikes.

Mis resultados: (CPU i7-4790 @ 3.60ghz, GPU Nvidia GTX 960 4GB)
DivGO


PixTudio


BennuGD


Fénix


Este es el proyecto por si queréis importarlo al PixTudio Project Manager. Para poder ejecutar el proyecto en BennuGD y Fénix hace falta la última actualización.
https://www.dropbox.com/s/pga8iei1byxhbw9/benchmark-divgo-1.0.pixproject?dl=0

[SplinterGU]

por que no incluyes los fuentes que faltan? para los que no tenemos el "PixTudio Project Manager".

por otro lado, la version fenix, esta en 16bits, cierto? seria bueno probar todo en la misma cantidad de colores.

[SplinterGU]

panreyes, me podrias pasar unos binarios linux de pixtudio? por privado si lo preferis... gracias!

[AmakaSt]

Genial panreyes! Mola ver los distintos resultados en capturas, veo que DivGO te da unos buenos números, no se puede comparar con PixTudio, pero no estan nada mal. :)

Un saludo.

[panreyes]

SplinterGU, los paquetes de PixTudio Project Manager son archivos comprimidos .7z renombrados a .pixproject. Lo digo porque ahí tienes el prg y los gráficos.

Y efectivamente BennuGD está en 32bits, luego lo pruebo en 16 para hacer la comparación justa con Fénix.

Aquí tienes los binarios que tengo yo de PixTudio para Linux, pero no me preguntes hace cuánto fueron compilados o qué dependencias tienen porque no lo recuerdo ahora mismo.
https://www.dropbox.com/s/2s9isadpeb3z0am/pixtudio-linux32.zip?dl=0

AmakaSt, sí PixTudio da unos grandes resultados gracias a la ejecución nativa. De todas formas, DivGO tampoco se quedaría corto ejecutando la mayoría de juegos que podríamos hacer por aquí :) (y con la facilidad de ser ejecutados desde el navegador!).

Te querría preguntar también: si implementases este mismo test directamente en JavaScript, ¿supondría mucha diferencia de rendimiento?

[SplinterGU]

gracias!

[SplinterGU]

 aca van mis resultados...

caramba, es increible la diferencia que hace una buena placa de video... (aunque tu cpu es mejor tambien)

i7-3630QM

BennuGD



PixTudio (Linux)



BennuGD 2

[SplinterGU]

mmm... no entiendo por que no aparecen en pixtudio ni en bennugd el ultimo texto... sin embargo deja de crear procesos y demas...

[panreyes]

mmm... no entiendo por que no aparecen en pixtudio ni en bennugd el ultimo texto... sin embargo deja de crear procesos y demas...

El texto tarda 20 segundos en salir. Creo que eso fue un cambio mío que no hacía falta xD

De todas formas, aquí mi resultado con BennuGD 16bits

[SplinterGU]

gracias...

[oskarg]

hola amaka,
alguna novedad proxima?¿?cercana.....

[AmakaSt]

Hola oskarg,

Cercana no, todavía me queda bastante para tener la versión WebGL de DivGO. Se tiene que tocar/cambiar casi todo, por ahora funcionan algunas cosas, como el dibujado de procesos (sin regiones, ni colisiones, ni puntos de control), los textos (write, write_int) y las primitivas gráficas. :)

Hay mucho trabajo que hacer aún y muy poco tiempo libre para dedicarle.

Un saludo.

[AmakaSt]

Te querría preguntar también: si implementases este mismo test directamente en JavaScript, ¿supondría mucha diferencia de rendimiento?

Hola panreyes,

Me había saltado esta parte de la conversación, perdona. Aquí te paso un enlace: http://pixijs.io/examples/#/basics/basic.js

Cópiale este código que sería parecido al del benchmark:

Code Select Expand


var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var process = [];
for (var i = 0; i < 16000; i++){
    var grafico = (Math.random() * (9 - 1) + 1) | 0;
         
    process[i] = PIXI.Sprite.fromImage('https://www.divgo.net/graficos/00'+ grafico +'.png')
    process[i].anchor.set(0.5);
    process[i].x = Math.floor(Math.random() * (820 + 20 + 1) - 20);
    process[i].y = Math.floor(Math.random() * (620 + 20 + 1) - 20);
    process[i].alpha = (Math.random() * (100 - 50 + 1) + 50) * 0.01;
    process[i].rotation += Math.floor(Math.random() * 360);
 
    var size = (Math.random() * (120 - 70 + 1) + 70) * 0.01;
    process[i].scale.set(size, size);
 
    app.stage.addChild(process[i]);
}

var basicText = new PIXI.Text('Probando Texto');
basicText.anchor.set(0.5);
basicText.x = 400;
basicText.y = 30;
app.stage.addChild(basicText);

var fpsText = new PIXI.Text(60);
fpsText.anchor.set(0.5);
fpsText.x = 760;
fpsText.y = 30;
app.stage.addChild(fpsText);

app.ticker.add(function(delta) {
    fpsText.text = app.ticker.FPS | 0;
 
    for (var i = 0; i < 16000; i++){
        process[i].rotation += 0.1 * delta;
        process[i].y += 5; if (process[i].y > 620) process[i].y = -20;
    }
});


Como veras con PixiJS directamente parece que funciona más rápido, pero en ese código no se ordena en cada frame por su posición z, que eso lo hago con DivGO, recorrer un bucle de miles de sprites y cambiar el orden de dibujado, eso ralentiza bastante. Y también que a cada frame recorre las instrucciones de los procesos hasta el siguiente frame, eso suma más ralentización.  :P

Un saludo.

[AmakaSt]

Nueva versión 1.16.0 de Div GO ya disponible online, las novedades:


funciones:
  - atob(), base64_encode(), base64_decode(), is_int();

variables locales:
  - blur, grayscale, sepia, saturate, invert, tone, brightness;

bugs y mejoras:
  - [FIX] corrección en el compilador para descargar proyectos empaquetados
  - [CHANGE] cambios en el funcionamiento fps para mejorar la optimización del bucle principal
  - [CHANGE] renombrado de las funciones isfinite() por is_finite() y isnan() por is_nan()


Ejemplo de las nuevas variables locales: https://www.divgo.net/c-d0f6267a
Ejemplo de uso de las funciones base64_encode() y base64_decode(): https://www.divgo.net/c-d0718aa2

Un saludo.