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

More than 5 years have passed since last update.

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