WebGL maximum resolution? gl.readPixels returning empty pixels

Question

I'm using headless-gl together with node to render a high-res generated WebGL image on the server-side. This works fine depending on the chosen resolution.

'use strict';

const Gl = require('gl');
const width   = 7200;
const height  = 10800;

// Setup renderer using headless-gl
const gl = Gl(width, height, { preserveDrawingBuffer: true })

// Clear screen to red
gl.clearColor(1, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)

// Get pixels
const pixels = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

// Is first color indeed red?
if (pixels[0] === 255) {
   console.log('OK'); 
}

process.exit();

After some point of increasing the width/height values the pixels array is filled with only zero values for the rgba pixels. I'm guessing that I'm hitting a memory/buffer limit somewhere but I'm not sure which one. According to nvidia-smi the GPU memory (12GB) is nowhere near depletion when running this.

What is the theoretical maximum resolution for webgl and what is it dependent on?

You might want to also check for errors by calling gl.getError() — gman

Stefan Dragnev Stefan Dragnev · Accepted Answer · 2017-01-18T16:08:25

There is a maximum viewport size, that is independent of the amount of GPU memory.

You can see the limits using gl.getParameter:

console.log(gl.getParameter(gl.MAX_VIEWPORT_DIMS))
console.log(gl.getParameter(gl.MAX_RENDERBUFFER_SIZE))

My guess is that you're hitting the MAX_VIEWPORT_DIMS limitation.

WebGL maximum resolution? gl.readPixels returning empty pixels

1 Answers