MessagePort.onmessage - Web API

MessagePort.onmessage
=====================

`MessagePort` インターフェイスの **`onmessage`** イベントハンドラは、`EventListener` であり、ポート上で `message` 型の `MessageEvent` が発動した時に呼び出されます。つまり、ポートがメッセージを受信した時に呼び出されます。

**注:** この機能は Web Worker 内で利用可能です

構文
--
```

channel.onmessage = function() { ... };
```

例
-

次のコードブロックには、`MessageChannel.MessageChannel` コンストラクタで作成された新しいチャンネルがあります。IFrame が読み込まれた時、`MessagePort.postMessage` を使用してメッセージと `MessageChannel.port2` が IFrame へ渡されます。すると、`handleMessage` ハンドラが `onmessage` によって IFrame から返されたメッセージに応答し、そのメッセージを段落に出力します。ここで、`MessageChannel.port1` は、メッセージが到着したときに確認するための待機状態にあります。

```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```

完全に動作する例は、Github 上の チャンネルメッセージ送信の基本デモ を見てください (実際の動作も確認できます)。

仕様
--

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-messageport-onmessage |

ブラウザの実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Using channel messaging


MessagePort.close() - Web API

MessagePort.close()
===================

`MessagePort` インターフェイスの **`close()`** メソッドは、ポートの接続を切断し、ポートがアクティブではなくなります。これは、そのポートへのメッセージの送信を停止します。

**注:** この機能は Web Worker 内で利用可能です

構文
--
```

port.close()
```

### 戻り値

無効。

### 引数

なし。

例
-

次のコードブロックには、`handleMessage` ハンドラ関数があり、`EventTarget.addEventListener` を使用してこのドキュメントにメッセージが返された時に実行されます。

```js
channel.port1.addEventListener("message", handleMessage, false);
function handleMessage(e) {
  para.innerHTML = e.data;
  textInput.value = "";
}

channel.port1.start();
```

次のようにして、いつでもメッセージの送信を停止できます。

```js
channel.port1.close();
```

仕様
--

| Specification |
| --- |
| HTML Standard # dom-messageport-close-dev |

ブラウザの実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Using channel messaging


MessagePort.onmessageerror - Web API

MessagePort.onmessageerror
==========================

`MessagePort` インターフェースの **`onmessageerror`** イベントハンドラーは、ポートで `messageerror` 型の `MessageEvent` が発火すると呼び出されます。つまり、deserialized できないメッセージを受け取ったときです。

**注:** この機能は Web Worker 内で利用可能です

構文
--
```

port.onmessageerror = function() { ... };
```

仕様
--

| Specification |
| --- |
| HTML Standard # event-messageerror |
| HTML Standard # handler-messageport-onmessageerror |

ブラウザー実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連項目
----

* Using channel messaging


MessagePort.postMessage() - Web API

MessagePort.postMessage()
=========================

`MessagePort` インターフェイスの **`postMessage()`** メソッドは、ポートからのメッセージを送信します。任意で、オブジェクトの所有権を他のブラウザコンテキストへ転送します。

**注:** この機能は Web Worker 内で利用可能です

構文
--
```

port.postMessage(message [,transfer]);
```

### 戻り値

無効。

### 引数

message

チャンネル経由で送信するメッセージ。これは基本データタイプになります。複数のデータアイテムを配列として送信できます。

[, transfer]

(任意) 転送されるオブジェクト。これらのオブジェクトの所有権は、受信側のブラウザコンテキストへ転送されるため、送信側のブラウザコンテキストでは使用できなくなります。

例
-

次のコードブロックでは、`MessageChannel.MessageChannel` コンストラクタで新しいチャンネルを作成しています。IFrame が読み込まれた時、`window.postMessage` メソッドによってメッセージと `MessageChannel.port2` が IFrame へ渡されます。すると、`handleMessage` が `onmessage` によって IFrame から返されたメッセージに応答し、そのメッセージを段落に出力します。ここで、`MessageChannel.port1` は、メッセージが到着したときに確認するための待機状態にあります。

```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```

完全に動作する例は、Github 上の チャンネルメッセージ送信の基本デモ を見てください (実際の動作も確認できます)。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-messageport-postmessage-dev |

ブラウザの実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Using channel messaging


GeolocationPositionError: message プロパティ - Web API

GeolocationPositionError: message プロパティ
=======================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`GeolocationPositionError.message`** は読み取り専用のプロパティで、エラーの詳細を説明する、人間が読める文字列を返します。

値
-

エラーの詳細を説明する、人間が読める文字列です。

仕様書
---

| Specification |
| --- |
| Geolocation API # message-attribute |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 位置情報 API の使用
* `GeolocationPositionError`


GeolocationPositionError: code プロパティ - Web API

GeolocationPositionError: code プロパティ
====================================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`GeolocationPositionError.code`** は読み取り専用プロパティで、 `unsigned short` でエラーコードを表します。

以下の値になる可能性があります。

| 値 | 関連づけられた定数 | 説明 |
| --- | --- | --- |
| `1` | `PERMISSION_DENIED` | ページが許可を得ていないために、位置情報の取得に失敗しました。 |
| `2` | `POSITION_UNAVAILABLE` | 1 つまたは複数の位置の内部ソースが内部エラーを返したために、位置情報の取得に失敗しました。 |
| `3` | `TIMEOUT` | 位置情報が制限時間内に取得できませんでした。 |

仕様書
---

| Specification |
| --- |
| Geolocation API # code-attribute |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 位置情報の使用
* `GeolocationPositionError`


TransitionEvent: pseudoElement プロパティ - Web API

TransitionEvent: pseudoElement プロパティ
====================================

**`TransitionEvent.pseudoElement`** は読み取り専用プロパティで、アニメーションが実行されている `'::'` で始まる擬似要素の名前が入っている文字列です。トランジションが擬似要素で実行されない場合は、要素は空文字列 (`''`) です。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| CSS Transitions # Events-TransitionEvent-pseudoElement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS トランジションの使用
* `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`


TransitionEvent: elapsedTime プロパティ - Web API

TransitionEvent: elapsedTime プロパティ
==================================

**`TransitionEvent.elapsedTime`** は読み取り専用プロパティで、このイベントが発行された時にアニメーションが実行されていた秒数を
 `float` 型で返します。この値は `transition-delay` プロパティの影響を受けません。

値
-

数値です。

仕様書
---

| Specification |
| --- |
| CSS Transitions # Events-TransitionEvent-elapsedTime |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS トランジションの使用


TransitionEvent: TransitionEvent() コンストラクター - Web API

TransitionEvent: TransitionEvent() コンストラクター
===========================================

**`TransitionEvent()`** コンストラクターは新しい `TransitionEvent` オブジェクトを返します。これはトランジションに関するイベントを表します。

構文
--

```js
new TransitionEvent(type)
new TransitionEvent(type, options)
```

### 引数

`type`

 文字列で、イベントの名前を表します。
 大文字小文字を区別し、ブラウザーは `transitionrun`, `transitionstart`, `transitionend`, `transitioncancel` のいずれかを設定します。

`options` 省略可

オブジェクトで、 `Event()` で定義されているプロパティに加えて、以下のプロパティを持つことができます。

`propertyName` 省略可

 文字列で、トランジションに関連付けられた CSS プロパティの名前を格納します。
 既定値は `""` です。

`elapsedTime` 省略可

 アニメーションが一時停止していた時間を除き、このイベントが発行されたときにアニメーションが実行されている時間を秒単位で表す数値です。
 `"animationstart"` イベントでは、 `elapsedTime` はふつう `0.0` ですが、 `animation-delay` が負の値である場合は、 `elapsedTime` が `(-1 * delay)` であるイベントが発行されます。
 既定値は `0.0` です。

`pseudoElement` 省略可

 文字列で、既定値は `"::"` です。アニメーションが実行される擬似要素の名前が入ります。
 アニメーションが擬似要素ではなく要素で実行されている場合は、空文字列 `""` になります。
 既定値は `""` です。

### 返値

新しい `TransitionEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| CSS Transitions # dom-transitionevent-transitionevent |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS トランジションの使用
* CSS プロパティ: `transition`, `transition-delay`,
 `transition-duration`, `transition-property`,
 `transition-timing-function`


TransitionEvent: propertyName プロパティ - Web API

TransitionEvent: propertyName プロパティ
===================================

**`propertyName`** は `TransitionEvent` オブジェクトの読み取り専用プロパティで、このトランジションに関連する CSS プロパティの名前を格納した文字列です。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| CSS Transitions # Events-TransitionEvent-propertyName |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS トランジションの使用


HTMLTimeElement: dateTime プロパティ - Web API

HTMLTimeElement: dateTime プロパティ
===============================

**`HTMLTimeElement.dateTime`** プロパティは文字列で、HTML の `datetime` 属性を反映し、要素の日付と時刻の値を機械可読な形で保持します。

文字列の形式は以下の HTML のマイクロ構文に従わなければなりません。

| マイクロ構文 | 説明 | 例 |
| --- | --- | --- |
| 有効な月文字列 | *YYYY*`-`*MM* | `2011-11`, `2013-05` |
| 有効な日付文字列 | *YYYY*`-`*MM*`-`*DD* | `1887-12-01` |
| 有効な年のない日付文字列 | *MM*`-`*DD* | `11-12` |
| 有効な時刻文字列 | *HH*`:`*MM**HH*`:`*MM*`:`*SS**HH*`:`*MM*`:`*SS*`.`*mmm* | `23:59``12:15:47``12:15:52.998` |
| 有効なローカル日時文字列 | *YYYY*`-`*MM*`-`*DD*
*HH*`:`*MM**YYYY*`-`*MM*`-`*DD* *HH*`:`*MM*`:`*SS**YYYY*`-`*MM*`-`*DD* *HH*`:`*MM*`:`*SS*`.`*mmm**YYYY*`-`*MM*`-`*DD*`T`*HH*`:`*MM**YYYY*`-`*MM*`-`*DD*`T`*HH*`:`*MM*`:`*SS**YYYY*`-`*MM*`-`*DD*`T`*HH*`:`*MM*`:`*SS*`.`*mmm* | `2013-12-25 11:121972-07-25 13:43:071941-03-15
07:06:23.6782013-12-25T11:121972-07-25T13:43:071941-03-15T07:06:23.678` |
| 有効なタイムゾーンオフセット文字列 | `Z``+`*HHMM*`+`*HH*`:`*MM*`-`*HHMM*`-`*HH*`:`*MM* | `Z+0200+04:30-0300-08:00` |
| 有効なグローバル日時文字列 | *有効な日時文字列と有効なタイムゾーンオフセット文字列が続く任意の組み合わせ。* | `2013-12-25 11:12+02001972-07-25 13:43:07+04:301941-03-15
07:06:23.678Z2013-12-25T11:12-08:00` |
| 有効な週文字列 | *YYYY*`-W`*WW* | `2013-W46` |
| 4 桁以上の ASCII 数字 | *YYYY* | `2013`, `0001` |
| 有効な期間文字列 | `P`*d*`D``T`*h*`H`*m*`M`*s*`S``P`*d*`D``T`*h*`H`*m*`M`*s*`.`X`S``P`*d*`D``T`*h*`H`*m*`M`*s*`.`XX`S``P`*d*`D``T`*h*`H`*m*`M`*s*`.`XXX`S``P``T`*h*`H`*m*`M`*s*`S``P``T`*h*`H`*m*`M`*s*`.`X`S``P``T`*h*`H`*m*`M`*s*`.`XX`S``P``T`*h*`H`*m*`M`*s*`.`XXX`S`*w*`w` *d*`d` *h*`h` *m*`m` *s*`s` | `P12DT7H12M13SP12DT7H12M13.3SP12DT7H12M13.45SP12DT7H12M13.455SPT7H12M13SPT7H12M13.2SPT7H12M13.56SPT7H12M13.999S7d
5h 24m 13s` |

値
-

文字列です。

例
-

```js
// HTML に <time id="t"> 要素があると仮定する

const t = document.getElementById("t");
t.dateTime = "6w 5h 34m 5s";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-time-datetime |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `HTMLTimeElement` インターフェイス


HTMLFormControlsCollection: namedItem() メソッド - Web API

HTMLFormControlsCollection: namedItem() メソッド
============================================

**`HTMLFormControlsCollection.namedItem()`** メソッドは、集合内の `RadioNodeList` または `Element` の `name` または `id` が指定した名前と一致するノード、または一致するノードがない場合は `null` を返します。

このバージョンの `namedItem()` は `HTMLCollection` から継承されたものを隠していることに注意してください。そのメソッドと同様、`collection["value"]` のように文字列で JavaScript の配列の括弧構文を使用すると、 `collection.namedItem("value")` と同等になります。

構文
--

```js
namedItem(str)
// or collection[str]
```

### 引数

* `str` は文字列です。
### 返値

* `RadioNodeList`、`Element`、`null` の何れかです。
例
-

### HTML

```html
<form>
  <input id="my-form-control" type="textarea" />
</form>
```

### JavaScript

