Safari 14 WebGL alpha 与帧缓冲渲染的混合似乎被破坏了答案

【问题标题】：Safari 14 WebGL alpha blending with framebuffer rendering seems brokenSafari 14 WebGL alpha 与帧缓冲渲染的混合似乎被破坏了
【发布时间】：2021-07-01 08:58:33
【问题描述】：

我最近遇到了一个非常奇怪的问题，我很好奇是否有其他人遇到过这个问题，或者是否有人可能会发现我的 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 退出的关键部分如下（第 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 或我的代码中的错误。我很好奇是否有人看到混合功能 + 帧缓冲区渲染的问题。

【问题讨论】：

标签： safari webgl regl

【解决方案1】：

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

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

在支持EXT_float_blend 扩展的设备上，它是自动，隐式，当任何一个或多个时启用 EXT_color_buffer_float、OES_texture_float 或 WEBGL_color_buffer_float 已启用。这确保了在 EXT_float_blend 之前写入的内容由 WebGL 公开的将按预期运行。

来源：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/

【讨论】：