时间戳

首页 > 解决方案 > Webgl 在 ios safari 上没有 alpha 背景通道

javascript - Webgl 在 ios safari 上没有 alpha 背景通道

问题描述

我在我的页面上设置了一个 webgl 画布，并在启动时使用了这些参数：

gl = canvas.getContext("webgl", {
  alpha: true,
  premultipliedAlpha: false
});

然后我做了所有的设置工作来制作一个程序，一个顶点着色器和一个片段着色器。

我的顶点着色器只给了我一个二维绘图表面，我的片段着色器看起来像这样：

void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 0.1);
}

所以基本上我要做的就是在页面上绘制一个透明的白框。这适用于我测试过的所有浏览器，除了 safari/ios。在 safari 中，盒子是全白的，看不到透明度。

这是带有蓝色页面背景的并排屏幕截图：

在此处输入图像描述

我应该设置其他参数来完成这项工作吗？还是 ios 的行为与其他浏览器不同？

更新：如果我在调用片段着色器后运行清除颜色命令（意味着着色器输出被擦除并替换为清除颜色），则 webgl 画布是透明的。

 gl.clearColor(0.0, 0.0, 0.0, 0.1);
 gl.clear(gl.COLOR_BUFFER_BIT);

然而，除了制作纯色半透明颜色之外，这并没有让我做太多事情。我希望在片段着色器本身中进行可变透明度。

标签： javascriptwebglalphablending

解决方案

推荐阅读