OpenGL知っている所からWebGL入門(1) – 画面クリア

2019年11月1日公開
2020年9月18日更新

WebGLの入門はOpenGLの入門に等しいのだけどそこは大体つかめてるので、GLUTぐらいは知ってる状態でWebGLどうやるのと言う話です。

画面をクリアするだけの簡単なWebGL


<!DOCTYPE html>
<html>
  <head>
    <title>画面クリア</title>
  </head>
  <body>

    //HTML5のキャンバス作成
    <canvas id="MyCanvas" width="640" height="480"></canvas>
    
    <script>

      // 初回表示時に呼び出される
      window.onload = function(){

        var mycanv = document.getElementById("MyCanvas");

        // GLコンテキストを取得
        var gl = mycanv.getContext('webgl') || mycanv.getContext('experimental-webgl');
        
        // 画面を緑でクリア
        gl.clearColor(0.0, 1.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

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