Question

I’ve made my webGL content fill the browser window using:

css:

canvas
  {
    float: left;
    width: 100%;
    height: 100%;
  }

And also:

function webGLStart() {
    var canvas = document.getElementById("cool3D");
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    ...

So far, this is effective for maintaining full coverage, no matterthe size of the window or fullscreen. The problem is assigning the aspect ratio of the camera to avoid distortion.

How can I set it to ~”window.innerWidth/window.innerHeight”? OnWindowResize?

Answer 1

This doesn’t have anything to do with the viewport. It’s actually a function of the perspective matrix. Your code will vary, but in my own every time I detect that the window is resized I do the following:

mat4.perspective(45.0, canvas.width/canvas.height, znear, zfar, projectionMat);

Which updates my projection matrix to use the appropriate aspect ratio (width/height).