```js
// #my-form-control を表す HTMLInputElement を返す
elem1 = document.forms[0]["my-form-control"];
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-htmlformcontrolscollection-nameditem-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 置き換えている `HTMLCollection.namedItem`


WorkerGlobalScope: online イベント - Web API

WorkerGlobalScope: online イベント
==============================

**`online`** は `WorkerGlobalScope` のイベントで、端末がインターネットに再接続したときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("online", (event) => {});

ononline = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

次のコードでは、ワーカーに `ononline` ハンドラーを設定しています。

```js
self.ononline = () => {
  console.log("Your worker is now online");
};
```

同じスニペットですが、 `addEventListener()` を使用したものです。

```js
self.addEventListener("online", () => {
  console.log("Your worker is now online");
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # handler-workerglobalscope-ononline |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

The `WorkerGlobalScope` interface it belongs to.


WorkerGlobalScope: offline イベント - Web API

WorkerGlobalScope: offline イベント
===============================

**`offline`** は `WorkerGlobalScope` のイベントで、端末がインターネットへの接続を失ったときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("offline", (event) => {});

onoffline = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

次のコードでは、ワーカーに `onoffline` ハンドラーを設定しています。

```js
self.onoffline = () => {
  console.log("Your worker is now offline");
};
```

同じスニペットですが、 `addEventListener()` を使用したものです。

```js
self.addEventListener("offline", () => {
  console.log("Your worker is now offline");
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # handler-workerglobalscope-onoffline |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

所属先の `WorkerGlobalScope` インターフェイス。


WorkerGlobalScope.navigator - Web API

WorkerGlobalScope.navigator
===========================

**`navigator`** は `WorkerGlobalScope` インターフェイスの読み取り専用プロパティで、このワーカーに関連付けられた `WorkerNavigator` を返します。これは特有の navigator オブジェクトであり、大部分は閲覧スコープの `Navigator` のサブセットですが、ワーカーに合わせたものです。

値
-

`WorkerNavigator` オブジェクトです。

例
-

ワーカー内で

```js
console.log(navigator);
```

を呼び出すと（これらは基本的に `self.console.log(self.navigator);` と同等であり、ワーカーのスコープで呼び出されたとき、 `WorkerGlobalScope.self` で参照されるもの）、 `WorkerNavigator` オブジェクトが次のようにコンソールに出力されるのが分かるでしょう。
```

Object {onLine: true, userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) Ap…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36", product: "Gecko", platform: "MacIntel", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKi…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"…}
    appCodeName: "Mozilla"
    appName: "Netscape"
    appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
    hardwareConcurrency: 4
    onLine: true
    platform: "MacIntel"
    product: "Gecko"
    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
    __proto__: Object
```

この navigator オブジェクトを使用して、通常の `Navigator` オブジェクトと同様、実行環境に関するより詳細な情報を得ることができます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-worker-navigator-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

`WorkerNavigator`


WorkerGlobalScope.importScripts() - Web API

WorkerGlobalScope.importScripts()
=================================

**`importScripts()`** は `WorkerGlobalScope` インターフェイスのメソッドで、 1 つ以上のスクリプトをワーカーのスコープ内に同期的に読み込みます。

構文
--

```js
importScripts(path0)
importScripts(path0, path1)
importScripts(path0, path1, /\* … ,\*/ pathN)
```

### 引数

文字列のカンマ区切りのリストで、インポートされるスクリプトを表します。これらは *HTML 文書のベース URL* からの相対パスです。

### 返値

なし (`undefined`)。

### 例外

`NetworkError`

インポートされたスクリプトが `text/javascript` の MIME タイプでないか、許可された古い JavaScript の MIME タイプのいずれでもない状態で提供された場合。

例
-

`foo.js` という別のスクリプトに書かれた機能を worker.js の中で使いたい場合は、次の行でインポートすることができます。

```js
importScripts("foo.js");
```

`importScripts()` と `self.importScripts()` は実質的に同じです。 — 両方とも `importScripts()` をワーカーの内部スコープの中から呼び出すことを表します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerglobalscope-importscripts-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `WorkerGlobalScope`


WorkerGlobalScope.dump() - Web API

WorkerGlobalScope.dump()
========================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`WorkerGlobalScope.dump()`** メソッドは、メッセージをブラウザーの標準出力 (`stdout`) にログ出力します。ブラウザーがターミナルから起動されている場合、 `dump()` に送られた出力はターミナルに表示されます。これは `Window.dump()` と同じですが、ワーカーのためのものです。

`dump()` からの出力は、ブラウザーの開発者ツールのコンソールに送信されません。開発者ツールのコンソールへログ出力するには、 `console.log()` を使用してください。

構文
--

```js
dump(message);
```

### 引数

`message`

文字列で、ログ出力するメッセージが入ります。

### 返値

なし (`undefined`)。

仕様書
---

どの仕様書にも含まれていません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


WorkerGlobalScope: fonts プロパティ - Web API

WorkerGlobalScope: fonts プロパティ
==============================

**`fonts`** は `WorkerGlobalScope` インターフェイスのプロパティで、このワーカーの `FontFaceSet` インターフェイスを返します。

このプロパティは CSS フォント読み込み API の一部です。

値
-

 返される値はこのワーカーの `FontFaceSet` インターフェイスです。
 `FontFaceSet` インターフェースは、新しいフォントを読み込んだり、以前に読み込んだフォントの状態を調べたりするのに有益なものです。

例
-

### すべてのフォントを読み込んだ後に処理を実行

```js
fonts.ready.then(() => {
  // すべてのフォントの読み込みが完了してから行う必要がある処理は、
  // ここで行います。
});
```

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacesource-fonts |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `FontFaceSet` インターフェイス
* `FontFace`


WorkerGlobalScope: languagechange イベント - Web API

WorkerGlobalScope: languagechange イベント
======================================

**`languagechange`** イベントは、ユーザーの推奨言語が変更されたときにグローバルスコープオブジェクトで発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("languagechange", (event) => {});

onlanguagechange = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

`languagechange` は `addEventListener` メソッドで使用することができます。

```js
worker.addEventListener("languagechange", () => {
  console.log("languagechange event detected!");
});
```

または、 `onlanguagechange` イベントハンドラープロパティを使用します。

```js
worker.onlanguagechange = (event) => {
  console.log("languagechange event detected!");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-languagechange |
| HTML Standard # handler-workerglobalscope-onlanguagechange |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `navigator.language`
* `navigator.languages`
* `Navigator`


WorkerGlobalScope: error イベント - Web API

WorkerGlobalScope: error イベント
=============================

**`error`** は `WorkerGlobalScope` インターフェイスのイベントで、ワーカー内でエラーが発生したときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

以下のコードスニペットは、ワーカーの中に設定された `onerror` ハンドラーを示しています。

```js
self.onerror = () => {
  console.log("There is an error inside your worker!");
};
```

同じスニペットで、 `addEventListener()` を使用したものです。

```js
self.addEventListener("error", () => {
  console.log("There is an error inside your worker!");
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # handler-workerglobalscope-onerror |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

所属先の `WorkerGlobalScope` インターフェイス。


WorkerGlobalScope.location - Web API

WorkerGlobalScope.location
==========================

**`location`** は `WorkerGlobalScope` インターフェイスの読み取り専用プロパティで、このワーカーに関連付けられた `WorkerLocation` を返します。これは特有の location オブジェクトであり、大部分は閲覧スコープの `Location` のサブセットですが、ワーカーに合わせたものです。

値
-

`WorkerLocation` オブジェクトです。

例
-

`localhost:8000` で配信される文書で、ワーカー内で

```js
console.log(location);
```

を呼び出すと（これらは基本的に `self.console.log(self.location);` と同等であり、ワーカーのスコープで呼び出されたとき、 `WorkerGlobalScope.self` で参照されるもの）、 `WorkerLocation` オブジェクトが次のようにコンソールに出力されるのが分かるでしょう。
```

WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…}
  hash: ""
  host: "localhost:8000"
  hostname: "localhost"
  href: "http://localhost:8000/worker.js"
  origin: "http://localhost:8000"
  pathname: "/worker.js"
  port: "8000"
  protocol: "http:"
  search: ""
  __proto__: WorkerLocation
```

この location オブジェクトを使用して、通常の `Location` オブジェクトと同様、文書の場所に関するより詳細な情報を得ることができます。

**メモ:** Firefox では、共有/サービスワーカー内で `console.log` を使用する際にバグがあり（Firefox バグ 1058644 を参照）、おかしな結果を返すことがありますが、これはすぐに修正されるはずです。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerglobalscope-location-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

`WorkerGlobalScope`


WorkerGlobalScope.self - Web API

WorkerGlobalScope.self
======================

**`self`** は `WorkerGlobalScope` インターフェイスの読み取り専用プロパティで、 `WorkerGlobalScope` 自体への参照を返します。ほとんどの場合、これは `DedicatedWorkerGlobalScope` や `SharedWorkerGlobalScope`、`ServiceWorkerGlobalScope` などの特有のスコープです。

値
-

グローバルスコープオブジェクト（前述のとおり、扱っているワーカーの種類によって異なる）。

例
-

次のものをワーカー内で呼び出した場合、

```js
console.log(self);
```

コンソールに書き込まれたワーカーオブジェクトと同じ型のワーカーグローバルスコープが取得されます。ある時は次のようになります。
```

DedicatedWorkerGlobalScope {
undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…}
    Infinity: Infinity
    Array: function Array() { [native code] }
      arguments: null
      caller: null
      isArray: function isArray() { [native code] }
      length: 1
      name: "Array"
      observe: function observe() { [native code] }
      prototype: Array[0]
      unobserve: function unobserve() { [native code] }
      __proto__: function Empty() {}
      <function scope>
    ArrayBuffer: function ArrayBuffer() { [native code] }
    Blob: function Blob() { [native code] }
    Boolean: function Boolean() { [native code] }
    DataView: function DataView() { [native code] }
    Date: function Date() { [native code] }
    DedicatedWorkerGlobalScope: function DedicatedWorkerGlobalScope() { [native code] }
    Error: function Error() { [native code] }
// etc. etc.
```

これは、そのワーカースコープで利用可能なオブジェクトの完全なリストを提供するため、ワーカーが何かを利用できるかを確認したい場合には、非常に便利なテストです。ウェブワーカーが使用できる関数とクラスの一覧もメンテナンスしています。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerglobalscope-self-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

`WorkerGlobalScope`


WebGL のデータ - Web API

WebGL のデータ
==========

シェーダープログラムは 3 種類のデータストレージにアクセスでき、それぞれに特定の用途があります。それぞれの種類の変数は、データストアの種類に応じて 1 つまたは両方の種類のシェーダープログラムからアクセスでき、特定の変数の種類に応じてサイトの JavaScript コードからもアクセスできます。

GLSL データ型
---------

GLSL ドキュメントの Data Types を参照してください。

GLSL 変数
-------

GLSL には **属性**、**varyings**、**ユニフォーム** の 3 種類の「変数」またはデータストレージがあり、それぞれに独自の目的と用途があります。

### 属性

**属性** (Attributes) は GLSL 変数であり、（変数としての）頂点シェーダーおよび JavaScript コードでのみ使用可能です。属性は通常、色情報、テクスチャ座標、および JavaScript コードと頂点シェーダー間で共有する必要がある計算または取得されたその他のデータを格納するために使用されます。

```js
// 色を初期化
const vertexColors = [
  vec4(0.0, 0.0, 0.0, 1.0), // black
  vec4(1.0, 0.0, 0.0, 1.0), // red
  vec4(1.0, 1.0, 0.0, 1.0), // yellow
  vec4(0.0, 1.0, 0.0, 1.0), // green
  vec4(0.0, 0.0, 0.0, 1.0), // black
  vec4(1.0, 0.0, 0.0, 1.0), // red
  vec4(1.0, 1.0, 0.0, 1.0), // yellow
  vec4(0.0, 1.0, 0.0, 1.0), // green
];
const cBuffer = gl.createBuffer();
```

```js
// 続き
// 色を保存するバッファーを作成し、GLSLの "vColor" を参照します。
gl.bindBuffer(gl.ARRAY\_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY\_BUFFER, flatten(vertexColors), gl.STATIC\_DRAW);

const vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);
```

```cpp
//glsl
attribute  vec4 vColor;

void main()
{
  fColor = vColor;
}
```

### Varying

**Varying** は頂点シェーダーによって宣言され、頂点シェーダーからフラグメントシェーダーにデータを渡すために使用される変数です。これは、頂点シェーダーによって計算された後、頂点の法線ベクトルを共有するために通常使用されます。

<<使用方法>>

### ユニフォーム

**ユニフォーム** (Uniforms) は JavaScript コードによって設定され、頂点シェーダーとフラグメントシェーダーの両方で使用できます。これらは照明の位置と大きさ、グローバル変換と遠近法の詳細など、フレームに描画されるすべてのものに対して同じ値を提供するために使用されます。

<<詳細の追加>>

バッファー
-----

<<情報の追加>>

テクスチャ
-----

<<情報の追加>>


実例による WebGL - Web API

実例による WebGL
===========

* 次のページ » (en-US)

実例による WebGL は、WebGL の概念と機能を短く説明する一連の実例サンプルです。実例はトピックと難易度順に従って並んでおり、WebGL レンダリングコンテキスト、シェダープログラミング、テクスチャ、ジオメトリ、ユーザーインタラクションなどを網羅しています。

トピック別の実例
--------

実例は難易度の低い順に並んでいます。単なる長い一覧ではなく、トピックごとにさらに分割された内容になっています。最初に基本レベル、後に中級や上級レベルで話し合う必要がある時など、トピックを何度か見直す事があります。

シェーダー、ジオメトリ、GPUメモリーを使って処理する代わりに、最初のプログラムでは実例で WebGL を少しずつ理解を深めていきます。私たちはそれがより効果的な学習体験に繋がり、最終的には概念の深い理解に繋がると信じています。

実例に関する説明は本文とコード内のコメントの両方にあります。より高度な実例では、以前に説明したコードのコメントは繰り返さないため、すべてのコメントを読んでコードを理解しておく必要があります。

### レンダリングコンテキストを知る

WebGL を検出する (en-US)

この例ではWebGLレンダリングコンテキストを検出して、結果をユーザーに描画します

カラーのクリア (en-US)

単色でレンダリングコンテキストをクリアします

クリックしてクリア (en-US)

ユーザー操作とグラフィック操作を組み合わせる方法です。ユーザーがクリックした時にレンダリングコンテキストをランダムなカラーでクリアします

単純なカラーアニメーション (en-US)

基本的なカラーアニメーションで、毎秒ごとに異なったランダムなカラーでWebGL描画バッファをクリアする事によって行われます

カラーマスキング (en-US)

カラーマスキングを適用して、表示色の範囲を特定の色合いに制限する事によってランダムな色を修正します

基本的な切り取り (en-US)

切り取り操作で単純な長方形や正方形を描きます

キャンバスサイズと WebGL (en-US)

この例ではブラウザーウィンドウに描画されるように、キャンバスサイズをCSSピクセル単位の要素サイズに設定する（または設定しない）影響について理解を深めていきます

定型文 1 (en-US)

WebGL の初期化をより簡単に行う JavaScript ユーティリティ関数の定義について説明します。このコードは繰り返しになるためこれから表示しなくなります

切り取りアニメーション (en-US)

切り取りやクリア操作の楽しいアニメーション

雨のように長方形を降らせる (en-US)

単色のクリア、切り取り、アニメーション、ユーザーインタラクションをデモする単純なゲーム

### シェーダープログラミングの基本

Hello GLSL (en-US)

単色の正方形を描画する基本的なシェーダープログラミング

Hello vertex attributes (en-US)

頂点属性によるシェーダプログラミングとユーザーインタラクションの結合

Textures from code (en-US)

フラグメントシェーダを使用した手続き型テクスチャリングの簡単なデモ

### その他、高度な実例

Video textures (en-US)

この例ではビデオファイルをテクスチャとして使用します

* 次のページ » (en-US)


WebGL の定数 - Web API

WebGL の定数
=========

WebGL API は、関数に渡されるか、または関数から返される様々な定数を提供しています。すべての定数は `GLenum` (en-US) 型です。

標準の WebGL 定数は `WebGLRenderingContext`, `WebGL2RenderingContext` (en-US) オブジェクトに用意されていますが、これは定数を `gl.CONSTANT_NAME` のように利用するためです:

```js
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");

