Is it possible to use create a screenshot using render target along with capturing FullscreenUI?

Questions
1

(Sorry for the long title, discourse was giving me issues with using just the function names).
Here is the playground: Babylon.js Playground

It looks like the standard CreateScreenShot function works for capturing the FullScreen UI, however using a render target does not. Perhaps I am missing something, but it would be nice to be able to use the anti-aliasing along with a few of the other options.

2

Unfortunately the GUI does not render into rendertarget unless you use GUI for meshes and not for fullscreen :frowning:

3

Okay, that makes sense.

The CreateScreenShot function seems to produce pretty poor results for me, regardless of the image size. Is there a better way to produce an image of what is actually shown to the user?

Also, as a side note, is it possible to use the DynamicTextures for Meshes to create a text that maintains its size (like the 2D UI)?

4

You can create a GUI for mesh, then make that mesh a child of the camera so it will always stays still.

CreateScreenShot is dumping the content of the canvas so it should produce pretty accurate rendering. Can you repro your issue in the playground?

5

Sorry to bring this back up, but I have started looking at this again.
Now that I know UsingRenderTarget is better in regards to quality, I am now trying to get it to function with my gui elements.

I have taken your suggestion for adding the elements to a plane, however, I am struggling to get a close representation of the plane with gui material vs just the gui.

https://www.babylonjs-playground.com/#NFIVHM#4

I found this post Make a Perfect Plane to Fit Frustum - Questions & Answers - HTML5 Game Devs Forum but it’s not a perfect solution.

Any ideas on how to get this closer?

Thanks

6

On my phone but here is a suggestion:
Why not using a Layer for that?

example: https://www.babylonjs-playground.com/#08A2BS#12

(this one is background but you can make it foreground)

7

It doesn’t look like layers are captured with CreateScreenshotUsingRenderTarget, unless I am missing something.

8

Rats! you are right :frowning:
Well this is where the Node Material could be super useful :slight_smile: You could create a vertex shader that will generate the quad in screen space directly

9

You wouldn’t happen to have a simple example that does that in a playground would you?

I watched the youtube video you just put out today, but since I am creating the gui on the fly, I am unsure how I will be able to convert it to a shader.

10

On my phone right now but you could also think about doing a shadermaterial with the following vertex shader:

11

I think I am semi-close. I couldn’t get the shader material to work, so I attempted to recreate it in the nme.

Babylon.js Node Material Editor Some work needs to be done as I think the image is upside down and rotated wrong, but this shader stuff is new to me.

Anyways, I generated the code and copy-pasted into here, but am getting an error.

Unable to compile because Build of NodeMaterial failed: input right from block Multiply[MultiplyBlock] is not connected and is not optional.

Odd, because both inputs are declared.

12

Nope I do not see the right input connected:

    var Multiply1 = new BABYLON.MultiplyBlock("Multiply1");
    Texture.rgba.connectTo(Multiply1.left);

    var fragmentOutput = new BABYLON.FragmentOutputBlock("fragmentOutput");
    Multiply1.output.connectTo(fragmentOutput.rgba);
    nodeMaterial.addOutputNode(vertexOutput);
    nodeMaterial.addOutputNode(fragmentOutput);

multiply1 is only connected for left but not right

13

image

14

So oddly, I cannot open that nme link now, since it is failing.

15

yes I saw it…a fix is on its way
In the meantime open jsut nme.babylonjs.com and when opened add the tag

16

Okay perfect. That seems to work just by removing the multiply. The NME is pretty neat, glad you pushed me to look more into it. Great work!

17

I appreciate that you like it :slight_smile:

18

Okay, I think I am almost there, I just need to go from GUI.AdvancedDynamicTexture to BABYLON.Texture. https://www.babylonjs-playground.com/#NFIVHM#6

I am not sure how to get either a valid url or the base64/ArrayBuffer of the AdvancedDynamicTexture.

Any ideas?

19

What do you need here? you can use the adt like a regular texture

20

I am trying to add all of my gui elements to an texture, that is then used in the shader program, so that when calling UsingRenderTarget, my gui elements will also be displayed.