Camera Stacking

Help & Support
#1

Hi everyone,

I’m attempting to stack two cameras together, but the second one doesn’t seem to be rendering on top the other.

The first (priority 1) camera is simply rendering the background color, and the second (priority 2) camera is rendering a model. The model, however, is being rendered behind the first. Any thoughts on what I might be setting up incorrectly here?

Here’s the project link:
https://playcanvas.com/editor/scene/952534

#2

Hi @Matthew_Ostil and welcome,

It should work but I think there is an issue with the camera layers and their rendering order.

Try putting in both cameras the same layers, not optimal but it seems to be fixing your issue:

image

And it should work:

image
image1374×1155 131 KB

#3

Thank you for the reply! Unfortunately this setup doesn’t work for what I was hoping to achieve, which was to have a camera render the model on its own (for it’s own post processing, etc.). Maybe it’s just a bug, but I’ll keep looking for solutions in the meantime. :open_mouth:

#4

I think you can do that by creating a new LayerComposition.

The pc.Application instance creates one when it boots (the set of default layers you see in editor), but you can create a second one in code and assign your camera to a new layer.

  • Create a new Layer and assign it to your model rendering camera
  • In code do something along these lines:
    var modelTexture = new pc.Texture(this.app.graphicsDevice, {
        width: this.app.graphicsDevice.canvas.width,
        height: this.app.graphicsDevice.canvas.height,
        addressU: pc.ADDRESS_CLAMP_TO_EDGE,
        addressV: pc.ADDRESS_CLAMP_TO_EDGE
    });

    var renderTarget = new pc.RenderTarget({
        colorBuffer: modelTexture
    });

    var modelLayer = this.app.scene.layers.getLayerByName('MyModelLayer');
    modelLayer.renderTarget = renderTarget;

    modelLayer.clearCameras();
    modelLayer.addCamera(this.modelCameraEntity.camera);
    
    var layerComposition = new pc.LayerComposition();
    layerComposition.push(modelLayer);

Now in your update loop or at any other place you require to render this model you can do this:

this.app.renderer.renderComposition(layerComposition);

The modelTexture can be used on any element/model or I think you can skip the renderTarget creation/assignment and have it render automatically on screen.

Feel free to experiment, this can be complex but layer composition is a powerful Playcanvas feature.