gl.getParameter(gl.LINE\_WIDTH);
```

一部の定数については、WebGL 拡張機能から提供されることもあります。リストが以下に記載されています。

```js
var debugInfo = gl.getExtension("WEBGL\_debug\_renderer\_info");
var vendor = gl.getParameter(debugInfo.UNMASKED\_VENDOR\_WEBGL);
```

WebGL チュートリアルには、WebGL の入門方法に関してより多くの情報や例、リソースがあります。

Table of contents
-----------------

* Standard WebGL 1 constants
* Standard WebGL 2 constants
* WebGL extension constants
Standard WebGL 1 constants
--------------------------

These constants are defined on the `WebGLRenderingContext` interface.

### Clearing buffers

Constants passed to `WebGLRenderingContext.clear()` to clear buffer masks.

| Constant name | Value | Description |
| --- | --- | --- |
| `DEPTH_BUFFER_BIT` | 0x00000100 | Passed to `clear` to clear the current depth buffer. |
| `STENCIL_BUFFER_BIT` | 0x00000400 | Passed to `clear` to clear the current stencil buffer. |
| `COLOR_BUFFER_BIT` | 0x00004000 | Passed to `clear` to clear the current color buffer. |

### Rendering primitives

Constants passed to `WebGLRenderingContext.drawElements()` or `WebGLRenderingContext.drawArrays()` to specify what kind of primitive to render.

| Constant name | Value | Description |
| --- | --- | --- |
| `POINTS` | 0x0000 | Passed to `drawElements` or `drawArrays` to draw single points. |
| `LINES` | 0x0001 | Passed to `drawElements` or `drawArrays` to draw lines. Each vertex connects to the one after it. |
| `LINE_LOOP` | 0x0002 | Passed to `drawElements` or `drawArrays` to draw lines. Each set of two vertices is treated as a separate line segment. |
| `LINE_STRIP` | 0x0003 | Passed to `drawElements` or `drawArrays` to draw a connected group of line segments from the first vertex to the last. |
| `TRIANGLES` | 0x0004 | Passed to `drawElements` or `drawArrays` to draw triangles. Each set of three vertices creates a separate triangle. |
| `TRIANGLE_STRIP` | 0x0005 | Passed to `drawElements` or `drawArrays` to draw a connected group of triangles. |
| `TRIANGLE_FAN` | 0x0006 | Passed to `drawElements` or `drawArrays` to draw a connected group of triangles. Each vertex connects to the previous and the first vertex in the fan. |

### Blending modes

Constants passed to `WebGLRenderingContext.blendFunc()` (en-US) or `WebGLRenderingContext.blendFuncSeparate()` (en-US) to specify the blending mode (for both, RBG and alpha, or separately).

| Constant name | Value | Description |
| --- | --- | --- |
| `ZERO` | 0 | Passed to `blendFunc` or `blendFuncSeparate` to turn off a component. |
| `ONE` | 1 | Passed to `blendFunc` or `blendFuncSeparate` to turn on a component. |
| `SRC_COLOR` | 0x0300 | Passed to `blendFunc` or `blendFuncSeparate` to multiply a component by the source elements color. |
| `ONE_MINUS_SRC_COLOR` | 0x0301 | Passed to `blendFunc` or `blendFuncSeparate` to multiply a component by one minus the source elements color. |
| `SRC_ALPHA` | 0x0302 | Passed to `blendFunc` or `blendFuncSeparate` to multiply a component by the source's alpha. |
| `ONE_MINUS_SRC_ALPHA` | 0x0303 | Passed to `blendFunc` or `blendFuncSeparate` to multiply a component by one minus the source's alpha. |
| `DST_ALPHA` | 0x0304 | Passed to `blendFunc` or `blendFuncSeparate` to multiply a component by the destination's alpha. |
| `ONE_MINUS_DST_ALPHA` | 0x0305 | Passed to `blendFunc` or `blendFuncSeparate` to multiply a component by one minus the destination's alpha. |
| `DST_COLOR` | 0x0306 | Passed to `blendFunc` or `blendFuncSeparate` to multiply a component by the destination's color. |
| `ONE_MINUS_DST_COLOR` | 0x0307 | Passed to `blendFunc` or `blendFuncSeparate` to multiply a component by one minus the destination's color. |
| `SRC_ALPHA_SATURATE` | 0x0308 | Passed to `blendFunc` or `blendFuncSeparate` to multiply a component by the minimum of source's alpha or one minus the destination's alpha. |
| `CONSTANT_COLOR` | 0x8001 | Passed to `blendFunc` or `blendFuncSeparate` to specify a constant color blend function. |
| `ONE_MINUS_CONSTANT_COLOR` | 0x8002 | Passed to `blendFunc` or `blendFuncSeparate` to specify one minus a constant color blend function. |
| `CONSTANT_ALPHA` | 0x8003 | Passed to `blendFunc` or `blendFuncSeparate` to specify a constant alpha blend function. |
| `ONE_MINUS_CONSTANT_ALPHA` | 0x8004 | Passed to `blendFunc` or `blendFuncSeparate` to specify one minus a constant alpha blend function. |

### Blending equations

Constants passed to `WebGLRenderingContext.blendEquation()` (en-US) or `WebGLRenderingContext.blendEquationSeparate()` (en-US) to control how the blending is calculated (for both, RBG and alpha, or separately).

| Constant name | Value | Description |
| --- | --- | --- |
| `FUNC_ADD` | 0x8006 | Passed to `blendEquation` or `blendEquationSeparate` to set an addition blend function. |
| `FUNC_SUBTRACT` | 0x800A | Passed to `blendEquation` or `blendEquationSeparate` to specify a subtraction blend function (source - destination). |
| `FUNC_REVERSE_SUBTRACT` | 0x800B | Passed to `blendEquation` or `blendEquationSeparate` to specify a reverse subtraction blend function (destination - source). |

### Getting GL parameter information

Constants passed to `WebGLRenderingContext.getParameter()` (en-US) to specify what information to return.

| Constant name | Value | Description |
| --- | --- | --- |
| `BLEND_EQUATION` | 0x8009 | Passed to `getParameter` to get the current RGB blend function. |
| `BLEND_EQUATION_RGB` | 0x8009 | Passed to `getParameter` to get the current RGB blend function. Same as BLEND\_EQUATION |
| `BLEND_EQUATION_ALPHA` | 0x883D | Passed to `getParameter` to get the current alpha blend function. Same as BLEND\_EQUATION |
| `BLEND_DST_RGB` | 0x80C8 | Passed to `getParameter` to get the current destination RGB blend function. |
| `BLEND_SRC_RGB` | 0x80C9 | Passed to `getParameter` to get the current destination RGB blend function. |
| `BLEND_DST_ALPHA` | 0x80CA | Passed to `getParameter` to get the current destination alpha blend function. |
| `BLEND_SRC_ALPHA` | 0x80CB | Passed to `getParameter` to get the current source alpha blend function. |
| `BLEND_COLOR` | 0x8005 | Passed to `getParameter` to return a the current blend color. |
| `ARRAY_BUFFER_BINDING` | 0x8894 | Passed to `getParameter` to get the array buffer binding. |
| `ELEMENT_ARRAY_BUFFER_BINDING` | 0x8895 | Passed to `getParameter` to get the current element array buffer. |
| `LINE_WIDTH` | 0x0B21 | Passed to `getParameter` to get the current `lineWidth` (set by the `lineWidth` method). |
| `ALIASED_POINT_SIZE_RANGE` | 0x846D | Passed to `getParameter` to get the current size of a point drawn with `gl.POINTS` |
| `ALIASED_LINE_WIDTH_RANGE` | 0x846E | Passed to `getParameter` to get the range of available widths for a line. Returns a length-2 array with the lo value at 0, and hight at 1. |
| `CULL_FACE_MODE` | 0x0B45 | Passed to `getParameter` to get the current value of `cullFace`. Should return `FRONT`, `BACK`, or `FRONT_AND_BACK` |
| `FRONT_FACE` | 0x0B46 | Passed to `getParameter` to determine the current value of `frontFace`. Should return `CW` or `CCW`. |
| `DEPTH_RANGE` | 0x0B70 | Passed to `getParameter` to return a length-2 array of floats giving the current depth range. |
| `DEPTH_WRITEMASK` | 0x0B72 | Passed to `getParameter` to determine if the depth write mask is enabled. |
| `DEPTH_CLEAR_VALUE` | 0x0B73 | Passed to `getParameter` to determine the current depth clear value. |
| `DEPTH_FUNC` | 0x0B74 | Passed to `getParameter` to get the current depth function. Returns `NEVER`, `ALWAYS`, `LESS`, `EQUAL`, `LEQUAL`, `GREATER`, `GEQUAL`, or `NOTEQUAL`. |
| `STENCIL_CLEAR_VALUE` | 0x0B91 | Passed to `getParameter` to get the value the stencil will be cleared to. |
| `STENCIL_FUNC` | 0x0B92 | Passed to `getParameter` to get the current stencil function. Returns `NEVER`, `ALWAYS`, `LESS`, `EQUAL`, `LEQUAL`, `GREATER`, `GEQUAL`, or `NOTEQUAL`. |
| `STENCIL_FAIL` | 0x0B94 | Passed to `getParameter` to get the current stencil fail function. Should return `KEEP`, `REPLACE`, `INCR`, `DECR`, `INVERT`, `INCR_WRAP`, or `DECR_WRAP`. |
| `STENCIL_PASS_DEPTH_FAIL` | 0x0B95 | Passed to `getParameter` to get the current stencil fail function should the depth buffer test fail. Should return `KEEP`, `REPLACE`, `INCR`, `DECR`, `INVERT`, `INCR_WRAP`, or `DECR_WRAP`. |
| `STENCIL_PASS_DEPTH_PASS` | 0x0B96 | Passed to `getParameter` to get the current stencil fail function should the depth buffer test pass. Should return KEEP, REPLACE, INCR, DECR, INVERT, INCR\_WRAP, or DECR\_WRAP. |
| `STENCIL_REF` | 0x0B97 | Passed to `getParameter` to get the reference value used for stencil tests. |
| `STENCIL_VALUE_MASK` | 0x0B93 |  |
| `STENCIL_WRITEMASK` | 0x0B98 |  |
| `STENCIL_BACK_FUNC` | 0x8800 |  |
| `STENCIL_BACK_FAIL` | 0x8801 |  |
| `STENCIL_BACK_PASS_DEPTH_FAIL` | 0x8802 |  |
| `STENCIL_BACK_PASS_DEPTH_PASS` | 0x8803 |  |
| `STENCIL_BACK_REF` | 0x8CA3 |  |
| `STENCIL_BACK_VALUE_MASK` | 0x8CA4 |  |
| `STENCIL_BACK_WRITEMASK` | 0x8CA5 |  |
| `VIEWPORT` | 0x0BA2 | Returns an `Int32Array` with four elements for the current viewport dimensions. |
| `SCISSOR_BOX` | 0x0C10 | Returns an `Int32Array` with four elements for the current scissor box dimensions. |
| `COLOR_CLEAR_VALUE` | 0x0C22 |  |
| `COLOR_WRITEMASK` | 0x0C23 |  |
| `UNPACK_ALIGNMENT` | 0x0CF5 |  |
| `PACK_ALIGNMENT` | 0x0D05 |  |
| `MAX_TEXTURE_SIZE` | 0x0D33 |  |
| `MAX_VIEWPORT_DIMS` | 0x0D3A |  |
| `SUBPIXEL_BITS` | 0x0D50 |  |
| `RED_BITS` | 0x0D52 |  |
| `GREEN_BITS` | 0x0D53 |  |
| `BLUE_BITS` | 0x0D54 |  |
| `ALPHA_BITS` | 0x0D55 |  |
| `DEPTH_BITS` | 0x0D56 |  |
| `STENCIL_BITS` | 0x0D57 |  |
| `POLYGON_OFFSET_UNITS` | 0x2A00 |  |
| `POLYGON_OFFSET_FACTOR` | 0x8038 |  |
| `TEXTURE_BINDING_2D` | 0x8069 |  |
| `SAMPLE_BUFFERS` | 0x80A8 |  |
| `SAMPLES` | 0x80A9 |  |
| `SAMPLE_COVERAGE_VALUE` | 0x80AA |  |
| `SAMPLE_COVERAGE_INVERT` | 0x80AB |  |
| `COMPRESSED_TEXTURE_FORMATS` | 0x86A3 |  |
| `VENDOR` | 0x1F00 |  |
| `RENDERER` | 0x1F01 |  |
| `VERSION` | 0x1F02 |  |
| `IMPLEMENTATION_COLOR_READ_TYPE` | 0x8B9A |  |
| `IMPLEMENTATION_COLOR_READ_FORMAT` | 0x8B9B |  |
| `BROWSER_DEFAULT_WEBGL` | 0x9244 |  |

### Buffers

Constants passed to `WebGLRenderingContext.bufferData()`, `WebGLRenderingContext.bufferSubData()` (en-US), `WebGLRenderingContext.bindBuffer()`, or `WebGLRenderingContext.getBufferParameter()` (en-US).

| Constant name | Value | Description |
| --- | --- | --- |
| `STATIC_DRAW` | 0x88E4 | Passed to `bufferData` as a hint about whether the contents of the buffer are likely to be used often and not change often. |
| `STREAM_DRAW` | 0x88E0 | Passed to `bufferData` as a hint about whether the contents of the buffer are likely to not be used often. |
| `DYNAMIC_DRAW` | 0x88E8 | Passed to `bufferData` as a hint about whether the contents of the buffer are likely to be used often and change often. |
| `ARRAY_BUFFER` | 0x8892 | Passed to `bindBuffer` or `bufferData` to specify the type of buffer being used. |
| `ELEMENT_ARRAY_BUFFER` | 0x8893 | Passed to `bindBuffer` or `bufferData` to specify the type of buffer being used. |
| `BUFFER_SIZE` | 0x8764 | Passed to `getBufferParameter` to get a buffer's size. |
| `BUFFER_USAGE` | 0x8765 | Passed to `getBufferParameter` to get the hint for the buffer passed in when it was created. |

### Vertex attributes

Constants passed to `WebGLRenderingContext.getVertexAttrib()` (en-US).

| Constant name | Value | Description |
| --- | --- | --- |
| `CURRENT_VERTEX_ATTRIB` | 0x8626 | Passed to `getVertexAttrib` to read back the current vertex attribute. |
| `VERTEX_ATTRIB_ARRAY_ENABLED` | 0x8622 |  |
| `VERTEX_ATTRIB_ARRAY_SIZE` | 0x8623 |  |
| `VERTEX_ATTRIB_ARRAY_STRIDE` | 0x8624 |  |
| `VERTEX_ATTRIB_ARRAY_TYPE` | 0x8625 |  |
| `VERTEX_ATTRIB_ARRAY_NORMALIZED` | 0x886A |  |
| `VERTEX_ATTRIB_ARRAY_POINTER` | 0x8645 |  |
| `VERTEX_ATTRIB_ARRAY_BUFFER_BINDING` | 0x889F |  |

### Culling

Constants passed to `WebGLRenderingContext.cullFace()` (en-US).

| Constant name | Value | Description |
| --- | --- | --- |
| `CULL_FACE` | 0x0B44 | Passed to `enable`/`disable` to turn on/off culling. Can also be used with `getParameter` to find the current culling method. |
| `FRONT` | 0x0404 | Passed to `cullFace` to specify that only front faces should be culled. |
| `BACK` | 0x0405 | Passed to `cullFace` to specify that only back faces should be culled. |
| `FRONT_AND_BACK` | 0x0408 | Passed to `cullFace` to specify that front and back faces should be culled. |

### 有効化と無効化

Constants passed to `WebGLRenderingContext.enable()` (en-US) or `WebGLRenderingContext.disable()` (en-US).

| Constant name | Value | Description |
| --- | --- | --- |
| `BLEND` | 0x0BE2 | Passed to `enable`/`disable` to turn on/off blending. Can also be used with `getParameter` to find the current blending method. |
| `DEPTH_TEST` | 0x0B71 | Passed to `enable`/`disable` to turn on/off the depth test. Can also be used with `getParameter` to query the depth test. |
| `DITHER` | 0x0BD0 | Passed to `enable`/`disable` to turn on/off dithering. Can also be used with `getParameter` to find the current dithering method. |
| `POLYGON_OFFSET_FILL` | 0x8037 | Passed to `enable`/`disable` to turn on/off the polygon offset. Useful for rendering hidden-line images, decals, and or solids with highlighted edges. Can also be used with `getParameter` to query the scissor test. |
| `SAMPLE_ALPHA_TO_COVERAGE` | 0x809E | Passed to `enable`/`disable` to turn on/off the alpha to coverage. Used in multi-sampling alpha channels. |
| `SAMPLE_COVERAGE` | 0x80A0 | Passed to `enable`/`disable` to turn on/off the sample coverage. Used in multi-sampling. |
| `SCISSOR_TEST` | 0x0C11 | Passed to `enable`/`disable` to turn on/off the scissor test. Can also be used with `getParameter` to query the scissor test. |
| `STENCIL_TEST` | 0x0B90 | Passed to `enable`/`disable` to turn on/off the stencil test. Can also be used with `getParameter` to query the stencil test. |
|  |  |  |

### エラー

Constants returned from `WebGLRenderingContext.getError()` (en-US).

| Constant name | Value | Description |
| --- | --- | --- |
| `NO_ERROR` | 0 | Returned from `getError`. |
| `INVALID_ENUM` | 0x0500 | Returned from `getError`. |
| `INVALID_VALUE` | 0x0501 | Returned from `getError`. |
| `INVALID_OPERATION` | 0x0502 | Returned from `getError`. |
| `OUT_OF_MEMORY` | 0x0505 | Returned from `getError`. |
| `CONTEXT_LOST_WEBGL` | 0x9242 | Returned from `getError`. |

### Front face directions

Constants passed to `WebGLRenderingContext.frontFace()` (en-US).

| Constant name | Value | Description |
| --- | --- | --- |
| `CW` | 0x0900 | Passed to `frontFace` to specify the front face of a polygon is drawn in the clockwise direction |
| `CCW` | 0x0901 | Passed to `frontFace` to specify the front face of a polygon is drawn in the counter clockwise direction |

### Hints

Constants passed to `WebGLRenderingContext.hint()` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `DONT_CARE` | 0x1100 | There is no preference for this behavior. |
| `FASTEST` | 0x1101 | The most efficient behavior should be used. |
| `NICEST` | 0x1102 | The most correct or the highest quality option should be used. |
| `GENERATE_MIPMAP_HINT` | 0x8192 | Hint for the quality of filtering when generating mipmap images with `WebGLRenderingContext.generateMipmap()` (en-US). |

### データ型

| Constant name | Value | Description |
| --- | --- | --- |
| `BYTE` | 0x1400 |  |
| `UNSIGNED_BYTE` | 0x1401 |  |
| `SHORT` | 0x1402 |  |
| `UNSIGNED_SHORT` | 0x1403 |  |
| `INT` | 0x1404 |  |
| `UNSIGNED_INT` | 0x1405 |  |
| `FLOAT` | 0x1406 |  |

### Pixel formats

| Constant name | Value | Description |
| --- | --- | --- |
| `DEPTH_COMPONENT` | 0x1902 |  |
| `ALPHA` | 0x1906 |  |
| `RGB` | 0x1907 |  |
| `RGBA` | 0x1908 |  |
| `LUMINANCE` | 0x1909 |  |
| `LUMINANCE_ALPHA` | 0x190A |  |

### Pixel types

| Constant name | Value | Description |
| --- | --- | --- |
| `UNSIGNED_BYTE` | 0x1401 |  |
| `UNSIGNED_SHORT_4_4_4_4` | 0x8033 |  |
| `UNSIGNED_SHORT_5_5_5_1` | 0x8034 |  |
| `UNSIGNED_SHORT_5_6_5` | 0x8363 |  |

### シェーダー

Constants passed to `WebGLRenderingContext.createShader()` or `WebGLRenderingContext.getShaderParameter()`

| Constant name | Value | Description |
| --- | --- | --- |
| `FRAGMENT_SHADER` | 0x8B30 | Passed to `createShader` to define a fragment shader. |
| `VERTEX_SHADER` | 0x8B31 | Passed to `createShader` to define a vertex shader |
| `COMPILE_STATUS` | 0x8B81 | コンパイルの状態を取得するために `getShaderParamter` に渡されます。シェーダーがコンパイルされなかった場合、false が返ります。その場合は `getShaderInfoLog` に問い合わせて正確なエラーを見つけられます。 |
| `DELETE_STATUS` | 0x8B80 | Passed to `getShaderParamter` to determine if a shader was deleted via `deleteShader`. Returns true if it was, false otherwise. |
| `LINK_STATUS` | 0x8B82 | Passed to `getProgramParameter` after calling `linkProgram` to determine if a program was linked correctly. Returns false if there were errors. Use `getProgramInfoLog` to find the exact error. |
| `VALIDATE_STATUS` | 0x8B83 | Passed to `getProgramParameter` after calling `validateProgram` to determine if it is valid. Returns false if errors were found. |
| `ATTACHED_SHADERS` | 0x8B85 | Passed to `getProgramParameter` after calling `attachShader` to determine if the shader was attached correctly. Returns false if errors occurred. |
| `ACTIVE_ATTRIBUTES` | 0x8B89 | Passed to `getProgramParameter` to get the number of attributes active in a program. |
| `ACTIVE_UNIFORMS` | 0x8B86 | Passed to `getProgramParamter` to get the number of uniforms active in a program. |
| `MAX_VERTEX_ATTRIBS` | 0x8869 | The maximum number of entries possible in the vertex attribute list. |
| `MAX_VERTEX_UNIFORM_VECTORS` | 0x8DFB |  |
| `MAX_VARYING_VECTORS` | 0x8DFC |  |
| `MAX_COMBINED_TEXTURE_IMAGE_UNITS` | 0x8B4D |  |
| `MAX_VERTEX_TEXTURE_IMAGE_UNITS` | 0x8B4C |  |
| `MAX_TEXTURE_IMAGE_UNITS` | 0x8872 | Implementation dependent number of maximum texture units. At least 8. |
| `MAX_FRAGMENT_UNIFORM_VECTORS` | 0x8DFD |  |
| `SHADER_TYPE` | 0x8B4F |  |
| `SHADING_LANGUAGE_VERSION` | 0x8B8C |  |
| `CURRENT_PROGRAM` | 0x8B8D |  |

### Depth or stencil tests

Constants passed to `WebGLRenderingContext.depthFunc()` (en-US) or `WebGLRenderingContext.stencilFunc()` (en-US).

| Constant name | Value | Description |
| --- | --- | --- |
| `NEVER` | 0x0200 | Passed to `depthFunction` or `stencilFunction` to specify depth or stencil tests will never pass. i.e. Nothing will be drawn. |
| `LESS` | 0x0201 | Passed to `depthFunction` or `stencilFunction` to specify depth or stencil tests will pass if the new depth value is less than the stored value. |
| `EQUAL` | 0x0202 | Passed to `depthFunction` or `stencilFunction` to specify depth or stencil tests will pass if the new depth value is equals to the stored value. |
| `LEQUAL` | 0x0203 | Passed to `depthFunction` or `stencilFunction` to specify depth or stencil tests will pass if the new depth value is less than or equal to the stored value. |
| `GREATER` | 0x0204 | Passed to `depthFunction` or `stencilFunction` to specify depth or stencil tests will pass if the new depth value is greater than the stored value. |
| `NOTEQUAL` | 0x0205 | Passed to `depthFunction` or `stencilFunction` to specify depth or stencil tests will pass if the new depth value is not equal to the stored value. |
| `GEQUAL` | 0x0206 | Passed to `depthFunction` or `stencilFunction` to specify depth or stencil tests will pass if the new depth value is greater than or equal to the stored value. |
| `ALWAYS` | 0x0207 | Passed to `depthFunction` or `stencilFunction` to specify depth or stencil tests will always pass. i.e. Pixels will be drawn in the order they are drawn. |

### Stencil actions

Constants passed to `WebGLRenderingContext.stencilOp()` (en-US).

| Constant name | Value | Description |
| --- | --- | --- |
| `KEEP` | 0x1E00 |  |
| `REPLACE` | 0x1E01 |  |
| `INCR` | 0x1E02 |  |
| `DECR` | 0x1E03 |  |
| `INVERT` | 0x150A |  |
| `INCR_WRAP` | 0x8507 |  |
| `DECR_WRAP` | 0x8508 |  |

### Textures

Constants passed to `WebGLRenderingContext.texParameteri()` (en-US), `WebGLRenderingContext.texParameterf()` (en-US), `WebGLRenderingContext.bindTexture()` (en-US), `WebGLRenderingContext.texImage2D()` (en-US), and others.

| Constant name | Value | Description |
| --- | --- | --- |
| `NEAREST` | 0x2600 |  |
| `LINEAR` | 0x2601 |  |
| `NEAREST_MIPMAP_NEAREST` | 0x2700 |  |
| `LINEAR_MIPMAP_NEAREST` | 0x2701 |  |
| `NEAREST_MIPMAP_LINEAR` | 0x2702 |  |
| `LINEAR_MIPMAP_LINEAR` | 0x2703 |  |
| `TEXTURE_MAG_FILTER` | 0x2800 |  |
| `TEXTURE_MIN_FILTER` | 0x2801 |  |
| `TEXTURE_WRAP_S` | 0x2802 |  |
| `TEXTURE_WRAP_T` | 0x2803 |  |
| `TEXTURE_2D` | 0x0DE1 |  |
| `TEXTURE` | 0x1702 |  |
| `TEXTURE_CUBE_MAP` | 0x8513 |  |
| `TEXTURE_BINDING_CUBE_MAP` | 0x8514 |  |
| `TEXTURE_CUBE_MAP_POSITIVE_X` | 0x8515 |  |
| `TEXTURE_CUBE_MAP_NEGATIVE_X` | 0x8516 |  |
| `TEXTURE_CUBE_MAP_POSITIVE_Y` | 0x8517 |  |
| `TEXTURE_CUBE_MAP_NEGATIVE_Y` | 0x8518 |  |
| `TEXTURE_CUBE_MAP_POSITIVE_Z` | 0x8519 |  |
| `TEXTURE_CUBE_MAP_NEGATIVE_Z` | 0x851A |  |
| `MAX_CUBE_MAP_TEXTURE_SIZE` | 0x851C |  |
| `TEXTURE0 - 31` | 0x84C0 - 0x84DF | A texture unit. |
| `ACTIVE_TEXTURE` | 0x84E0 | The current active texture unit. |
| `REPEAT` | 0x2901 |  |
| `CLAMP_TO_EDGE` | 0x812F |  |
| `MIRRORED_REPEAT` | 0x8370 |  |

### Uniform types

| Constant name | Value | Description |
| --- | --- | --- |
| `FLOAT_VEC2` | 0x8B50 |  |
| `FLOAT_VEC3` | 0x8B51 |  |
| `FLOAT_VEC4` | 0x8B52 |  |
| `INT_VEC2` | 0x8B53 |  |
| `INT_VEC3` | 0x8B54 |  |
| `INT_VEC4` | 0x8B55 |  |
| `BOOL` | 0x8B56 |  |
| `BOOL_VEC2` | 0x8B57 |  |
| `BOOL_VEC3` | 0x8B58 |  |
| `BOOL_VEC4` | 0x8B59 |  |
| `FLOAT_MAT2` | 0x8B5A |  |
| `FLOAT_MAT3` | 0x8B5B |  |
| `FLOAT_MAT4` | 0x8B5C |  |
| `SAMPLER_2D` | 0x8B5E |  |
| `SAMPLER_CUBE` | 0x8B60 |  |

### Shader precision-specified types

| Constant name | Value | Description |
| --- | --- | --- |
| `LOW_FLOAT` | 0x8DF0 |  |
| `MEDIUM_FLOAT` | 0x8DF1 |  |
| `HIGH_FLOAT` | 0x8DF2 |  |
| `LOW_INT` | 0x8DF3 |  |
| `MEDIUM_INT` | 0x8DF4 |  |
| `HIGH_INT` | 0x8DF5 |  |

### Framebuffers and renderbuffers

| Constant name | Value | Description |
| --- | --- | --- |
| `FRAMEBUFFER` | 0x8D40 |  |
| `RENDERBUFFER` | 0x8D41 |  |
| `RGBA4` | 0x8056 |  |
| `RGB5_A1` | 0x8057 |  |
| `RGB565` | 0x8D62 |  |
| `DEPTH_COMPONENT16` | 0x81A5 |  |
| `STENCIL_INDEX8` | 0x8D48 |  |
| `DEPTH_STENCIL` | 0x84F9 |  |
| `RENDERBUFFER_WIDTH` | 0x8D42 |  |
| `RENDERBUFFER_HEIGHT` | 0x8D43 |  |
| `RENDERBUFFER_INTERNAL_FORMAT` | 0x8D44 |  |
| `RENDERBUFFER_RED_SIZE` | 0x8D50 |  |
| `RENDERBUFFER_GREEN_SIZE` | 0x8D51 |  |
| `RENDERBUFFER_BLUE_SIZE` | 0x8D52 |  |
| `RENDERBUFFER_ALPHA_SIZE` | 0x8D53 |  |
| `RENDERBUFFER_DEPTH_SIZE` | 0x8D54 |  |
| `RENDERBUFFER_STENCIL_SIZE` | 0x8D55 |  |
| `FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE` | 0x8CD0 |  |
| `FRAMEBUFFER_ATTACHMENT_OBJECT_NAME` | 0x8CD1 |  |
| `FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL` | 0x8CD2 |  |
| `FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE` | 0x8CD3 |  |
| `COLOR_ATTACHMENT0` | 0x8CE0 |  |
| `DEPTH_ATTACHMENT` | 0x8D00 |  |
| `STENCIL_ATTACHMENT` | 0x8D20 |  |
| `DEPTH_STENCIL_ATTACHMENT` | 0x821A |  |
| `NONE` | 0 |  |
| `FRAMEBUFFER_COMPLETE` | 0x8CD5 |  |
| `FRAMEBUFFER_INCOMPLETE_ATTACHMENT` | 0x8CD6 |  |
| `FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT` | 0x8CD7 |  |
| `FRAMEBUFFER_INCOMPLETE_DIMENSIONS` | 0x8CD9 |  |
| `FRAMEBUFFER_UNSUPPORTED` | 0x8CDD |  |
| `FRAMEBUFFER_BINDING` | 0x8CA6 |  |
| `RENDERBUFFER_BINDING` | 0x8CA7 |  |
| `MAX_RENDERBUFFER_SIZE` | 0x84E8 |  |
| `INVALID_FRAMEBUFFER_OPERATION` | 0x0506 |  |

### Pixel storage modes

Constants passed to `WebGLRenderingContext.pixelStorei()` (en-US).

| Constant name | Value | Description |
| --- | --- | --- |
| `UNPACK_FLIP_Y_WEBGL` | 0x9240 |  |
| `UNPACK_PREMULTIPLY_ALPHA_WEBGL` | 0x9241 |  |
| `UNPACK_COLORSPACE_CONVERSION_WEBGL` | 0x9243 |  |

Additional constants defined WebGL 2
------------------------------------

These constants are defined on the `WebGL2RenderingContext` (en-US) interface. All WebGL 1 constants are also available in a WebGL 2 context.

### Getting GL parameter information

Constants passed to `WebGLRenderingContext.getParameter()` (en-US) to specify what information to return.

| Constant name | Value | Description |
| --- | --- | --- |
| `READ_BUFFER` | 0x0C02 |  |
| `UNPACK_ROW_LENGTH` | 0x0CF2 |  |
| `UNPACK_SKIP_ROWS` | 0x0CF3 |  |
| `UNPACK_SKIP_PIXELS` | 0x0CF4 |  |
| `PACK_ROW_LENGTH` | 0x0D02 |  |
| `PACK_SKIP_ROWS` | 0x0D03 |  |
| `PACK_SKIP_PIXELS` | 0x0D04 |  |
| `TEXTURE_BINDING_3D` | 0x806A |  |
| `UNPACK_SKIP_IMAGES` | 0x806D |  |
| `UNPACK_IMAGE_HEIGHT` | 0x806E |  |
| `MAX_3D_TEXTURE_SIZE` | 0x8073 |  |
| `MAX_ELEMENTS_VERTICES` | 0x80E8 |  |
| `MAX_ELEMENTS_INDICES` | 0x80E9 |  |
| `MAX_TEXTURE_LOD_BIAS` | 0x84FD |  |
| `MAX_FRAGMENT_UNIFORM_COMPONENTS` | 0x8B49 |  |
| `MAX_VERTEX_UNIFORM_COMPONENTS` | 0x8B4A |  |
| `MAX_ARRAY_TEXTURE_LAYERS` | 0x88FF |  |
| `MIN_PROGRAM_TEXEL_OFFSET` | 0x8904 |  |
| `MAX_PROGRAM_TEXEL_OFFSET` | 0x8905 |  |
| `MAX_VARYING_COMPONENTS` | 0x8B4B |  |
| `FRAGMENT_SHADER_DERIVATIVE_HINT` | 0x8B8B |  |
| `RASTERIZER_DISCARD` | 0x8C89 |  |
| `VERTEX_ARRAY_BINDING` | 0x85B5 |  |
| `MAX_VERTEX_OUTPUT_COMPONENTS` | 0x9122 |  |
| `MAX_FRAGMENT_INPUT_COMPONENTS` | 0x9125 |  |
| `MAX_SERVER_WAIT_TIMEOUT` | 0x9111 |  |
| `MAX_ELEMENT_INDEX` | 0x8D6B |  |

### Textures

Constants passed to `WebGLRenderingContext.texParameteri()` (en-US), `WebGLRenderingContext.texParameterf()` (en-US), `WebGLRenderingContext.bindTexture()` (en-US), `WebGLRenderingContext.texImage2D()` (en-US), and others.

| Constant name | Value | Description |
| --- | --- | --- |
| `RED` | 0x1903 |  |
| `RGB8` | 0x8051 |  |
| `RGBA8` | 0x8058 |  |
| `RGB10_A2` | 0x8059 |  |
| `TEXTURE_3D` | 0x806F |  |
| `TEXTURE_WRAP_R` | 0x8072 |  |
| `TEXTURE_MIN_LOD` | 0x813A |  |
| `TEXTURE_MAX_LOD` | 0x813B |  |
| `TEXTURE_BASE_LEVEL` | 0x813C |  |
| `TEXTURE_MAX_LEVEL` | 0x813D |  |
| `TEXTURE_COMPARE_MODE` | 0x884C |  |
| `TEXTURE_COMPARE_FUNC` | 0x884D |  |
| `SRGB` | 0x8C40 |  |
| `SRGB8` | 0x8C41 |  |
| `SRGB8_ALPHA8` | 0x8C43 |  |
| `COMPARE_REF_TO_TEXTURE` | 0x884E |  |
| `RGBA32F` | 0x8814 |  |
| `RGB32F` | 0x8815 |  |
| `RGBA16F` | 0x881A |  |
| `RGB16F` | 0x881B |  |
| `TEXTURE_2D_ARRAY` | 0x8C1A |  |
| `TEXTURE_BINDING_2D_ARRAY` | 0x8C1D |  |
| `R11F_G11F_B10F` | 0x8C3A |  |
| `RGB9_E5` | 0x8C3D |  |
| `RGBA32UI` | 0x8D70 |  |
| `RGB32UI` | 0x8D71 |  |
| `RGBA16UI` | 0x8D76 |  |
| `RGB16UI` | 0x8D77 |  |
| `RGBA8UI` | 0x8D7C |  |
| `RGB8UI` | 0x8D7D |  |
| `RGBA32I` | 0x8D82 |  |
| `RGB32I` | 0x8D83 |  |
| `RGBA16I` | 0x8D88 |  |
| `RGB16I` | 0x8D89 |  |
| `RGBA8I` | 0x8D8E |  |
| `RGB8I` | 0x8D8F |  |
| `RED_INTEGER` | 0x8D94 |  |
| `RGB_INTEGER` | 0x8D98 |  |
| `RGBA_INTEGER` | 0x8D99 |  |
| `R8` | 0x8229 |  |
| `RG8` | 0x822B |  |
| R16F | 0x822D |  |
| R32F | 0x822E |  |
| RG16F | 0x822F |  |
| RG32F | 0x8230 |  |
| R8I | 0x8231 |  |
| R8UI | 0x8232 |  |
| R16I | 0x8233 |  |
| R16UI | 0x8234 |  |
| R32I | 0x8235 |  |
| R32UI | 0x8236 |  |
| RG8I | 0x8237 |  |
| RG8UI | 0x8238 |  |
| RG16I | 0x8239 |  |
| RG16UI | 0x823A |  |
| RG32I | 0x823B |  |
| RG32UI | 0x823C |  |
| R8\_SNORM | 0x8F94 |  |
| RG8\_SNORM | 0x8F95 |  |
| RGB8\_SNORM | 0x8F96 |  |
| RGBA8\_SNORM | 0x8F97 |  |
| `RGB10_A2UI` | 0x906F |  |
| `TEXTURE_IMMUTABLE_FORMAT` | 0x912F |  |
| `TEXTURE_IMMUTABLE_LEVELS` | 0x82DF |  |

### Pixel types

| Constant name | Value | Description |
| --- | --- | --- |
| `UNSIGNED_INT_2_10_10_10_REV` | 0x8368 |  |
| `UNSIGNED_INT_10F_11F_11F_REV` | 0x8C3B |  |
| `UNSIGNED_INT_5_9_9_9_REV` | 0x8C3E |  |
| `FLOAT_32_UNSIGNED_INT_24_8_REV` | 0x8DAD |  |
| UNSIGNED\_INT\_24\_8 | 0x84FA |  |
| `HALF_FLOAT` | 0x140B |  |
| `RG` | 0x8227 |  |
| `RG_INTEGER` | 0x8228 |  |
| `INT_2_10_10_10_REV` | 0x8D9F |  |

### Queries

| Constant name | Value | Description |
| --- | --- | --- |
| `CURRENT_QUERY` | 0x8865 |  |
| `QUERY_RESULT` | 0x8866 |  |
| `QUERY_RESULT_AVAILABLE` | 0x8867 |  |
| `ANY_SAMPLES_PASSED` | 0x8C2F |  |
| `ANY_SAMPLES_PASSED_CONSERVATIVE` | 0x8D6A |  |

### Draw buffers

| Constant name | Value | Description |
| --- | --- | --- |
| `MAX_DRAW_BUFFERS` | 0x8824 |  |
| `DRAW_BUFFER0` | 0x8825 |  |
| `DRAW_BUFFER1` | 0x8826 |  |
| `DRAW_BUFFER2` | 0x8827 |  |
| `DRAW_BUFFER3` | 0x8828 |  |
| `DRAW_BUFFER4` | 0x8829 |  |
| `DRAW_BUFFER5` | 0x882A |  |
| `DRAW_BUFFER6` | 0x882B |  |
| `DRAW_BUFFER7` | 0x882C |  |
| `DRAW_BUFFER8` | 0x882D |  |
| `DRAW_BUFFER9` | 0x882E |  |
| `DRAW_BUFFER10` | 0x882F |  |
| `DRAW_BUFFER11` | 0x8830 |  |
| `DRAW_BUFFER12` | 0x8831 |  |
| `DRAW_BUFFER13` | 0x8832 |  |
| `DRAW_BUFFER14` | 0x8833 |  |
| `DRAW_BUFFER15` | 0x8834 |  |
| `MAX_COLOR_ATTACHMENTS` | 0x8CDF |  |
| `COLOR_ATTACHMENT1` | 0x8CE1 |  |
| `COLOR_ATTACHMENT2` | 0x8CE2 |  |
| `COLOR_ATTACHMENT3` | 0x8CE3 |  |
| `COLOR_ATTACHMENT4` | 0x8CE4 |  |
| `COLOR_ATTACHMENT5` | 0x8CE5 |  |
| `COLOR_ATTACHMENT6` | 0x8CE6 |  |
| `COLOR_ATTACHMENT7` | 0x8CE7 |  |
| `COLOR_ATTACHMENT8` | 0x8CE8 |  |
| `COLOR_ATTACHMENT9` | 0x8CE9 |  |
| `COLOR_ATTACHMENT10` | 0x8CEA |  |
| `COLOR_ATTACHMENT11` | 0x8CEB |  |
| `COLOR_ATTACHMENT12` | 0x8CEC |  |
| `COLOR_ATTACHMENT13` | 0x8CED |  |
| `COLOR_ATTACHMENT14` | 0x8CEE |  |
| `COLOR_ATTACHMENT15` | 0x8CEF |  |

### Samplers

| Constant name | Value | Description |
| --- | --- | --- |
| `SAMPLER_3D` | 0x8B5F |  |
| `SAMPLER_2D_SHADOW` | 0x8B62 |  |
| `SAMPLER_2D_ARRAY` | 0x8DC1 |  |
| `SAMPLER_2D_ARRAY_SHADOW` | 0x8DC4 |  |
| `SAMPLER_CUBE_SHADOW` | 0x8DC5 |  |
| `INT_SAMPLER_2D` | 0x8DCA |  |
| `INT_SAMPLER_3D` | 0x8DCB |  |
| `INT_SAMPLER_CUBE` | 0x8DCC |  |
| `INT_SAMPLER_2D_ARRAY` | 0x8DCF |  |
| `UNSIGNED_INT_SAMPLER_2D` | 0x8DD2 |  |
| `UNSIGNED_INT_SAMPLER_3D` | 0x8DD3 |  |
| `UNSIGNED_INT_SAMPLER_CUBE` | 0x8DD4 |  |
| `UNSIGNED_INT_SAMPLER_2D_ARRAY` | 0x8DD7 |  |
| `MAX_SAMPLES` | 0x8D57 |  |
| `SAMPLER_BINDING` | 0x8919 |  |

### Buffers

| Constant name | Value | Description |
| --- | --- | --- |
| `PIXEL_PACK_BUFFER` | 0x88EB |  |
| `PIXEL_UNPACK_BUFFER` | 0x88EC |  |
| `PIXEL_PACK_BUFFER_BINDING` | 0x88ED |  |
| `PIXEL_UNPACK_BUFFER_BINDING` | 0x88EF |  |
| `COPY_READ_BUFFER` | 0x8F36 |  |
| `COPY_WRITE_BUFFER` | 0x8F37 |  |
| `COPY_READ_BUFFER_BINDING` | 0x8F36 |  |
| `COPY_WRITE_BUFFER_BINDING` | 0x8F37 |  |

### Data types

| Constant name | Value | Description |
| --- | --- | --- |
| `FLOAT_MAT2x3` | 0x8B65 |  |
| `FLOAT_MAT2x4` | 0x8B66 |  |
| `FLOAT_MAT3x2` | 0x8B67 |  |
| `FLOAT_MAT3x4` | 0x8B68 |  |
| `FLOAT_MAT4x2` | 0x8B69 |  |
| `FLOAT_MAT4x3` | 0x8B6A |  |
| `UNSIGNED_INT_VEC2` | 0x8DC6 |  |
| `UNSIGNED_INT_VEC3` | 0x8DC7 |  |
| `UNSIGNED_INT_VEC4` | 0x8DC8 |  |
| `UNSIGNED_NORMALIZED` | 0x8C17 |  |
| `SIGNED_NORMALIZED` | 0x8F9C |  |

### Vertex attributes

| Constant name | Value | Description |
| --- | --- | --- |
| `VERTEX_ATTRIB_ARRAY_INTEGER` | 0x88FD |  |
| `VERTEX_ATTRIB_ARRAY_DIVISOR` | 0x88FE |  |

### Transform feedback

| Constant name | Value | Description |
| --- | --- | --- |
| `TRANSFORM_FEEDBACK_BUFFER_MODE` | 0x8C7F |  |
| `MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS` | 0x8C80 |  |
| `TRANSFORM_FEEDBACK_VARYINGS` | 0x8C83 |  |
| `TRANSFORM_FEEDBACK_BUFFER_START` | 0x8C84 |  |
| `TRANSFORM_FEEDBACK_BUFFER_SIZE` | 0x8C85 |  |
| `TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN` | 0x8C88 |  |
| `MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS` | 0x8C8A |  |
| `MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS` | 0x8C8B |  |
| `INTERLEAVED_ATTRIBS` | 0x8C8C |  |
| `SEPARATE_ATTRIBS` | 0x8C8D |  |
| `TRANSFORM_FEEDBACK_BUFFER` | 0x8C8E |  |
| `TRANSFORM_FEEDBACK_BUFFER_BINDING` | 0x8C8F |  |
| `TRANSFORM_FEEDBACK` | 0x8E22 |  |
| `TRANSFORM_FEEDBACK_PAUSED` | 0x8E23 |  |
| `TRANSFORM_FEEDBACK_ACTIVE` | 0x8E24 |  |
| `TRANSFORM_FEEDBACK_BINDING` | 0x8E25 |  |

### Framebuffers and renderbuffers

| Constant name | Value | Description |
| --- | --- | --- |
| `FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING` | 0x8210 |  |
| `FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE` | 0x8211 |  |
| `FRAMEBUFFER_ATTACHMENT_RED_SIZE` | 0x8212 |  |
| `FRAMEBUFFER_ATTACHMENT_GREEN_SIZE` | 0x8213 |  |
| `FRAMEBUFFER_ATTACHMENT_BLUE_SIZE` | 0x8214 |  |
| `FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE` | 0x8215 |  |
| `FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE` | 0x8216 |  |
| `FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE` | 0x8217 |  |
| `FRAMEBUFFER_DEFAULT` | 0x8218 |  |
| `DEPTH_STENCIL_ATTACHMENT` | 0x821A |  |
| `DEPTH_STENCIL` | 0x84F9 |  |
| `DEPTH24_STENCIL8` | 0x88F0 |  |
| `DRAW_FRAMEBUFFER_BINDING` | 0x8CA6 |  |
| `READ_FRAMEBUFFER` | 0x8CA8 |  |
| `DRAW_FRAMEBUFFER` | 0x8CA9 |  |
| `READ_FRAMEBUFFER_BINDING` | 0x8CAA |  |
| `RENDERBUFFER_SAMPLES` | 0x8CAB |  |
| `FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER` | 0x8CD4 |  |
| `FRAMEBUFFER_INCOMPLETE_MULTISAMPLE` | 0x8D56 |  |

### Uniforms

| Constant name | Value | Description |
| --- | --- | --- |
| `UNIFORM_BUFFER` | 0x8A11 |  |
| `UNIFORM_BUFFER_BINDING` | 0x8A28 |  |
| `UNIFORM_BUFFER_START` | 0x8A29 |  |
| `UNIFORM_BUFFER_SIZE` | 0x8A2A |  |
| `MAX_VERTEX_UNIFORM_BLOCKS` | 0x8A2B |  |
| `MAX_FRAGMENT_UNIFORM_BLOCKS` | 0x8A2D |  |
| `MAX_COMBINED_UNIFORM_BLOCKS` | 0x8A2E |  |
| `MAX_UNIFORM_BUFFER_BINDINGS` | 0x8A2F |  |
| `MAX_UNIFORM_BLOCK_SIZE` | 0x8A30 |  |
| `MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS` | 0x8A31 |  |
| `MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS` | 0x8A33 |  |
| `UNIFORM_BUFFER_OFFSET_ALIGNMENT` | 0x8A34 |  |
| `ACTIVE_UNIFORM_BLOCKS` | 0x8A36 |  |
| `UNIFORM_TYPE` | 0x8A37 |  |
| `UNIFORM_SIZE` | 0x8A38 |  |
| `UNIFORM_BLOCK_INDEX` | 0x8A3A |  |
| `UNIFORM_OFFSET` | 0x8A3B |  |
| `UNIFORM_ARRAY_STRIDE` | 0x8A3C |  |
| `UNIFORM_MATRIX_STRIDE` | 0x8A3D |  |
| `UNIFORM_IS_ROW_MAJOR` | 0x8A3E |  |
| `UNIFORM_BLOCK_BINDING` | 0x8A3F |  |
| `UNIFORM_BLOCK_DATA_SIZE` | 0x8A40 |  |
| `UNIFORM_BLOCK_ACTIVE_UNIFORMS` | 0x8A42 |  |
| `UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES` | 0x8A43 |  |
| `UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER` | 0x8A44 |  |
| `UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADER` | 0x8A46 |  |

### Sync objects

| Constant name | Value | Description |
| --- | --- | --- |
| `OBJECT_TYPE` | 0x9112 |  |
| `SYNC_CONDITION` | 0x9113 |  |
| `SYNC_STATUS` | 0x9114 |  |
| `SYNC_FLAGS` | 0x9115 |  |
| `SYNC_FENCE` | 0x9116 |  |
| `SYNC_GPU_COMMANDS_COMPLETE` | 0x9117 |  |
| `UNSIGNALED` | 0x9118 |  |
| `SIGNALED` | 0x9119 |  |
| `ALREADY_SIGNALED` | 0x911A |  |
| `TIMEOUT_EXPIRED` | 0x911B |  |
| `CONDITION_SATISFIED` | 0x911C |  |
| `WAIT_FAILED` | 0x911D |  |
| `SYNC_FLUSH_COMMANDS_BIT` | 0x00000001 |  |

### Miscellaneous constants

| Constant name | Value | Description |
| --- | --- | --- |
| `COLOR` | 0x1800 |  |
| DEPTH | 0x1801 |  |
| `STENCIL` | 0x1802 |  |
| `MIN` | 0x8007 |  |
| MAX | 0x8008 |  |
| `DEPTH_COMPONENT24` | 0x81A6 |  |
| `STREAM_READ` | 0x88E1 |  |
| `STREAM_COPY` | 0x88E2 |  |
| `STATIC_READ` | 0x88E5 |  |
| `STATIC_COPY` | 0x88E6 |  |
| `DYNAMIC_READ` | 0x88E9 |  |
| `DYNAMIC_COPY` | 0x88EA |  |
| `DEPTH_COMPONENT32F` | 0x8CAC |  |
| `DEPTH32F_STENCIL8` | 0x8CAD |  |
| `INVALID_INDEX` | 0xFFFFFFFF |  |
| `TIMEOUT_IGNORED` | -1 |  |
| `MAX_CLIENT_WAIT_TIMEOUT_WEBGL` | 0x9247 |  |

Constants defined in WebGL extensions
-------------------------------------

### `ANGLE_instanced_arrays`

| Constant name | Value | Description |
| --- | --- | --- |
| `VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE` | 0x88FE | Describes the frequency divisor used for instanced rendering. |

### `WEBGL_debug_renderer_info` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `UNMASKED_VENDOR_WEBGL` | 0x9245 | Passed to `getParameter` to get the vendor string of the graphics driver. |
| `UNMASKED_RENDERER_WEBGL` | 0x9246 | Passed to `getParameter` to get the renderer string of the graphics driver. |

### `EXT_texture_filter_anisotropic` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `MAX_TEXTURE_MAX_ANISOTROPY_EXT` | 0x84FF | Returns the maximum available anisotropy. |
| `TEXTURE_MAX_ANISOTROPY_EXT` | 0x84FE | Passed to `texParameter` to set the desired maximum anisotropy for a texture. |

### `WEBGL_compressed_texture_s3tc` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `COMPRESSED_RGB_S3TC_DXT1_EXT` | 0x83F0 | A DXT1-compressed image in an RGB image format. |
| `COMPRESSED_RGBA_S3TC_DXT1_EXT` | 0x83F1 | A DXT1-compressed image in an RGB image format with a simple on/off alpha value. |
| `COMPRESSED_RGBA_S3TC_DXT3_EXT` | 0x83F2 | A DXT3-compressed image in an RGBA image format. Compared to a 32-bit RGBA texture, it offers 4:1 compression. |
| `COMPRESSED_RGBA_S3TC_DXT5_EXT` | 0x83F3 | A DXT5-compressed image in an RGBA image format. It also provides a 4:1 compression, but differs to the DXT3 compression in how the alpha compression is done. |

### `WEBGL_compressed_texture_etc` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `COMPRESSED_R11_EAC` | 0x9270 | One-channel (red) unsigned format compression. |
| `COMPRESSED_SIGNED_R11_EAC` | 0x9271 | One-channel (red) signed format compression. |
| `COMPRESSED_RG11_EAC` | 0x9272 | Two-channel (red and green) unsigned format compression. |
| `COMPRESSED_SIGNED_RG11_EAC` | 0x9273 | Two-channel (red and green) signed format compression. |
| `COMPRESSED_RGB8_ETC2` | 0x9274 | Compresses RBG8 data with no alpha channel. |
| `COMPRESSED_RGBA8_ETC2_EAC` | 0x9275 | Compresses RGBA8 data. The RGB part is encoded the same as `RGB_ETC2`, but the alpha part is encoded separately. |
| `COMPRESSED_SRGB8_ETC2` | 0x9276 | Compresses sRBG8 data with no alpha channel. |
| `COMPRESSED_SRGB8_ALPHA8_ETC2_EAC` | 0x9277 | Compresses sRGBA8 data. The sRGB part is encoded the same as `SRGB_ETC2`, but the alpha part is encoded separately. |
| `COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2` | 0x9278 | Similar to `RGB8_ETC`, but with ability to punch through the alpha channel, which means to make it completely opaque or transparent. |
| `COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2` | 0x9279 | Similar to `SRGB8_ETC`, but with ability to punch through the alpha channel, which means to make it completely opaque or transparent. |

### `WEBGL_compressed_texture_pvrtc` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `COMPRESSED_RGB_PVRTC_4BPPV1_IMG` | 0x8C00 | RGB compression in 4-bit mode. One block for each 4×4 pixels. |
| `COMPRESSED_RGBA_PVRTC_4BPPV1_IMG` | 0x8C02 | RGBA compression in 4-bit mode. One block for each 4×4 pixels. |
| `COMPRESSED_RGB_PVRTC_2BPPV1_IMG` | 0x8C01 | RGB compression in 2-bit mode. One block for each 8×4 pixels. |
| `COMPRESSED_RGBA_PVRTC_2BPPV1_IMG` | 0x8C03 | RGBA compression in 2-bit mode. One block for each 8×4 pixe |

### `WEBGL_compressed_texture_etc1` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `COMPRESSED_RGB_ETC1_WEBGL` | 0x8D64 | Compresses 24-bit RGB data with no alpha channel. |

### `WEBGL_compressed_texture_atc`

| Constant name | Value | Description |
| --- | --- | --- |
| `COMPRESSED_RGB_ATC_WEBGL` | 0x8C92 | Compresses RGB textures with no alpha channel. |
| `COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL` | 0x8C92 | Compresses RGBA textures using explicit alpha encoding (useful when alpha transitions are sharp). |
| `COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL` | 0x87EE | Compresses RGBA textures using interpolated alpha encoding (useful when alpha transitions are gradient). |

### `WEBGL_depth_texture` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `UNSIGNED_INT_24_8_WEBGL` | 0x84FA | Unsigned integer type for 24-bit depth texture data. |

### `OES_texture_half_float` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `HALF_FLOAT_OES` | 0x8D61 | Half floating-point type (16-bit). |

### `WEBGL_color_buffer_float`

| Constant name | Value | Description |
| --- | --- | --- |
| `RGBA32F_EXT` | 0x8814 | RGBA 32-bit floating-point color-renderable format. |
| `RGB32F_EXT` | 0x8815 | RGB 32-bit floating-point color-renderable format. |
| `FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT` | 0x8211 |  |
| `UNSIGNED_NORMALIZED_EXT` | 0x8C17 |  |

### `EXT_blend_minmax` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `MIN_EXT` | 0x8007 | Produces the minimum color components of the source and destination colors. |
| `MAX_EXT` | 0x8008 | Produces the maximum color components of the source and destination colors. |

### `EXT_sRGB` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `SRGB_EXT` | 0x8C40 | Unsized sRGB format that leaves the precision up to the driver. |
| `SRGB_ALPHA_EXT` | 0x8C42 | Unsized sRGB format with unsized alpha component. |
| `SRGB8_ALPHA8_EXT` | 0x8C43 | Sized (8-bit) sRGB and alpha formats. |
| `FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING_EXT` | 0x8210 | Returns the framebuffer color encoding. |

### `OES_standard_derivatives` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `FRAGMENT_SHADER_DERIVATIVE_HINT_OES` | 0x8B8B | Indicates the accuracy of the derivative calculation for the GLSL built-in functions: `dFdx`, `dFdy`, and `fwidth`. |

### `WEBGL_draw_buffers` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `COLOR_ATTACHMENT0_WEBGL` | 0x8CE0 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT1_WEBGL` | 0x8CE1 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT2_WEBGL` | 0x8CE2 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT3_WEBGL` | 0x8CE3 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT4_WEBGL` | 0x8CE4 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT5_WEBGL` | 0x8CE5 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT6_WEBGL` | 0x8CE6 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT7_WEBGL` | 0x8CE7 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT8_WEBGL` | 0x8CE8 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT9_WEBGL` | 0x8CE9 | Framebuffer color attachment point |
| `COLOR_ATTACHMENT10_WEBGL` | 0x8CEA | Framebuffer color attachment point |
| `COLOR_ATTACHMENT11_WEBGL` | 0x8CEB | Framebuffer color attachment point |
| `COLOR_ATTACHMENT12_WEBGL` | 0x8CEC | Framebuffer color attachment point |
| `COLOR_ATTACHMENT13_WEBGL` | 0x8CED | Framebuffer color attachment point |
| `COLOR_ATTACHMENT14_WEBGL` | 0x8CEE | Framebuffer color attachment point |
| `COLOR_ATTACHMENT15_WEBGL` | 0x8CEF | Framebuffer color attachment point |
| `DRAW_BUFFER0_WEBGL` | 0x8825 | Draw buffer |
| `DRAW_BUFFER1_WEBGL` | 0x8826 | Draw buffer |
| `DRAW_BUFFER2_WEBGL` | 0x8827 | Draw buffer |
| `DRAW_BUFFER3_WEBGL` | 0x8828 | Draw buffer |
| `DRAW_BUFFER4_WEBGL` | 0x8829 | Draw buffer |
| `DRAW_BUFFER5_WEBGL` | 0x882A | Draw buffer |
| `DRAW_BUFFER6_WEBGL` | 0x882B | Draw buffer |
| `DRAW_BUFFER7_WEBGL` | 0x882C | Draw buffer |
| `DRAW_BUFFER8_WEBGL` | 0x882D | Draw buffer |
| `DRAW_BUFFER9_WEBGL` | 0x882E | Draw buffer |
| `DRAW_BUFFER10_WEBGL` | 0x882F | Draw buffer |
| `DRAW_BUFFER11_WEBGL` | 0x8830 | Draw buffer |
| `DRAW_BUFFER12_WEBGL` | 0x8831 | Draw buffer |
| `DRAW_BUFFER13_WEBGL` | 0x8832 | Draw buffer |
| `DRAW_BUFFER14_WEBGL` | 0x8833 | Draw buffer |
| `DRAW_BUFFER15_WEBGL` | 0x8834 | Draw buffer |
| `MAX_COLOR_ATTACHMENTS_WEBGL` | 0x8CDF | Maximum number of framebuffer color attachment points |
| `MAX_DRAW_BUFFERS_WEBGL` | 0x8824 | Maximum number of draw buffers |

