WebGL: ウェブの 2D および 3D グラフィック
============================

**WebGL** (Web Graphics Library) は、互換性があるウェブブラウザーにおいて、プラグインを使用せずにインタラクティブな 3D や 2D のグラフィックをレンダリングするための JavaScript API です。HTML の `<canvas>` 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。

WebGL への対応は、現代のすべてのブラウザーにあります（後述の互換性一覧表を参照してください）。ただし、ユーザーの端末にこれらの機能に対応したハードウェアが搭載されている必要があります。

WebGL 2 API は OpenGL ES 3.0 の機能セットの大部分に対応しています。このインターフェイスは `WebGL2RenderingContext` (en-US) インターフェイスを通して提供されています。

ウェブページ上の 2D グラフィックを実現するには、 `<canvas>` 要素で Canvas API を使用する方法もあります。

リファレンス
------

### 標準インターフェイス

* `WebGLRenderingContext`
* `WebGL2RenderingContext` (en-US)
* `WebGLActiveInfo` (en-US)
* `WebGLBuffer`
* `WebGLContextEvent` (en-US)
* `WebGLFramebuffer`
* `WebGLProgram`
* `WebGLQuery` (en-US)
* `WebGLRenderbuffer`
* `WebGLSampler` (en-US)
* `WebGLShader`
* `WebGLShaderPrecisionFormat` (en-US)
* `WebGLSync` (en-US)
* `WebGLTexture` (en-US)
* `WebGLTransformFeedback` (en-US)
* `WebGLUniformLocation` (en-US)
* `WebGLVertexArrayObject` (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_draw_buffers_indexed` (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)
### イベント

* `webglcontextlost`
* `webglcontextrestored`
* `webglcontextcreationerror`
### 定数と型

* WebGL の定数
* WebGL の型
### WebGL 2

WebGL 2 は `WebGL2RenderingContext` (en-US) インターフェイスによって提供される、WebGL の大規模なアップデートです。これは OpenGL ES 3.0 に基づいており、以下の新機能を含みます。

* 3D テクスチャ (en-US)、
* Sampler オブジェクト (en-US)、
* Uniform Buffer オブジェクト (en-US)、
* Sync オブジェクト (en-US)、
* Query オブジェクト (en-US)、
* Transform Feedback オブジェクト (en-US)、
* WebGL 2 のコア機能に昇格した拡張: Vertex Array オブジェクト (en-US)、インスタンス化 (en-US)、複数のレンダリングターゲット (en-US)、fragment depth (en-US)。

"WebGL 2 lands in Firefox" のブログ記事や、webglsamples.org/WebGL2Samples のデモもご覧ください。

ガイドとチュートリアル
-----------

下記に、WebGL の概念を学習するのに役立つガイド一式とステップ毎のレッスンや例のあるチュートリアルがあります。

### ガイド

WebGL でのデータ

変数、バッファ、その他の WebGL コードを書く時に使うデータタイプのガイド

WebGL のベストプラクティス

WebGL のコンテンツの品質、パフォーマンス、信頼性を改善するためのヒントと提案です

拡張機能

WebGL で利用可能な拡張機能の使用方法です

### チュートリアル

WebGL チュートリアル

WebGL のコアコンセプトに関する、ビギナー向けのガイドです。WebGL の経験がない場合におすすめするガイドです

### 例

基本的な 2D WebGL アニメーションの例

この例では、単一色の形状のシンプルなアニメーションをデモします。検査するトピックはアスペクト比の違いや、複数のシェーダーの集合からシェーダープログラムを生成する機能や、WebGL での描画の基本を扱います

WebGL by example

WebGL のコンセプトと機能を紹介する短い解説付きのライブサンプルのシリーズです。サンプルはトピックと難易度に応じて分類されており、WebGL レンダリングコンテキスト、シェーダプログラミング、テクスチャ、ジオメトリ、ユーザー操作などをカバーしています。

### 高度なチュートリアル

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

3D オブジェクトビューを表現するためによく使用する 3 つの主要な行列 (モデル行列、ビュー行列、プロジェクション行列) について、詳しく説明します

Matrix math for the web

3D 変換行列がどのように働くか、およびウェブ (WebGL の演算や、CSS 座標変換) でどのように使用できるかのガイドです

リソース
----

* Khronos WebGL サイト: Khronos Group の WebGL についてのメインサイト
* WebGL Fundamentals: WebGL の基礎と、基本的なチュートリアルがあります。
* Raw WebGL: An introduction to WebGL Nick Desaulniers による、 WebGL の基本的な部分を紹介する講演です。
* WebGL playground: WebGL プロジェクトの作成と共有ができるオンラインツール。迅速なプロトタイピングや実験に最適です。
* WebGL Academy: WebGL プログラミングの基礎を学ぶチュートリアルがある、 HTML/JavaScript エディターです。
* WebGL Stats: さまざまなプラットフォームのブラウザーについて、WebGL の機能性の状況を示すサイトです。
### ライブラリー

* three.js はオープンソースでフル機能の 3D WebGL ライブラリーです。
* Babylon.js は、パワフルで単純、かつオープンなゲームおよび 3D レンダリングエンジンで、分かりやすい JavaScript フレームワークにまとめられています。
* Pixi.js は、高速でオープンソースの 2D WebGL レンダラーです。
* Phaser は、キャンバスや WebGL を使ったブラウザーゲームのための、高速で、無料で、楽しいオープンソースのフレームワークです。
* PlayCanvas は、オープンソースのゲームエンジンです。
* glMatrix は、高性能な WebGL アプリケーションのための JavaScript の行列およびベクトルライブラリーです。
* twgl は、webgl の冗長性を減らすためのライブラリーです。
* RedGL は、オープンソースの 3D WebGL ライブラリです。
* vtk.js は、ブラウザー上で科学的な可視化を行うための JavaScript ライブラリーです。
* webgl-lint は、 WebGLコードのエラーを探し、有益な情報を提供するのに役立ちます。
仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14 |
| WebGL 2.0 Specification # 3.7 |

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

### api.WebGLRenderingContext

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

### api.WebGL2RenderingContext

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

### 互換性に関する注記

ブラウザだけでなく、GPU も機能をサポートしていなければなりません。よって、例えば S3 Texture Compression (S3TC) は Tegra ベースのタブレットでしか使用できません。ほとんどのブラウザーでは WebGL コンテキストを、コンテキスト名 `webgl` で作成しますが、古いブラウザーでは `experimental-webgl` も必要です。さらに将来の WebGL 2 (en-US) では完全な下位互換性があり、コンテキスト名 `webgl2` を持ちます。

### Gecko に関するメモ

#### WebGL のデバッグおよびテスト

Firefox では、テストなどの目的で WebGL の機能を制限する 2 つの設定項目があります。

`webgl.min_capability_mode`

この論理属性に `true` を指定すると、最小互換性モードが有効となります。このモードでは、必要最低限の機能セットと WebGL の仕様で指定された機能のみが使用可能です。このモードで動作確認を行うことにより、より多くの閲覧環境での動作を保証することができます。初期値は `false` です。

`webgl.disable_extensions`

この論理属性に `true` を指定すると、すべての WebGL 拡張が無効になります。初期値は `false` です。

関連情報
----

* キャンバス
* WebGL 拡張の互換性情報 (en-US)