Problem with layers

Help & Support
1

Of course, nobody is gonna help me or even answer here, but I still want to try.

New layers system. I try to render layer in texture then use this it.
I successfully rendered this texture in onPostRender to screen and still able to use. Great.

But if I set renderTarget for another one layer, it doesn’t work. Doesn’t matter where this layer is.

this.worldRenderTexture = new pc.Texture(device, {
    format: pc.PIXELFORMAT_R8_G8_B8_A8,
    width: device.width,
    height: device.height
});

this.testRenderTexture = new pc.Texture(device, {
    format: pc.PIXELFORMAT_R8_G8_B8_A8,
    width: device.width,
    height: device.height
});

this.worldRenderTarget = new pc.RenderTarget(device, this.worldRenderTexture);
this.testRenderTarget = new pc.RenderTarget(device, this.testRenderTexture);

this.app.scene.layers.getLayerByName("World").renderTarget = this.worldRenderTarget;

// If I comment this line everything is working fine.
this.app.scene.layers.getLayerByName("Test").renderTarget = this.testRenderTarget;

this.app.scene.layers.getLayerByName("World").onPostRender = (cameraIndex) => {

    var uColorBuffer = device.scope.resolve('source');
    uColorBuffer.setValue(this.worldRenderTexture);
    pc.drawQuadWithShader(device, null, this.shaderFinal, null, null, true);

}
2

I render both layers before the depth.

image

When you drawQuadWithShader after Ship layer was renderer, what do you expect to see? World render?
No, you see nothing. Why? Who knows.

this.app.scene.layers.getLayerByName("World").renderTarget = this.worldRenderTarget;
this.app.scene.layers.getLayerByName("Ship").renderTarget = this.invisibleRenderTarget;

this.app.scene.layers.getLayerByName("World").onPostRender = (cameraIndex) => {

    var uColorBuffer = device.scope.resolve('source');
    uColorBuffer.setValue(this.worldRenderTexture);
    pc.drawQuadWithShader(device, null, this.shaderFinal, null, null, true);
}

It’s so sad. I thought we would be able to use layers for custom effects, but no. We can’t control only drawing order.

3

This is what Im gonna do.

Group 2
Group 2.png891×232 6.45 KB

4

Can you post a link to the project?

I’m looking at the documentation for layers and I wonder if there is a misunderstanding somewhere :thinking:

The layer system defines render order of meshes but does not render over the layer below it in the way like Photoshop layers work.

5

Yes, I’ll do little repro tomorrow.

Take a look at Unreal Engine post-effect composer. It’s really great! You can combine your effects easily and intuitive.

image
image.jpg1052×619 143 KB

This is exactly what I want to achieve! Just render layers in any order and blend them according to depth.
But, for example, I want to pass my rendered World layer into a texture to another one layer, and then render them both to the screen.

So, Unreal gives that. You can render entity into a texture, pass somewhere, render anytime.

Also, new post-effects are extremely cool, but there are some bugs, but then it will be released, I would like to try to something like Unreal’s composer for PlayCanvas.

6

Does this little example help:

https://playcanvas.com/project/532659/overview/render-low-res-world-layer

It renders non-UI layers to an offscreen render target (1/16th resolution of back buffer), then copies that render target to the back buffer, and then renders the UI layer over the top.

7

Hm, I have to try that! Thanks, Will!

Probably device.copyRenderTarget can do some magic, but isn’t it slow, don’t you know?..

8

For WebGL 2.0, it just does a ‘resolve’ operation which is super fast. For WebGL 1.0, I think it just renders a fullscreen quad, which is also pretty fast.

1 Like
9

Wow It helped!

But does it work with depth?

image
image.jpg1151×872 196 KB

I enabled it for World’s renderTarget just like in the example you posted above.

10

I’m not sure about depth - you’ll have to experiment with that.