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

Question

我最近遇到了一个非常奇怪的问题，我很好奇是否有其他人遇到了这个问题，或者是否有人发现了我的WebGL alpha混合函数的问题。

当启用alpha混合并与帧缓冲区渲染相结合时，Safari 14似乎什么都不渲染。它曾经在Safari 13中按预期工作，也适用于所有其他主要浏览器(经过测试的Chrome、Edge、Firefox)

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

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

下面是Safari14的关键部分(第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上描述的行为：

在支持EXT_float_blend扩展的设备上当EXT_color_buffer_float、OES_texture_float或WEBGL_color_buffer_float已启用。这样可以确保在EXT_float_flend之前写入的内容由WebGL公开的将按预期运行。

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

然而，情况似乎不再是这样了。因此必须手动激活WEBGL_color_buffer_float，然后再激活EXT_float_blend。

这是上面的演示，两个扩展被明确激活，现在它在Safari14中工作，正如预期的

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