6
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What are the problem?