[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] HI-DPI displays and WebGL issues

I think there's a good argument to be made that WebGL canvas never have it's backing store size auto-adjusted by the browser. If you want an HD-DPI display you should have to opt into it or set a backing store larger than the CSS size.


Because this should just work right now 

var canvas = document.getElementById("canvas");
canvas.width = 640;
canvas.height = 480;
var gl = canvas.getContext("2d", {antiAlias: false});
gl.viewport(0, 0, 640, 480);

But, If the browser doubles the size of the backing store you'll get a really messed up and clipped rendering.

Continuing with this example, if I do this

// create a framebuffer the same size as the canvas.
var fb = gl.createFramebuffer();
var tex = gl.createTexture();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 640, 480, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);

var fboPixels = new Unit8Array(640*480*4);
gl.readPixels(0, 0, 640, 480, gl.RGBA, gl.UNSIGNED_BYTE, fboPixels);

gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
var backbufferPixels = new Unit8Array(640*480*4);
gl.readPixels(0, 0, 640, 480, gl.RGBA, gl.UNSIGNED_BYTE, backbufferPixels);

the contents of backbufferPixels should equal the contents of fboPixels but if the browser is magically making the backbuffer a different size then you're gonna have a bad time