WebGLスタート
7019 ワード
https://developer.mozilla.org/en/WebGL
本住所:https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL
レベルが限られていて、逐字逐句翻訳することはできません.原文の意味に合致することを保証します.
WebGLをサポートするブラウザでは、OpenGL ES 2.0ベースのAPIを使用してcanvas要素で3 Dグラフィックのレンダリングを完了させることができます.
注意:WebGLが正常に動作しない場合は、オプションwebglを確認します.enabled_for_all_sitesはtrueに設定されています.これは9月17日以降のnightly buildsバージョンのデフォルト設定であり、Firefox 4.0 beta 8も同様である.
ここではWebGLに関する基礎知識を紹介し、3 Dグラフィックスの数学知識を知っていると考えています.本文ではOpenGL自体を教えてくれません.
3 Dレンダリングの準備
WebGLで3 Dをレンダリングするには、まずcanvas要素を用意する必要があります.次のHTMLクリップはcanvasを追加し、bodyにonloadイベントリスニングをバインドしてWebGL環境を初期化します.
WebGL環境の準備
上のstart()関数は、ページのロードが完了すると呼び出されます.WebGL環境を作成し、レンダリングの準備をします.
まずcanvas要素の参照を取得し、グローバル(原文はそうですが、上のコードではcanvasは関数内のローカル変数)canvas変数に保存します.このcanvas要素を繰り返し使用する必要がなく、この参照を保存する必要もなく、ローカル変数またはオブジェクトのプロパティとして保存することもできます.
canvasがあればinitWebGL()関数を呼び出します.この関数は後で定義され、WebGL環境を初期化するタスクです.
環境初期化に成功するとgl変数に保存されます.ここでは、クリアカラーを黒に設定し、環境に使用させます.その後、いくつかの環境パラメータを構成します.この例では、深さテストを開き、近くにある物体が遠くにある物体を遮ることを指定します.
初期化作業はこれだけで、後でもっと多くのことをします.
WebGL環境の作成
関数initWebGL()の内容は次のとおりです.
canvasのWebGL環境を取得するには、canvasの「webgl」という環境を取得します.失敗したら「experimental-webgl」を使ってみましょう.それでも失敗した場合は、ブラウザがWebGLをサポートしていないようだとユーザーに通知するよう求めます.これがすべてです.glはnull(WebGL環境が使用できないことを示す)またはWebGL環境の参照を保存するか、後でレンダリングに使用します.
注意:環境名「experimental-webgl」は、仕様の指定中に使用される一時的な名前です.仕様が完了すると、「webgl」は正式な名前になります.
WebGL環境の初期化が完了すると、黒い長方形のボックスが表示され、表示の準備ができます.
この例を表示するには、ここをクリックしてください。(WebGL対応のブラウザが必要)
本住所:https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL
レベルが限られていて、逐字逐句翻訳することはできません.原文の意味に合致することを保証します.
WebGLをサポートするブラウザでは、OpenGL ES 2.0ベースのAPIを使用してcanvas要素で3 Dグラフィックのレンダリングを完了させることができます.
注意:WebGLが正常に動作しない場合は、オプションwebglを確認します.enabled_for_all_sitesはtrueに設定されています.これは9月17日以降のnightly buildsバージョンのデフォルト設定であり、Firefox 4.0 beta 8も同様である.
ここではWebGLに関する基礎知識を紹介し、3 Dグラフィックスの数学知識を知っていると考えています.本文ではOpenGL自体を教えてくれません.
3 Dレンダリングの準備
WebGLで3 Dをレンダリングするには、まずcanvas要素を用意する必要があります.次のHTMLクリップはcanvasを追加し、bodyにonloadイベントリスニングをバインドしてWebGL環境を初期化します.
<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
</body>WebGL環境の準備
上のstart()関数は、ページのロードが完了すると呼び出されます.WebGL環境を作成し、レンダリングの準備をします.
function start() {
var canvas = document.getElementById("glcanvas");
initWebGL(canvas); // GL
// WebGL
if (gl) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // ，
gl.enable(gl.DEPTH_TEST); //
gl.depthFunc(gl.LEQUAL); //
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); //
}
}まずcanvas要素の参照を取得し、グローバル(原文はそうですが、上のコードではcanvasは関数内のローカル変数)canvas変数に保存します.このcanvas要素を繰り返し使用する必要がなく、この参照を保存する必要もなく、ローカル変数またはオブジェクトのプロパティとして保存することもできます.
canvasがあればinitWebGL()関数を呼び出します.この関数は後で定義され、WebGL環境を初期化するタスクです.
環境初期化に成功するとgl変数に保存されます.ここでは、クリアカラーを黒に設定し、環境に使用させます.その後、いくつかの環境パラメータを構成します.この例では、深さテストを開き、近くにある物体が遠くにある物体を遮ることを指定します.
初期化作業はこれだけで、後でもっと多くのことをします.
WebGL環境の作成
関数initWebGL()の内容は次のとおりです.
function initWebGL(canvas) {
gl = null;
try {
gl = canvas.getContext("experimental-webgl");
}
catch(e) {
}
// GL
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」は正式な名前になります.
WebGL環境の初期化が完了すると、黒い長方形のボックスが表示され、表示の準備ができます.
この例を表示するには、ここをクリックしてください。(WebGL対応のブラウザが必要)