Background webgl #421
Background webgl #421
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/scripts/renderer.ts
Outdated
| const vp_size = [window.innerWidth, window.innerHeight] | ||
| canvas.style.background = "black" | ||
| canvas.style.width = "100vw" | ||
| canvas.style.height = "100vh" |
There was a problem hiding this comment.
¿No es mejor '100dvh'?, para tener en cuenta la barra en los navegadores en móvil
There was a problem hiding this comment.
aun tengo que verlo en móvil solo vi una una versión temprana como ya he puesto no esta listo para produccion
There was a problem hiding this comment.
quiero implementar otras funcionalidades como frame buffer para poder interactuar con el humo con una simulacion basica.
|
Como no me gusta que la gente no entienda el codigo de lo que subo ahi va un diagrama que explica la creacion del quad con todas sus fases y como se puede dibujar est. Cuando pueda creo una con los uniforms como se cambian estos y como se pueden crear uniforms para resolution, delta time, elapsed time o incluso scrollPosition para animar cosas sin alterar la geometria. |
|
Dejo por aquí unas pruebas que se ven como se ralentiza en móvil con el código de producción y como se pixela con el preview de tu PR. Tú sabrás mejor que yo el porque pasa esto y como puede solucionarse. Producción: 3D-slow-performance-opt.mp4
Preview: 3D-pixelation-optimized.mp4
Mi experiencia con 3D en web es este pequeño proyecto, y me gustaría aprender un poco más de por qué suceden algunos de estos renderizados. |
…orm, Fix: load textures not needed
No deberia pixelarse deberia verse borroso a menos que la configuracion del canvas este mal, la revisare, pero si borroso y posiblemente (mas bien casi seguro en pantallas retina) es por el DPR ahora mismo esta a 1 para ello el viewport hay que multiplicar cada dimension por el dpr. // Ajustar la resolución en funcion del DPR Pero eso en algunos casos puede ser letal. "me gustaría aprender un poco más de por qué suceden algunos de estos renderizados." La mejor forma es empezar en algo de mas alto nivel si sabes algun framework casi seguro que tienen una libreria para usar threejs de forma declarativa pero sin lugar a dudas el que esta a años luz del resto es react three fiber. Vercel lo suele usar en algunas de sus presentaciones. https://docs.pmnd.rs/react-three-fiber/getting-started/examples He metido un nuevo shader este ya bastante mas exigente .si me lo puedes probar añade eso a la url tienes hasta el 9 |
Hice un prototipo de algo parecido cada patron es un SVG distinto que contiene cada capa con un Id de zona al cargar el patro pongo todas las zonas negras menos la que quiero generar y asi obtengo las mascaras para los colores. Si quieres te paso el repositorio. https://sport-shop-prvr.vercel.app/editor Ten en cuenta que eso fue en unos dias pq me pidieron asesoramiento sobre como hacerlo. Si necesitas ayuda con algo pregunta por el discord de midu en js next o react suelo andar por ahi. este no es lugar para darte explicaciones. |
|
Ya probé el shader=7 @Thakisis, casi me peta el móvil xD. shader-7.mp4
|
Está bastante chulo, más o menos esa idea tenía yo al empezar. Me pasaré por el discord a ver que tal. |
Por suerte la api es asincrona por el eso del medido de GPU es inutil, pero se puede ver que la CPU no se bloquea, por eso me extraña el problema del scroll el renderer del navegador usa la GPU para ciertas cosas como video o si por ejemplo pones un transform 3d. A mi ya no me va en el movil creo que mi telefono tiene algun problema con glsl version 300, aun asi ahora paro el trabajo en js y voy a ver si creo un shader que encaje con el diseño de la web y hare una PR eliminando lo que no se use y con el Typescript corregido pq suelo usar JS para three / r3f que es lo que suelo usar no soy de bajar al barro a menos que sea necesario. De todas formas hasta que este webgpu final en safari no veo que el 3d vaya a suponer un cambio mas alla de paginas de estudios especializados. |
|
Cierro la PR hasta que tenga el shader listo el codigo optimizado y listo para produccion. ya he visto el tipo de humo que hace falta |
Descripción
Animación webgl de prueba con varios shaders mientras creo uno que se adapte a los temas oscuros y claro.
!!!No hacer merge tiene contenido adicional innecesario y no esta listo para producción faltaría detectar el reduce motion, una aparición gradual un fallback en caso de fallar webgl2 y webgl1 además quiero hacer pruebas con imágenes de los luchadores y efectos que se solapen con el svg.
Problema solucionado
Ruido lento usando contexto 2d
Cambios propuestos
Implementación de un sistema webgl que dibuja un rectángulo en la pantalla y pinta un shader de ruido, humo o cualquier otra cosa.
Comprobación de cambios
Impacto potencial
El dibujado del canvas webgl es asíncrono así que no se puede medir el tiempo correctamente pero el tiempo de bloqueo del hilo principal no supera los 0.1 milisegundos, aun así, si presentase algún problema en el hilo principal puedo transferir el control del canvas a un worker .
Contexto adicional
Los shaders usados no son míos pero si he modificado un par de ellos el de ruido para permitir colores y el del flare para que este siga al raton. Mi intento es implementar uno propio cuando sepa si se va a usar y si se prefiero ruido o humo.
Para visualizar los 8 shaders y tener el debug he leído dos parámetros de search uno de ellos es shader=[1-8] y el otro es debug=true (para ver el frametime draw time y fps)
Además el shader 2 que esta en scripts/shader/flare.ts tiene 5 variantes para visualizarlas hay que cambiar
//change this value (1 to 5) or tweak the settings yourself. //the gamma and spot brightness parameters can use negative values #define TYPE 4 <-------- el tipo ahí #if TYPE == 1PD: puedo vincular un parametro del shader al scroll y hace cambios pasar de un shader a otro hacer que scrolleen pero suelen tener un poco de delay con respecto al dom sobre todo cuando se usa geometria (este no es el caso).
Enlaces útiles
el Humo generalmente se basa en movimientos fractales brownianos ahí hay varias implementaciones de esto y de varios tipos de ruidos, sdf y alguna cosa mas.
https://github.com/patriciogonzalezvivo/lygia
Un sitio web creado por el español Iñigo Quilez donde la gente sube shaders que generan imágenes usando imágenes y formulas matemáticas.
https://www.shadertoy.com/
Libro Book of Shader
viene con editor de shaders para ir practicando.
Documentación del proyecto:
Código de referencia: