Screenshot from babylonjs viewer

Questions
1

Hi, I’m having an issue regarding creating the screenshot of the scene from the babylonjs viewer.

I’m using babylonjs viewer besides with inspector. When I take the screenshot from the inspector it’s not giving me the model in the screenshot. What I get is blank png of 2,3 KB.

Also, I’m using this in my code to generate the screenshot of the scene in which my model is being shown. But , It’s also giving me 2-3 KB blank png.

if (viewer.sceneManager.scene.activeCamera) {
            Tools.CreateScreenshot(
              viewer.sceneManager.scene.getEngine(),
              viewer.sceneManager.scene.activeCamera,
              { width: 600, height: 400 },
              function (data) {
                window.open(data, "_blank");
              }
            );
          }

But I have no idea where I’m wrong in it. Because, besides code, inspector is also not picking up the screenshot of model (giving me blank png)

My Questions are

  1. How I can take screenshots of the scene from babylonjs viewer?
  2. Is there any compatibility issue between inspector and viewer in the matter of screenshot? (it’s a bug to me, because at least it should work)

@RaananW @Deltakosh

3

Hi, any help in this regard?

4

This has been assigned to @RaananW who is in vacation until the 4th of January. @Evgeni_Popov and myself will be alone from the core team until then on the forum so you might have a bit of delay with the answers.

5

Aaah ok. Now worry, I can wait for this. But this problem has to be solved, this is my concern on this :slight_smile:
Thank for your time :slight_smile:

6

No worries, it will be :slight_smile:

1 Like
7

Could you provide a repro?

I tried to reproduce it myself but it did work:

  • browse BabylonJS Viewer - Basic usage
  • switch to fullscreen by clicking on the appropriate button
  • type BabylonViewer.viewerManager._viewers["babylon-viewer"].sceneManager.scene.debugLayer.show() in the console to show the inspector
  • take the screenshot from the inspector => the screenshot is ok for me
8

Hi, I have created a repository for that , There is a link

I’m using (ES6) @babylonjs/viewer @babylonjs/core @babylonjs/inspector and so on…
2 buttons are there under babylon viewer

  1. ‘inspector’ to toggle the inspector
  2. ‘screenshot’ to take screenshot of the scene
    Note: if viewer will not showup, kindly reload the the page manually

Also, One thing that I want to mention here that only screenshot is not working here.
I have tried with RTT and it’s working

if (viewer.sceneManager.scene.activeCamera) {
            Tools.CreateScreenshotUsingRenderTarget(
              viewer.sceneManager.scene.getEngine(),
              viewer.sceneManager.scene.activeCamera,
              { width: 600, height: 400 }
            );
          }

Tools.CreateScreenshotUsingRenderTarget is working
Tools.CreateScreenshot is not working

9

I can’t see the two buttons you are describing and I have this error in the console:

image
image1312×150 4.84 KB

I can only see the standard 3 buttons of the viewer (Toggle HD/VR/Fullscreen).

10

Yeah, this is the issue with integration of babylonjs viewer and Vuejs. That’s why I mentioned to reload the page manually, if it’s not loaded

11

This error , I have mentioned earlier in this link

12

Ok, I think the buttons were there but I needed to scroll the page to see them.

As it is working in BabylonJS Viewer - Basic usage, I wonder if there’s something special that Vue is doing with the canvas…

Could you try using the latest version of Babylon (5.0)? We changed a bit how a screenshot is handled, and more precisely when it is done during the processing of a frame. Hopefully it could make it work…

1 Like
13

Thanks for your time… from where I can get Babylon (5.0), because it’s currently showing me 4.2.0 on npm

14

you can use @preview when you install from npm to get the latest preview version.

15

got it. I’m going to try and I’ll get back.

16

Can you let me know how to do it? because I’m not finding anything on it.
npm install --save @babylonjs/viewer
to
? to access the @preview

I know , it’s dumb but I don’t know how to do it :smiley:

17

npm install --save @babylonjs/viewer@preview

1 Like
18

I have just tested with 5.0 and it does work!

Note that you will need to upgrade all Babylon packages to 5.0, not only viewer.

19

I have tested via updating all packages to 5.0. But now, RTT is also not working .

20 
"dependencies": {
    "@babylonjs/core": "^5.0.0-alpha.5",
    "@babylonjs/inspector": "^5.0.0-alpha.5",
    "@babylonjs/loaders": "^5.0.0-alpha.5",
    "@babylonjs/serializers": "^5.0.0-alpha.5",
    "@babylonjs/viewer": "^5.0.0-alpha.5"
}