WebGL 不在某些设备上渲染纹理

Question

我正在为我的游戏探索 WebGL 的功能，并正在各种设备上对其进行测试。现在我正在使用Turbulenz Engine，它为我处理所有的渲染。

但是，在我测试过的一些移动设备和标签设备（Samsung Galaxy 和 Samsung Galaxy Tab II）上，纹理渲染不正确。它们要么不显示，要么变成黑色或空白。

我的设置如下：

• 三星 Galaxy S / 三星 Galaxy Tab II
• Android 2.3（姜饼）、Android 4.2（果冻豆）
• 启用了 WebGL 的 Google Chrome 测试版
• Turbulenz' spinning crate example

看看我做的这个截图：

我进行了一些重新搜索并找到了this page describing the exact same problem。不幸的是，没有很好地解释为什么会发生这种情况并且没有提供解决方案。

您是否在这些“旧”设备上遇到过这个问题？为什么会出现这个问题？我在某处读到操作系统在加载纹理时会缩放纹理，可能是这样吗？那么如何避免呢？

提前谢谢你！

Answer 1

错误

bindAttribLocation: index out of range

表明代码试图使用太多属性。要了解 GPU 支持多少属性调用

maxAttributes = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);

8 是 WebGL 实现必须支持的最小值。

bindAttribLocation 的错误意味着代码 bindAttribLocation 的值 >= maxAttributes

这有点令人惊讶，因为对于大多数常见的 3D 应用程序，它们将具有位置、法线、纹理坐标，然后可能还有切线、副法线、顶点颜色。那只是6个属性。第二组或第三组纹理坐标并不少见，但更多似乎非常罕见。不过，这就是错误消息所暗示的内容。

只是为了它，我检查了Score Rush，一个turbulenz游戏。它使用属性 0、3 和 8。为什么不使用 0、1 和 2 我不知道，但在任何仅支持最少 8 个属性的设备上尝试使用属性 8 都会失败，因为 7 是最高属性。

---

更新：我查看了 turbulenz 的来源。按照目前的设计，它需要 16 个属性。它为每个属性 0 到 15 提供了特定用途。因此，例如，第一组纹理坐标始终位于属性 8 上。（这就是您看到纹理消失的原因）。第一组切线总是在属性 14 上。等等。这是分配列表

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;

需要进行一些重新设计或间接处理才能使其在少于 16 个属性的 GPU 上工作。