WebGL: ウェブの 2D および 3D グラフィック

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

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

ウェブページ上の 2D グラフィックを実現するには、 <canvas> 要素で Canvas API を使用する方法もあります。

• webglcontextlost (en-US)
• webglcontextrestored (en-US)
• webglcontextcreationerror (en-US)

• WebGL の定数
• WebGL の型

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

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

"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 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.

ブラウザだけでなく、GPU も機能をサポートしていなければなりません。よって、例えば S3 Texture Compression (S3TC) は Tegra ベースのタブレットでしか使用できません。ほとんどのブラウザーでは WebGL コンテキストを、コンテキスト名 webgl で作成しますが、古いブラウザーでは experimental-webgl も必要です。さらに将来の WebGL 2 (en-US) では完全な下位互換性があり、コンテキスト名 webgl2 を持ちます。

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 拡張の互換性情報 (en-US)