### `OES_vertex_array_object` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `VERTEX_ARRAY_BINDING_OES` | 0x85B5 | The bound vertex array object (VAO). |

### `EXT_disjoint_timer_query` (en-US)

| Constant name | Value | Description |
| --- | --- | --- |
| `QUERY_COUNTER_BITS_EXT` | 0x8864 | The number of bits used to hold the query result for the given target. |
| `CURRENT_QUERY_EXT` | 0x8865 | The currently active query. |
| `QUERY_RESULT_EXT` | 0x8866 | The query result. |
| `QUERY_RESULT_AVAILABLE_EXT` | 0x8867 | A Boolean indicating whether or not a query result is available. |
| `TIME_ELAPSED_EXT` | 0x88BF | Elapsed time (in nanoseconds). |
| `TIMESTAMP_EXT` | 0x8E28 | The current time. |
| `GPU_DISJOINT_EXT` | 0x8FBB | A Boolean indicating whether or not the GPU performed any disjoint operation. |

仕様書
---

| Specification |
| --- |
| WebGL # 5.14 |
| WebGL2 # 3.7 |

関連情報
----

* `WebGLRenderingContext`


WebGL のモデル、ビュー、投影 - Web API

WebGL のモデル、ビュー、投影
=================

この記事では、 WebGL プロジェクト内でデータを取得し、それを適切な空間に投影して画面に表示する方法について説明します。並進、拡縮、回転行列を使用した基本的な行列計算の知識があることを前提としています。3D シーンを構成するときに通常使用される中心的な 3 つの行列である、モデル、ビュー、投影行列について説明します。

