tiagosr/WebGL ex.01.html

## WebGL ex.01.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
	<title>Exemplo 01: Setup do WebGL</title>
	<script src="jquery-1.9.1.min.js"></script>
<script type="text/x-glsl-vertex" id="simple-vertex">
</script>
<script type="text/x-glsl-fragment" id="simple-fragment">
</script>
<script type="text/javascript">
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();
var setupGL = function(canvas) {
	// não dá pra inicializar contexto 2D e 3D no mesmo canvas
	gl = null;
	try {
		gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
		gl.viewportWidth = canvas.clientWidth;
		gl.viewportHeight = canvas.clientHeight;
	} catch (e) {}
	if (!gl) {
		alert("bzzzt! no support for webgl here.");
	}
}
var setup = function() {
	canvas = document.getElementById("gl");
	setupGL(canvas);
	gl.clearColor(0.0,0.0,0.0,1.0);
	gl.enable(gl.DEPTH_TEST);
	gl.depthFunc(gl.LEQUAL);
	gl.clearDepth(0.0);
	var resizefn = function(){
		console.log(""+canvas.clientWidth+", "+canvas.clientHeight);
		if ((canvas.width != canvas.clientWitdh) || (canvas.height != canvas.clientHeight)) {
			canvas.width = canvas.clientWidth;
			canvas.height = canvas.clientHeight;
		}
		gl.viewportWidth = canvas.clientWidth;
		gl.viewportHeight = canvas.clientHeight;
	}
	resizefn();
	$(window).resize(resizefn);
}
var render = function() {
	window.requestAnimFrame(render, canvas);
	gl.clear(gl.DEPTH_BUFFER_BIT|gl.COLOR_BUFFER_BIT);

}
$(function(){
	setup();
	render();
});
</script>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
canvas#gl {
	width: 100%;
	height: 100%;
}
</style>
</head>
<body>
<canvas id="gl"></canvas>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Exemplo 01: Setup do WebGL</title>
	<script src="jquery-1.9.1.min.js"></script>
	<script type="text/x-glsl-vertex" id="simple-vertex">
	</script>
	<script type="text/x-glsl-fragment" id="simple-fragment">
	</script>
	<script type="text/javascript">
	window.requestAnimFrame = (function(){
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function( callback ){
	window.setTimeout(callback, 1000 / 60);
	};
	})();
	var setupGL = function(canvas) {
	// não dá pra inicializar contexto 2D e 3D no mesmo canvas
	gl = null;
	try {
	gl = canvas.getContext("webgl") \|\| canvas.getContext("experimental-webgl");
	gl.viewportWidth = canvas.clientWidth;
	gl.viewportHeight = canvas.clientHeight;
	} catch (e) {}
	if (!gl) {
	alert("bzzzt! no support for webgl here.");
	}
	}
	var setup = function() {
	canvas = document.getElementById("gl");
	setupGL(canvas);
	gl.clearColor(0.0,0.0,0.0,1.0);
	gl.enable(gl.DEPTH_TEST);
	gl.depthFunc(gl.LEQUAL);
	gl.clearDepth(0.0);
	var resizefn = function(){
	console.log(""+canvas.clientWidth+", "+canvas.clientHeight);
	if ((canvas.width != canvas.clientWitdh) \|\| (canvas.height != canvas.clientHeight)) {
	canvas.width = canvas.clientWidth;
	canvas.height = canvas.clientHeight;
	}
	gl.viewportWidth = canvas.clientWidth;
	gl.viewportHeight = canvas.clientHeight;
	}
	resizefn();
	$(window).resize(resizefn);
	}
	var render = function() {
	window.requestAnimFrame(render, canvas);
	gl.clear(gl.DEPTH_BUFFER_BIT\|gl.COLOR_BUFFER_BIT);

	}
	$(function(){
	setup();
	render();
	});
	</script>
	<style type="text/css">
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	}
	canvas#gl {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<canvas id="gl"></canvas>
	</body>
	</html>