mulimoen/SummationByParts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add automatic resizing

Browse Source
This commit is contained in:
Magnus Ulimoen
2019-03-27 22:51:03 +01:00
parent 2c5f3cd282
commit f1018f6874
3 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -1,13 +1,15 @@
<!doctype html> <!doctype html>
<!--https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context--> <!--https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context-->
<html lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="">
<head> <head>
<title>WebGL test"</title> <meta charset="utf-8" />
<meta charset="utf-8"> <meta name="generator" content="by-hand" />
<meta name="viewpost" context="width=device-width, inital-scale=1.0, user-scalable=yes" />
<title>WebGL test</title>
</head> </head>
<body> <body>
<canvas id="glCanvas" width="640" height="480"></canvas> <canvas id="glCanvas"></canvas>
</body> </body>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="main.js"></script> <script src="main.js"></script>
</html> </html>

50
main.js
View File

@@ -1,7 +1,7 @@
main(); main();
function main() { function main() {
const canvas = document.querySelector("#glCanvas"); const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl"); const gl = canvas.getContext("webgl");
@@ -75,27 +75,41 @@ function main() {
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.clearColor(0.0, 0.0, 0.0, 1.0); function drawMe() {
gl.clearDepth(1.0); gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST); gl.clearDepth(1.0);
gl.depthFunc(gl.LEQUAL); 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; const offset = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); const vertexCount = 4;
gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, numComponents, type, normalise, stride, offset); gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPositions);
} }
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; gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
const vertexCount = 4; drawMe();
gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); }
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
} }

3
style.css Normal file
View File

@@ -0,0 +1,3 @@
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { display:block; }