Autor Tema: Div Games en Html5 y Canvas  (Leído 77253 veces)

AmakaSt

  • Sr. Member
  • ****
  • Mensajes: 337
  • Karma: 17
    • Amaka Soft
Re:Div Games en Html5 y Canvas
« Respuesta #450 en: Diciembre 16, 2017, 07:37:48 pm »
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

  • Administrator
  • *****
  • Mensajes: 2124
  • Karma: 71
    • panreyes.com
Re:Div Games en Html5 y Canvas
« Respuesta #451 en: Diciembre 17, 2017, 02:09:10 am »
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
« última modificación: Diciembre 17, 2017, 02:11:31 am por panreyes »

SplinterGU

  • Hero Member
  • *****
  • Mensajes: 12722
  • Karma: 374
Re:Div Games en Html5 y Canvas
« Respuesta #452 en: Diciembre 17, 2017, 03:05:31 am »
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.
Download Lastest BennuGD Release: http://www.bennugd.org/node/2

SplinterGU

  • Hero Member
  • *****
  • Mensajes: 12722
  • Karma: 374
Re:Div Games en Html5 y Canvas
« Respuesta #453 en: Diciembre 17, 2017, 03:37:09 am »
panreyes, me podrias pasar unos binarios linux de pixtudio? por privado si lo preferis... gracias!
Download Lastest BennuGD Release: http://www.bennugd.org/node/2

AmakaSt

  • Sr. Member
  • ****
  • Mensajes: 337
  • Karma: 17
    • Amaka Soft
Re:Div Games en Html5 y Canvas
« Respuesta #454 en: Diciembre 17, 2017, 10:05:26 am »
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

  • Administrator
  • *****
  • Mensajes: 2124
  • Karma: 71
    • panreyes.com
Re:Div Games en Html5 y Canvas
« Respuesta #455 en: Diciembre 17, 2017, 06:58:55 pm »
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

  • Hero Member
  • *****
  • Mensajes: 12722
  • Karma: 374
Re:Div Games en Html5 y Canvas
« Respuesta #456 en: Diciembre 17, 2017, 10:54:32 pm »
gracias!
Download Lastest BennuGD Release: http://www.bennugd.org/node/2

SplinterGU

  • Hero Member
  • *****
  • Mensajes: 12722
  • Karma: 374
Re:Div Games en Html5 y Canvas
« Respuesta #457 en: Diciembre 17, 2017, 11:13:12 pm »
 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

Download Lastest BennuGD Release: http://www.bennugd.org/node/2

SplinterGU

  • Hero Member
  • *****
  • Mensajes: 12722
  • Karma: 374
Re:Div Games en Html5 y Canvas
« Respuesta #458 en: Diciembre 17, 2017, 11:17:13 pm »
mmm... no entiendo por que no aparecen en pixtudio ni en bennugd el ultimo texto... sin embargo deja de crear procesos y demas...
Download Lastest BennuGD Release: http://www.bennugd.org/node/2

panreyes

  • Administrator
  • *****
  • Mensajes: 2124
  • Karma: 71
    • panreyes.com
Re:Div Games en Html5 y Canvas
« Respuesta #459 en: Diciembre 18, 2017, 12:00:35 am »
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

  • Hero Member
  • *****
  • Mensajes: 12722
  • Karma: 374
Re:Div Games en Html5 y Canvas
« Respuesta #460 en: Diciembre 18, 2017, 12:38:57 am »
gracias...
Download Lastest BennuGD Release: http://www.bennugd.org/node/2

oskarg

  • Newbie
  • *
  • Mensajes: 46
  • Karma: 1
Re:Div Games en Html5 y Canvas
« Respuesta #461 en: Enero 26, 2018, 02:38:15 pm »
hola amaka,
alguna novedad proxima?¿?cercana.....

AmakaSt

  • Sr. Member
  • ****
  • Mensajes: 337
  • Karma: 17
    • Amaka Soft
Re:Div Games en Html5 y Canvas
« Respuesta #462 en: Enero 28, 2018, 07:05:57 pm »
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

  • Sr. Member
  • ****
  • Mensajes: 337
  • Karma: 17
    • Amaka Soft
Re:Div Games en Html5 y Canvas
« Respuesta #463 en: Enero 28, 2018, 08:06:01 pm »
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:
Código: [Seleccionar]
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.