From f1018f687451791600b148916ac744f4277826e1 Mon Sep 17 00:00:00 2001 From: Magnus Ulimoen Date: Wed, 27 Mar 2019 22:51:03 +0100 Subject: [PATCH] add automatic resizing --- index.html | 12 +++++++----- main.js | 50 ++++++++++++++++++++++++++++++++------------------ style.css | 3 +++ 3 files changed, 42 insertions(+), 23 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index e0d8255..fd07c24 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,15 @@ - + - WebGL test" - + + + + WebGL test - + - + diff --git a/main.js b/main.js index f850bcc..5451e13 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,7 @@ main(); function main() { - const canvas = document.querySelector("#glCanvas"); + const canvas = document.getElementById("glCanvas"); const gl = canvas.getContext("webgl"); @@ -75,27 +75,41 @@ function main() { gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); - gl.clearColor(0.0, 0.0, 0.0, 1.0); - gl.clearDepth(1.0); - gl.enable(gl.DEPTH_TEST); - gl.depthFunc(gl.LEQUAL); + function drawMe() { + gl.clearColor(0.0, 0.0, 0.0, 1.0); + gl.clearDepth(1.0); + gl.enable(gl.DEPTH_TEST); + gl.depthFunc(gl.LEQUAL); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + + { // Binding vertices + const numComponents = 2; + const type = gl.FLOAT; + const normalise = false; + const stride = 0; + const offset = 0; + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, numComponents, type, normalise, stride, offset); + gl.enableVertexAttribArray(programInfo.attribLocations.vertexPositions); + } + + gl.useProgram(programInfo.program); - { // Binding vertices - const numComponents = 2; - const type = gl.FLOAT; - const normalise = false; - const stride = 0; const offset = 0; - gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); - gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, numComponents, type, normalise, stride, offset); - gl.enableVertexAttribArray(programInfo.attribLocations.vertexPositions); + const vertexCount = 4; + gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); } - gl.useProgram(programInfo.program); + // https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport#8486324 + function resizeCanvas() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; - const offset = 0; - const vertexCount = 4; - gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); + gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); + drawMe(); + } + + window.addEventListener('resize', resizeCanvas, false); + resizeCanvas(); } diff --git a/style.css b/style.css new file mode 100644 index 0000000..ff5a90e --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +* { margin:0; padding:0; } +html, body { width:100%; height:100%; } +canvas { display:block; }