Web Shaders: la próxima gran tendencia en el diseño de UI
jeff
Los sombreadores web están remodelando la sensación del diseño de la interfaz de usuario. Shaders.com trae efectos de GPU a React, Vue y Svelte; no se requieren conocimientos de GLSL para publicarlo.
El diseño web se ha basado en el mismo conjunto de herramientas durante años. Degradados CSS, sombras de marcos, filtros de desenfoque, todo estático. Los sombreadores web controlados por GPU son para los efectos CSS lo que las películas de acción en vivo son para las fotografías. Se mueven. Ellos respiran. ellos responden. Llegan a los navegadores más rápido de lo que la mayoría de los diseñadores creen.
WebGPU es la fuerza impulsora. Disponible en los principales navegadores a partir de 2023, le brinda al navegador acceso directo a la GPU del dispositivo. Los efectos que alguna vez estuvieron limitados a los motores de juegos ahora se ejecutan a velocidad de cuadro completa dentro de la página web. La brecha entre las aplicaciones nativas y las páginas React se está cerrando rápidamente.
El desafío es siempre la curva de aprendizaje. Escribir sombreadores web en GLSL o WGSL requiere una forma diferente de pensar: píxeles, matemáticas, vectores. Hermosos resultados con una entrada empinada. ¿Cuál es ese obstáculo? sombreador borrar.
Sombreadores web como elementos de interfaz de usuario componibles
Shaders.com es una biblioteca de símbolos para efectos WebGPU. Cada efecto visual se puede componer, como un botón o una tarjeta, pero renderizado por la GPU. El preajuste de acero inoxidable ofrece una textura cepillada luminosa. Chroma Chrome transforma colores iridiscentes en superficies pulidas. El haz de píxeles atraviesa el campo oscuro en diagonal. La geomalla representa una celosía transparente con brillo ambiental. Cada uno está disponible como componente para React, Vue, Svelte o Solid.
La API es declarativa. Mientras
Esta biblioteca contiene 90 símbolos y más de 400 efectos preestablecidos en colecciones con nombre, cada una con variantes, modos de fusión y controles.
Los sombreadores web son el camino a seguir en la estética de la interfaz de usuario. Movimiento, materiales, iluminación: todo impulsado por la GPU a través de una única instalación de npm. La cuestión no es si este cambio es importante. Cuánto falta para que empiece.
Web Shader en tiempo real: animación que se ejecuta en el navegador a través de WebGL GLSL Neural Noise:
