Any way to include UI layer in grab pass?

Help & Support
,
1

I’m using the grab pass example as a way to blur/defocus the background objects in my scene. I’m setting this up as in the example, using these lines:

// Depth layer is where the framebuffer is copied to a texture to be used in the following layers.
// Move the depth layer to take place after World and Skydome layers, to capture both of them.
const depthLayer = this.app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
this.app.scene.layers.remove(depthLayer);
this.app.scene.layers.insertOpaque(depthLayer, 3);    

// Enable the camera to render the scene's color map.
this.camera.camera.requestSceneColorMap(true);

I’m then using it in a shader and running a gaussian blur on it. It all works perfectly - thanks so much for the example project!

However, part of the object uses a 3D screen which draws on the UI layer. As soon as I enable the blur shader, the UI elements disappear.
I have tried changing the number in the insertOpaque function to be higher, but this seems to cause strange results, and doesn’t achieve including the UI layer in the grab pass.
Is there a way to do this?

2

I’m afraid our team member that could answer this is away at the moment.

IIRC, the UI layer that we create in the engine clears the depth buffer by default. You may want to try adding your own layer for the UI elements in the world to see if that helps.

2 Likes
3

That’s a great idea, I’ll give that a try, thanks!

4

That works perfectly, thanks so much!

1 Like
5

Thanks for reporting back!