WebGL -コンテキスト：初めての人向けの親切なガイド
こんにちは、未来のWebGL魔法使いさんたち！私はこのエキサイティングな旅であなたのガイドになることができることを嬉しく思います。私がコンピュータサイエンスを教えてから数年が経っていますが、WebGLはあなたのウェブブラウザのための魔法の絵の具のようなものです。これを使うと、ウェブページ上に素晴らしい3Dグラフィックスを作成できます！では、腕をまくって一緒に飛び込んでみましょうか？
HTML5 Canvas要素の作成
まず第一に、描画するキャンバスが必要です。HTML5には、<canvas>という便利な要素があります。これは、私たちがWebGLの傑作を描くための白紙のようなものです。
キャンバスを作成しましょう：
<canvas id="myWebGLCanvas" width="800" height="600">
あなたのブラウザはHTML5キャンバスをサポートしていません。
</canvas>このコードは、800ピクセル幅、600ピクセル高のキャンバスを作成します。キャンバスに「myWebGLCanvas」というIDを与えました - これをキャンバスの名札と考えます。タグの中のテキストは、キャンバスをサポートしていないブラウザのためのフォールバックメッセージです（でも心配しないでください、ほとんどの現代ブラウザはキャンバスをサポートしています）。
キャンバスIDの取得
キャンバスができたら、JavaScriptコードでそれを取得する必要があります。それにはgetElementByIdメソッドを使います。キャンバスを名札で呼ぶようなものです。
let canvas = document.getElementById('myWebGLCanvas');この行は、キャンバス要素を見つけて、変数canvasに保存します。簡単ですね！
WebGL描画コンテキストの取得
ここがエキサイティングな部分です - WebGLコンテキストを取得することです。コンテキストは、キャンバス上で描画するための魔法の描画ツールセットのようなものです。
let gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGLがサポートされていません。experimental-webglにフォールバックします');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('あなたのブラウザはWebGLをサポートしていません');
}これを分解しましょう：
-
getContext('webgl')を使ってWebGLコンテキストを取得します。 - それが動作しない場合（もしかするとブラウザが少し古いかもしれません）、
experimental-webglを試します。 - それでもコンテキストが取得できない場合、ユーザーにブラウザがWebGLをサポートしていないことを警告します。
WebGLContextAttributes
私たちがWebGLコンテキストを作成する際に、その振る舞いをカスタマイズするための属性を指定することができます。これは、魔法の絵の具の設定を選ぶようなものです。以下は利用可能な属性の表です：
| 属性 | 説明 | デフォルト値 |
|---|---|---|
| alpha | キャンバスにアルファバッファを含む | true |
| depth | 描画バッファに少なくとも16ビットの深度バッファを含む | true |
| stencil | 描画バッファに少なくとも8ビットのステンシルバッファを含む | false |
| antialias | 描画バッファがアンチエイリアスを行う | true |
| premultipliedAlpha | ページコンポーザーは描画バッファがプレマルチプルアルファを含むと仮定する | true |
| preserveDrawingBuffer | バッファが消去されず、値を保持するまで消去されない | false |
| failIfMajorPerformanceCaveat | システムパフォーマンスが低い場合、コンテキストの作成が失敗する | false |
これらの属性を使うには、コンテキストを取得するときにオブジェクトを渡すことができます：
let contextAttributes = {
alpha: false,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: false,
preserveDrawingBuffer: false,
failIfMajorPerformanceCaveat: false
};
let gl = canvas.getContext('webgl', contextAttributes);WebGLRenderingContext
WebGLコンテキストを取得したら、そのメソッドやプロパティを使って素晴らしいグラフィックスを作成することができます。WebGLRenderingContextはすべてのWebGL描画関数を提供します。
以下に簡単な例を示します。キャンバスを空の天空色で消去します：
if (gl) {
// 空の天空色にクリアカラーセット
gl.clearColor(0.529, 0.808, 0.922, 1.0);
// 指定されたクリアカラで色バッファを消去
gl.clear(gl.COLOR_BUFFER_BIT);
}これを分解しましょう：
-
gl.clearColor(0.529, 0.808, 0.922, 1.0): これはキャンバスを消去する際に使用する色を設定します。数字は赤、緑、青、アルファの値で、それぞれ0から1の範囲です。 -
gl.clear(gl.COLOR_BUFFER_BIT): これは実際に指定された色でキャンバスを消去します。
それで、あなたは最初のWebGL傑作 - 美しい空の青いキャンバスを描きました！
忘れないでください、これはただの始まりです。WebGLには複雑な3Dグラフィックスを作成するための多くの関数があります。絵を描くことを学ぶのと同じで、白紙から始めて、一色から始めて、練習を重ねることですぐに複雑な3D世界を作成できるようになります！
このWebGLコンテキストの導入を終えるにあたり、私がこの概念を初めて教えたときを思い出しています。ある生徒がキャンバスをさまざまな色で消去することに非常に興奮し、一整天をかけて「色変わるムードライト」プログラムを作成していました。これは、たとえ最もシンプルな概念であっても、驚くほどの創造性を引き出すことができることを示しています！
次のレッスンでは、WebGLをさらに深く掘り下げ、形を描き始めます。それまでに、ハッピーコーディングをし、あなたのキャンバスが常に色とりどりでありますように！
Credits: Image by storyset