WebGL Canvas Resizer
Resizes WebGL Canvas when the window dimensions change or automatically based on an interval.
HTML
<canvas>Your browser does not support HTML5 canvas.</canvas>
CSS
* { margin:0; padding:0; }
html, body { width: 100%; height: 100%; }
canvas { display: block; }
JavaScript
var _canvas;
var _gl;
var _buffer;
var _shaderProgram;
var _coordinatesVar;
var _widths = [768, 1024];
var _heights = [1024, 768];
var _dimIndex = 0;
var _resizeStartTime = undefined;
function _setupScene() {
_canvas = document.getElementsByTagName("canvas")[0];
_gl = _canvas.getContext("webgl") || _canvas.getContext("experimental-webgl");
if (!_gl)
throw new Error("Cannot create WebGL context!");
var vertices = [
-0.5, 0.5,
-0.5, -0.5,
0.5, -0.5,
0.5, -0.5,
-0.5, 0.5,
0.5, 0.5,
];
_buffer = _gl.createBuffer();
_gl.bindBuffer(_gl.ARRAY_BUFFER, _buffer);
_gl.bufferData(_gl.ARRAY_BUFFER, new Float32Array(vertices), _gl.STATIC_DRAW);
var vertCode =
'attribute vec2 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates, 0.0, 1.0);' +
'}';
var vertShader = _gl.createShader(_gl.VERTEX_SHADER);
_gl.shaderSource(vertShader, vertCode);
_gl.compileShader(vertShader);
if (!_gl.getShaderParameter(vertShader, _gl.COMPILE_STATUS))
throw new Error(_gl.getShaderInfoLog(vertShader));
var fragCode =
'void main(void) {' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' +
'}';
var fragShader = _gl.createShader(_gl.FRAGMENT_SHADER);
_gl.shaderSource(fragShader, fragCode);
_gl.compileShader(fragShader);
if (!_gl.getShaderParameter(fragShader, _gl.COMPILE_STATUS))
throw new Error(_gl.getShaderInfoLog(fragShader));
_shaderProgram = _gl.createProgram();
_gl.attachShader(_shaderProgram, vertShader);
_gl.attachShader(_shaderProgram, fragShader);
_gl.linkProgram(_shaderProgram);
if (!_gl.getProgramParameter(_shaderProgram, _gl.LINK_STATUS))
throw new Error(_gl.getProgramInfoLog(_shaderProgram));
_gl.useProgram(_shaderProgram);
_coordinatesVar = _gl.getAttribLocation(_shaderProgram, "coordinates");
_gl.enableVertexAttribArray(_coordinatesVar);
_gl.bindBuffer(_gl.ARRAY_BUFFER, _buffer);
_gl.vertexAttribPointer(_coordinatesVar, 2, _gl.FLOAT,...