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 を使用する方法もあります。

リファレンス

標準インターフェイス

拡張機能

イベント

定数と型

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

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

関連情報