mozilla
Your Search Results

    Getting started with WebGL

    WebGL は、HTMLの canvas 内で 3D レンダリングを実行するために、Web コンテンツで OpenGL ES 2.0 に基づく API を使用することを可能にします。

    この記事では、WebGL の基礎を紹介します。ここでは、3D グラフィックスに関する数学的な知識を理解していることを前提とします。よって、OpenGL そのものの説明は行いません。

    3D 描画の準備

    3D 描画のため WebGL を使うにあたって始めに必要なものは、canvas です。以下の HTML の断片では canvas と、WebGL コンテキストの初期化に用いる onload イベントハンドラを定義しています。

    <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>
    </body>
    

    WebGL コンテキストの準備

    以下の JavaScript コードの start() 関数は、文書が読み込まれた後に呼び出されます。この関数の役割は WebGL コンテキストの設定と、コンテンツのレンダリングの開始です。

    function start() {
      var canvas = document.getElementById("glcanvas");
      
      initWebGL(canvas);      // Initialize the GL context
      
      // Only continue if WebGL is available and working
      
      if (gl) {
        gl.clearColor(0.0, 0.0, 0.0, 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.
      }
    }
    

    ここでは始めに、canvas への参照を取得して変数 canvas に格納しています。canvas を繰り返し参照する必要がないことが明らかな場合は、この値をグローバルに持つことは避けて、ローカル変数またはオブジェクトのメンバフィールドに格納するとよいでしょう。

    canvas を確保したら、WebGL コンテキストの初期化を行うinitWebGL() 関数 (後ほど定義します) を呼び出します。

    コンテキストの初期化に成功すると、gl がそれへの参照になります。この例ではクリアカラーを黒に設定しますので、コンテキストにはこの色でクリアさせます。続いて、コンテキストは設定パラメータで構成されます。この例では深度テストの有効化と、近くのオブジェクトがより遠くにあるオブジェクトを覆い隠すことの指定を行っています。

    以上が、コードで初期化処理のために行うことのすべてです。後ほど、実際に実行し始める方法を見てみましょう。

    WebGL コンテキストの作成

    initWebGL() 関数は以下のようになります:

    function initWebGL(canvas) {
      // Initialize the global variable gl to null.
      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.");
      }
    }
    

    canvas の WebGL コンテキストを取得するため、canvas に "webgl" という名前のコンテキストを要求します。それが失敗した場合は、"experimental-webgl" という名前で要求します。両方とも失敗した場合は、ユーザに WebGL がサポートされていないことを知らせる通知を表示します。以上で、準備の処理は完了です。この時点で、gl は null 値 (WebGL コンテキストが利用できない) または レンダリングを行う WebGL コンテキストへの参照のどちらかになります。

    注: コンテキスト名 "experimental-webgl" は、仕様書が策定中の間に使用する一時的な名称です。仕様書が確定した後は、"webgl" という名称が使われます。

    以上で、Web GL コンテキストを正常に初期化するために充分なコードが揃いました。また、黒く塗りつぶされた大きな四角形が表示され、コンテンツの受け取りを待つ状態になっています。

    WebGL 対応のブラウザを実行している場合は、こちらをクリックして サンプルを実行してみてください。

    ドキュメントのタグと貢献者

    Contributors to this page: namsan, ethertank, yyss
    最終更新者: namsan,