嘿
我在 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:抱歉,没有足够的声誉(!!!)在我的帖子中包含图片:-(
最佳答案
Canvas 2D 始终使用预乘 alpha,因此您几乎必须使用第二个 blendfunc。您可以在渲染文本时设置 BlendFunc 吗?
关于text - WebGL:文本渲染和混合问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25496761/