Skip to content

Instantly share code, notes, and snippets.

@hajimehoshi

hajimehoshi/index.html

Created February 15, 2015 12:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hajimehoshi/a196269774cf3c4e6490 to your computer and use it in GitHub Desktop.
Save hajimehoshi/a196269774cf3c4e6490 to your computer and use it in GitHub Desktop.
Download ZIP
Simplest WebGL example
Raw
index.html
<!DOCTYPE html>
<style>
html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
}
</style>
<script>
function getNow() {
return performance.now();
}
function loop(f) {
var l = function() {
f();
requestAnimationFrame(l);
}
l();
}
var frames = 0;
var before= 0;
function update() {
frames++;
var canvas = document.getElementById('canvas');
var gl = canvas.getContext("webgl");
gl.clearColor(0.5, 0.5, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var now = getNow();
if (1000 <= now - before) {
var fps = (frames * 1000) / (now - before)
before = now;
frames = 0;
console.log(fps);
}
}
function main() {
before = getNow()
loop(update);
}
window.onload = main;
</script>
<canvas id="canvas"></canvas>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment