Screenshot of a plane is showing dark

Questions
1

Hi guys I’ve tried to take a screenshot of the canvas, but the plane is getting dark grey color in sceenshot, the plane’s background color is set a white but while taking screenshot, the image i’m getting as a dark grey plane

This is the screenshot taken by using canvas.toDataURL() function

screenshot
screenshot2304×1131 58.1 KB

This is manual screenshot taken in my computer

Screenshot (867)
Screenshot (867)1920×1080 114 KB

Can anyone help me on this?

2

Not sure if it’s a matter of compression - but these are two nearly-identical screenshots, the only difference is some aliasing on the inner ring and the resolution :eyes:

3

Hey , Thanks for the reply, while uploading in this website the plane got transparent

now i’ve attached the screenshot from my system.

Screenshot (868)
Screenshot (868)1920×1080 97.2 KB

is this any issue while converting to data uri ?

4

Could you share the code you use to render each frame (just the renderer part) and the code used to capture a screenshot from the canvas? (Looks like some outputEncoding difference, but if you’re capturing the image from the same canvas as three uses - the output should theoretically be exactly the same.)

5

Hi, sorry for the late response gone out of town for a while. here’s the code

// render
this._renderer = new THREE.WebGLRenderer({
canvas: params.canvas,
antialias: true,
alpha: true,
premultipliedAlpha: false,
preserveDrawingBuffer: true,
});

  this._renderer.setSize(
     params.canvas.clientWidth,
     params.canvas.clientHeight
  );
  this._renderer.toneMapping = THREE.NoToneMapping;
  this._renderer.toneMappingExposure = 1;
  this._renderer.outputEncoding = THREE.LinearEncoding;
  this._renderer.shadowMap.enabled = true;
  this._renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  this._composer = new EffectComposer(this._renderer);
  this._composer.render();

//mesh

// ground

  this.mesh = new Mesh(
     new PlaneGeometry(3, 3),
     new MeshPhongMaterial({
        color: 0x999999,
        depthWrite: false,
     })
  );
  this.mesh.rotation.x = -Math.PI / 2;

  this.mesh.receiveShadow = true;      

  this.mesh.position.y = -0.017;

  this.mesh.material.opacity = 0.4;

  this.meshHolder = new Group();
  this.meshHolder.add(this.mesh);

  this._scene.add(this.meshHolder);

//screenshot

this.renderer.domElement.toDataURL(“image/png”)