Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/pmndrs/react-postprocessing

📬 postprocessing for react-three-fiber
https://github.com/pmndrs/react-postprocessing

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

Last synced: 20 days ago
JSON representation

📬 postprocessing for react-three-fiber

Host: GitHub
URL: https://github.com/pmndrs/react-postprocessing
Owner: pmndrs
License: mit
Created: 2020-05-07T11:00:08.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2024-04-11T09:51:22.000Z (2 months ago)
Last Synced: 2024-05-18T02:28:43.114Z (29 days ago)
Topics: 3d, postprocessing, react, react-postprocessing, react-three-fiber, threejs, webgl
Language: JavaScript
Homepage: https://docs.pmnd.rs/react-postprocessing
Size: 16.6 MB
Stars: 1,035
Watchers: 15
Forks: 98
Open Issues: 83
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Lists

awesome-webxr-development - @react-three/postprocessing - badge] - A postprocessing wrapper for @react-three/fiber. Save you hundreds of LOC for a straight forward effects-chain. It is faster than three/examples/jsm/effectcomposer, actively maintained, has better effects (Graphics / Post Processing)
awesome-stars - pmndrs/react-postprocessing - 📬 postprocessing for react-three-fiber (JavaScript)
awesome-threejs - react-postprocessing - three/fiber by [@pmndrs](https://github.com/pmndrs) (Related Frameworks / React)
awesome-stars - pmndrs/react-postprocessing - 📬 postprocessing for react-three-fiber (JavaScript)

README

        # react-postprocessing

[![Version](https://img.shields.io/npm/v/@react-three/postprocessing?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing)

[![Storybook](https://img.shields.io/static/v1?message=Storybook&style=flat&colorA=000000&colorB=000000&label=&logo=storybook&logoColor=ffffff)](https://pmndrs.github.io/react-postprocessing)

[![Downloads](https://img.shields.io/npm/dt/@react-three/postprocessing.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing)

[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ)

[![Open in GitHub Codespaces](https://img.shields.io/static/v1?&message=Open%20in%20%20Codespaces&style=flat&colorA=000000&colorB=000000&label=GitHub&logo=github&logoColor=ffffff)](https://github.com/codespaces/new?template_repository=pmndrs%2Freact-postprocessing)

`react-postprocessing` is a

[postprocessing](https://github.com/pmndrs/postprocessing) wrapper for

[@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not

(yet) meant for complex orchestration of effects, but can save you

[hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a

straight forward effects-chain.

```bash

npm install @react-three/postprocessing

```



  

  





  These demos are real, you can click them! They contain the full code, too. 📦



#### Why postprocessing and not three/examples/jsm/postprocessing?

From

[https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)

> This library provides an EffectPass which automatically organizes and merges

> any given combination of effects. This minimizes the amount of render

> operations and makes it possible to combine many effects without the

> performance penalties of traditional pass chaining. Additionally, every effect

> can choose its own blend function.

>

> All fullscreen render operations also use a single triangle that fills the

> screen. Compared to using a quad, this approach harmonizes with modern GPU

> rasterization patterns and eliminates unnecessary fragment calculations along

> the screen diagonal. This is especially beneficial for GPGPU passes and

> effects that use complex fragment shaders.

Postprocessing also supports srgb-encoding out of the box, as well as WebGL2

MSAA (multi sample anti aliasing), which is react-postprocessing's default, you

get high performance crisp results w/o jagged edges.

#### What does it look like?

Here's an example combining a couple of effects

([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).







```jsx

import React from 'react'

import { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'

import { Canvas } from '@react-three/fiber'

function App() {

  return (

    

      {/* Your regular scene contents go here, like always ... */}

      

        

        

        

        

      

    

  )

}

```

## Documentation

- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)

- [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)