We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 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 標準  

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

関連情報

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

最終更新者: Uemmra3,