Forums » Code » WebGL handling of backingStoreRatio

Hi,

I recently made my WebGL engine work with Ejecta, well almost. I run into problems caused by internal handling of backingStoreRatio. I.e. When we have retina screen Ejecta doubles all the calls to gl.viewport or drawingBufferWidth. While this is convenient for people who don't know what's happening and use canvas.width and canvas.height for their code I run into problems with FBO where my viewport is too big. E.g.

//create FrameBuffer object with 1 backing texture as color target
var fbo = new FBO(512, 512);

function draw() {
  fbo.bind();
  gl.viewport(0, 0, 512, 512); //my viewport is 1024x1024!!!
  drawScene();
  fbo.unbind();

  //back to fullscreen viewport
  gl.viewport(0, 0, canvas.width, canvas.height);  
}

This is super confusing because now my code that is offscreen has to know about window stuff and i have to call

gl.viewport(0, 0, fbo.width/2, fbo.height/2);

I would rather do

gl.viewport(
  0, 0, 
  canvas.width * window.devicePixelRatio, 
  canvas.height * window.devicePixelRatio
);

My WebGL is still shaky, but if you&039;re normalizing the vertex shader, why not define a #uniform vec2 scale that can be set during init.

Something like this:

void main(){
    vec2 clipPos = worldPos / canvasRes * scale * 2 - 1;
    gl_Position = vec4(clipPos * vec2(1, -1) * scale, 0, 1);
}

Then to set scale:

var scale = window.devicePixelRatio > 1 ? 2 : 1;
var glScale = gl.getUniformLocation(program, 'scale');
gl.uniform2f(glScale, scale, scale);

You could set scale on-the-fly using the same gl.uniform2f wherever needed.