Change resolution of render target

Help & Support
1

Hey hey :slight_smile:

I’m currently trying to set up an ui element, that displays everything that is being rendered by a specific camera. I used this Example as a general guideline, I’m setting the texture on an element component instead of a material and it works great so far.

Everything above the yellow line is just one ui element that shows what is being rendered by a camera
image

The issue I’m facing now is that the ui element is responsive to the width of the screen. If I change the resolution, it will become stretched or compressed.
image

On resizing the screen, I would like to adjust the resolution of the texture that camera renders into. But I don’t see a way of resizing a texture? Both camera.renderTarget.width and camera.renderTarget.colorBuffer.width are read-only properties. camera.renderTarget.colorBuffer is read-only as well. Is the only way to achieve this to create a new texture and a new renderTarget and switch them on the camera?

Here is a bit of the code I’m currently using:

private setupRenderTarget(): void
{
    const colorBuffer = new pc.Texture(this.app.graphicsDevice, {
        width: this.elementComponent.width,
        height: this.elementComponent.height,
        format: pc.PIXELFORMAT_R8_G8_B8_A8,
        minFilter: pc.FILTER_LINEAR,
        magFilter: pc.FILTER_LINEAR,
    });

    const renderTarget = new pc.RenderTarget({
        colorBuffer: colorBuffer,
        depth: true,
        flipY: true,
    });

    this.camera.renderTarget = renderTarget;

    this.elementComponent.texture = renderTarget.colorBuffer;
    this.elementComponent.color = pc.Color.WHITE;
    this.elementComponent.opacity = 1;
}
2

Yes, I believe so. My guess is that it needs to allocate the memory for the texture that is used for the render target.

Have you tried using fitMode for the elements to keep aspect ratio? https://developer.playcanvas.com/en/api/pc.ElementComponent.html#fitMode

Gifs of it in motion are here: Release v1.21.61 · playcanvas/editor · GitHub

3

I don’t want the ui element to keeps it’s aspect ratio. I split the screen at around 66%. I want the render texture to take up the top third of the screen, while our game takes place in the lower 2 thirds. So the size of the element is going to be very dynamic.

Ok, then I guess I will keep an eye on it, if this might cause us to run into memory issues if the resizing happens too often and we create too many textures. Thanks :slight_smile:

4

If the screen resizes, engine internally reallocates its internal render target textures, so as long as you release the previous textures, all should work just fine.

1 Like
5

Do you mean I can just replace the renderTarget of the camera if I don’t hold a reference to it anywhere? Or do I need to explicitly call destroy on the renderTarget and/or on the texture?

6

correct. Delete existing render target this way (this deletes the texture you provided to it, as well as the render target itself)

        if (rt) {
            rt.destroyTextureBuffers();  // instead of this, you can destroy texture as well, it does the same thing
            rt.destroy();
        }

and then allocate new RT and assign it to the camera.

2 Likes
7

Awesome, thank you :slight_smile: