如何防止与 HTML canvas 合成？

Question

我正在使用 WebGL canvas 开发应用程序，通过基准测试我注意到“合成层”花费了大量时间。

但我认为不应该发生这种情况，因为我的整个 HTML 页面只有一个元素（canvas）。

我认为正在发生的事情是它将 HTML 页面的背景颜色与绘制到 canvas 的内容混合在一起。情况似乎是这样，因为当我更改 HTML 页面的背景颜色时，绘制在 canvas 上的场景中的元素显得更亮或更暗。

有没有办法禁用此合成？我不想将页面的背景颜色与绘制到 canvas 的内容混合。在这样做时，我希望不仅可以删除整个“合成”操作（并保存性能），而且我的 canvas 的内容将不再与我的页面背景混合。

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl2");

gl.clearColor(0.25, 0.25, 0.25, 1);

function render() {
  gl.clear(gl.COLOR_BUFFER_BIT);

  requestAnimationFrame(render);
}

requestAnimationFrame(render);

<canvas></canvas>

这是上面的一个例子。如果您运行这段代码并分析它，您会注意到结果中有一个重要的“复合层”部分：

但是我不想和背景合成。我不想与它混合，而是希望它简单地粘贴在上面。有什么方法可以消除这个昂贵的过程吗？

Answer 1

当您创建 WebGL 上下文时，如果您没有明确请求上下文 not 有 alpha，您将获得 alpha，并且合成器必须至少检查每个像素来确定它是否需要与页面混合。

来自 WebGL 标准的第 5.2.1 节：

alpha

If the value is true, the drawing buffer has an alpha channel for the purposes of performing OpenGL destination alpha operations and compositing with the page. If the value is false, no alpha buffer is available.

尝试使用“alpha:false”创建上下文：

const gl = canvas.getContext("webgl2",  { alpha: false } );

如何防止与 HTML canvas 合成？

How to prevent compositing with an HTML canvas?

javascript

html

css

canvas

webgl