You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`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.
7
+
`react-postprocessing` is a
8
+
[postprocessing](https://github.com/pmndrs/postprocessing) wrapper for
9
+
[@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not
10
+
(yet) meant for complex orchestration of effects, but can save you
11
+
[hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a
> 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.
31
+
> This library provides an EffectPass which automatically organizes and merges
32
+
> any given combination of effects. This minimizes the amount of render
33
+
> operations and makes it possible to combine many effects without the
34
+
> performance penalties of traditional pass chaining. Additionally, every effect
35
+
> can choose its own blend function.
26
36
>
27
-
> 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.
37
+
> All fullscreen render operations also use a single triangle that fills the
38
+
> screen. Compared to using a quad, this approach harmonizes with modern GPU
39
+
> rasterization patterns and eliminates unnecessary fragment calculations along
40
+
> the screen diagonal. This is especially beneficial for GPGPU passes and
41
+
> effects that use complex fragment shaders.
28
42
29
-
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.
43
+
Postprocessing also supports srgb-encoding out of the box, as well as WebGL2
44
+
MSAA (multi sample anti aliasing), which is react-postprocessing's default, you
45
+
get high performance crisp results w/o jagged edges.
30
46
31
47
#### What does it look like?
32
48
33
-
Here's an example combining a couple of effects ([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).
The EffectComposer must wrap all your effects. It will manage them for you.
64
-
65
-
```jsx
66
-
<EffectComposer
67
-
enabled?: boolean
68
-
children:JSX.Element|JSX.Element[]
69
-
depthBuffer?: boolean
70
-
disableNormalPass?: boolean
71
-
stencilBuffer?: boolean
72
-
autoClear?: boolean
73
-
multisampling?: number
74
-
frameBufferType?: TextureDataType
75
-
/** For effects that support DepthDownsamplingPass */
76
-
resolutionScale?: number
77
-
renderPriority?: number
78
-
camera?:THREE.Camera
79
-
scene?:THREE.Scene
80
-
>
81
-
```
82
-
83
-
#### Selection/Select
84
-
85
-
Some effects, like Outline or SelectiveBloom can select specific objects. To manage this in a declarative scene with just references can be messy, especially when things have to be grouped. These two components take care of it:
86
-
87
-
```jsx
88
-
<Selection
89
-
children:JSX.Element|JSX.Element[]
90
-
enabled?: boolean
91
-
>
92
-
93
-
<Select
94
-
children:JSX.Element|JSX.Element[]
95
-
enabled?: boolean
96
-
>
97
-
```
98
-
99
-
You wrap everything into a selection, this one holds all the selections. Now you can individually select objects or groups. Effects that support selections (for instance `Outline`) will acknowledge it.
100
-
101
-
```jsx
102
-
<Selection>
103
-
<EffectComposer autoclear={false}>
104
-
<Outline blur edgeStrength={100} />
105
-
</EffectComposer>
106
-
<Select enabled>
107
-
<mesh />
108
-
</Select>
109
-
</Selection>
110
-
```
111
-
112
-
Selection can be nested and group multiple object, higher up selection take precence over lower ones. The following for instance will select everything. Remove the outmost `enabled` and only the two mesh group is selected. You can flip the selections or bind them to interactions and state.
113
-
114
-
```jsx
115
-
<Select enabled>
116
-
<Select enabled>
117
-
<mesh />
118
-
<mesh />
119
-
</Select>
120
-
<Select>
121
-
<mesh />
122
-
</Select>
123
-
</Select>
124
-
```
125
-
126
-
#### Selective bloom
127
-
128
-
Bloom is selective by default, you control it not on the effect pass but on the materials by lifting their colors out of 0-1 range. a `luminanceThreshold` of 1 ensures that ootb nothing will glow, only the materials you pick. For this to work `toneMapped` has to be false on the materials, because it would otherwise clamp colors between 0 and 1 again.
0 commit comments