Using render target texture in gui

Questions
1

Hello,

I try to create some kind of a minimap that renders the scene with a second camera. Of course the minimap should always stay on top of the scene at the same position. I have two ideas how to achieve this.

  1. Rendering the target texture as emissive texture of a plane. I could use it as a billboard so it faces the camera all the time. The only problem here I see is that the plane should stay at the same position regardless of the camera movement. Is that possible anyhow?

  2. Using babylon gui and passing the target texture as image data to it. Unfortunately I wasn’t able to pass the data so far. I get the image data like this: “new ImageData(new Uint8ClampedArray(await this.rtt.readPixels()), 1024, 1024)”. Do I need to create a blobUrl to pass it into the GUI Image? How am I able to update that image afterwards?

Thanks for your advise!

Best

1 Like
2

I would not use GUI for that purpose as you would need to read the pixels of the rtt to copy them into a canvas 2d which is slow.

your solution 1. is the way to go. Usually you have a separate camera or scene and play with the viewport to position it as you wish.

https://www.babylonjs-playground.com/#44TSQ1#9

3 Likes
3

I am fine with just updating the 2d canvas from time to time. So I am still playing around with that gui solution as well.

The pg you provided looks promising though. I will try that. Thanks! :slight_smile:

1 Like
4

Hey there, I know its been a bit of time but I wanted to follow up with some additional clarifications for GUI for anyone looking back on this thread.

I agree with seb that camera is a good idea since

  1. Using babylon gui and passing the target texture as image data to it. Unfortunately I wasn’t able to pass the data so far. I get the image data like this: “new ImageData(new Uint8ClampedArray(await this.rtt.readPixels()), 1024, 1024)”. Do I need to create a blobUrl to pass it into the GUI Image? How am I able to update that image afterwards?

If you did want to use GUI for this…you will run into a couple of issues. One is that the GUI image api takes in an URL. So you would have to create that blobUrl or already have it handy. You could try manually alter the internals to be the correct data but you mentioned that didn’t work :frowning: . Then if you wanted to update the image you would have to recreate the URL.

Now I wanted to follow up by adding we are looking into eventually changing the structure for GUI image. Speicfically change it so it will be able to utilize textures. Features would include being able to upload images files it like you can in NME and even inspect it using the texture inspector. I think once this change is implemented (not sure when exactly) using GUI for this will be way more viable.

2 Likes
5

Hi @samevision just checking in if your problem was solved :smiley:

1 Like
6

Hi @carolhmj,

yes I ended up using the first approach mentioned in my initial post. Since the render target texture doesn’t have to render on every frame I used readPixels() and pass this data to a 2d canvas. :slight_smile:

1 Like