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
インターフェイスを通して提供されています。
ウェブページ上の 2D グラフィックを実現するには、 <canvas>
要素で Canvas API を使用する方法もあります。
リファレンス
標準インターフェイス
拡張機能
ANGLE_instanced_arrays
EXT_blend_minmax
EXT_color_buffer_float
EXT_color_buffer_half_float
EXT_disjoint_timer_query
EXT_float_blend
ExperimentalEXT_frag_depth
EXT_shader_texture_lod
EXT_sRGB
EXT_texture_compression_bptc
EXT_texture_compression_rgtc
EXT_texture_filter_anisotropic
EXT_texture_norm16
KHR_parallel_shader_compile
OES_draw_buffers_indexed
OES_element_index_uint
OES_fbo_render_mipmap
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
OVR_multiview2
WEBGL_color_buffer_float
WEBGL_compressed_texture_astc
WEBGL_compressed_texture_etc
WEBGL_compressed_texture_etc1
WEBGL_compressed_texture_pvrtc
WEBGL_compressed_texture_s3tc
WEBGL_compressed_texture_s3tc_srgb
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBGL_draw_buffers
WEBGL_lose_context
WEBGL_multi_draw
イベント
定数と型
WebGL 2
WebGL 2 は WebGL2RenderingContext
インターフェイスによって提供される、WebGL の大規模なアップデートです。これは OpenGL ES 3.0 に基づいており、以下の新機能を含みます。
- 3D テクスチャ、
- Sampler オブジェクト、
- Uniform Buffer オブジェクト、
- Sync オブジェクト、
- Query オブジェクト、
- Transform Feedback オブジェクト、
- WebGL 2 のコア機能に昇格した拡張: Vertex Array オブジェクト、インスタンス化、複数のレンダリングターゲット、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 のモデル、ビュー、投影
-
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
api.WebGL2RenderingContext
BCD tables only load in the browser
互換性に関する注記
ブラウザだけでなく、GPU も機能をサポートしていなければなりません。よって、例えば S3 Texture Compression (S3TC) は Tegra ベースのタブレットでしか使用できません。ほとんどのブラウザーでは WebGL コンテキストを、コンテキスト名 webgl
で作成しますが、古いブラウザーでは experimental-webgl
も必要です。さらに将来の WebGL 2 では完全な下位互換性があり、コンテキスト名 webgl2
を持ちます。
Gecko に関するメモ
WebGL のデバッグおよびテスト
Firefox では、テストなどの目的で WebGL の機能を制限する 2 つの設定項目があります。
webgl.min_capability_mode
-
この論理属性に
true
を指定すると、最小互換性モードが有効となります。このモードでは、必要最低限の機能セットと WebGL の仕様で指定された機能のみが使用可能です。このモードで動作確認を行うことにより、より多くの閲覧環境での動作を保証することができます。初期値はfalse
です。 webgl.disable_extensions
-
この論理属性に
true
を指定すると、すべての WebGL 拡張が無効になります。初期値はfalse
です。