**メモ:** この記事は MDN コンテンツキットとしても利用可能です。また、 `MDN` グローバルオブジェクトの下で利用可能なユーティリティ関数のコレクションを使用しています。

モデル、ビュー、投影行列
------------

WebGL の空間内の点とポリゴンの個々の変換は、並進、拡縮、回転などの基本的な変換行列によって処理されます。 これらの行列は、複雑な 3D シーンの描画に役立つように、一緒に構成し、特別な方法でグループ化できます。これらの構成された行列は、最終的に元のモデルデータを**クリップ空間**と呼ばれる特別な座標空間に移動します。これは 2 ユニットの幅の立方体で、中心が (0,0,0)、対角が (-1,-1,-1) から (1,1,1) になります。このクリップ空間は 2 次元平面に圧縮され、画像へラスタライズされます。

以下で説明する最初の行列は**モデル行列**です。これは、元のモデルデータを取得して 3 次元ワールド空間内で移動する方法を定義します。 **投影行列**は、ワールド空間座標をクリップ空間座標に変換するために使用されます。 一般的に使用される投影行列である**透視投影投影行列**は、3D 仮想世界の視聴者の代理として機能する一般的なカメラの*効果*を模倣するために使用されます。 **ビュー行列**は、変更されるカメラの位置をシミュレートし、シーン内のオブジェクトを移動して視聴者が現在何を見られるかを変更します。

