text - WebGL:文本渲染和混合问题

Question

嘿

我在 WebGL 中遇到文本渲染问题。这里是pb:

第一个渲染很糟糕，第二个还可以。区别在于我的 DOM(与 HTML DOM 无关):

View V2和V3的区别是:

• V2 只是一个绿色矩形(由 2 个 GL 三角形组成)，包含一个 DOM 子 V4，它是一个 TextView (意味着文本，渲染到 Canvas 中，然后复制到纹理中)混合由 GPU 完成
• V3 是绿色背景的 TextView。文本被渲染到 Canvas 中，然后渲染到纹理中(如 V4)。着色器填充矩形并采用纹理生成最终 View => 不混合(实际上由着色器完成)

应该是混合和纹理配置的问题。但我找不到正确的配置。

这是我的混合默认配置:

gl_ctx.disable (gl_ctx.DEPTH_TEST);
gl_ctx.enable (gl_ctx.BLEND);
gl_ctx.blendFunc (gl_ctx.SRC_ALPHA, gl_ctx.ONE_MINUS_SRC_ALPHA);

gl_ctx.clearDepth (1.0);
gl_ctx.clearColor (1, 1, 1, 1);

预先感谢您的帮助。

注 1: View (Vn) 是我的 WebGL 工具包中的基本文档对象。它在内部被称为 Sprite，它基本上由 4 个顶点组成，并与它关联一个顶点和片段着色器，用于渲染目的。

注 2:如果我使用此混合配置:

gl_ctx.blendFunc (gl_ctx.ONE, gl_ctx.ONE_MINUS_SRC_ALPHA);

文本渲染效果很好，但渲染的其余部分，特别是图像的 Alpha 值不正确。

注3:抱歉，没有足够的声誉(!!!)在我的帖子中包含图片:-(

Answer 1

Canvas 2D 始终使用预乘 alpha，因此您几乎必须使用第二个 blendfunc。您可以在渲染文本时设置 BlendFunc 吗？