Catálogo de código abierto y sin inicio de sesión de componentes interactivos de UI para Three.js/WebGL, con renderizadores en vivo y el código fuente completo de React.
pmndrs/postprocessing
Biblioteca de postprocesamiento para three.js que encadena efectos de imagen a pantalla completa, como bloom, SSAO y gradación de color, en escenas WebGL.
- Estrellas
- 2,952
- Forks
- 258
- Issues abiertos
- 30
- Último commit
- hace 5 días
¿Qué es?
postprocessing es una biblioteca de JavaScript para añadir efectos de postprocesamiento a pantalla completa a escenas de three.js. El postprocesamiento se ejecuta después de renderizar una escena y aplica efectos en el espacio de imagen al fotograma final. La biblioteca se organiza en torno a un EffectComposer que ejecuta una secuencia de pases, con un RenderPass para dibujar la escena y un EffectPass para aplicar efectos.
EffectPass combina cualquier conjunto de efectos en la menor cantidad posible de operaciones de renderizado, de modo que se pueden combinar muchos efectos sin el costo de encadenar un pase independiente para cada uno. Cada efecto puede definir su propia función de mezcla. Las operaciones a pantalla completa usan un solo triángulo que cubre la pantalla, en lugar de un cuadrilátero. La biblioteca también admite búferes de fotograma HalfFloat de alta precisión para flujos de trabajo de tipo HDR e incluye un ToneMappingEffect para convertir colores HDR a una salida que se pueda mostrar.
El paquete incluye efectos integrados como bloom, desenfoque, profundidad de campo, glitch, rayos divinos, contorno, SSAO, pixelación, gradación de color basada en LUT y viñeta. También se pueden crear efectos y pases personalizados; la wiki del proyecto documenta el proceso.
Funciones clave
- 01Combina muchos efectos en un solo EffectPass para reducir las operaciones de renderizado.
- 02Incluye efectos integrados como bloom, SSAO, profundidad de campo, contorno y gradación de color.
- 03Admite funciones de mezcla por efecto.
- 04Ofrece búferes de fotograma HalfFloat de alta precisión para renderizado de tipo HDR.
- 05Incluye un ToneMappingEffect para convertir de HDR a LDR.
- 06Permite crear efectos y pases personalizados.
Casos de uso
- Añadir bloom o resplandor a la visualización de un producto o a una escena de juego en three.js.
- Aplicar estilos retro, como líneas de escaneo, pixelación o glitch, a una escena WebGL.
- Aplicar gradación de color a una escena 3D mediante archivos LUT.
- Crear efectos interactivos, como ondas de choque o contornos en objetos seleccionados.
Temas
Preguntas frecuentes
- ¿Qué es postprocessing?
- Biblioteca de postprocesamiento para three.js que encadena efectos de imagen a pantalla completa, como bloom, SSAO y gradación de color, en escenas WebGL. postprocessing es una biblioteca de JavaScript para añadir efectos de postprocesamiento a pantalla completa a escenas de three.js. El postprocesamiento se ejecuta después de renderizar una escena y aplica efectos en el espacio de imagen al fotograma final. La biblioteca se organiza en torno a un EffectComposer que ejecuta una secuencia de pases, con un RenderPass para dibujar la escena y un EffectPass para aplicar efectos.
- ¿postprocessing es gratuito? ¿Qué licencia tiene?
- postprocessing es open source bajo la licencia Zlib. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿postprocessing sigue mantenido?
- Mantenimiento activo. El último commit de postprocessing fue el 1 nov 2026.
- ¿Para qué puedo usar postprocessing?
- Añadir bloom o resplandor a la visualización de un producto o a una escena de juego en three.js. Aplicar estilos retro, como líneas de escaneo, pixelación o glitch, a una escena WebGL. Aplicar gradación de color a una escena 3D mediante archivos LUT. Crear efectos interactivos, como ondas de choque o contornos en objetos seleccionados.
- ¿Dónde consigo postprocessing?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/pmndrs/postprocessing
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Sandbox de Three.js y GLSL para ajustar efectos visuales de habilidades tipo skillshot, con controles deslizantes en vivo que siguen funcionando al pausar la simulación.
Un wrapper funcional de WebGL que elimina el estado compartido de la GPU y permite describir las llamadas de dibujo como comandos y compilarlas en JavaScript optimizado.
Colección abierta de más de 100 transiciones GLSL creadas por la comunidad para animar el paso entre dos imágenes, compatibles con la web, móviles, Apple, Android, Rust y herramientas de video.
Renderizador oceánico en tiempo real para three.js (WebGL2), con olas FFT, rompientes, espuma, cáusticas, vista submarina y objetos flotantes.
Un renderer de React para Three.js que permite crear escenas 3D de forma declarativa con componentes JSX.