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; }