以下のセクションでは、モデル、ビュー、投影行列の背景にある考え方と実装について詳説します。 これらの行列は、画面上でデータを移動するための根幹であり、個々のフレームワークやエンジンを超える概念です。

クリップ空間
------

WebGL プログラムでは、通常、データは自分の座標系で GPU にアップロードされ、次に頂点シェーダーがそれらの点を**クリップ空間**と呼ばれる特別な座標系に変換します。クリップ空間の外側にあるデータは切り取られ、描画されません。ただし、三角形がこのスペースの境界を跨ぐ場合は、新しい三角形に分割され、クリップスペースにある新しい三角形の部分のみが残ります。

![WebGL でクリップ空間を示す 3D グラフ。](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/clip_space_graph.svg)

上の図は、全ての点が収まる必要のあるクリップ空間を視覚化したものです。これは、各辺が 2 の立方体であり、片方の角が (-1,-1,-1) にあり、対角が (1,1,1) にあります。立方体の中心は点 (0,0,0) です。 クリップ空間に使用されるこの 8 立方メートルの座標系は、正規化デバイス座標（NDC）と呼ばれます。WebGL コードを調べて作業している間、その用語を時々耳にするかもしれません。

このセクションでは、データをクリップ空間座標系に直接配置する仕組みを説明します。 通常、任意の座標系にあるモデルデータが使用され、その後、行列を使用して変換され、モデル座標がクリップ空間座標系に変換されます。この例では、クリップ空間がどのように機能するかを最も簡単に説明する為、単純に (-1, -1, -1) から (1,1,1) までの範囲のモデル座標を使用します。以下のコードは、画面上に正方形を描く為に 2 つの三角形を作成します。正方形の Z 深度は、正方形が同じ空間を共有するときに何が上に描画されるかを決定します。小さい Z 値は大きい Z 値の上にレンダリングされます。

### WebGLBox の例

この例では、画面上に 2D ボックスを描画するカスタム `WebGLBox` オブジェクトを作成します。

**メモ:** WebGLBox のそれぞれの例のコードは、この GitHub リポジトリーにあり、セクションごとに整理されています。また、各セクションの一番下に JSFiddle へのリンクがあります。

#### WebGLBox コンストラクター

コンストラクターは次のようになります。

```js
function WebGLBox() {
  // Setup the canvas and WebGL context
  this.canvas = document.getElementById("canvas");
  this.canvas.width = window.innerWidth;
  this.canvas.height = window.innerHeight;
  this.gl = MDN.createContext(canvas);

  const gl = this.gl;

  // Setup a WebGL program, anything part of the MDN object is defined outside of this article
  this.webglProgram = MDN.createWebGLProgramFromIds(
    gl,
    "vertex-shader",
    "fragment-shader",
  );
  gl.useProgram(this.webglProgram);

  // Save the attribute and uniform locations
  this.positionLocation = gl.getAttribLocation(this.webglProgram, "position");
  this.colorLocation = gl.getUniformLocation(this.webglProgram, "color");

  // Tell WebGL to test the depth when drawing, so if a square is behind
  // another square it won't be drawn
  gl.enable(gl.DEPTH\_TEST);
}
```

#### WebGLBox 描画

次に、画面上にボックスを描画するメソッドを作成します。

```js
WebGLBox.prototype.draw = function (settings) {
  // Create some attribute data; these are the triangles that will end being
  // drawn to the screen. There are two that form a square.

  const data = new Float32Array([
    //Triangle 1
    settings.left,
    settings.bottom,
    settings.depth,
    settings.right,
    settings.bottom,
    settings.depth,
    settings.left,
    settings.top,
    settings.depth,

    //Triangle 2
    settings.left,
    settings.top,
    settings.depth,
    settings.right,
    settings.bottom,
    settings.depth,
    settings.right,
    settings.top,
    settings.depth,
  ]);

  // Use WebGL to draw this onto the screen.

  // Performance Note: Creating a new array buffer for every draw call is slow.
  // This function is for illustration purposes only.

  const gl = this.gl;

  // Create a buffer and bind the data
  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
  gl.bufferData(gl.ARRAY\_BUFFER, data, gl.STATIC\_DRAW);

  // Setup the pointer to our attribute data (the triangles)
  gl.enableVertexAttribArray(this.positionLocation);
  gl.vertexAttribPointer(this.positionLocation, 3, gl.FLOAT, false, 0, 0);

  // Setup the color uniform that will be shared across all triangles
  gl.uniform4fv(this.colorLocation, settings.color);

  // Draw the triangles to the screen
  gl.drawArrays(gl.TRIANGLES, 0, 6);
};
```

シェーダーは GLSL で記述されたコードの一部であり、データポイントを取得して最終的に画面に描画します。便宜上、これらのシェーダーは、カスタム関数 `MDN.createWebGLProgramFromIds()` を介してプログラムに取り込まれる要素 `<script>` に格納されます。この関数は、これらのチュートリアル用に作成された ユーティリティ関数群 の一部であり、ここでは詳しく説明しません。この関数は、いくつかの GLSL ソースコードを取得して WebGL プログラムにコンパイルする基本を処理します。関数は 3 つのパラメーターを取ります。プログラムをレンダリングするコンテキスト、頂点シェーダーを含む要素の ID `<script>`、フラグメントシェーダーを含む要素の ID `<script>` です。頂点シェーダーは頂点を配置し、フラグメントシェーダーは各ピクセルに色を付けます。

最初に、画面上で頂点を移動させる頂点シェーダーを見てみましょう。

```glsl
// The individual position vertex
attribute vec3 position;

void main() {
  // the gl\_Position is the final position in clip space after the vertex shader modifies it
  gl_Position = vec4(position, 1.0);
}
```

次に、データを実際にピクセルにラスタライズするために、フラグメントシェーダーはピクセルごとに全てを評価し、一つの色を設定します。GPU は、レンダリングする必要があるピクセルごとにシェーダー関数を呼び出します。シェーダーの仕事は、そのピクセルに使用する色を返すことです。

```glsl
precision mediump float;
uniform vec4 color;

void main() {
  gl_FragColor = color;
}
```

これらの設定が含まれているので、クリップ空間座標を使用して画面に直接描画します。

```js
const box = new WebGLBox();
```

最初に中央に赤いボックスを描きます。

```js
box.draw({
  top: 0.5, // x
  bottom: -0.5, // x
  left: -0.5, // y
  right: 0.5, // y

  depth: 0, // z
  color: [1, 0.4, 0.4, 1], // red
});
```

次に、緑色のボックスを赤いボックスの上部に描画します。

```js
box.draw({
  top: 0.9, // x
  bottom: 0, // x
  left: -0.9, // y
  right: 0.9, // y

  depth: 0.5, // z
  color: [0.4, 1, 0.4, 1], // green
});
```

最後に、クリッピングが実際に行われていることを示すために、このボックスは完全にクリップ空間の外側にあるため、描画されません。深さが -1.0 から 1.0 の範囲外です。

```js
box.draw({
  top: 1, // x
  bottom: -1, // x
  left: -1, // y
  right: 1, // y

  depth: -1.5, // z
  color: [0.4, 0.4, 1, 1], // blue
});
```

#### 結果

JSFiddle で表示

![The results of drawing to clip space using WebGL.](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/part1.png)

#### 演習

この時点で役立つ演習は、コードを変更してボックスをクリップ空間内で移動し、点がクリップ空間内でどのようにクリップされ、移動されるかを感じ取ることです。背景を持つボックス状のスマイルのような絵を描いてみてください。

同次座標
----

前のクリップ空間の頂点シェーダのメインラインは、このコードを含んでいました。

```js
gl_Position = vec4(position, 1.0);
```

変数 `position` は、 `draw()` メソッドで定義され、属性としてシェーダーに渡されました。これは三次元の点ですが、パイプラインを介して渡されることになる変数 `gl_Position` は実際には四次元です。すなわち、 `(x, y, z)` の代わりに `(x, y, z, w)` となっています。`z` の後には文字がないため、慣例により、この 4 番目の次元には `w` というラベルが付いています。 上記の例では、 `w` 座標は 1.0 に設定されています。

明らかな疑問は、「なぜ余分な次元があるのか？」です。この追加により、3D データを操作するための多くの優れた手法が可能になることが分かります。この追加された次元により、遠近法の概念が座標系に導入されます。それを配置すると、3D 座標を 2D 空間にマッピングできます。これにより、2 本の平行線が遠くに離れるときに交差するようになります。値 `w` は、座標の他のコンポーネントの除数として使用されるため、 `x`、`y`、`z` の真の値は、`x/w`、`y/w`、`z/w` として計算されます（そして、`w`も `w/w` で 1 になります）。

三次元の点は、典型的なデカルト座標系で定義されます。四次元目が加わることで、この点は同次座標に変化します。これはまだ 3 次元空間の点を表しており、このような座標をどのように構築するかは、単純な関数の組によって簡単に示せます。

```js
function cartesianToHomogeneous(point) {
  let x = point[0];
  let y = point[1];
  let z = point[2];

  return [x, y, z, 1];
}

function homogeneousToCartesian(point) {
  let x = point[0];
  let y = point[1];
  let z = point[2];
  let w = point[3];

  return [x / w, y / w, z / w];
}
```

前述したように、また上の関数で示したように、 w 成分は x、y、z 成分を除算します。 w 成分がゼロでない実数であるとき、同次座標は直交空間の法線点に簡単に戻ります。では、 w 成分がゼロの場合はどうなるでしょうか。 JavaScript では次のような値が返されます。

```js
homogeneousToCartesian([10, 4, 5, 0]);
```

これは `[Infinity, Infinity, Infinity]` と評価されます。

この同次座標は無限の位置にある点を表します。これは、原点から特定の方向に放たれる光線を表す便利な方法です。光線だけでなく、方向ベクトルの表現と考えることもできます。この同次座標を平行移動のある行列と掛け合わせると、平行移動は効果的に取り除かれます。

コンピューター上で数字が極端に大きく（あるいは極端に小さく）なると、それを表現するのに使われる 1 と 0 の数が限られるため、精度がどんどん落ちていきます。大きな数を運営する演算子が増えれば増えるほど、結果に誤差が蓄積されていきます。w で割る場合、 2 つの潜在的に小さくて誤差の少ない数を操作することで、非常に大きな数の精度を効果的に高めることができます。

同次座標を使用する最後の好ましいことは、 4x4 行列に対して乗算するのにとてもうまく適合するということです。行列に対して乗算するためには、頂点は行列の少なくとも 1 つの次元と一致しなければなりません。 4x4 行列は、さまざまな有益な変換をエンコードするために使用することができます。実際，典型的な透視投影行列は，その変換を実現するために w 成分による除算を使用しています．

クリップ空間からの点とポリゴンのクリッピングは、同次座標が（w で割ることによって）デカルト座標に変換される前に行われます。この最終空間は**正規化機器座標**または NDC として知られています。

このアイディアを遊び始めるには、前回の例を変更して `w` 成分を使用することができます。

