recursal/MDN huggingface dataset:
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 イベント
==============================

**`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 イベント
===============================

**`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
===========================

**`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()
=================================

**`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()
========================

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

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

**`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 プロパティ
==============================

**`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 イベント
======================================

**`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 イベント
=============================

**`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
==========================

**`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
======================

**`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 のデータ
==========

シェーダープログラムは 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
===========

* 次のページ » (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 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 の型
========

以下の型が 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`
WebGL チュートリアル
=============

このチュートリアルでは、 `<canvas>` 要素を使用して WebGL グラフィックを描画する方法について、基本から説明します。提供されている例から、 WebGL でできることの明確な概念を知ることができ、独自のコンテンツを作成する際に役立つコードスニペットを提供します。

WebGL により、プラグインを使用することなく HTML の `<canvas>` 内で 3D グラフィックをレンダリングするための OpenGL ES 2.0 に基づく API をウェブコンテンツから使用できます。 WebGL のプログラムは JavaScript で記述する制御コードと、コンピューターの Graphics Processing Unit (GPU) で実行する特殊効果コード（シェーダーコード）で構成されます。 WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。

始める前に
-----

`<canvas>` 要素を使用することはそれほど難しくありませんが、 HTML や JavaScript の基礎を理解している必要があります。 `<canvas>` 要素や WebGL は一部の古いブラウザーが対応していませんが、すべての主要なブラウザーの最近のバージョンが対応しています。キャンバスにグラフィックスを描画するためには、 JavaScript のコンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをその場で生成します。

このチュートリアルの内容
------------

WebGL 入門

WebGL コンテキストのセットアップ方法です。

WebGL コンテキストへの平面コンテンツの追加

WebGL を使用して単純な平面図形を描画する方法です。

シェーダーを用いた WebGL での色の指定

シェーダーを用いた図形への色の設定方法について紹介します。

WebGL でのオブジェクトのアニメーション

簡単なアニメーションを作成するための、オブジェクトの回転と変換の方法を紹介します。

WebGL を用いた 3D オブジェクトの作成

3D オブジェクト（今回は立方体）の作成とアニメーションの方法を紹介します。

WebGL でのテクスチャの使用

オブジェクトの表面にテクスチャをマッピングする方法について紹介します。

WebGL でのライティング

WebGL コンテキストにおいて光の稿かをシミュレーションする方法です。

WebGL でのテクスチャのアニメーション

テクスチャをアニメーションさせる方法についてです。ここでは、回転する立方体の表面に Ogg ビデオをマッピングする手法を紹介します。
WebGL でのオブジェクトのアニメーション
======================

* « 前のページ
* 次のページ »
正方形を回転させる
---------

この例では、実際にはカメラを回転させることで、正方形を回転させているように見せていきます。最初に、カメラの現在の回転を追跡する変数が必要です。

**メモ:** このコードを "webgl-demo.js" スクリプトの始めに追加してください。


```js
let squareRotation = 0.0;
let deltaTime = 0;
```


ここで `drawScene()` 関数を更新して、カメラを描画するときに現在の回転を適用する必要があります。カメラを正方形の初期描画位置に移動させた後、回転を適用します。

**メモ:** "draw-scene.js" モジュールで、 `drawScene()` 関数の宣言を更新し、使用する回転を渡せるようにします。


```js
function drawScene(gl, programInfo, buffers, squareRotation) {
```


**メモ:** `drawScene()` 関数の中で、 `mat4.translate()` の呼び出しの直後に次のコードを追加してください。


```js
mat4.rotate(
  modelViewMatrix, // 出力先の行列
  modelViewMatrix, // 回転する行列
  squareRotation, // ラジアンでの回転量
  [0, 0, 1],
); // 回転軸
```


これは modelViewMatrix を現在の `squareRotation` の値だけ、Z 軸を中心に回転させます。

実際にアニメーションさせるには、 `squareRotation` の値を時間とともに変化させるコードを追加する必要があります。

**メモ:** このコードを `main()` 関数の終わりに追加し、既存の `drawScene()` の呼び出しを置き換えてください。


```js
let then = 0;

// 繰り返しシーンを描画
function render(now) {
  now \*= 0.001; // 秒に変換
  deltaTime = now - then;
  then = now;

  drawScene(gl, programInfo, buffers, squareRotation);
  squareRotation += deltaTime;

  requestAnimationFrame(render);
}
requestAnimationFrame(render);
```


このコードでは `requestAnimationFrame` を用いて、各フレームで関数 "`render`" を呼び出すようブラウザーに依頼します。 `requestAnimationFrame` はページが読み込まれてからの時刻をミリ秒単位で渡します。それを秒に変換し、そこから前回の時刻を引いて `deltaTime` を計算します。

最後に `squareRotation` を更新します。

コードを確認する | 新しいページでデモを開く

* « 前のページ
* 次のページ »
WebGL 入門
========

* 次のページ »

WebGL により、ウェブコンテンツで OpenGL ES 2.0 ベースの API を用いて、対応しているブラウザーではプラグインを使わずに、 2D および 3D の描画を HTML の `canvas` において行うことができます。

WebGL のプログラムは JavaScript で記述する制御コードと、コンピューターの Graphics Processing Unit (GPU) で実行するシェーダーコード (GLSL) で構成されます。 WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。

この記事では、 WebGL の基礎を紹介します。ここでは、 3D グラフィックに関して数学的に理解していることを前提とし、 3D グラフィックの概念自体の説明は行いません。

このチュートリアルで使用するコード例は、GitHub の webgl-examples リポジトリーで確認できます。

この一連の記事は WebGL 自体を紹介していることに注意してください。ただし THREE.js など、 WebGL の機能をカプセル化する数多くのフレームワークを利用して、 3D アプリケーションとゲームをより簡単に構築することが可能です。

3D 描画の準備
--------

最初に、次の 2 つのファイルを作成してください。

* "index.html"
* "webgl-demo.js"

"index.html" ファイルには、以下のような内容を入れてください。


```html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>WebGL デモ</title>
    <script src="webgl-demo.js" type="module"></script>
  </head>

  <body>
    <canvas id="glcanvas" width="640" height="480"></canvas>
  </body>
</html>
```


これは、サンプルが描画するキャンバスを宣言しています。

### WebGL コンテキストの準備

以下のコードを "webgl-demo.js" ファイルに追加してください。


```js
main();

//
// ここから開始
//
function main() {
  const canvas = document.querySelector("#glcanvas");
  // GL コンテキストを初期化
  const gl = canvas.getContext("webgl");

  // WebGL が使用可能で動作している場合にのみ続行
  if (gl === null) {
    alert(
      "WebGL を初期化できません。ブラウザーまたはマシンが対応していない可能性があります。",
    );
    return;
  }

  // クリアカラーを黒に設定し、完全に不透明する
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 指定されたクリアカラーでカラーバッファーをクリアする
  gl.clear(gl.COLOR\_BUFFER\_BIT);
}
```


スクリプトが読み込まれると `main()` 関数が呼び出されます。この関数の目的は WebGL コンテキストをセットアップし、コンテンツのレンダリングを始めることです。

ここで最初に行うことはキャンバスへの参照を取得し、それを `canvas` という名前の変数に割り当てることです。

キャンバスを取得したら、キャンバスの `WebGLRenderingContext` を取得するために `getContext()` を呼び出して文字列 `"webgl"` を渡します。ブラウザーが WebGL に対応していない場合、 `getContext()` は `null` を返します。その場合はユーザーにメッセージを表示して終了します。

コンテキストが正常に初期化された場合、変数 `gl` はその参照になります。この場合、クリアカラーを黒に設定し、そのカラーのコンテキストをクリア（背景色でキャンバスを再描画）します。

この時点で、 WebGL コンテキストが正常に初期化されるのに十分なコードがあり、コンテンツを受信する準備ができて待機している大きな黒い空のボックスになります。

コードを確認する | 新しいページでデモを開く

関連情報
----

* An introduction to WebGL: Luz Caballero が著し、dev.opera.com で公開しています。この記事では WebGL とは何かやどのように WebGL が動作するか（レンダリングパイプラインの概念を含む）を説明して、WebGL ライブラリーをいくつか紹介しています。
* WebGL Fundamentals
* An intro to modern OpenGL: Joe Groff が OpenGL に関するすばらしい記事シリーズを著しており、OpenGL の歴史から重要なグラフィックスパイプラインの概念までの説明、およびどのように OpenGL が動作するかを示すデモを紹介しています。OpenGL の知識を持っていない場合は、ここから始めるとよいでしょう。
* 次のページ »
Clients: get() メソッド
===================

**`get()`** は`Clients` インターフェイスのメソッドは、指定された `id` と一致するサービスワーカークライアントを取得し、`Promise` で返します。

構文
--


```js
get(id)
```

### 引数

`id`

取得するクライアントの id を表す文字列です。

### 返値

`Client` オブジェクトまたは `undefined` に解決される `Promise`。

例
-


```js
self.clients.get(id).then((client) => {
  self.clients.openWindow(client.url);
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # clients-get |

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

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