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

More than 5 years have passed since last update.

posted at

updated at

IE11(2014年4月)における WebGL 対応状況

IE11(2013年10月更新版)における WebGL 対応状況
http://qiita.com/cx20/items/952ee9aa7d8fca9ff983

半年ほど前に IE11 版における WebGL の対応状況について調べましたが、
先日公開された、Windows 8.1 Update 1 にて IE11 も合わせてアップデートが行われていた為、再度、WebGL の対応状況について確認してみました。
(2014.4.14 追記:Windows 7 においては、KB2929437 を手動適用することによりアップデートされます。)

WebGL の対応状況については、以下のサイトにて行いました。

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

テストに使用したブラウザ バージョン
Windows 7 + Chrome 30 30.0.1599.101 m
Windows 7 + Firefox 24 24.0
Windows 7 + IE 11 Developer Preview 11.0.9431.0
Windows 7 + IE 11 Release Preview 11.0.9600.16411
Windows 7 + IE 11.0.7 11.0.9600.17041
Windows 8.1 + IE 11.0.7 11.0.9600.17031
項目 Chrome 30 Firefox 24 IE 11 DP IE 11 RP IE 11.0.7
Vendor WebKit Mozilla Microsoft Microsoft Microsoft
Renderer WebKit WebGL Mozilla Internet Explorer Internet Explorer Internet Explorer
Renderer Version WebGL 1.0 WebGL 1.0 WebGL 0.9 WebGL 0.92 WebGL 0.93
Shading Language Version WebGL GLSL ES 1.0 WebGL GLSL ES 1.0 WebGL GLSL ES 0.9 WebGL GLSL ES 0.92 WebGL GLSL ES 0.93
Video Ram 0 MB 0 MB 0 MB 0 MB 0 MB
OCCLUSION_QUERIES false false false false false
NPOT_MIPMAPPED_TEXTURES false false false false false
TEXTURE_DXT1 true true false false true
TEXTURE_DXT3 true true false false true
TEXTURE_DXT5 true true false false true
TEXTURE_ETC1 false false false false false
INDEXFORMAT_UINT true false false false false
ANISOTROPY 16 16 1 16 16
TEXTURE_SIZE 16384 16384 16384 16384 16384
CUBEMAP_TEXTURE_SIZE 16384 16384 16384 16384 16384
3D_TEXTURE_SIZE 0 0 0 0 0
RENDERTARGET_COLOR_TEXTURES 1 1 1 1 1
RENDERBUFFER_SIZE 16384 16384 16384 16384 16384
FILEFORMAT_WEBM true true false false false
FILEFORMAT_MP4 true true true true true
FILEFORMAT_JPG true true true true true
FILEFORMAT_PNG true true true true true
FILEFORMAT_DDS true true true true true
FILEFORMAT_TGA true true true true true
WebGL Extensions 11個 7個 - 2個 5個
WebGL Extensions 項目 Chrome 30 Firefox 24 IE 11 DP IE 11 RP IE 11.0.7
ANGLE_instanced_arrays
EXT_texture_filter_anisotropic
OES_element_index_uint
OES_standard_derivatives ○(New)
OES_texture_float
OES_texture_float_linear ○(New)
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
WEBGL_compressed_texture_s3tc ○(New)
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBGL_lose_context

太字は主な変更箇所です。「○」はベンダー接頭辞「なし」、「△」はベンダー接頭辞「あり」を表しています。

以下は、@h_doxas さんの wgld.org のサンプルによる動作確認結果です。

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