```js
//Redefine the triangles to use the W component
const data = new Float32Array([
  //Triangle 1
  settings.left,
  settings.bottom,
  settings.depth,
  settings.w,
  settings.right,
  settings.bottom,
  settings.depth,
  settings.w,
  settings.left,
  settings.top,
  settings.depth,
  settings.w,

  //Triangle 2
  settings.left,
  settings.top,
  settings.depth,
  settings.w,
  settings.right,
  settings.bottom,
  settings.depth,
  settings.w,
  settings.right,
  settings.top,
  settings.depth,
  settings.w,
]);
```

その後、頂点シェーダーは渡された 4 次元目の点を使用します。

```glsl
attribute vec4 position;

void main() {
  gl_Position = position;
}
```

最初に真ん中に赤い枠を描画しますが、 W は 0.7 に設定します。座標が 0.7 で分割されると、すべて拡大されます。

```js
box.draw({
  top: 0.5, // y
  bottom: -0.5, // y
  left: -0.5, // x
  right: 0.5, // x
  w: 0.7, // w - enlarge this box

  depth: 0, // z
  color: [1, 0.4, 0.4, 1], // red
});
```

これで上部に緑色のボックスを描画しますが、 w 成分を 1.1 に設定するには縮小します。

```js
box.draw({
  top: 0.9, // y
  bottom: 0, // y
  left: -0.9, // x
  right: 0.9, // x
  w: 1.1, // w - shrink this box

  depth: 0.5, // z
  color: [0.4, 1, 0.4, 1], // green
});
```

この最後のボックスはクリップ空間の外なので描画されません。深さは -1.0 から 1.0 の範囲外です。

```js
box.draw({
  top: 1, // y
  bottom: -1, // y
  left: -1, // x
  right: 1, // x
  w: 1.5, // w - Bring this box into range

  depth: -1.5, // z
  color: [0.4, 0.4, 1, 1], // blue
});
```

### 結果

![WebGL でボックスを移動させるために同次座標を使用した結果。](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/part2.png)

### 練習問題

* これらの値を操作して、画面に描画されるものにどのような影響があるか見てみましょう。前回クリップされていた青いボックスが、 w 成分を設定することで範囲内に戻ったことにメモしてください。
* クリップ空間の外側に新しいボックスを作成し、 w で割って内側に戻してみてください。
モデルの座標変換
--------

クリップ空間に点を直接配置しても、使用することには限界があります。実際のアプリケーションでは、すべてのソース座標がクリップ空間座標にすでに収まっているとは限りません。そのため、ほとんどの場合、モデルデータや他の座標をクリップ空間に変換する必要があります。地味な立方体は、この方法の単純な例です。立方体のデータは、頂点位置、立方体の面の色、および個々の多角形を構成する頂点位置の順序（立方体の面を構成する三角形を構成する3つの頂点のグループ）で構成されます。位置と色は GL バッファに格納され、属性としてシェーダに送られ、個別に処理されます。

最後に、単一のモデル行列が計算され、設定されます。この行列は、モデルを構成するすべての点に対して、モデルを正しい空間に移動させ、モデルの各点に対して他にも必要な変換を行うために実行される変換を表します。これは、各頂点だけでなく、モデルのすべての面上の単一の点にも適用されます。

この場合、アニメーションのフレームごとに、一連の拡大縮小、回転、平行移動の行列がデータをクリップ空間の目的の場所に移動させます。立方体はクリップ空間のサイズ (-1,-1,-1) から (1,1,1) なので、クリップ空間全体を埋めないように縮小する必要があります。この行列は、あらかじめ JavaScript で乗算した後、直接シェーダーに送られます。

以下のコードサンプルでは、モデル行列を作成する `CubeDemo` オブジェクトのメソッドを定義します。 MDN WebGL の共有コードで定義されているように、行列を作成したり乗算したりするカスタム関数を使用しています。新しい関数は次のようになります。

```js
CubeDemo.prototype.computeModelMatrix = function (now) {
  //Scale down by 50%
  const scale = MDN.scaleMatrix(0.5, 0.5, 0.5);

  // Rotate a slight tilt
  const rotateX = MDN.rotateXMatrix(now \* 0.0003);

  // Rotate according to time
  const rotateY = MDN.rotateYMatrix(now \* 0.0005);

  // Move slightly down
  const position = MDN.translateMatrix(0, -0.1, 0);

  // Multiply together, make sure and read them in opposite order
  this.transforms.model = MDN.multiplyArrayOfMatrices([
    position, // step 4
    rotateY, // step 3
    rotateX, // step 2
    scale, // step 1
  ]);
};
```

これをシェーダーで使用するには、ユニフォームの位置に設定する必要があります。ユニフォームの位置は下記に示す `locations` オブジェクトに保存されます。

```js
this.locations.model = gl.getUniformLocation(webglProgram, "model");
```

そして最後にユニフォームをその場所に設定します。これで行列が GPU に渡されます。

```js
gl.uniformMatrix4fv(
  this.locations.model,
  false,
  new Float32Array(this.transforms.model),
);
```

シェーダーでは、各位置の頂点は最初に同次座標（`vec4` オブジェクト）に変換され、次にモデル行列に対して乗算されます。

```glsl
gl_Position = model \* vec4(position, 1.0);
```

**メモ:** JavaScript で行列の乗算はカスタム関数を要求されますが、シェーダーでは単純な \* 演算子で言語に組み込まれています。

### 結果

JSFiddle で表示

![モデルマトリックスの使用](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/part3.png)

この時点では、変換点の w 値は 1.0 のままです。立方体にはまだ視点位置がありません。次の章では、この設定をもとに、 w 値を変更して視点を提供します。

### 練習問題

* 縮小マトリックスを使ってボックスを縮小し、クリップ空間内の様々な場所に配置しましょう。
* クリップ空間の外に移してみましょう。
* ウィンドウのサイズを変更し、ボックスの図形が歪む様子を確認しましょう。
* `rotateZ` 行列を追加しましょう。
W での除算
------

立方体のモデルの視点を始めるには、Z 座標を取り、それを w 座標にコピーするのが簡単です。通常、デカルト点を同値に変換するときは `(x,y,z,1)` となりますが、ここでは `(x,y,z,z)` のように設定します。実際には、 z が 0 より大きい点をビューに取り込みたいので、この値を少し変更して `((1.0 + z) * scaleFactor)` とします。これは通常クリップ空間 (-1 ～ 1) にある点を、スケール係数の設定に応じて (0 ～ 1) のような空間に移します。スケール係数は最終的な w の値を全体的に高くしたり低くしたりします。

シェーダーのコードはこんな感じです。

```glsl
// First transform the point
vec4 transformedPosition = model \* vec4(position, 1.0);

// How much effect does the perspective have?
float scaleFactor = 0.5;

// Set w by taking the z value which is typically ranged -1 to 1, then scale
// it to be from 0 to some number, in this case 0-1.
float w = (1.0 + transformedPosition.z) \* scaleFactor;

// Save the new gl\_Position with the custom w component
gl_Position = vec4(transformedPosition.xyz, w);
```

### 結果

JSFiddle で表示

![W 成分を埋めて、自分のプロジェクトを作成しましょう。](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/part4.png)

紺色の小さな三角形が見えますか？これはオブジェクトに追加された面です。図形が回転することによって、その角がクリップ空間の外にはみ出し、角がクリッピングされる現象が発生したからです。より複雑な行列を使用してクリッピングを制御したり防止したりする方法については、下記の透視投影行列を参照してください。

### 練習問題

少し抽象的に聞こえるなら、頂点シェーダーを開いてスケール係数を調整し、頂点がサーフェスに向かってどのように縮小するかを見てください。 w 成分の値を完全に変えると、実に巧妙な空間表現ができます。

次の節では、この Z を w スロットにコピーする方法をとり、行列に変えます。

単純な投影
-----

w 成分を埋める最後の手順は、実は単純な行列で実現できます。始めるには恒等行列を使います。

```js
const identity = [
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1
];

MDN.multiplyPoint(identity, [2, 3, 4, 1]);
//> [2, 3, 4, 1]
```

そして最後の列の 1 を 1 つ上に移動します。

```js
const copyZ = [
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 1,
  0, 0, 0, 0
];

MDN.multiplyPoint(copyZ, [2, 3, 4, 1]);
//> [2, 3, 4, 4]
```

しかし、最後の例では `(z + 1) * scaleFactor` を実行しました。

```js
const scaleFactor = 0.5;

const simpleProjection = [
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, scaleFactor,
  0, 0, 0, scaleFactor,
];

MDN.multiplyPoint(simpleProjection, [2, 3, 4, 1]);
//> [2, 3, 4, 2.5]
```

もう少し詳しく分析すると、これがどのように動作するのかがわかります。

```js
let x = 2 \* 1 + 3 \* 0 + 4 \* 0 + 1 \* 0;
let y = 2 \* 0 + 3 \* 1 + 4 \* 0 + 1 \* 0;
let z = 2 \* 0 + 3 \* 0 + 4 \* 1 + 1 \* 0;
let w = 2 \* 0 + 3 \* 0 + 4 \* scaleFactor + 1 \* scaleFactor;
```

最後の行は単純化するとこうなります。

```js
w = 4 \* scaleFactor + 1 \* scaleFactor;
```

そして、 scaleFactor を因数分解すると、このようになります。

```js
w = (4 + 1) \* scaleFactor;
```

これは前回の例で使用した `(z + 1) * scaleFactor` と全く同じです。

このデモでは、 `computeSimpleProjectionMatrix()` メソッドが追加されています。これは `draw()` メソッドの中で呼び出され、スケール係数が渡されます。結果は前回の例と同じになるはずです。

```js
CubeDemo.prototype.computeSimpleProjectionMatrix = function (scaleFactor) {
  this.transforms.projection = [
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, scaleFactor,
    0, 0, 0, scaleFactor
  ];
};
```

結果は同じですが、ここでの重要な手順は頂点シェーダーにあります。頂点を直接変更するのではなく、追加の **投影行列** と乗算します。この行列は（その名前が示すように） 3D 点を 2D の描画面に投影します。

```glsl
// Make sure to read the transformations in reverse order
gl_Position = projection \* model \* vec4(position, 1.0);
```

### 結果

JSFiddle で表示

![単純な投影行列](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/part5.png)

視錐台
---

視点位置の投影行列の計算方法に移る前に、**視錐台**（**view frustum** とも呼ばれます）の概念を紹介する必要があります。これは、現時点でユーザーにコンテンツが見えている空間の領域です。視野角と、レンダリングされるべき最も近いコンテンツと最も遠いコンテンツとして指定した距離によって定義される空間の 3D 領域です。

レンダリング中に、シーンを表すためにどのポリゴンをレンダリングする必要があるかを決定する必要があります。これを定義するのが視錐台です。しかし、そもそも錐台とは何でしょうか？

錐台とは、任意の立体を 2 つの平行する平面を使用して 2 つの部分に切り取った結果の 3D 立体のことです。私たちのカメラは、レンズのすぐ前から始まり、遠くへ広がっていく領域を見ているとします。見える範囲は四角錐で、頂点はレンズ、 4 つの辺は周辺視野の範囲に対応し、底辺はこのように最も遠くに見えます。

![カメラの全視野領域を描いたもの。四角ピラミッドの頂点がレンズ、底辺が最大撮影距離。](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/fullcamerafov.svg)

これを使用してフレームごとにレンダリングするポリゴンを決定すると、レンダラーはこのピラミッド内のすべてのポリゴンをレンダリングする必要があり、レンズからとても近いポリゴンも含めて、無限遠までレンダリングする必要があります。

そこで、計算とレンダリングに必要なポリゴン数を削減する最初の手順として、このピラミッドを視錐台にします。ポリゴン数を縮小するために、頂点を減らすのに使用する 2 枚の平面は、**前方クリッピング平面**と**後方クリッピング平面**です。

WebGL では、前方および後方クリッピング面は、レンズから視線方向に垂直な面上の最も近いこの点までの距離を指定することで定義します。前方クリッピング面よりもレンズに近いものや、後方クリッピング面よりもレンズから遠いものは除去されます。この結果、視錐台は次のようになります。

![カメラの視錐台の描写。前方クリッピング面と後方クリッピング面によってボリュームの一部が除去され、ポリゴン数を削減しています。](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/camera_view_frustum.svg)

各フレームでレンダリングされるオブジェクトの集合は、基本的にシーン内のすべてのオブジェクトの集合から作成し始めます。そして、視錐台の完全に外側にあるオブジェクトはその集合から除外されます。次に、部分的に視錐台の外側にはみ出しているオブジェクトは、視錐台の外側にあるポリゴンをすべて削除し、視錐台の外側を横切るポリゴンをクリップすることで、視錐台から出なくなります。

これが完了すると、視錐台内にあるポリゴンの最大集合が得られます。このリストは通常、背面カリング（裏側がカメラに向いているポリゴンを除去）や、陰面判定 （レンズに近いポリゴンに完全に遮られて見えないポリゴンを除去する）を使用したオクルージョンカリングなどの処理を使って、さらに削減されます。

透視投影行列
------

この点まで、自分自身で 3D レンダリングのセットアップを段階的に構築してきました。しかし、現在のコードにはいくつかの課題があります。一つは、ウィンドウのサイズを変更するたびに歪んでしまうことです。もうひとつは、自分の単純なプロジェクトでは、シーンデータの値の広い範囲を処理しないことです。ほとんどのシーンはクリップ空間で動作しません。数値の変換で精度が失われないように、シーンに関連する距離を定義しておくと便利でしょう。最後に、どの点がクリップ空間の内側と外側に配置されるかを細かく制御するととても便利です。前回の例では、立方体の角がクリップされることがありました。

**透視投影行列**は、これらの要求をすべて達成する投影行列の種類です。数学も少し複雑になり始めるので、この例では十分に説明しません。要するに、（前回例で行ったように） w で割ることと、相似三角形に基づくいくつかの巧妙な操作を組み合わせたものです。その背後にある数学的に完全な説明を読むには、以下のリンクを調べてください。

* OpenGL Projection Matrix
* Perspective Projection
* Trying to understand the math behind the perspective projection matrix in WebGL

下記で使用する視点位置投影行列で注意すべき重要なことは、 z 軸を反転させるということです。クリップ空間では z を増加させると見る人から遠ざかりますが、この行列では見る人の方に来ます。

z 軸を反転させる理由は、クリップ空間座標系が左手座標系（z 軸が視聴者から画面の内側へ向く）であるのに対し、数学、物理学、 3D モデリング、 OpenGL のビュー/視線座標系では、右手座標系（z 軸が視聴者に向かって画面の外側を向く）を使用するのが慣例だからです。詳しくはウィキペディアの関連記事、デカルト座標系、右手の法則を参照してください。

それでは、透視投影行列を計算する関数 `perspectiveMatrix()` を見ていきましょう。

```js
MDN.perspectiveMatrix = function (
  fieldOfViewInRadians,
 aspectRatio,
 near,
 far,
) {
  const f = 1.0 / Math.tan(fieldOfViewInRadians / 2);
  const rangeInv = 1 / (near - far);

  return [
    f / aspectRatio, 0,                          0,   0,
    0,               f,                          0,   0,
    0,               0,    (near + far) \* rangeInv,  -1,
    0,               0,  near \* far \* rangeInv \* 2,   0
  ];
};
```

この関数の 4 つの引数は以下の通りです。

`fieldOfViewInRadians`

ラジアン単位で指定された角度で、シーンのどの程度が一度に視聴者に見えるかを示します。数値が大きいほど、カメラから見える範囲が広くなります。広角レンズに相当し、周辺部の形状はどんどん歪んでいきます。視野角が大きくなると、一般的にオブジェクトは小さくなります。視野角が小さくなると、カメラで見える範囲が狭まっていきます。視点位置によるオブジェクトの歪みが少なくなり、オブジェクトがカメラに近く見えます。

`aspectRatio`

シーンのアスペクト比は、幅を高さで割ったものです。この例では、ウィンドウの幅をウィンドウの高さで割ったものです。この引数を導入することで、キャンバスのサイズが変更されたり、形が変わったりするとモデルがゆがんでしまうという問題が最終的に解決されます。

`nearClippingPlaneDistance`

画面側へ、床に垂直な面までの距離を示す正の値で、これより近いすべてがクリップされます。これはクリップ空間では -1 に割り当てられており、0 に設定してはいけません。

`farClippingPlaneDistance`

ジオメトリーが切り取られる平面までの距離を示す正の値。クリップ空間では 1 に割り当てられています。この値は、レンダリング中に精度の誤差が生じるのを避けるために、ジオメトリーの距離に適度に近い値に閉じられている必要があります。

このデモの最新バージョンでは、 `computeSimpleProjectionMatrix()` メソッドは `computePerspectiveMatrix()` メソッドに置き換えられています。

```js
CubeDemo.prototype.computePerspectiveMatrix = function () {
  const fieldOfViewInRadians = Math.PI \* 0.5;
  const aspectRatio = window.innerWidth / window.innerHeight;
  const nearClippingPlaneDistance = 1;
  const farClippingPlaneDistance = 50;

  this.transforms.projection = MDN.perspectiveMatrix(
    fieldOfViewInRadians,
    aspectRatio,
    nearClippingPlaneDistance,
    farClippingPlaneDistance,
  );
};
```

シェーダーコードは前回の例と同じです。

