Foros del Web » Creando para Internet » HTML »

Identificar rendimiento de Canvas con WebGL

Estas en el tema de Identificar rendimiento de Canvas con WebGL en el foro de HTML en Foros del Web. Hola, Estoy teniendo un pequeño problema de rendimiento. Increíblemente en mi PC, el sitio web que estoy enlazando a continuación me está dando muchos problemas ...
  #1 (permalink)  
Antiguo 28/01/2016, 14:28
 
Fecha de Ingreso: junio-2012
Mensajes: 8
Antigüedad: 12 años, 5 meses
Puntos: 0
Pregunta Identificar rendimiento de Canvas con WebGL

Hola,

Estoy teniendo un pequeño problema de rendimiento. Increíblemente en mi PC, el sitio web que estoy enlazando a continuación me está dando muchos problemas de rendimiento. Y no tanto de FPS ya que he visto que Chrome, Firefox, IE tienen buenos FPS pero al parecer es algo más que está haciendo que la animación se vea cortada / cuadro por cuadro.

Me interesaría conocer alguna manera de realizar lo siguiente:
  1. Identificar el rendimiento real de la animación.
  2. En el caso de que el rendimiento no dé por lo menos 30 FPS como mínimo, eliminar el canvas con la animación liberando la memoria y colocando el fallback (ya está hecho) el cual es únicamente un fondo de nubes en la parte inferior de la pantalla.

Esta es la página: http://sonetoresidencial.com/landingpages/

Me interesaría saber por qué en Windows específicamente la animación se ve horrible, pero en Mac y hasta en iPhone, se ve increíble.

Estoy utilizando Three.js para esta animación.

Solo me interesa mostrar esta animación si el navegador en cuestión soporta webgl (ya lo identifica mi JS con Detector.js) pero también me interesa que lo vean bien y que no alente la PC por intentar mostrar esta animación, por lo que me gustaría ver la manera de identificar el rendimiento de la animación y quitarla o simplemente no cargarla si el rendimiento no permitirá por lo menos 30 fps.

Me podrían apoyar con esto?

Gracias!
  #2 (permalink)  
Antiguo 29/01/2016, 01:06
Avatar de carlillos  
Fecha de Ingreso: febrero-2007
Ubicación: México
Mensajes: 245
Antigüedad: 17 años, 9 meses
Puntos: 21
Respuesta: Identificar rendimiento de Canvas con WebGL

Tienes la variable "frameTime" que te está dando el valor de fps, si es menor a 30 pues cancelas el rendering.
  #3 (permalink)  
Antiguo 29/01/2016, 07:18
 
Fecha de Ingreso: junio-2012
Mensajes: 8
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Identificar rendimiento de Canvas con WebGL

Edit: Ya lo resolví, muchas gracias. Estaba midiendo los FPS fuera de three.js, midiéndolo dentro de three.js me permite saber lo que estaba buscando. Ahora la animación se cancela al renderizar 2 frames, si estos están debajo de 24 FPS en cualquier momento, la animación será cancelada. Pero aún mostrando las nubes generadas en WEBGL (para dar un sentimiento más realista), y ya si no funciona webgl en el navegador cargará el fallback que es una imagen en png de fondo en la parte inferior de la pantalla. Listo.

Última edición por Yamiino; 29/01/2016 a las 11:27 Razón: Resuelto.

Etiquetas: html5
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:00.