WebGL (Web Graphics Library) は、互換性がある Web ブラウザでプラグインを使用せずにインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。HTML5 <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。
WebGL は Firefox 4 以降、Google Chrome 9 以降、Opera 12 以降、Safari 5.1+ 以降、Internet Explorer 11 以降でサポートしていますが、ユーザの端末がこの機能をサポートするハードウェアであることも必要です。
<canvas> 要素は、Web ページで 2D グラフィックスを表示する Canvas 2D でも使用します。
リファレンス
標準インターフェイス
拡張インターフェイス
ANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_frag_depthEXT_sRGBEXT_shader_texture_lodEXT_texture_filter_anisotropicOES_element_index_uintOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectWEBGL_color_buffer_floatWEBGL_compressed_texture_atcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_contextWebGLTimerQueryEXTWebGLVertexArrayObjectOES
イベント
定数と型
ガイドとチュートリアル
- WebGL チュートリアル: WebGL のコアコンセプトに関する、ビギナー向けのガイドです。WebGL の経験がない場合におすすめするガイドです。
- WebGL ベストプラクティス: WebGL のコンテンツを改善するためのヒントと提案です。
- 拡張機能を使用する: WebGL で利用可能な拡張機能の使用方法です。
高度なチュートリアル
- WebGL model view projection: 3D オブジェクトビューを表現するためによく使用する 3 つの主要な行列 (モデル行列、ビュー行列、プロジェクション行列) について、詳しく説明します。
- Matrix math for the web: 3D 変換行列がどのように働くか、および Web (WebGL の演算や、CSS3 Transform) でどのように使用できるかのガイドです。
リソース
- Raw WebGL: An introduction to WebGL: WebGL の基礎を Nick Desaulniers が紹介します。低レベルのグラフィックスプログラミングを行ったことがない方におすすめします。
- Khronos WebGL サイト: Khronos Group の WebGL についてのメインサイト
- Learning WebGL: WebGL 使い方についてのチュートリアルサイト
- WebGL Fundamentals: WebGL の基礎と、基本的なチュートリアルがあります。
- WebGL playground: WebGL プロジェクトの作成と共有ができるオンラインツール。迅速なプロトタイピングや実験に最適です。
- WebGL Academy: WebGL プログラミングの基礎を学ぶチュートリアルがある、 HTML/JavaScript エディタです。
- WebGL Stats: さまざまなプラットフォームのブラウザについて、WebGL の機能性の状況を示すサイトです。
ライブラリ
- glMatrix: 高性能 WebGL アプリ製作の為の、行列とベクトルの JavaScript ライブラリ
- Sylvester: ベクトルや行列を操作する為のオープンソースライブラリ。WebGL 用として最適化されたものではありませんが、非常に堅牢です。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WebGL 1.0 | 勧告 | 最初期の定義 |
| WebGL 2.0 | 勧告改訂案 |
ブラウザ実装状況
| 機能 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 4.0 (2.0) | 9 | 11 | 12[1] | 5.1[1] |
| 機能 | Firefox Mobile (Gecko) | Chrome for Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 4 | 25[1] | 未サポート | 12[1] | 8.1 |
[1] 実験的な実装です。
互換性に関する注記
ブラウザだけでなく、GPU も機能をサポートしていなければなりません。よって、例えば Tegra ベースのタブレットでは S3 Texture Compression (S3TC) しか使用できません。ほとんどのブラウザでは WebGL コンテキストを、コンテキスト名 webgl で作成しますが、古いブラウザでは experimental-webgl も必要です。さらに将来の WebGL 2 では完全な下位互換性があり、今後テスト用にコンテキスト名 experimental-webgl2 を持つでしょう。
Gecko に於ける注記
WebGL のでバッグおよびテスト
Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) 以降には、テスト等の目的で WebGL の機能を制限する 2 つの設定項目があります。
webgl.min_capability_mode- この論理属性に
trueを指定すると、最小互換性モードが有効となります。このモードでは、必要最低限の機能セットと WebGL の仕様で指定された機能のみが使用可能です。このモードで動作確認を行う事により、より多くの閲覧環境での動作を保証する事ができます。初期値はfalseです。 webgl.disable_extensions- この論理属性に
trueを指定すると、全ての WebGL の拡張が無効になります。拡張に対応していない環境での動作を確認するのに有効です。初期値はfalseです。