Computergrafik

Web GL Beispiel

← WebGL Shader Programs | ● | WebGL Shader 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>
[Get Code]

WebGL Beispiel
Web GL Dreieck

Siehe auch WebGL Tutorial von learningwebgl.com

← WebGL Shader Programs | ● | WebGL Shader Beispiel →

Options: