WebGL：文本渲染和混合问题答案

【问题标题】：WebGL: Text rendering and blend issueWebGL：文本渲染和混合问题
【发布时间】：2014-10-19 05:51:29
【问题描述】：

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

第一次渲染很糟糕，第二次还可以。不同之处在于我的 DOM（与 HTML DOM 无关）：

视图V2和V3的区别是：

V2 只是一个绿色矩形（由 2 个 GL 三角形组成）并包含一个 DOM 子 V4，它是一个 Text View（表示文本，渲染到 Canvas 然后复制到纹理中）混合由 GPU 完成
V3 是带有绿色背景的 TextView。文本被渲染成画布，然后渲染成纹理（如 V4）。并且一个 Shader 填充矩形并获取纹理以生成最终视图 => 不混合（实际上由着色器完成）

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

这是我的默认配置：

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：抱歉没有足够的声誉（！！！）在我的帖子中包含图片:-(

【问题讨论】：

标签： text textures webgl blend

【解决方案1】：

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

【讨论】：

Ok thx 提示 :-) 是的，我可以在渲染期间更改混合功能。我会对此进行调查。但是如果我能够生成正确的纹理会更简单。