WebGL not rendering textures on some devices

Question

I'm exploring the features of WebGL for my game and are testing it out on various devices. Right now I'm using the Turbulenz Engine which handles all the rendering an such for me.

However, on some mobile and tab devices I've tested (Samsung Galaxy and Samsung Galaxy Tab II), the textures are not being rendered correctly. They either don't show up, or turn black or blank colors.

My setup is as follows:

• Samsung Galaxy S / Samsung Galaxy Tab II
• Android 2.3 (Gingerbread), Android 4.2 (Jelly Bean)
• Google Chrome Beta with WebGL enabled
• Turbulenz' spinning crate example

Take a look at this screenshot I made:

I've done some re-search and found this page describing the exact same problem. Unfortunately, a good explanation of WHY it occurs and solution is not provided.

Do you have any experience of this subject on these "old" devices, and why the issue occurs? I've read somewhere that the OS are scaling the textures when loading them, could that be the case? And how to avoid that then?

Thank you in advance!

Answer 1

The error

bindAttribLocation: index out of range

suggests that the code is trying to use too many attributes. To find out how many attributes the GPU supports you call

maxAttributes = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);

8 is the minimum a WebGL implementation must support.

That error for bindAttribLocation means the code called bindAttribLocation with a value >= maxAttributes

That's a little surprising because for most common 3D apps they'll have positions, normals, texture coordinates then possibly tangents, binormals, vertex colors. That's only 6 attributes. A second or third set of texture coordinates is not out of the ordinary but more than that seems pretty rare. Still, that's what the error message is suggesting.

Just for the heck of it I checked Score Rush, a turbulenz game. It's using attributes 0, 3, and 8. Why not 0, 1, and 2 I have no idea but on any device that only supports the minimum 8 attributes trying to use attribute 8 is going to fail because 7 is the highest attribute.

---

Update: I looked at the source for turbulenz. As currently designed it requires 16 attributes. It gives each attribute 0 through 15 a specific use. So for example the first set of texture coordinates always go on attribute 8. (which is why you're seeing the textures disappear). The first set of tangents always go on attribute 14. Etc. Here's the list of assignments

SEMANTIC_POSITION = 0;
SEMANTIC_POSITION0 = 0;
SEMANTIC_BLENDWEIGHT = 1;
SEMANTIC_BLENDWEIGHT0 = 1;
SEMANTIC_NORMAL = 2;
SEMANTIC_NORMAL0 = 2;
SEMANTIC_COLOR = 3;
SEMANTIC_COLOR0 = 3;
SEMANTIC_COLOR1 = 4;
SEMANTIC_SPECULAR = 4;
SEMANTIC_FOGCOORD = 5;
SEMANTIC_TESSFACTOR = 5;
SEMANTIC_PSIZE0 = 6;
SEMANTIC_BLENDINDICES = 7;
SEMANTIC_BLENDINDICES0 = 7;
SEMANTIC_TEXCOORD = 8;
SEMANTIC_TEXCOORD0 = 8;
SEMANTIC_TEXCOORD1 = 9;
SEMANTIC_TEXCOORD2 = 10;
SEMANTIC_TEXCOORD3 = 11;
SEMANTIC_TEXCOORD4 = 12;
SEMANTIC_TEXCOORD5 = 13;
SEMANTIC_TEXCOORD6 = 14;
SEMANTIC_TEXCOORD7 = 15;
SEMANTIC_TANGENT = 14;
SEMANTIC_TANGENT0 = 14;
SEMANTIC_BINORMAL0 = 15;
SEMANTIC_BINORMAL = 15;

Some amount of re-design or indirection will be required to make it work on GPUs with less than 16 attributes.