WebGL (Web Graphics Library) は、互換性があるウェブブラウザーでプラグインを使用せずにインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。HTML5 <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。
WebGL は Firefox 4 以降、Google Chrome 9 以降、Opera 12 以降、Safari 5.1 以降、Internet Explorer 11 以降、Microsoft Edge build 10240 以降でサポートしていますが、ユーザーの端末がこの機能をサポートするハードウェアであることも必要です。
<canvas> 要素は、ウェブページで 2D グラフィックスを表示する Canvas 2D でも使用します。
ウェブページ上の 2D グラフィックを実現するには、 <canvas> 要素で Canvas API を使用する方法もあります。
リファレンス
標準インターフェイス
拡張機能
ANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_floatEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_float_blendEXT_frag_depthEXT_sRGBEXT_shader_texture_lodEXT_texture_compression_bptcEXT_texture_compression_rgtcEXT_texture_filter_anisotropicOES_element_index_uintOES_fbo_render_mipmapOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectOVR_multiview2WEBGL_color_buffer_floatWEBGL_compressed_texture_astcWEBGL_compressed_texture_atcWEBGL_compressed_texture_etcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_context
イベント
定数と型
WebGL 2
WebGL 2 は WebGL2RenderingContext インターフェイスによって提供される、WebGL の大規模なアップデートです。これは OpenGL ES 3.0 に基づいており、以下の新機能を含みます:
- 3D テクスチャ、
- Sampler object、
- Uniform Buffer object、
- Sync object、
- Query object、
- Transform Feedback object、
- WebGL 2 のコア機能に昇格した拡張: Vertex Array object、instancing、Multiple Render Targets、fragment depth。
"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 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 についてのメインサイト
- WebGL Fundamentals: WebGL の基礎と、基本的なチュートリアルがあります。
- WebGL playground: WebGL プロジェクトの作成と共有ができるオンラインツール。迅速なプロトタイピングや実験に最適です。
- WebGL Academy: WebGL プログラミングの基礎を学ぶチュートリアルがある、 HTML/JavaScript エディターです。
- WebGL Stats: さまざまなプラットフォームのブラウザーについて、WebGL の機能性の状況を示すサイトです。
ライブラリー
- glMatrix: 高性能 WebGL アプリ製作のための、行列とベクトルの JavaScript ライブラリー
- PhiloGL is a WebGL framework for data visualization, creative coding, and game development.
- Pixi.js is a fast, open-source 2D WebGL renderer.
- PlayCanvas is an open-source game engine.
- Sylvester: ベクトルや行列を操作するためのオープンソースライブラリー。WebGL 用として最適化されたものではありませんが、非常に堅牢です。
- three.js is an open-source, fully featured 3D WebGL library.
- Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games.
- RedGL is an open-source 3D WebGL library.
- vtk.js is a JavaScript library for scientific visualization in your browser.
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| OpenGL ES 3.0 | 標準 | |
| OpenGL ES 2.0 | 標準 | |
| WebGL 2.0 | 編集者草案 | WebGL 1 の上に構築。OpenGL ES 3.0 に基づく。 |
| WebGL 1.0 | 勧告 | 初回定義。OpenGL ES 2.0 に基づく。 |
ブラウザーの互換性
WebGL 1
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
WebGLRenderingContext | Chrome 完全対応 9 | Edge
完全対応
12
| Firefox 完全対応 4 | IE
完全対応
11
| Opera 完全対応 12 | Safari 完全対応 5.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 25 | Firefox Android 完全対応 あり | Opera Android 完全対応 12 | Safari iOS 完全対応 8 | Samsung Internet Android 完全対応 1.5 |
凡例
- 完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
WebGL 2
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
WebGL2RenderingContext | Chrome 完全対応 56 | Edge 完全対応 79 | Firefox 完全対応 51 | IE 未対応 なし | Opera 完全対応 43 | Safari 未対応 なし | WebView Android 完全対応 58 | Chrome Android 完全対応 58 | Firefox Android 完全対応 51 | Opera Android 完全対応 43 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 7.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
互換性に関する注記
ブラウザだけでなく、GPU も機能をサポートしていなければなりません。よって、例えば S3 Texture Compression (S3TC) は Tegra ベースのタブレットでしか使用できません。ほとんどのブラウザーでは WebGL コンテキストを、コンテキスト名 webgl で作成しますが、古いブラウザーでは experimental-webgl も必要です。さらに将来の WebGL 2 では完全な下位互換性があり、コンテキスト名 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です。