Repolode
Enviar
pmndrs

pmndrs/react-postprocessing

Un wrapper de React para la biblioteca postprocessing que permite aplicar efectos de posprocesamiento declarativamente como componentes JSX en escenas de react-three-fiber.

Ver en GitHubSitio web
Estrellas
1,438
Forks
141
Issues abiertos
12
Último commit
hace 12 horas

¿Qué es?

react-postprocessing conecta la biblioteca postprocessing con @react-three/fiber, el renderizador de React para Three.js. En vez de crear los pases de efectos manualmente, puedes incluir componentes como Bloom, DepthOfField, Noise y Vignette dentro de un elemento EffectComposer en tu Canvas.

El wrapper está pensado para cadenas de efectos sencillas, no para coordinar flujos complejos con múltiples pases. La biblioteca postprocessing subyacente combina los efectos indicados en un solo pase para reducir las operaciones de renderizado, y cada efecto puede elegir su propia función de mezcla. La corrección gamma está disponible de forma predeterminada, y WebGL2 MSAA viene habilitado por defecto.

El paquete se publica en npm como @react-three/postprocessing y cuenta con un sitio de documentación propio.

Funciones clave

  • 01Componentes declarativos de efectos, como Bloom, DepthOfField, Noise y Vignette, dentro de EffectComposer
  • 02Combina los efectos en un solo pase para reducir las operaciones de renderizado
  • 03Cada efecto puede definir su propia función de mezcla
  • 04Corrección gamma integrada y WebGL2 MSAA habilitado de forma predeterminada
  • 05Escrito en TypeScript para usarse con react-three-fiber

Casos de uso

  • Añadir bloom, viñeta o grano de película a una escena de react-three-fiber
  • Aplicar desenfoque de profundidad de campo para dirigir la atención a una parte de una escena 3D
  • Crear una cadena sencilla y lineal de efectos visuales sin escribir pases de renderizado manualmente

Inicio rápido

  1. 1

    Instala el paquete

    npm install @react-three/postprocessing
  2. 2

    Envuelve la escena en un EffectComposer con los componentes de efectos dentro de un Canvas de react-three-fiber

Antes de usarlo

  • No está pensado para una orquestación compleja de efectos; es ideal para cadenas de efectos sencillas.
  • Requiere @react-three/fiber, por lo que solo sirve para escenas de react-three-fiber.

Temas

#react#threejs#webgl#3d#postprocessing#react-three-fiber#graphics#react-postprocessing

Preguntas frecuentes

¿Qué es react-postprocessing?
Un wrapper de React para la biblioteca postprocessing que permite aplicar efectos de posprocesamiento declarativamente como componentes JSX en escenas de react-three-fiber. react-postprocessing conecta la biblioteca postprocessing con @react-three/fiber, el renderizador de React para Three.js. En vez de crear los pases de efectos manualmente, puedes incluir componentes como Bloom, DepthOfField, Noise y Vignette dentro de un elemento EffectComposer en tu Canvas.
¿react-postprocessing es gratuito? ¿Qué licencia tiene?
react-postprocessing es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-postprocessing sigue mantenido?
Mantenimiento activo. El último commit de react-postprocessing fue el 19 oct 2026.
¿Para qué puedo usar react-postprocessing?
Añadir bloom, viñeta o grano de película a una escena de react-three-fiber Aplicar desenfoque de profundidad de campo para dirigir la atención a una parte de una escena 3D Crear una cadena sencilla y lineal de efectos visuales sin escribir pases de renderizado manualmente
¿Cómo se instala react-postprocessing?
Instala el paquete: npm install @react-three/postprocessing Envuelve la escena en un EffectComposer con los componentes de efectos dentro de un Canvas de react-three-fiber
¿Dónde consigo react-postprocessing?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/pmndrs/react-postprocessing

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados