WebGL

WebGL は HTML5 canvas 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより Web へと 3D グラフィックを取り入れます。Firefox 4 および Google Chrome 9 よりサポートされています。

開発に関するトピックス

WebGL 入門
WebGL コンテクストのセットアップ方法
WebGL コンテクストへの平面コンテンツの追加
単純なフラット図形の描画方法
シェーダーを用いた WebGL での色の設定
シェーダーを用いた図形への色の設定方法についてのデモンストレーション
WebGL でのオブジェクトのアニメーティング
単純なアニメーションの作成の為のオブジェクトの回転と移動の方法について
WebGL を用いた 3D オブジェクトの作成
3D オブジェクトの作成とアニメーションの方法について(キューブを用いた例)
WebGL でのテクスチャの使用
オブジェクトの表面にテクスチャをマッピングする方法についてのデモンストレーション
WebGL でのライティング
WebGL コンテクストにおいて光のエフェクトをシミュレートする方法について。
WebGL でのテクスチャのアニメーティング
テクスチャをアニメーションさせる方法について。ここでは、回転するキューブの表面に Ogg ビデオをマッピングする手法を紹介します。
WebGL ベストプラクティス
Web​​GL のコードを改善するためのヒントと提案
クロスドメインでのテクスチャの使用
コンテクストが読込まれているドメインへの、他のドメイン下のテクスチャの読込みに関する情報
WebGL の拡張機能の使用
WebGL で利用可能な拡張機能の使用方法について説明します。
WebGL Specification
WebGL の仕様
Khronos WebGL site
Khronos Group の WebGL についてのメインサイト
Learning WebGL
WebGL の使い方についてのチュートリアルサイト
The WebGL Cookbook
WebGL コードの書き方についてのハンドレシピサイト
Planet WebGL
WebGL コミュニティに関連する人々のフィードアグリゲータ
ewgl-matrices
WebGL 用の超高速行列ライブラリ
glMatrix
高性能 WebGL アプリ製作の為の、行列とベクトルの JavaScript ライブラリ
mjs
WebGL 用に最適化されたベクトルと行列の計算を行う JavaScript ライブラリ
Sylvester
ベクトルや行列を操作する為のオープンソースライブラリ。WebGL 用として最適化されたものではありませんが、非常に堅牢です。
WebGL playground
WebGL プロジェクトの作成と共有ができるオンラインツール。迅速なプロトタイピングや実験に最適です。

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 4.0 (2.0) 9 未サポート 12 (要設定) 5.1 (要設定)
コンテクスト名 experimental-webgl webgl 未サポート experimental-webgl experimental-webgl
OES_texture_float 6.0 (6.0) ? ? ? ?
OES_standard_derivatives 10.0 (10.0) ? ? ? ?
EXT_texture_filter_anisotropic 13.0 (13.0) ? ? ? ?
WEBGL_compressed_texture_s3tc 15.0 (15.0) ? ? ? ?
drawingBufferWidth および
drawingBufferHeight 属性
9.0 (9.0) ? ? ? ?
機能 Firefox Mobile (Gecko) Chrome for Android IE Mobile Opera Mobile Safari Mobile
基本サポート 4 25 (要設定) 未サポート 12 (要設定) 未サポート
コンテクスト名 experimental-webgl experimental-webgl 未サポート experimental-webgl 未サポート
OES_texture_float 6.0 (6.0) 25 ? ? ?
OES_standard_derivatives 10.0 (10.0) 25 ? ? ?
EXT_texture_filter_anisotropic 13.0 (13.0) 25 ? ? ?
WEBGL_compressed_texture_s3tc 15.0 (15.0) 25
WEBKIT_プレフィックス
? ? ?
drawingBufferWidth および
drawingBufferHeight 属性
9.0 (9.0) 25 ? ? ?

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

Document Tags and Contributors

タグ:
Contributors to this page: saneyuki_s, Yukoba, Potappo, ethertank, Yoshino
最終更新者: ethertank,