```js
gl_Position = projection \* model \* vec4(position, 1.0);
```

さらに（表示されていませんが）、モデルの位置と拡大縮小行列は、クリップ空間から大きな座標系に導くために変更されています。

### 結果

JSFiddle で表示

![真の視点位置行列](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/part6.png)

### 練習問題

* 透視投影行列とモデル行列の引数で実験しましょう。
* 透視投影行列を入れ替えて、正射投影を使用しましょう。 MDN WebGL 共有コードに `MDN.orthographicMatrix()` があります。これは `CubeDemo.prototype.computePerspectiveMatrix()` の `MDN.perspectiveMatrix()` 関数を置き換えることができます。
ビュー行列
-----

グラフィックライブラリーの中には、シーンを構成する際に位置や点を指定できる仮想カメラを持っているものがありますが、OpenGL（ひいては WebGL）にはありません。そこで**ビュー行列**の出番です。その仕事は、シーンのオブジェクトを平行移動、回転、拡大縮小させ、ビューアーの位置と方向から見て相対的に正しい配置になるようにすることです。

### カメラのシミュレーション

これは、アインシュタインの特殊相対性理論の基本的な側面の1つを使用しています。参照フレームと相対運動の原理は、閲覧者の視点から、シーン内のオブジェクトに反対の変更を適用することによって、閲覧者の位置と方向を変更することをシミュレーションできると言います。いずれにせよ、その結果は閲覧者には同じに現れます。

テーブルの上に箱が置いてあり、 1 メートル離れたテーブルの上にカメラが置いてあり、箱の正面をカメラに向けているとします。次に、カメラを箱から 2 メートル離れるまで移動させ（カメラの Z の位置に 1 メートル足す）、 10 センチ左側にスライドさせるとします。箱はカメラからその分遠ざかり、少し右にスライドします。そうすることで、カメラには小さく現れ、カメラには箱の左側が少し公開されます。

これでシーンはリセットされ、箱はこの開始点には戻され、カメラは箱から 2 メートル離れた真正面に配置されます。しかしこの時、カメラはテーブルの上に固定され、移動したり向きを変えたりすることはできません。これが WebGL で作業するときの状態です。では、空間を通してカメラを移動させるにはどうすればよいのでしょうか？

カメラを後方左に移動させる代わりに、逆変換を箱に適用します。箱を後方に 1 メートル移動させ、次にその右に 10 センチ移動させます。その結果、 2 つのオブジェクトそれぞれの視点位置は同じになります。

このすべての最終手順は、**ビュー行列**を作成することです。これは、シーン内のオブジェクトを変換して、カメラの現在の位置と方向をシミュレーションするように配置します。このままのコードでは、ワールド空間で立方体を動かして、すべてを視点位置があるように投影することはできますが、カメラを移動させることはできません。

物理的なカメラで映画を撮影することを想像してみてください。カメラを基本的に好きな場所に配置し、好きな方向にカメラを向ける自由があります。これを3Dグラフィックでシミュレーションするために、私たちはビュー行列を使用して、物理的なカメラの位置と回転をシミュレーションします。

モデルの頂点を直接変換するモデル行列とは異なり、ビュー行列は抽象的なカメラを移動させます。実際には、頂点シェーダーはモデルを移動させるだけで、「カメラ」はその場に留まります。これをうまく行うには、変換行列の逆行列を使用しなければなりません。逆行列は本質的に変換を反転させるので、カメラビューを前方に移動させると、逆行列はシーン内のオブジェクトを後方に移動させます。

以下の `computeViewMatrix()` メソッドでは、ビュー行列をアニメーションのように内と外、左と右に移動します。

```js
CubeDemo.prototype.computeViewMatrix = function (now) {
  const moveInAndOut = 20 \* Math.sin(now \* 0.002);
  const moveLeftAndRight = 15 \* Math.sin(now \* 0.0017);

  // Move the camera around
  const position = MDN.translateMatrix(moveLeftAndRight, 0, 50 + moveInAndOut);

  // Multiply together, make sure and read them in opposite order
  const matrix = MDN.multiplyArrayOfMatrices([
    // Exercise: rotate the camera view
    position,
  ]);

  // Inverse the operation for camera movements, because we are actually
  // moving the geometry in the scene, not the camera itself.
  this.transforms.view = MDN.invertMatrix(matrix);
};
```

これで、シェーダーは 3 つの行列を使用するようになります。

```glsl
gl_Position = projection \* view \* model \* vec4(position, 1.0);
```

この手順の後、 GPU パイプラインは範囲外の頂点をクリップし、ラスタライズのためにモデルをフラグメントシェーダーに送ります。

### 結果

JSFiddle で表示

![ビュー行列](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection/part7.png)

### 相対座標系

この時点で、一歩下がって、使用している様々な座標系を見てラベル付けすることが有益でしょう。まず最初に、立方体の頂点は **モデル空間** で定義します。モデルをシーンの周りで移されるためです。これらの頂点は、モデル行列を適用して**ワールド空間**に変換する必要があります。

モデル空間 → モデル行列 → ワールド空間

カメラはまだ何らかの動きをしていないので、この点はもう一度移動する必要があります。現在はワールド空間にありますが、カメラの配置を表すために**ビュー空間**に移動する必要があります（ビュー行列を使用します）。

ワールド空間 → ビュー行列 → ビュー空間

最後に、ワールド座標をクリップ空間座標に割り当てるために、**投影**（ここでは視点位置投影行列）を追加する必要があります。

ビュー空間 → 投影行列 → クリップ空間

### 練習問題

* シーン内でカメラを移動しましょう。
* ビュー行列に回転行列を追加して、見回しましょう。
* 最後に、マウスの位置を追跡しましょう。2つの回転行列を使用して、ユーザーのマウスが画面上のどこにあるかに基づいてカメラを上下に向けます。
関連情報
----

* WebGL
* 3D projection


WebGL 拡張機能の使用 - Web API

WebGL 拡張機能の使用
=============

WebGL は姉妹 API (OpenGL や OpenGL ES) と同様に、拡張機能に対応しています。拡張機能の完全な一覧は Khronos WebGL Extension レジストリーで確認できます。

**メモ:** 他の GL API とは異なり、WebGL の拡張機能は明示的に要求した場合に限り使用できます。

正規拡張機能名とベンダー接頭辞と設定
------------------

拡張機能は公式に認められる前に、ブラウザーベンダーが対応する場合があります（ただし、草案段階にあるときに限ります）。このとき、拡張機能名にベンダー接頭辞（`MOZ_` や `WEBKIT_` など）を付加するか、ブラウザーの設定を切り替えた場合に限り使用できるようにする可能性があります。

最先端の拡張機能を使用したい場合、および公認されたときにも動作し続けるようにしたい（もちろん、その拡張機能が互換性を失うように変更されていないものとします）場合は、ベンダー拡張機能名だけでなく正規拡張機能名も問い合わせます。例えば以下のようにします。

```js
var ext =
  gl.getExtension("OES\_vertex\_array\_object") ||
  gl.getExtension("MOZ\_OES\_vertex\_array\_object") ||
  gl.getExtension("WEBKIT\_OES\_vertex\_array\_object");
```

ベンダー接頭辞は次第に採用されなくなっており、ほとんどのブラウザーは実験的な拡張機能をベンダー接頭辞ではなく機能フラグで制御するように実装しています。

機能フラグは以下のようなものです。

* Firefox では `webgl.enable-draft-extensions`
* Chromium ベースのブラウザー (Chrome、Opera) では `chrome://flags/#enable-webgl-draft-extensions`
名前付けの慣習
-------

WebGL 拡張機能には、 "ANGLE", "OES", "EXT", "WEBGL" という接頭辞が付きます。これらの接頭辞は、由来や意図を反映しています。

* `ANGLE_`: ANGLE ライブラリー の作者によって書かれた拡張機能です。
* `OES_` と `KHR_`: OpenGL ES (OES) または OpenGL API 拡張の機能をミラーする拡張で、それぞれのアーキテクチャ検討委員会 (Khronos) によって承認されたものです。
* `OVR_`: 仮想現実に最適化した拡張機能です。
* `EXT_`: 他の OpenGL ES や OpenGL API の拡張をミラーリングする拡張機能です。
* `WEBGL_`: WebGL に特化した拡張機能で、複数のウェブブラウザーに対応することを意図しています。また、 OpenGL ES や OpenGL API を起源とし、その動作が大幅に変更された拡張機能にも使用されます。
利用可能な拡張機能の問い合わせ
---------------

WebGL コンテキストは、利用できる拡張機能を問い合わせる機能に対応しています。

```js
var available_extensions = gl.getSupportedExtensions();
```

`WebGLRenderingContext.getSupportedExtensions()` (en-US) メソッドは、サポートする拡張機能を収めた文字列配列を返します。

拡張機能一覧
------

現行の拡張機能の一覧:

### 拡張機能

* `ANGLE_instanced_arrays`
* `EXT_blend_minmax` (en-US)
* `EXT_color_buffer_float` (en-US)
* `EXT_color_buffer_half_float` (en-US)
* `EXT_disjoint_timer_query` (en-US)
* `EXT_float_blend` (en-US)
Experimental
* `EXT_frag_depth` (en-US)
* `EXT_shader_texture_lod` (en-US)
* `EXT_sRGB` (en-US)
* `EXT_texture_compression_bptc` (en-US)
* `EXT_texture_compression_rgtc` (en-US)
* `EXT_texture_filter_anisotropic` (en-US)
* `EXT_texture_norm16` (en-US)
* `KHR_parallel_shader_compile` (en-US)
* `OES_element_index_uint` (en-US)
* `OES_fbo_render_mipmap` (en-US)
* `OES_standard_derivatives` (en-US)
* `OES_texture_float` (en-US)
* `OES_texture_float_linear` (en-US)
* `OES_texture_half_float` (en-US)
* `OES_texture_half_float_linear` (en-US)
* `OES_vertex_array_object` (en-US)
* `OVR_multiview2` (en-US)
* `WEBGL_color_buffer_float`
* `WEBGL_compressed_texture_astc` (en-US)
* `WEBGL_compressed_texture_etc` (en-US)
* `WEBGL_compressed_texture_etc1` (en-US)
* `WEBGL_compressed_texture_pvrtc` (en-US)
* `WEBGL_compressed_texture_s3tc` (en-US)
* `WEBGL_compressed_texture_s3tc_srgb` (en-US)
* `WEBGL_debug_renderer_info` (en-US)
* `WEBGL_debug_shaders` (en-US)
* `WEBGL_depth_texture` (en-US)
* `WEBGL_draw_buffers` (en-US)
* `WEBGL_lose_context` (en-US)
* `WEBGL_multi_draw` (en-US)
拡張機能の有効化
--------

拡張機能を使用する前に、 `WebGLRenderingContext.getExtension()` (en-US) を使用して機能を有効化しなければなりません。例えば以下のようにします。

```js
var float_texture_ext = gl.getExtension("OES\_texture\_float");
```

拡張機能に対応していない場合の戻り値は `null`、対応している場合の返値は拡張機能オブジェクトです。

拡張機能オブジェクト
----------

WebGL のコア仕様で使用できないシンボルや関数を拡張機能で定義している場合は、`gl.getExtension()` の呼び出しによって返される拡張機能オブジェクトでそれらを使用できます。

関連情報
----

* `WebGLRenderingContext.getSupportedExtensions()` (en-US)
* `WebGLRenderingContext.getExtension()` (en-US)
* webglreport.com
* webglstats.com


WebGL best practices - Web API

WebGL best practices
====================

この文書は WebGL を使ったコンテンツの向上のための Tips について書きます。これらの提案に従うことで、多くの機器への互換性を高めたり、パフォーマンスを上げることにもなります。

避けたほうがいいこと
----------

* WebGL のエラーを出さないように注意しましょう。エラーは `getError()` で得られますが、Firefox では `webgl.verbose` の設定を有効にすることで、ウェブコンソールに WebGL のエラーと警告を出力します。ユーザーのコンソールにエラーを吐き出す必要はないでしょう？（訳註：パフォーマンスの理由もある。下参照）
* `#ifdef GL_ES` は絶対に使ってはいけません。初期の例ではこれが使われていましたが、WebGL では必ず true になるので必要ありません。
* フラグメントシェーダで `highp` 精度を使うのはやめましょう。`mediump` を代わりに使いましょう。`highp` を使うと今のモバイルのハードウェアのほとんどで動きません。Firefox 11 からは `getShaderPrecisionFormat()` 関数が実装されるので、`highp` 精度が使えるかどうかだけでなく、それぞれの精度の名称について実際の精度を知ることができます。
覚えておいたほうがいいこと
-------------

* WebGL の機能の中にはクライアントによって制限があるものがあります。そういうものを使う前には `getParameter()` を使って調べましょう。例えば、2D テクスチャのサイズは `webgl.getParameter(webgl.MAX_TEXTURE_SIZE)` でわかります。Firefox 10 からは `webgl.min_capability_mode` の設定があり、最低限の機能の環境をシミュレートすることができます。
* 特に、頂点シェーダでのテクスチャの使用は `webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS)`がゼロより大きくなければ使えません。現在のモバイルのハードウェアではまず使えないでしょう。
* WebGL の拡張が使えるかどうかはクライアントに依存します。できるならそれらの使用をオプションとし、サポートされていない環境にも対応できるようにしましょう。Firefox 10 からは `webgl.disable-extensions` の設定があり、拡張のない環境をシミュレートすることができます。
* `OES_texture_float` 拡張がサポートされていたとしても、浮動小数点数テクスチャへのレンダリングはサポートされていないかもしれません。モバイルのハードウェアではまず動かないでしょう。サポートされているかを調べるには `checkFramebufferStatus()` を使ってください。
一般的なパフォーマンスの tips
-----------------

* CPU と GPU の同期を必要とするものはすべて、とても遅い可能性があり、メインのレンダリングループでは避けたほうがいいでしょう。`getError()`、`readPixels()`、`finish()` などの関数がそれです。`getParameter()` や `getUniformLocation()` といった WebGL のゲッタも遅いので、JS 側で変数にキャッシュしてください。
* 大きい描画を少数だけしたほうがパフォーマンスが向上します（訳註：小さな描画をたくさん行うより）。1000 回の小さなものを描画するなら、一回の `drawArrays()` や `drawElements()` でやりましょう。一回の `drawArrays()` で離れたオブジェクトを描画するなら、3 点が一直線上にある三角形が使えます。
* 状態の変更が少ないほどパフォーマンスが向上します。特に、複数の画像をひとつのテクスチャにまとめて適切な座標を使うことでバインドしているテクスチャの変更が少なくて済みます。
* 小さなテクスチャは大きなテクスチャよりパフォーマンスが良いです。そのため mipmap が有効です。
* 簡単なシェーダーは複雑なものよりもパフォーマンスが良いです。特に、`if` 文を減らせば速くなります。割り算や `log()` などの数学の演算もコストが高いです。
参照
--

* WebGL


WebGL の型 - Web API

WebGL の型
========

以下の型が WebGL のインターフェイスで使用されます。

WebGL 1
-------

これらの型は `WebGLRenderingContext` 内で使用されます。

| 型 | Web IDL 型 | 説明 |
| --- | --- | --- |
| `GLenum` | `unsigned long` | 列挙型に使用します。定数の一覧もご覧ください。 |
| `GLboolean` | `boolean` | 論理値です。 |
| `GLbitfield` | `unsigned long` | 複数の論理ビットを格納するビットフィールドです。例えば `WebGLRenderingContext.clear()` で使用されます。 |
| `GLbyte` | `byte` | 8 ビット 2 の補数符号付き整数です。 |
| `GLshort` | `short` | 16 ビット 2 の補数符号付き整数です。 |
| `GLint` | `long` | 32 ビット 2 の補数符号付き整数です。 |
| `GLsizei` | `long` | サイズ（描画バッファーの幅や高さなど）に使用します。 |
| `GLintptr` | `long long` | ポインター演算用の特殊型です。 |
| `GLsizeiptr` | `long long` | ポインター演算用の特殊型です。 |
| `GLubyte` | `octet` | 8 ビット符号なし整数です。 |
| `GLushort` | `unsigned short` | 16 ビット符号なし整数です。 |
| `GLuint` | `unsigned long` | 32 ビット符号なし整数です。 |
| `GLfloat` | `unrestricted float` | 32 ビット IEEE 浮動小数点数です。 |
| `GLclampf` | `unrestricted float` | 限界つき 32 ビット IEEE 浮動小数点数です。 |

WebGL 2
-------

これらの型は `WebGL2RenderingContext` (en-US) で使用されます。すべての WebGL 1 の型も使用されます。

| 型 | Web IDL 型 | 説明 |
| --- | --- | --- |
| `GLint64` | `long long` | 符号付き 64 ビット整数 |

WebGL 拡張
--------

これらの型は、WebGL 拡張内で使用されます。

| 型 | Web IDL 型 | 説明 |
| --- | --- | --- |
| `GLuint64EXT` | `long long` | 符号なし 64 ビット整数 |

仕様書
---

| Specification |
| --- |
| WebGL # 5.1 |
| WebGL2 # 3.1 |
| EXT\_disjoint\_timer\_query  |

関連情報
----

* `WebGLRenderingContext`