2D Screen Render Layer


I was curious if there was a way to set the render layer of the 2D Screen element. I want to have the set up as follows:

2D Screen - Background (drawn behind everything)
3D Camera - Middle ground content (drawn between background and UI)
2D Screen - UI (drawn over everything)

I tried to create a camera that renders a layer I created (BG), but when I create a 2D Screen and put an image in it, when I change the Image layer from UI to BG the image does not render at all.

Is there a way to set this up so that it works?


I have not tried this, but it should work. Create 3 layers (UIBackground, World, UI) - most of these exist by default, set up their render order in settings, assign cameras (I think single camera for all should work).

Thanks for responding! That is pretty much what I have set up. However, it seems the “2D Screen” entity is not respecting the layer assignment. Perhaps I am misunderstanding how the 2D Screen entity works.

I have my 3 cameras set up how you described, but when I place a 2D Screen under the UIBackground camera, it does not render.

are you able to share your project? we have have a look tomorrow.

Sure, I set up a public project with the setup I am trying to accomplish. I think I have the layers set up correctly, but now when I try to run it, I get an error:

[[playcanvas-stable.dbg.js:12626]](https://code.playcanvas.com/playcanvas-stable.dbg.js): Cannot read property 'x' of undefined

TypeError: Cannot read property 'x' of undefined
at ForwardRenderer.renderShadows (https://code.playcanvas.com/playcanvas-stable.dbg.js:12626:42)
at ForwardRenderer.renderComposition (https://code.playcanvas.com/playcanvas-stable.dbg.js:13801:11)
at Application.render (https://code.playcanvas.com/playcanvas-stable.dbg.js:48708:18)
at Application.tick (https://code.playcanvas.com/playcanvas-stable.dbg.js:49291:17)
at Application.start (https://code.playcanvas.com/playcanvas-stable.dbg.js:48676:9)
at https://launch.playcanvas.com/editor/scene/js/launch.js:7330:25
at Application._preloadScripts (https://code.playcanvas.com/playcanvas-stable.dbg.js:48468:5)
at https://launch.playcanvas.com/editor/scene/js/launch.js:7313:21
at done (https://code.playcanvas.com/playcanvas-stable.dbg.js:48410:6)
at Asset.onAssetLoad (https://code.playcanvas.com/playcanvas-stable.dbg.js:48422:7)

Here is the scene I am working in:

*Edit: The issue seems to be coming from the light and specifically casting shadows. If I turn Cast Shadows off, the error goes away. So any insight on how adding my layer created an issue with casting shadows?

It seems you set it up all correctly, and when I disable shadows on the directional light, the layers are rendering work as expected / required - background UI, then world, and then UI on top.

Regarding the crash when casting shadows - this looks like a bug in the engine and I’m investigating it, and will update here when I find out more.

1 Like

Awesome, thanks for the help!

Hi, running into exactly the same issue.

With shadows disabled everything works.
With shadows enabled i get the same error.

Is there any update on this bug?

I’m doing a larger refactoring at the moment which will handle this better in the future, but this has been not finished yet.

What layers set up do you have? And which layers use the shadow casting directional light?

I’d recommend trying to perhaps remove lights from the earlier layers, that might solve it for you. Only leave shadow casting lights in the world layer perhaps.

I actually ran into this exact same issue yesterday. I had a second camera that was only rendering a new layer I had created called Background. The objects on the background layer all had shadow casting / receiving disabled, and the only light in the scene was casting on the World layer only.

The only way I was able to get the error to stop was to disable shadow casting on the light. I ended up finding a workaround that let me render everything with a single camera and ditching the background layer. I can recreate it in a new project if that’s helpful.

My use case is for object outlines.

Here is a sample:

It works if the light has no shadows.
Enable shadows to get the error

This is a known issue, and can be tracked here:

For now, workaround is to insert the post-effect layer at a later position than zero in the renderOutline.js, so it doesn’t become the very first layer in the composition:

1 Like

Thanks, that workaround solved it for me!