<html>
|
|
<head>
|
|
<script type="text/javascript">
|
|
var gl; // Un variable global para el contexto WebGL
|
|
|
|
function start() {
|
|
var canvas = document.getElementById("glcanvas");
|
|
|
|
gl = initWebGL(canvas); // Inicializar el contexto GL
|
|
|
|
// Solo continuar si WebGL esta disponible y trabajando
|
|
|
|
if (gl) {
|
|
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Establecer el color base en negro, totalmente opaco
|
|
gl.enable(gl.DEPTH_TEST); // Habilitar prueba de profundidad
|
|
gl.depthFunc(gl.LEQUAL); // Objetos cercanos opacan objetos lejanos
|
|
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Limpiar el buffer de color asi como el de profundidad
|
|
}
|
|
}
|
|
|
|
function initWebGL(canvas) {
|
|
gl = null;
|
|
|
|
try {
|
|
// Tratar de tomar el contexto estandar. Si falla, retornar al experimental.
|
|
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
|
|
}
|
|
catch(e) {}
|
|
|
|
// Si no tenemos ningun contexto GL, date por vencido ahora
|
|
if (!gl) {
|
|
alert("Imposible inicializar WebGL. Tu navegador puede no soportarlo.");
|
|
gl = null;
|
|
}
|
|
|
|
return gl;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="start()">
|
|
<canvas id="glcanvas" width="640" height="480">
|
|
Tu navegador parece no soportar el elemento HTML5 <code><canvas></code>.
|
|
</canvas>
|
|
</body>
|
|
</html>
|