1

我有一个使用 WebGL1 来渲染东西的库。它大量使用浮动纹理和实例渲染。

现在似乎对 WebGL1 的支持很奇怪，有些设备支持例如 WebGL2，这些扩展是核心，但不支持 WebGL1，或者支持它，但不支持扩展。

同时，对 WebGL2 的支持并不令人惊奇。也许有一天它会是，但不是它不是。

我开始研究支持这两个版本需要什么。

对于着色器，我想我大部分时间都可以侥幸逃脱#define。例如，#define texture2D texture和其他类似的事情。

当涉及到扩展时，问题就更大了，因为扩展对象不再存在。作为一个实验，我尝试将扩展属性复制到上下文对象中，例如gl.drawArraysInstanced = (...args) => ext.drawArraysInstancedANGLE(...args).

在纹理方面，不需要做太多改动，也许gl.RGBA8 = gl.RGBA在 WebGL1 中运行时添加一些类似的东西，因此在 WebGL2 中运行时它会“正常工作”。

那么问题来了……有人试过吗？我担心它会损害性能，尤其是函数调用的额外间接性。如果假设它可以在 WebGL1 中运行，它也会使阅读代码变得不那么明显。毕竟，没有 WebGL1 上下文具有drawArraysInstanced, 或RGBA8. 这也困扰着 Typescript 打字和其他小事。

另一种选择是在整个代码中都有分支。两个版本的着色器（或#ifdef技巧），每个需要纹理格式的地方和每个完成实例化的地方都有很多分支。到处都是这样的东西是非常难看的：

if (version === 1) {
  instancedArrays.vertexAttribDivisorANGLE(m0, 1);
  instancedArrays.vertexAttribDivisorANGLE(m1, 1);
  instancedArrays.vertexAttribDivisorANGLE(m2, 1);
  instancedArrays.vertexAttribDivisorANGLE(m3, 1);
} else {
  gl.vertexAttribDivisor(m0, 1);
  gl.vertexAttribDivisor(m1, 1);
  gl.vertexAttribDivisor(m2, 1);
  gl.vertexAttribDivisor(m3, 1);
}

最后，也许还有第三种我没有想到的方法。

有什么建议吗？

4

2 回答 2

3

不幸的是，我认为大多数答案将主要基于意见。

第一个问题是为什么支持两者？如果您的想法在 WebGL1 上运行良好，那么只需使用 WebGL1。如果您绝对必须拥有 WebGL2 功能，那么请使用 WebGL2 并意识到许多设备不支持 WebGL2。

如果您打算这样做，twgl 会尝试通过提供一个将所有 WebGL1 扩展复制到其 WebGL2 API 位置的函数来使其更容易。就像你提到的那样，而不是

ext = gl.getExtension('ANGLE_instanced_arrays');
ext.drawArraysInstancedANGLE(...)

你反而做

twgl.addExtensionsToContext(gl);
gl.drawArraysInstanced(...);

我不相信会有任何明显的性能差异。特别是因为这些函数每帧只调用几百次，所以包装不会成为代码中的瓶颈。

但重点并不是真正同时支持 WebGL1 和 WebGL2。相反，它只是为了让你编写代码的方式对于两个 API 都是相同的。

尽管如此，这 2 个 API 还是存在真正的差异。例如，要在 WebGL1 中使用 FLOAT RGBA 纹理，您可以使用

gl.texImage2D(target, level, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, ...)

在 WebGL2 中是

gl.texImage2D(target, level, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, ...)

在这种情况下，如果您尝试将其称为与 WebGL1 相同的名称，WebGL2 将失败。还有其他差异。

在 WebGL1 和 WebGL2 中可以正常工作。该规范特别指出，组合会在 WebGL2 上产生 RGBA8。

请注意，您需要 RGBA8 的示例不正确。

gl.texImage2D(target, level, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, ...)

不过，最大的区别是，如果您可以使用 WebGL1，则没有理由使用 WebGL2。或者，反之亦然，如果您需要 WebGL2，那么您可能无法轻易回退到 WebGL1

例如，您提到对着色器使用定义，但是您将如何处理 WebGL2 中不在 WebGL1 中的功能。诸如textureFetchmod%运算符或整数属性等功能......如果您需要这些功能，您主要需要编写一个仅 WebGL2 的着色器。如果您不需要这些功能，那么首先使用 WebGL2 确实没有意义。

当然，如果你真的想去做，如果用户有 WebGL2，你可能想制作一个更漂亮的渲染器，如果有 WebGL1，则回退到更简单的渲染器。

TD;LR IMO 选择一个或另一个

于 2019-12-26T17:04:49.000 回答
0

我在编写我的库的文档时发现了这个问题，该库有很多目标，但其中一个正是这个 - 同时支持 WebGL1 和 WebGL2 以获得更高的跨设备兼容性。

https://xemantic.github.io/shader-web-background/

例如，我在BrowserStack中发现三星手机不支持在 WebGL1 中渲染到浮点纹理，而在 WebGL2 中对它们来说非常好。同时，WebGL2 永远不会出现在 Apple 设备上，但渲染到半浮点纹理得到了很好的支持。

我的库不提供完整的 WebGL 抽象，而是为片段着色器配置管道。这是 GitHub 上的源代码，其中包含取决于版本的 WebGL 策略代码：

https://github.com/xemantic/shader-web-background/blob/main/src/main/js/webgl-utils.js

因此，要回答您的问题，这是可行且可取的，但是对于每个 WebGL 功能，以一种完全通用的方式来完成它可能会非常具有挑战性。我想第一个要问的问题是“共同点是什么？” 在支持的扩展方面。

于 2021-01-27T18:54:28.900 回答