webgl_rendering.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body onload="start()">
    <canvas id="glcanvas" width="640" height="480">
    Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
    </canvas>

    <script type="text/javascript">
      // code from https://developer.mozilla.org/ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL


      var gl; // A global variable for the WebGL context

      function start() {
        var canvas = document.getElementById("glcanvas");

        gl = initWebGL(canvas);      // Initialize the GL context

        // Only continue if WebGL is available and working

        if (gl) {
          gl.clearColor(0.4, 0.4, 0.4, 1.0);                      // Set clear color to black, fully opaque
          gl.enable(gl.DEPTH_TEST);                               // Enable depth testing
          gl.depthFunc(gl.LEQUAL);                                // Near things obscure far things
          gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Clear the color as well as the depth buffer.
        }
      }


      function initWebGL(canvas) {
        gl = null;

        try {
          // Try to grab the standard context. If it fails, fallback to experimental.
          gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        }
        catch(e) {}

        // If we don't have a GL context, give up now
        if (!gl) {
          alert("Unable to initialize WebGL. Your browser may not support it.");
          gl = null;
        }


        // css의 width, height 속성 webgl의 해상도에 영향을 미치지 않는다.
        // 아래의 코드로 webgl 컨텍스트의 해상도를 수정할 수 있다.
        // gl.viewport(0, 0, canvas.width, canvas.height);

        return gl;
      }


    </script>
  </body>
</html>