How do I use bokehPass for post-processing?

[SarahVanDenBerghe]

I'm trying to add an effect bokehPass in order to create a simple depth-of-field as I saw on the Three.js example. But I am failing to implement it properly.

I forked an r3f tutorial that is using effectComposer with different effects, on line 33 I added the bokehPass, but it seems to create a weird effect. Link to Code Sandbox here.

Now it's all set to 0, but even when changing the numbers it doesn't do much, am I missing something?
<bokehPass attachArray="passes" args={[aspect, 0, 0, 0]} />

Thank you in advance! 😊

[drcmda]

you can use effect composer plainly, you dont have to make it declarative. also bokeh, you use it in the same way as in plain three. https://codesandbox.io/s/r3f-instanced-colors-w3lwy

the args werent correct though. it takes scene, camera and then params: https://github.com/mrdoob/three.js/blob/dev/examples/jsm/postprocessing/BokehPass.js#L18

[SarahVanDenBerghe]

Thank you, I didn't realise how the arguments were used so I took them over from an example, but I understand it now!

[drcmda]

maybe it was using an outdated version of that effect. 🤷‍♂️ aspect and three values, havent seen that before.

[SarahVanDenBerghe]

Oh no it was totally my fault, I had trouble understanding the r3f syntax, so I just took over the unrealBloomPass of the example I found on Code Sandbox and thought the same parameters would apply for the bokehPass written in r3f :') but I understand how it works now luckily!