Computergrafik
Web GL Beispiel
WebGL Befehle sind den OpenGL Befehlen nachempfunden.
Siehe auch WebGL Quick Reference Card.
Die WebGL-Befehle werden als Javascript-Code in ein HTML Dokument eingebettet. Die Darstellung des Zeichenbereichs geschieht mittels eines HTML-5 Canvas Elements.
HTML-5 Canvas:
<html> <body onload="webGLStart();"> <canvas id="webgl-canvas" width="500" height="500"> </canvas> </body> </html>
Eingebetteter Javascipt-Code:
<script type="text/javascript">
var gl;
function drawScene()
{
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
function webGLStart()
{
var canvas = document.getElementById("webgl-canvas");
try
{
gl = canvas.getContext("experimental-webgl");
}
catch (e)
{
alert("Your browser does not support WebGL!");
}
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
gl.enable(gl.DEPTH_TEST);
drawScene();
}
</script>
var gl;
function drawScene()
{
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
function webGLStart()
{
var canvas = document.getElementById("webgl-canvas");
try
{
gl = canvas.getContext("experimental-webgl");
}
catch (e)
{
alert("Your browser does not support WebGL!");
}
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
gl.enable(gl.DEPTH_TEST);
drawScene();
}
</script>
Siehe auch WebGL Tutorial von learningwebgl.com