WebGL：文本渲染和混合问题

Question

HY

我在WebGL中有文本渲染问题。 这是pb：

第一个渲染很糟糕，第二个渲染很好。 区别在于我的DOM（与HTML DOM无关）：

视图V2和V3之间的区别是：

• V2只是一个绿色矩形（由2个GL三角形组成）并包含一个DOM子V4，它是一个文本视图（表示文本，渲染到Canvas中然后复制到纹理中） 混合由GPU完成
• V3是具有绿色背景的TextView。文本将呈现为Canvas，然后呈现为纹理（如V4）。并且着色器填充矩形并获取纹理以生成最终视图=＆gt;没有混合（实际上由着色器完成）

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

这是混音的默认配置：

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：视图（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吗？