No. WebGL サンプル Chrome 30 Firefox 24 IE 11 DP IE 11 RP IE 11.0.7
001 WebGL のコンテキストを取得し初期化するサンプル
002 三角形ポリゴンをレンダリングするサンプル
003 頂点色を付加してポリゴンをレンダリングするサンプル
004 複数モデルをレンダリングするサンプル
005 モデルを移動・回転・拡大縮小しながらレンダリングするサンプル
006 インデックスバッファ( IBO )を使ったレンダリングのサンプル
007 カリングと深度テストを利用したサンプル
008 立体モデル(トーラス)を描画するサンプル
009 トーラスを平行光源によるライティングで描画するサンプル
010 トーラスを拡散光と環境光によるライティングで描画するサンプル
011 トーラスを拡散光と環境光、反射光によるライティングで描画するサンプル
012 トーラスをフォンシェーディングで描画するサンプル
013 トーラスと球を点光源によるライティングで描画するサンプル
014 四角形ポリゴンをテクスチャを使って描画するサンプル
015 マルチテクスチャを使って描画するサンプル
016 テクスチャパラメータを変化させながら描画するサンプル
017 アルファブレンディングを有効にしてレンダリングするサンプル
018 ブレンドファクターを変化させながらレンダリングするサンプル
019 minMatrixb.js でクォータニオンを使うサンプル
020 マウス座標を取得してモデルを回転させるサンプル
021 クォータニオンによる球面線形補間を用いたサンプル
022 クォータニオンでビルボードを実装するサンプル
023 点や線をレンダリングするサンプル
024 ポイントスプライトを使ってレンダリングするサンプル
025 ステンシルバッファを使ってレンダリングするサンプル
026 ステンシルバッファでアウトラインをレンダリングするサンプル
027 フレームバッファを使ってテクスチャへオフスクリーンレンダリングするサンプル
028 ブラーフィルターによるぼかし処理を行なうサンプル ×
029 バンプマッピングを行なうサンプル
030 視差マッピングを行なうサンプル
031 キューブ環境マッピングによるレンダリングを行なうサンプル
032 キューブ環境バンプマッピングによるレンダリングを行なうサンプル
033 屈折マッピングによるレンダリングを行なうサンプル
034 動的キューブマッピングによるレンダリングを行なうサンプル
035 トゥーンレンダリングを行なうサンプル
036 射影テクスチャマッピングを行なうサンプル × × ○(New)
037 光学迷彩でトーラスをレンダリングするサンプル × × ○(New)
038 シャドウマッピングを行なうサンプル × × ○(New)
039 高解像度シャドウマップを行なうサンプル × × ○(New)
040 グレイスケール変換を行なうサンプル ×
041 セピア調変換を行なうサンプル ×
042 sobel フィルタ適用するサンプル ×
043 laplacian フィルタ適用するサンプル ×
044 gaussian フィルタ適用するサンプル ×
045 グレアフィルタを適用するサンプル ×
046 被写界深度によるレンダリングのサンプル ×
047 距離フォグを適用したレンダリングのサンプル ×
050 パーティクルフォグを適用したレンダリングのサンプル × × ○(New)
051 ステンシル鏡面反射を適用したレンダリングのサンプル
052 半球ライティングを適用したレンダリングのサンプル
053 リムライティングを適用したレンダリングのサンプル
054 後光 表面下散乱を適用したレンダリングのサンプル
055 mosaic フィルタを適用したレンダリングのサンプル
056 ズームブラーフィルタを適用したレンダリングのサンプル
057 ゴッドレイフィルタを適用したレンダリングのサンプル
059 正しい深度値を適用したシャドウマッピングのサンプル
060 正しい深度値を適用した高解像度シャドウマッピングのサンプル
061 浮動小数点数テクスチャでのシャドウマッピングのサンプル
062 浮動小数点数テクスチャでの高解像度シャドウマッピングのサンプル
063 頂点テクスチャフェッチのサンプル
064 浮動小数点数VTFのサンプル
066 VAO(vertex array object)を用いたレンダリングのサンプル ×
067 異方性フィルタリングを用いたレンダリングのサンプル

※ ハイフン「-」は、未検証の組み合わせです。

IE11(Windows 8.1 Update 1 版)にて、ほとんどの WebGL 機能が使えるようになっているようです。

参考までに、現時点での IE11 における、WebGL API の未実装関数の一覧を作成してみました。
(一覧情報を作成するにあたって、WebGL API 仕様 と、IE11 WebGL API Method を比較をしました。)

関数名 IE 11 DP IE 11 RP IE 11.0.7
bindAttribLocation ×
blendColor × × ×
bufferSubData ×
clearStencil × × ○(New)
colorMask ×
compressedTexImage2D × × ○(New)
compressedTexSubImage2D × × ○(New)
deleteBuffer ×
deleteProgram ×
deleteRenderbuffer ×
deleteShader ×
deleteTexture ×
detachShader ×
finish × × ×
flush × × ×
getProgramInfoLog ×
hint × × ×
isBuffer ×
isContextLost ×
isFramebuffer ×
isProgram ×
isRenderbuffer ×
isShader ×
isTexture ×
lineWidth × × ×
sampleCoverage × × ×
stencilFunc × × ○(New)
stencilFuncSeparate × × ○(New)
stencilMask × × ○(New)
stencilMaskSeparate × × ○(New)
stencilOp × × ○(New)
stencilOpSeparate × × ○(New)
validateProgram ×
vertexAttrib1f × × ×
vertexAttrib1fv × × ×
vertexAttrib2f × × ×
vertexAttrib2fv × × ×
vertexAttrib3f × × ×
vertexAttrib3fv × × ×
vertexAttrib4f × × ×
vertexAttrib4fv × × ×
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
16
Help us understand the problem. What are the problem?