IE11 Preview 版における WebGL 対応状況

IE11 より WebGL がサポートされたとの話を聞いて、少し調べてみました。
簡単なサンプルが動作するようですが、まだ、動作しないサンプルが多いようです。

■ WebGL on IE11: welcomed but unfinished
http://news.turbulenz.com/post/54340340417/webgl-on-ie11-welcomed-but-unfinished

以下のサイトにて、WebGL Device の情報を表示するスクリプトがあった為、
各ブラウザにて試してみました。

■ Device Initialization - Samples - Turbulenz Engine
http://biz.turbulenz.com/sample_assets/device_initialization.canvas.release.html

テストに使用したブラウザ	バージョン
Chrome 28	28.0.1500.72 m
Firefox 22	22.0
IE11 Developer Preview	11.0.9431.0

項目	Chrome 28	Firefox 22	IE11 Preview
Vendor	WebKit	Mozilla	Microsoft
Renderer	WebKit WebGL	Mozilla	Internet Explorer
Renderer Version	WebGL 1.0 (OpenGL ES 2.0 Chromium)	WebGL 1.0	WebGL 0.9
Shading Language Version	WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)	WebGL GLSL ES 1.0	WebGL GLSL ES 0.9
Video Ram	0 MB	0 MB	0 MB
OCCLUSION_QUERIES	false	false	false
NPOT_MIPMAPPED_TEXTURES	false	false	false
TEXTURE_DXT1	true	true	false
TEXTURE_DXT3	true	true	false
TEXTURE_DXT5	true	true	false
TEXTURE_ETC1	false	false	false
INDEXFORMAT_UINT	true	false	false
ANISOTROPY	16	16	1
TEXTURE_SIZE	16384	16384	16384
CUBEMAP_TEXTURE_SIZE	16384	16384	16384
3D_TEXTURE_SIZE	0	0	0
RENDERTARGET_COLOR_TEXTURES	1	1	1
RENDERBUFFER_SIZE	16384	16384	16384
FILEFORMAT_WEBM	true	true	false
FILEFORMAT_MP4	true	true	true
FILEFORMAT_JPG	true	true	true
FILEFORMAT_PNG	true	true	true
FILEFORMAT_DDS	true	true	true
FILEFORMAT_TGA	true	true	true
WebGL Extensions	8個	5個	-

WebGL Extensions 項目	Chrome 28	Firefox 22	IE11 Preview
EXT_texture_filter_anisotropic	△	○
OES_element_index_uint	○
OES_standard_derivatives	○	○
OES_texture_float	○	○
OES_texture_half_float
OES_vertex_array_object	○
WEBGL_compressed_texture_s3tc	△	○
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture	△
WEBGL_lose_context	○	○

（※ 「○」はベンダー接頭辞なし、「△」はベンダー接頭辞付きを表しています。）
どうやら、IE11 Developer Preview は WebGL の実装レベルが 1.0 未満と、他のブラウザ低く、拡張機能（OES_standard_derivatives など）もサポートしていないようです。

試しに、wgld.org さんの所のサンプルでも動作確認をしてみました。

■ WebGL 開発支援サイト wgld.org
http://wgld.org/

WebGL サンプル	Chrome 28	Firefox 22	IE 11 Preview
WebGL のコンテキストを取得し初期化するサンプル	○	○	○
三角形ポリゴンをレンダリングするサンプル	○	○	○
頂点色を付加してポリゴンをレンダリングするサンプル	○	○	○
複数モデルをレンダリングするサンプル	○	○	○
モデルを移動・回転・拡大縮小しながらレンダリングするサンプル	○	○	○
インデックスバッファ（IBO）を使ったレンダリングのサンプル	○	○	○
カリングと深度テストを利用したサンプル	○	○	○
立体モデル（トーラス）を描画するサンプル	○	○	○
トーラスを平行光源によるライティングで描画するサンプル	○	○	○
トーラスを拡散光と環境光によるライティングで描画するサンプル	○	○	○
トーラスを拡散光と環境光、反射光によるライティングで描画するサンプル	○	○	○
トーラスをフォンシェーディングで描画するサンプル	○	○	○
トーラスと球を点光源によるライティングで描画するサンプル	○	○	○
四角形ポリゴンをテクスチャを使って描画するサンプル	○	○	○
マルチテクスチャを使って描画するサンプル	○	○	○
テクスチャパラメータを変化させながら描画するサンプル	○	○	○
アルファブレンディングを有効にしてレンダリングするサンプル	○	○	○
ブレンドファクターを変化させながらレンダリングするサンプル	○	○	○
minMatrixb.js でクォータニオンを使うサンプル	○	○	○
マウス座標を取得してモデルを回転させるサンプル	○	○	○
クォータニオンによる球面線形補間を用いたサンプル	○	○	○
クォータニオンでビルボードを実装するサンプル	○	○	○
点や線をレンダリングするサンプル	○	○	○
ポイントスプライトを使ってレンダリングするサンプル	○	○	○
ステンシルバッファを使ってレンダリングするサンプル	○	○	○
ステンシルバッファでアウトラインをレンダリングするサンプル	○	○	○
フレームバッファを使ってテクスチャへオフスクリーンレンダリングするサンプル	○	○	○
ブラーフィルターによるぼかし処理を行なうサンプル	○	○	×
バンプマッピングを行なうサンプル	○	○	○
視差マッピングを行なうサンプル	○	○	○
キューブ環境マッピングによるレンダリングを行なうサンプル	○	○	○
キューブ環境バンプマッピングによるレンダリングを行なうサンプル	○	○	○
屈折マッピングによるレンダリングを行なうサンプル	○	○	○
動的キューブマッピングによるレンダリングを行なうサンプル	○	○	○
トゥーンレンダリングを行なうサンプル	○	○	○
射影テクスチャマッピングを行なうサンプル	○	○	×
光学迷彩でトーラスをレンダリングするサンプル	○	○	×
シャドウマッピングを行なうサンプル	○	○	×
高解像度シャドウマップを行なうサンプル	○	○	×
グレイスケール変換を行なうサンプル	○	○	×
セピア調変換を行なうサンプル	○	○	×
sobel フィルタ適用するサンプル	○	○	×
laplacian フィルタ適用するサンプル	○	○	×
gaussian フィルタ適用するサンプル	○	○	×
グレアフィルタを適用するサンプル	○	○	×
被写界深度によるレンダリングのサンプル	○	○	×
距離フォグを適用したレンダリングのサンプル	○	○	×
パーティクルフォグを適用したレンダリングのサンプル	○	○	×
ステンシル鏡面反射を適用したレンダリングのサンプル	○	○	○
半球ライティングを適用したレンダリングのサンプル	○	○	○
リムライティングを適用したレンダリングのサンプル	○	○	○

後半の方のサンプルで動かないものが、チョイチョイあるようです(^^A

まぁ、Developer Preview 版が出たばかりなので、これからの実装に期待したい所です。

なお、IE11 Developer Preview は以下のサイトよりダウンロード可能となっています。
（Windows 7/Windows Server 2008 R2 にて利用可能です。）

■ Internet Explorer 11 Developer Preview のダウンロード - Microsoft Windows
http://windows.microsoft.com/ja-jp/internet-explorer/ie-11-worldwide-languages