Comparar rendimiento efecto ruido CSS vs canvas

[midudev]

Habría que comparar con datos qué animación tiene mejor rendimiento:

• La solución actual con canvas
• La solución con CSS arreglada para Safari: https://github.com/midudev/la-velada-web-oficial/pull/235

[SantiagoCaprile]

Utilicé la herramienta de Lighthouse de Google Chrome (desconozco si hay especialmente para Safari). Comparé el rendimiento de ambas versiones propuestas para solucionar el parpadeo. En todos las pruebas obtuve métricas de performance mejores para la versión que utiliza canvas de Midu. Dejo las capturas para que puedan evaluarlo mejor.

CSS DESKTOP

CANVAS DESKTOP

CSS MOBILE

CANVAS MOBILE

[HeJimenez00]

Test de rendimiento de 5 minutos (temperatura)

Utilice una app y al parecer es mejor usar css, agrego imagenes. Espero esto pueda ayudar

Usando CSS Nativo: Se mantiene en un rango de 46 a 49 grados (un aprox. no pasa a más)

Usando Canvas: No pasa de los 52 a 58 grados (un aprox.)

Conclusión

Seria bueno comentarlo con la comunidad 🤓

[dresandev]

Comparación de rendimiento: efecto ruido en Canvas vs. CSS

Se tienen en cuenta 3 aspectos:

1. Navegación tradicional (Scroll hacia abajo o hacia arriba)
2. Zoom in/out
3. Redimensionamiento del viewport

A tener en cuenta

• Se comenta el componente LightsBackground ya que interfiere con el test por sus propios problemas de rendimiento sin aceleración por hardware.

• La imagen del ruido es solo para poder hacer el test, es mejorable.

Canvas

Pros:

1. Buen rendimiento con o sin aceleración por hardware en navegación tradicional: El buen rendimiento se observa durante la navegación tradicional (al hacer scroll hacia abajo o hacia arriba).

Contras:

1. Mal rendimiento al hacer zoom in/out: Al aumentar o disminuir el zoom, el rendimiento es bastante deficiente en Brave; en Firefox se comporta un poco mejor, pero el problema persiste.
2. Retraso al redimensionar la ventana del navegador: Al redimensionarla de manera relativamente brusca, hay un retraso en la posición del ruido, lo que provoca que, por un momento, el ruido no cubra el 100% de la ventana.

CSS

Pros:

1. Soluciona los inconvenientes de rendimiento del ruido en Canvas

Contras:

1. Más trabajo para lograr un diseño similar al actual: Hacer que sea lo más parecido al diseño actual resulta engorroso.

CSS con mix-blend-mode

Pros:

1. Permite lograr un diseño más fiel al actual

Contras:

1. Disminuye un poco el rendimiento sin aceleración por hardware durante la navegación tradicional

CSS sin mix-blend-mode

Pros:

1. Soluciona los inconvenientes del CSS con mix-blend-mode

Contras:

1. Más trabajo para lograr un diseño similar al actual: Hacer que sea lo más parecido al diseño actual resulta engorroso.

Vídeos del rendimiento

• Solución actual usando Ruido Canvas (Con aceleración por hardware)

https://github.com/midudev/la-velada-web-oficial/assets/79766563/725419c6-e13c-45ce-ae9c-5396ef760d0f

• Solución actual usando Ruido Canvas (Sin aceleración por hardware)

https://github.com/midudev/la-velada-web-oficial/assets/79766563/8cc90f93-eca9-4338-8ffb-ab24fcee9176

• Solución CSS usando mix-blend-mode (Con aceleración por hardware)

https://github.com/midudev/la-velada-web-oficial/assets/79766563/63869131-1a77-4aac-86e3-002cc207203a

• Solución CSS usando mix-blend-mode (Sin aceleración por hardware)

https://github.com/midudev/la-velada-web-oficial/assets/79766563/4d295cdd-a963-4ee2-84b5-82478dbebf2f

• Solución CSS sin mix-blend-mode (Con aceleración por hardware)

https://github.com/midudev/la-velada-web-oficial/assets/79766563/19905b31-1444-402e-b4b3-d6023127f52f

• Solución CSS sin mix-blend-mode (Sin aceleración por hardware)

https://github.com/midudev/la-velada-web-oficial/assets/79766563/11f2adf3-262c-4988-8f1b-237c201bb384

[Thakisis]

Css no es mas rapido que canvas, solo hay 2 problemas.

Primero canvas2d o bitmaprenderer son rapidos pintando imagenes o shapes pero para crear ruido hay que modificar pixeles individuales y eso implica recorrer objetos de tipo ImageData en la cpu para ir cambiando el color de cada pixel. Ademas en cada ciclo de render hay que ejecutar las ordenes de pintado y los calculos en CPU.

Por esto es lento pintar ruido en el canvas usando los dos contexto mencionados. En webgl y el mas moderno WebGPU las ordenes se cargan en la fase inicial, estos contextos tienen estado y no es necesario repetir los procesos en CPU solo hay que modificar los parametros de los buffer (geometria), los parametros de los shader (uniforms) y ordenar el render. Cada pixel se va a calcular directamente en la GPU por uno de los simd (que son infinitamente mas rapidos y sobre todo en calculos matematicos).

Usar threejs no esta mal pero no hay que olvidar que pesa mas de 200kb aunque es threeshakeable y generalmente se le hace lazy load . Yo personalmente prefiero r3f en react aunque hay cosas que es mejor hacer solo en three.

tengo un pequeño js que me permite insertar shaders basicos cuando pueda lo cambio para usar la misma estructura de shadertoy la subo y añadire un medido de ms para que puedas ver el tiempo de cada shader.

aun asi aqui te pongo uno.

https://www.shadertoy.com/view/MdyGzR

Intentare modificar los shader para que permitan tema oscuro y tema claro.

PD: aqui te dejo la que para mi es la mejor demo de lo que es posible con webgl

https://artsandculture.google.com/experiment/viola-the-bird/nAEJVwNkp-FnrQ?cp=e30.

Acabo de ver tu implementacion de ruido y he visto que si que estabas usando imagedata. aqui tienes un ejemplo de ruido blanco uno se basa en la funcion seno y presenta patrones el hash no.

https://www.shadertoy.com/view/4djSRW

Esta es una libreria de shaders matematicos con funciones de ruido, alteracion del color , signed distance field etc. por si te animas a implementarlo en webgl. Aun asi pronto te subo lo mio y lo adaptas tu. https://lygia.xyz/