MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

WebGL (Web Graphics Library) は、互換性があるウェブブラウザーでプラグインを使用せずにインタラクティブな 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> 要素は、ウェブページで 2D グラフィックスを表示する Canvas 2D でも使用します。

リファレンス

標準インターフェイス

拡張機能

イベント

定数と型

WebGL 2

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

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

ガイドとチュートリアル

高度なチュートリアル

  • 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 勧告 初期定義。OpenGL ES 2.0 に基づく。
WebGL 2.0 勧告改訂案 WebGL 1 の上に構築。OpenGL ES 3.0 に基づく。
OpenGL ES 2.0 標準  
OpenGL ES 3.0 標準  

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 9 (有) 4.0 (2.0) 11 12 5.1
WebGL 2 56 未サポート 51 (51) 未サポート 43 未サポート
機能 Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 25 (有) 4 未サポート 12 8.1
WebGL 2 ? ? ? ? ? ?

互換性に関する注記

ブラウザーだけでなく、GPU も機能をサポートしていなければなりません。よって、例えば Tegra ベースのタブレットでは S3 Texture Compression (S3TC) しか使用できません。ほとんどのブラウザーでは 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 です。

関連情報

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

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