Screenshot from babylonjs viewer

No worries, it will be :slight_smile:

1 Like

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

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

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

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

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

This error , I have mentioned earlier in this link

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

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

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

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

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:

npm install --save @babylonjs/viewer@preview

1 Like

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.

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

"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"
}

I have just tested, it does work for me using CreateScreenshotUsingRenderTarget.

CreateScreenshotUsingRenderTarget this one is also working for me with 4.2.0 (as I mentioned before) … But I wanted to check with CreateScreenshot that was not working. something is messing up that I can’t understand :smiley:

I’m not sure I understand…

With 5.0, both CreateScreenshotUsingRenderTarget and CreateScreenshot work for me.

It seems there’s something special going on with Vue that makes the screenshot blank in 4.2. In 5.0 we now create the screenshot right at the end of the frame and it seems it fixes the issue.

I have tried again by uninstalling and installing 5.0 again. But CreateScreenshotUsingRenderTarget and CreateScreenshot both does not work for me. I have now again on 4.2.0, CreateScreenshotUsingRenderTarget works for me only.

If there is issue with Vue in that sense than how it’s working with one version and is not working with another. That’s where I’m confused.

Also, video is working fine in both 4.2.0 and 5.0 … :v: