Question about screenshot and model

CesiumJS
20

Some details may be too specific for me to analyze them in all depth (and as I said: there are many “dimensions” along which this problem might have to be investigated).

My gut feeling was that it might be related to the fact that this (large) canvas has a GL context in the background (maybe you saw some debug output like const w = viewer.scene.context._gl.drawingBufferWidth; in the sandcastle). But just to rule out that it is a fundamental problem with that, I just created this example: It is a standalone HTML file with a script that draws some random WebGL stuff, and has a ‘save’ link at the bottom.

The size of the canvas can be changed, e.g. from 500x500 to 10000x10000, and it still works. So there might indeed be something unexpected be going on in CesiumJS…

<html>
  <body>
    <canvas width=500 height=500 id="c"></canvas><br />
    <script>

'use strict';
const canvas = document.querySelector('#c')
const width = canvas.width;
const height = canvas.height;

function draw2D(){
	const c = canvas.getContext('2d');
	c.fillStyle = "red";
	c.beginPath();
	c.arc( 150, 150, 50, 0, Math.PI*2, true );
	c.closePath();
	c.fill();
}

function drawRect(gl, x, y, width, height, color) {
  gl.scissor(x, y, width, height);
  gl.clearColor(...color);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

function rand(min, max) {
  if (max === undefined) {
    max = min;
    min = 0;
  }
  return Math.random() * (max - min) + min;
}

function drawGL() {
	const gl = canvas.getContext('webgl', {
	  preserveDrawingBuffer: true
	});
	gl.viewport(0,0,width,height);
	gl.enable(gl.SCISSOR_TEST);
	for (let i = 0; i < 100; ++i) {
	  const x = rand(0, width);
	  const y = rand(0, height);
	  const w = rand(0, width - x);
	  const h = rand(0, width - y);
	  drawRect(gl, x, y, w, h, [rand(1), rand(1), rand(1), 1]);
	}
}

drawGL();
//draw2D();

function save() {
    canvas.toBlob(function(blob) {
      const a = document.createElement('a');
      a.download = "Image.jpg";
      a.href = URL.createObjectURL(blob);
      a.click();
      a.remove();
      URL.revokeObjectURL(blob);
    }, "image/jpeg", 0.95);
}

const link = document.createElement('a');
link.innerHTML = 'save';
link.addEventListener('click', save, false);
document.body.appendChild(link);

    </script>
  </body>
</html>