How to use renderTargetTexture in GUI?

I can’t find an example that displays a renderTargetTexture as a 2D element. The closest thing I’ve found is this playground https://www.babylonjs-playground.com/#5RGDQ#13 where someone was creating Canvas2D sprites using renderTargetTextures. However, this stopped working since Canvas2D changed into GUI. Is this still possible?

:slight_smile: You wish. Me too.

I’ve been hinting-at and begging-for GUI renderTargetTextureControl or imageControl.isRenderTargetTexture… for over a year. I think everyone is scared of that.

Badly explained: GUI is DOM-ish. DOM has a security sandbox around its IMAGE and imageBuffer, etc… put there because-of some hacker. I THINK… this keeps renderTargetTexture from being allowed to “play” in GUI land. Possibly BJS dynamicTextures, too.

Not sure, though. Stay tuned for wiser replies.

The contexts 2d and 3d are unfortunately not shared so we can not feed a webgltexture into a 2d context image.

That said, I bet we can help with to end goal:

  • if it does not refresh often you can save the rendertarget result to image data to feed the gui
  • we can create a layer displaying the rtt under the gui (if squared)
  • else we can find some other ways :slight_smile:

Can you let us know a bit more about the final goal ?

1 Like

I’m creating a mini-map for the top-left corner of the screen. Its using a rendertexture and projecting it onto a plane. I then want to figure out the position of the players by projecting their 3D position from the minimap camera to 2D coordinates. Its too complicated to convert those 2D coords into a different viewport which is the plane, so I’m thinking of using a 2D canvas to hold the minimap, instead of the plane.

1 Like

Just an idea, could you not replace the player by a emissive red box in the render target texture only so that you do not need any projection. it would just show in the map ?

I did think about that. I could have an emissive red box and use a layermask so it doesn’t show up on the main camera. I’d need it to always be on top though. I’m not sure how to do that. For example, if a player walks into a building I’d still need the red box to show through the building

You could use a second rendering group to be sure it is always drawn on top :slight_smile:

oh cool! That’s exactly what I need. Thanks for the tip @sebavan

1 Like

Actually if not real time you can copy the output of a render target to the gui:

https://www.babylonjs-playground.com/debug.html#7EPK2H#19

@Wingnut will love this one.

1 Like

Phew, Bavs… that is WAY out there, techno-wise. WOW! Very cool… but I got a little tumor while studying the code. Still, I bookmarked it so hard that I broke my mouse. :slight_smile: Some kind of odd “stripes” in that PG. Interesting!

Thanks! You’re just amazing. Were your grandparents and parents… coders? heh. (Wingnut opens Sebavan’s head and tries to clone his brain, but he’s got the “leave my brain alone” flag set true.)

But, you know me, I’m never happy. :slight_smile:

https://www.babylonjs-playground.com/#1WROZH#67

I need 4 GUI rectangles/images on the bottom, there. In fact, if I’m Chief of Security (in a game like Murder at Midnight, for example), I might need to monitor 20 cameras. hmm. (thinkin’) (scary) :slight_smile:

I’m wondering if the glows/highlights can be included in the RTT’s, too. I thought I once had a version of that PG that DID include the post-processes (and thus also include particles), but I lost it somewhere.

30 years, Bavs. In 30 years, I’ll be “caught up” with your current intelligence. :slight_smile: I’ll be 91 years old, then.

1 Like

Unfortunately this is real time and will be deadly expensive to share the image accross contexts.

2 Likes

Yeah… thx for verifying that.

                scene.postProcessManager.directRender([postProcess], internalTexture);

                BABYLON.Tools.DumpFramebuffer(width, height, engine, (url) => {
                    cb(url);
                });

That’s where the context-crossing happens… me thinks. Cool cb (callback) learning in this PG, too… I’ve been staring at the code for an hour, now. Just getting started. You core-grade guys are SUCH heroes of mine.
(sigh). I’m SO honored to get to hang-out here. FUN!

2 Likes

wait :slight_smile:

3 Likes

Uh oh! Mad scientist Naz is inventing something crazy. Shutter the windows and hide the kids/pets… prepare for tornado. hehe

2 Likes

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

5 Likes

WOW!
That is really cool

Very cool! I think @nasimiasl should move to Melbourne :wink:

2 Likes

The boxes in the scene minimap have no color, which is not as expected. Is there any other way to solve this problem
about:
nasimiaslJedi master

Dec '18

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

It is expected because there’s a specific material which is used for the minimap.

The PG is quite old, we now have a better (more performant) way to use a different material in a render target texture (rtt.setMaterialForRendering):

If you want to use the real material of the crate in the minimap, you can comment line 47.

1 Like