Is there a way to use RenderTargetTexture as the source of GUI Image?

Questions
1

I want to use the view of RenderTargetTexture in GUI Image. Is there a way to use RenderTargetTexture as the source of GUI Image?
I have tried the readPixels to get image url in scene.beforeRender , but this will lower FPS.

scene.beforeRender = function () {
                if (tmpThis._switch.value) {
                    var texture = tmpThis._rendertargetTexture;
                    let size = texture.getSize();
                    let canvas = tmpThis._renderCanvas;
                    if (canvas === null) {
                        canvas = document.createElement('canvas');
                        tmpThis._renderCanvas = canvas;
                    }
                    canvas.width = size.width;
                    canvas.height = size.height;
                    let ctx = canvas.getContext('2d');

                    texture.readPixels(0, undefined, undefined, false)!.then((data) => {
                        var imageData = new ImageData(new Uint8ClampedArray(data.buffer), size.width, size.height);
                        var h = imageData.height;
                        var w = imageData.width;
                        var i, i2, t;
                        for (var dy = 0; dy < h; dy++) {
                            for (var dx = 0; dx < w / 2; dx++) {
                                i = (dy << 2) * w + (dx << 2)
                                i2 = ((dy + 1) << 2) * w - ((dx + 1) << 2)
                                for (var p = 0; p < 4; p++) {
                                    t = imageData.data[i + p];
                                    imageData.data[i + p] = imageData.data[i2 + p];
                                    imageData.data[i2 + p] = t;
                                }
                            }
                        }
                        
                        ctx.putImageData(imageData, 0, 0);
                        let dataUrl = canvas.toDataURL();

Another question is the highlight can’t be show in RenderTargetTexture.

1
11363×616 12 KB

2

Hello :slight_smile:

Did you have a look at these topics ?

It seems there is no straight forward way since RTT is on GPU side while GUI is on CPU side (and moving image between contexts is expensive)

If you goal is to have another view in a corner like in your screenshot, you can achieve this by using another camera, and play with the viewport param (to render the second camera in a smaller part of the canvas)

I would say it’s because the highlight stuff is a post-processed, but using a second camera like I said previously, you will handle this as well :slight_smile: :

:arrow_right: Playground :arrow_left:

++
Tricotou

1 Like
3

When I use the viewport, how to add the colored border?

4

One way would be to use GUI as well : Playground

2 Likes
5

When I want to set backgroundcolor for different camera, I used this code.

But this will cover the colored border.

image
image1360×610 74.3 KB

How to keep the backgroundcolor and make the the colored border in front.

6

Ah yes I see. Problem come from the fact that :

  • In order to have the corner on top, we have set up the cornerCamera as second camera (rendering after mainCamera)
  • GUI is rendered on mainCamera which means becore cornerCamera which overides it

What you could do it to switch the yellow border GUI to be rendered on cornerCamera (at least this one, you can still keep another GUI for the mainCamera) like so : Playground