How can i save very large webgl snapshots?

[znw-test]

I have a picture in jpg format(9248 × 6936, 36.6MB). At first I tried to display it completely in webgl.

const VERTEX_SHADER = `
attribute vec2 a_position;
attribute vec2 a_texCoord;

varying vec2 vTexcoord;
void main() {
    gl_Position = vec4(a_position * vec2(1.0,-1.0), 0.0, 1.0);
    // pass the texCoord to the fragment shader
    // The GPU will interpolate this value between points.
    vTexcoord = a_texCoord;
}`
    const FRAGMENT_SHADER = `
uniform mediump sampler2D u_sourceTexture;
varying mediump vec2 vTexcoord;
void main() {
  gl_FragColor = texture2D(u_sourceTexture, vTexcoord);
}`

And set the width and height of the canvas to be the same as the width and height of the picture(9248 × 6936):

var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});
gl.canvas.width = image.width
gl.canvas.height = image.height

I used that image directly to create the texture:

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.FLOAT, image);

I set the position (-1.0, -1.0) ~ (1.0, 1.0), and texcoord (0.0, 0.0) to (1.0, 1.0)

var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
          -1.0, -1.0,
          1.0, -1.0,
          -1.0, 1.0,
          -1.0, 1.0,
          1.0, -1.0,
          1.0, 1.0
        ]), gl.STATIC_DRAW);

var texcoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        0.0, 0.0,
        1.0, 0.0,
        0.0, 1.0,
        0.0, 1.0,
        1.0, 0.0,
        1.0, 1.0,
      ]), gl.STATIC_DRAW);

If I set the viewport equal to the width and height of the image, only part of the texture will be displayed.
So finally set the viewport of webgl equal to drawingBufferWidth and drawingBufferHeight:

gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

Everything looks fine, the image fills the canvas, and the canvas has the same width and height as the image.
But something went wrong when I was about to save the image. Although the saved image has the same width and height as the original image, the real image only occupies a small part(looks like the drawingBufferWidth plus drawingBufferHeight), and the rest are black pixels.

var canvas = document.querySelector("#canvas");
  canvas.toBlob((blob) => {
    let a = document.createElement('a')
    a.download = 'tmp.jpg'
    let s = URL.createObjectURL(blob)
    a.href = s
    a.click()
    URL.revokeObjectURL(s)
  }, 'image/jpeg', 0.95)

Why does the texture fill up the canvas, but not when it is saved?

[greggman]

There are 3 limits to the size you can make.

1. The max size of a texture which is different on every device/OS/browser which you can query with gl.getParamater(gl.MAX_TEXTURE_SIZE)
2. The amount of memory you have. A 9248 × 6936 canvas would be at least 513meg because its 32bits per pixel (red, green, blue, alpha) and a canvas has 2 buffers, the buffer being displayed and the buffer being drawn to. So 9248 x 6936 x 4 x 2. But by default the canvas has a depth buffer so change that last 2 (for 2 buffers) to 3 (drawingbuffer, displaybuffer, depthbuffer). Then also by default the drawingbuffer is usually antialiased at 4x so it's really 9248 x 6936 x4 x(4+1+1) so you're asking for 1.5gig of memory
3. The amount of memory and size the browser limits you to. Some browsers limit the size of the canvas.

WebGL's spec says if you ask for a size that's too large it will try to allocate a smaller size. You can check the size you got by looking at gl.drawingBufferWidth and gl.drawingBufferHeight

As for actually displaying an image in WebGL you'll only have 9248x6936x4 (and for a moment maybe x3 since the image has to be decompressed, the copied to the GPU process, then uploaded to GPU memory. (that's 3 copies though 2 are temporary)

But, why are trying to load an image larger than the screen?
I don't have any easy solution for trying to display a 9248x6936 image.

As for generating large screenshots, you can use math to generate smaller screenshots and glue them together. See this

https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-render-large-scale-images-like-32000x32000.html

[znw-test]

Thank you for your answer.

My original idea was to use canvas to display a whole picture, and then use the transform property of css to adjust the canvas. Because I don't want to rewrite a set of methods to convert the coordinate relationship between texture and canvas.

So what will happen if I directly use a large image (9248 x 6936) as a texture and display it using the small canvas? Will it reduce the required memory?