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

WebGL は Firefox 4 以降、Google Chrome 9 以降、Opera 12 以降、Safari 5.1 以降、Internet Explorer 11 以降、Microsoft Edge build 10240 以降でサポートしていますが、ユーザーの端末がこの機能をサポートするハードウェアであることも必要です。

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

リファレンス

標準インターフェイス

拡張機能

イベント

• webglcontextlost
• webglcontextrestored
• webglcontextcreationerror

定数と型

• WebGL の定数
• WebGL の型

WebGL 2

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

• 3D テクスチャ、
• Sampler object、
• Uniform Buffer object、
• Sync object、
• Query object、
• Transform Feedback object、
• WebGL 2 のコア機能に昇格した拡張: Vertex Array object、instancing、Multiple Render Targets、fragment depth。

"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

互換性に関する注記

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

関連情報

• Canvas
• WebGL 拡張のブラウザー実装状況