WebGL: Web の 2D および 3D グラフィックス

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 以降、Microsoft Edge build 10240 以降でサポートしていますが、ユーザーの端末がこの機能をサポートするハードウェアであることも必要です。

<canvas> 要素は、ウェブページで 2D グラフィックスを表示する Canvas 2D でも使用します。

リファレンス

標準インターフェイス

拡張機能

イベント

定数と型

WebGL 2

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

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

ガイドとチュートリアル

下記に、WebGL の概念を学習するのに役立つガイド一式とステップ毎のレッスンや例のあるチュートリアルがあります。

ガイド

WebGL でのデータ
変数、バッファ、その他の WebGL コードを書く時に使うデータタイプのガイド
WebGL ベストプラクティス
WebGL のコンテンツの品質、パフォーマンス、信頼性を改善するためのヒントと提案です
拡張機能
WebGL で利用可能な拡張機能の使用方法です

チュートリアル

WebGL チュートリアル
WebGL のコアコンセプトに関する、ビギナー向けのガイドです。WebGL の経験がない場合におすすめするガイドです

基本的な 2D WebGL アニメーションの例
この例では、単一色の形状のシンプルなアニメーションをデモします。検査するトピックはアスペクト比の違いや、複数のシェーダーの集合からシェーダープログラムを生成する機能や、WebGL での描画の基本を扱います
WebGL by example
A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.

高度なチュートリアル

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.

仕様

仕様書 策定状況 コメント
WebGL 1.0 勧告 初期定義。OpenGL ES 2.0 に基づく。
WebGL 2.0 編集者草案 WebGL 1 の上に構築。OpenGL ES 3.0 に基づく。
OpenGL ES 2.0 標準
OpenGL ES 3.0 標準

ブラウザー実装状況

WebGL 1

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
WebGLRenderingContextChrome 完全対応 9Edge 完全対応 12
補足
完全対応 12
補足
補足 To access the WebGL context, use experimental-webgl rather than the standard webgl identifier.
Firefox 完全対応 4IE 完全対応 11
補足
完全対応 11
補足
補足 To access the WebGL context, use experimental-webgl rather than the standard webgl identifier.
Opera 完全対応 12Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 25Firefox Android 完全対応 ありOpera Android 完全対応 12Safari iOS 完全対応 8Samsung Internet Android 完全対応 1.5

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

WebGL 2

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
WebGL2RenderingContextChrome 完全対応 56Edge 完全対応 79Firefox 完全対応 51IE 未対応 なしOpera 完全対応 43Safari 未対応 なしWebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 51Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応

互換性に関する注記

ブラウザだけでなく、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 です。

関連情報