Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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 でも使用します。

リファレンス

標準インターフェイス

拡張インターフェイス

イベント

定数と型

ガイドとチュートリアル

高度なチュートリアル

  • 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 です。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, fscholz, ethertank, Yukoba, kohei.yoshino, saneyuki_s, Potappo
 最終更新者: yyss,