Screenshot of the scene is transparent and doesnt show the scene

Questions
1

I am taking a screenshot of the scene and I want to display that screenshot on another page by having it in localStorage.
Every screenshot that I take is nothing but transparent. Here is the code.

  useEffect(() => {
    const { current: canvas } = reactCanvas;

    if (!canvas) return;

    const engine = new Engine(
      canvas,
      antialias,
      engineOptions,
      adaptToDeviceRatio,
      { preserveDrawingBuffer: true, stencil: true }
    );
    const scene = new Scene(engine, sceneOptions);
    if (scene.isReady()) {
      onSceneReady(scene);
    } else {
      scene.onReadyObservable.addOnce((scene) => onSceneReady(scene));
    }

    scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

    engine.runRenderLoop(() => {
      if (typeof onRender === 'function') onRender(scene);
      scene.render();
    });

    const resize = () => {
      scene.getEngine().resize();
    };

    setTimeout(() => {
      const camera = scene.cameras[0];
      BABYLON.Tools.CreateScreenshot(
        engine,
        camera,
        { width: 1024, height: 300 },
        function (data) {
          console.log(data);
          window.localStorage.setItem('productImage', data);
        }
      );
    }, 2000);

    if (window) {
      window.addEventListener('resize', resize);
    }

    return () => {
      scene.getEngine().dispose();

      if (window) {
        window.removeEventListener('resize', resize);
      }
    };
  }, [
    antialias,
    engineOptions,
    adaptToDeviceRatio,
    sceneOptions,
    onRender,
  ]);

1
11873×917 48.7 KB

or
2
21395×801 74.7 KB

I use time out to wait for the scene to be rendered and then to take a screenshot.

2

Hi again @babyloner!

Try using:

BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, scene.activeCamera, {width:1024, height:300}, undefined, "image/jpeg", 16, true, undefined);
1 Like
3

That worked, but the image was downloaded, I need the url of the image, so I can store it in a storage.

4

So return “data” with a function:

Example:

BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, {width:1024, height:300}, function (data) {
    var mat = new BABYLON.StandardMaterial("mat", scene);
    mat.diffuseTexture = new BABYLON.Texture(data, scene);
    ground.material = mat;
});

Also check the documentation:

And check that you do not exceed 10Mb in your LocalStorage

1 Like
5

I got it. I have the image. Thanks you.

But now I have this error after taking a screenshot:
Cannot read properties of null (reading ‘getScene’)

on this line:
BABYLON.Tools.CreateScreenshotUsingRenderTarget(

6

Try setting your Scene as a Global Variable.

Also check all the parameters you can use:

BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, scene.activeCamera, {width:1024, height:300}, function (data) {
    var mat = new BABYLON.StandardMaterial("mat", scene);
    mat.diffuseTexture = new BABYLON.Texture(data, scene);
    ground.material = mat;
}, "image/png", 8, true, null);

Captura de pantalla (51)
Captura de pantalla (51)796×246 17.7 KB

2 Likes
7

Thanks you, I did it.