# Screenshot of the scene is transparent and doesnt show the scene

**URL:** <https://forum.babylonjs.com/t/screenshot-of-the-scene-is-transparent-and-doesnt-show-the-scene/41004>\
**Category:** Questions\
**Created:** [May 21, 2023, 10:41am UTC](https://forum.babylonjs.com/t/screenshot-of-the-scene-is-transparent-and-doesnt-show-the-scene/41004 "2023-05-21T10:41:39Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![babyloner](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/babyloner/32/31655_2.png) [@babyloner](https://forum.babylonjs.com/u/babyloner)\
**Post date:** [May 21, 2023, 10:41am UTC](https://forum.babylonjs.com/t/screenshot-of-the-scene-is-transparent-and-doesnt-show-the-scene/41004/1 "2023-05-21T10:41:39Z")

</div>

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.

```auto
  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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/a/aab8125ea6a9933c0d13795e678f86ade1cb3f3c.png)  
or  
 ![2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/5/1586f14379be0c12796b9157edb4a83c294abc30.png)  
I use time out to wait for the scene to be rendered and then to take a screenshot.

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [May 21, 2023, 10:45am UTC](https://forum.babylonjs.com/t/screenshot-of-the-scene-is-transparent-and-doesnt-show-the-scene/41004/2 "2023-05-21T10:45:03Z")

</div>

Hi again @babyloner!

Try using:

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

```

---

<div class="post-metadata">

**Author:** ![babyloner](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/babyloner/32/31655_2.png) [@babyloner](https://forum.babylonjs.com/u/babyloner)\
**Post date:** [May 21, 2023, 10:50am UTC](https://forum.babylonjs.com/t/screenshot-of-the-scene-is-transparent-and-doesnt-show-the-scene/41004/3 "2023-05-21T10:50:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [May 21, 2023, 10:59am UTC](https://forum.babylonjs.com/t/screenshot-of-the-scene-is-transparent-and-doesnt-show-the-scene/41004/4 "2023-05-21T10:59:12Z")

</div>

So return “data” with a function:

> **[Babylon.js Playground](https://playground.babylonjs.com/#23K580)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Example:

```auto
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:

> **[Render Scenes To .png Files | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/scene/renderToPNG)**
>
> Learn how to render scenes to .png files.

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

---

<div class="post-metadata">

**Author:** ![babyloner](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/babyloner/32/31655_2.png) [@babyloner](https://forum.babylonjs.com/u/babyloner)\
**Post date:** [May 21, 2023, 11:10am UTC](https://forum.babylonjs.com/t/screenshot-of-the-scene-is-transparent-and-doesnt-show-the-scene/41004/5 "2023-05-21T11:10:33Z")

</div>

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(

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [May 21, 2023, 11:14am UTC](https://forum.babylonjs.com/t/screenshot-of-the-scene-is-transparent-and-doesnt-show-the-scene/41004/6 "2023-05-21T11:14:13Z")

</div>

Try setting your Scene as a Global Variable.

Also check all the parameters you can use:

```auto
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)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/4/a4f562315540a1ef6fc4f9cc80dc9e2a2e1456eb.png)

---

<div class="post-metadata">

**Author:** ![babyloner](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/babyloner/32/31655_2.png) [@babyloner](https://forum.babylonjs.com/u/babyloner)\
**Post date:** [May 21, 2023, 11:23am UTC](https://forum.babylonjs.com/t/screenshot-of-the-scene-is-transparent-and-doesnt-show-the-scene/41004/7 "2023-05-21T11:23:27Z")

</div>

Thanks you, I did it.