Safari 14 WebGL alpha 与帧缓冲区渲染的混合似乎坏了

Question

我运行最近遇到了一个非常棘手的运行ge 问题，我很好奇是否有其他人遇到过这个问题，或者是否有人发现了我的 WebGL alpha 混合功能的问题。

当启用 alpha 混合并结合帧缓冲区渲染时，Safari 14 似乎没有渲染任何东西。它曾经在 Safari 13 中按预期工作，它也适用于所有其他主要浏览器（测试 Chrome、Edge、Firefox）

演示： https://jsfiddle.net/flek/rc6zbk0d/58/

您应该会看到三个红点和一个三角形，它们会在 2.5 秒后变成紫色。这适用于 Chrome、Firefox、Safari 13，但不适用于 Safari 14！

似乎使 Safari 14 关闭的关键部分如下（fiddle 中的第 89 和 146 行）。

    blend: {
      enable: true, // This prevents Safari v14 from rendering the points.
      func: {
        srcRGB: 'src alpha',
        srcAlpha: 'src alpha',
        dstRGB: 'one minus src alpha',
        dstAlpha: 'one minus src alpha',
      },
    },

这可能是 Safari 本身、Regl 或我的代码中的错误。我很好奇是否有人发现混合函数 + 帧缓冲区渲染有问题。

Answer 1

我找到了解决方法。或者我应该说，Firefox 通过在控制台打印一些有用的警告来拯救！

显然 Safari 14 改变了加载扩展的方式。以前，当 OES_texture_float 被激活时，EXT_float_blend 扩展也会被激活。这也是 MDN 上描述的行为，如果我理解正确的话：

On devices that support the EXT_float_blend extension, it is automatically, implicitly, enabled when any one or more of EXT_color_buffer_float, OES_texture_float, or WEBGL_color_buffer_float are enabled. This ensures that content written before EXT_float_blend was exposed by WebGL will function as expected.

来源：https://developer.mozilla.org/en-US/docs/Web/API/EXT_float_blend#usage_notes

然而，这似乎不再是这样了。所以必须手动激活 WEBGL_color_buffer_float 然后 EXT_float_blend.

这是与上面完全相同的演示，其中两个扩展被显式激活，现在它可以在 Safari 14 中正常运行

工作演示： https://jsfiddle.net/5joqkugd/

Safari 14 WebGL alpha 与帧缓冲区渲染的混合似乎坏了

Safari 14 WebGL alpha blending with framebuffer rendering seems broken

safari

webgl

regl