Depth of Field PostEffect

Hello people of the forum,

I made a Depth of Field post-effect. We’re not gonna use it on a project, so I’m sharing it here.

I had trouble finding a DoF post effect for my needs. The forum posts I saw either pointed to the built-in PlayCanvas engine Render Pass DoF or a 10 year old PostEffect implementation. And PlayCanvas didn’t have a DoF PostEffect in the examples.

This one is mainly based off the PlayCanvas engine implementation that uses render passes, which iirc is inspired by a Google Filament example.

The script is far from perfect, I mashed things together. So, expect bugs and less-than-optimal logic. In “Screen Center” focus mode, it uses a raycast to decide which object to focus. Which means for that mode you need Ammo.js and objects with rigid body on them to focus. There’s probably a better way to do that without Ammo.

Project

Project: PlayCanvas 3D HTML5 Game Engine
Preview: PlayCanvas | HTML5 Game Engine

Screenshots



Attach the script to the Camera:

3 Likes

Interesting. Thanks for sharing! How does it compare to the PlayCanvas one:

https://playcanvas.vercel.app/#/graphics/depth-of-field

1 Like

That one seems nice, probably better overall. I was initially using that one, but the engine didn’t like me combining that DoF using render passes + other post effects on the same camera, so I had to switch to purely PostEffect scripts.

Yep, the old effects are not compatible with render passes. But you could add custom render passes to that system to do additional effects.

1 Like

By the way, what other effects were you using? Maybe we can add them on the engine side if they’re generic and useful.

Is there documentation on Render Passes vs PostEffects? I was looking around trying to figure out if PostEffects are getting deprecated or if one was preferred over the other, but I didn’t find anything.

The SSAO effect, basically the one from PlayCanvas PostEffects examples.

We directly support SSAO as well, a better version than the old posteffect. PlayCanvas Examples

put this script on the camera and try it all: engine/scripts/esm/camera-frame.mjs at main · playcanvas/engine · GitHub

1 Like

Oh cool, I’ll try it out. Thanks!

That might be a useful thing to mention on the PostEffects doc page because I wasn’t familiar with the built-in capabilities now available.

yep, good point to update the manual, and I will do that, thanks.

2 Likes