IE11 and WebGL rendering problems, anyone know a workaround?

cocos2d-x JavaScript
#1

WebGL mode causes very corrupt display in IE11. I understand C2D HTML5 defaults to Canvas mode if it detects IE since it isn’t technically supported, but does anyone know the specific cause for these visual problems now that IE11 provides solid WebGL support or if C2D devs are working on it?

I know other HTML5 app toolkits (e.g., C2) now embrace WebGL in IE11 for great performance on the Windows 8 store without such visual issues. For performance reasons WebGL is essential in one of my apps due to a large amount of texture manipulation, Canvas is not feasible.

Edit: The errors thrown in console include

WEBGL11094: INVALID_OPERATION: vertexAttribPointer: Enum UNSIGNED_BYTE is not currently supported
File: CCSprite.js, Line: 1931, Column: 17

This is how the tests look when forcing WebGL in IE11.

1 Like
#2

Hi Nexius, the new version of IE11 win7 has support WebGL to 0.93, and it has supported UNSIGNED_BYTE.
It was released on Feb 12, 2014. Please update to it, and take a look.

For better supporting of WebGL of IE11, Microsoft guys are working on it together with us.

The known issue:
IE11 WebGL can’t support TRIANGLE_FAN now, so please take care when you use Progresstimer of cocos2d.
It will be supported in future( no soon).

#3

Hi, I have tested on the latest IE11 (11.0.3) on Windows 7 and Windows 8.1 and it still reports the same problem (UNSIGNED_BYTE not supported). I read that it was fixed as well but it doesn’t seem to be? Here’s the test cases with rendermode set to 2 to force WebGL so you can see the problem in IE11. If you load developer tools console (F12) then refresh you will see the errors still exist.

http://mjpsites.com/c2d/samples/tests/index.html

Is there an easy way to just convert UNSIGNED_BYTE to FLOAT for those few lines relating to color so it would work? I don’t know enough about WebGL to get it working.

Here is my IE info:

#4

Hi, I will ask Frank for help. He takes charge of the development of IE11 WenGL in Microsoft.

#5

The version of IE11 which you are using is a old version, GL version is 0.92.

The latest one is v0.93, and it supports UNSIGNED_BYTE. Please update it by yourself.

Please visit http://www.browserleaks.com/webgl to check you GL version.

#6

ShunLin,

You have said that ProgressBarTimer does not work well with WebGL. Do you have a recommended way to resolve this?

I was using a custom CCLoader to create a progress loading bar. It works well with canvas and some webGL. But sometimes I only see a black box instead of the images when WebGL is used.

This is what I used inside _initStage function using ProgressTimer:

this._loadingBarColor = cc.ProgressTimer.create(this._loadingBarBGColor, 214,29);
this._loadingBarColor.width = 214;
this._loadingBarColor.height = 29;
this._loadingBarColor.setType(cc.PROGRESS_TIMER_TYPE_BAR);
this._loadingBarColor.setMidpoint(cc.p(0, 0));
this._loadingBarColor.setBarChangeRate(cc.p(1, 0));
this._loadingBarColor.setPercentage(0);
this._loadingBarColor.setPosition(cc.p(centerPos.x, (centerPos.y) - 40));
this.addChild(this._loadingBarColor);

Thank you for any insight here.

Sean