How to show a RenderTargetTexture on GUI?

In Unity3D, we can do it very easy, just call GUI.DrawTexture…

thank you.

Hello!
unfortunately this is not straight forward. the RTT is hold by the GPu for performance reason and GUI is driven by CPU and it requires DOM image to render.

So technically it should be possible to use the Tools.Screenshot feature to get an image (CPU wise) of the RTT but this seems a bit convoluted :).

What is your use case precisely?

Here’s a playground with a custom control (GUI.RenderTargetTextureImage) that extends GUI.Image:

https://www.babylonjs-playground.com/#5E96NN#2

TypeScript source

1 Like

there are two cameras in my scene, one for main presentation, another for monitor some object’s movement or actions.

for example, do you play WAR3?0001-498x360 the GUI in red region.

thank you ver much!

but it’s really slow, low fps and high cpu usage…

while the RenderTargetTexture created in that example, size is NOT very large.

Hi gang. This issue seems like it needs a viewport that can be positioned/sized via GUI measuring.

https://playground.babylonjs.com/#13TVWJ#28

No GUI there… just testing viewports. All freeCams in #28, but PG #29 uses an arcCam as over-laid viewport/cam6.

The camera6/viewport6 is laid atop the other 5 viewports. (main screen only looks-like 3 viewports, but it is actually 5. Blue lines are viewports, too)

Now, if we could live-position and live-set-size/live-scale viewport 6… AS IF it were a GUI image control (possibly within a GUI container/stackpanel/grid)… then that would work, yes? No renderTargetTexture used.

Just thinkin’ up strange ideas… not sure if useful. :slight_smile: GUI viewportControl, sort-of.

But viewports might not be “live” or “dynamic”. Early tests say YES, it IS size/position dynamic.

In theory, it SHOULD be able to “act” like a GUI control. Canvas/engine re-sizings COULD be trouble.

1 Like

YES It’s a new custom control:

https://www.babylonjs-playground.com/#HJ3PPU#1

TypeScript source

5 Likes

Gijs… WELL DONE! Cooooool. I haven’t yet earned my GuiControlBuilder’s certificate… but… is this new control… properly API-certified for being an “official” GUI Control? Does it meet all criteria for being a USDA-certified prime beef widget? Proper observers/notifies, etc?

Would .value be the viewport object, and onValueChanged is active? (I should just go inspect Giji’s control-code, eh? But, I’m not really qualified to determine if it is “proper” or not.)

If it is all proper… and GUI Control criteria is met… I say PR that puppy into Userville (if Gijs is willing). :slight_smile: Fun/useful control, perhaps.

Again, nice job, G-willickers! You GUI Control-makers are SUCH heroes of mine. Sigh. Someday, I’m going to be good enough to make one. WingyWidget 1.0. Doesn’t do anything useful, but it’s fun as hell to click-on. :smiley: My kind of control… an out-of-control control. :slight_smile:

1 Like

Oh no, it’s not certified at all, let me just…

THE CODE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

All those custom controls are flawed; they’re interfering with the scene/camera in one way or another, and they don’t behave like real controls… but they’re fun to click on :slight_smile:

To be continued…? :thinking:

1 Like

Hey, this is a “no indemnity disclaimer zone”. :smiley: If you’re going to talk like a lawyer, at least spit and cuss once in a while, eh? hah

1 Like

And another custom control (TextureImage):

https://www.babylonjs-playground.com/#KG6SGU#13

This one adds a dedicated post process to the scene that draws a texture to a green screen (the control). The texture is kept on the GPU side.

2 Likes

I broke my mouse… from bookmarking these playgrounds SO HARD! (droooool) You’re a God, G! Thx for the cool hackings!

1 Like

@Gijs -

If you want to speed up your scene and reduce GPU tasking, then you should be using power of 2 textures whenever you can. It’s far more efficient to avoid calling a very large non power of 2 image when you only need a small portion of the resolution. I mention this as I don’t know if you’re using power of 2 and designing your scene and texture prior to texture creation. If you are, then you’re way ahead of most devs on this forum. I just know that this needs to be spoken of more often as devs appear to always look for new tools; often ignoring good practices. Either way, I hope others look at adopting core practices necessary to scene and hardware optimization.

I know this doesn’t answer your question, but I’ve spent time on other topics recently which can be answered through scene and asset design. As for a RenderTargetTexture, what is your current need? It sounds as though you’re exploring right now which is awesome. We all should do this far more and not always wait until crunch time to explore functions, methods, and processes. It would help greatly if we could get a better understanding of your end goal. Just a general usage description would be helpful.

I see this all of the time… elements such as meshes and more importantly textures are created and applied without any though given to scene optimization in advance. I recommend using this scene as a benchmark to explore GPU and memory usage. I personally advise that you set up different configuration of your texture(s) and record your GPU and memory usage. Once you do this, you’ll have a much better understanding of texture optimization in WebGL.

It’s a HUGE deal and where many devs fall short. I always recommend designing your scene for your target hardware and software. It takes me back to game development for desktop and consoles where if we didn’t design our scenes prior to asset creation, we would never have released a single game. I would love to see a change in the community; where developers turn back to good practices in scene creation and rendering. The hardware is virtually the same with all of the same issues… but few devs are taking the lessons of the past into consideration. I simply don’t understand where the communication of this is lost. I know I bring it up as often as possible.

Galen

1 Like

actually, I solved my problem by creating two scene before I asked this question.
I think that’s not very elegant.
all I want is a strong solution that embed in BABYLON.GUI.

it’s cool. it will be cooler if this control could be a standard member class of BABYLON.GUI.
that means uniform and documentary.

1 Like

I also have the same problem with you, there is more than one camera in the same scene, in addition to the main camera’s other camera will grab the scene render elements in different renderTexture above, and each camera can separate operation, I want to know, I should how to do it, I have many don’t understand, now my effect is had, but my camera does not move, so I don’t know how can I next


We could use a repro in the playground to better understand your need:)

Hi guys. Sorry to interrupt.

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

See line 19/20 for objectives… which MIGHT help ranwei-001.

Wingy having problems setting WASD keys sensitivities… AND…

Having problems making 4 RTT’s move… when main camera moves (trying to “gang” the 4 RTT cam.inputs… to main camera.inputs)

Also, I am worried about lines 26/27… where camera.speed and camera.wheelPrecision… seem to do the same thing… affect mousewheel ONLY. Weird. Maybe normal. Where is BJS For Kids? I need that. :slight_smile:

Any, maybe ranwei-001 can explain better… what he/she wants to do, if possible.

Update: https://www.babylonjs-playground.com/#1WROZH#77 Line 22 - camera.inputs.attached.keyboard.angularSpeed … seems to work for WASD keys sensitivity.

1 Like

I tried your code in my example, there is still one problem. The corner of the viewport is still out of the bound for gui control.

cc @carolhmj but I doubt the code would work here