Text is abnormally thin when setting allowTransparency=true with webgl renderer (even when color is opaque) · xtermjs/xterm.js

(3 条评论) (0 个反应) (0 位负责人)TypeScript (1,574 个派生)batch import

area/addon/webglhelp wantedtype/bug

仓库指标

星标: (16,196 个星标)
PR 合并指标: (平均合并 2天 10小时) (30 天内合并 16 个 PR)

描述

Text rendering is abnormally thin when allowTransparency=true with the webgl renderer even when the background color is completely opaque.

allowTransparency=false: disallow_transparency

allowTransparency=true: allow_transparency

I think this is also mentioned in this comment in another bug.

Details

Browser and browser version: Chrome 106.0.5249.119
OS version: Linux (Debian)
xterm.js version: ToT @ 376f0d99721b6ec056b15551f46237b80e24b55b

Steps to reproduce

Run the demo page
Set theme to light and font family to "Noto Sans Mono"
Execute echo -e '\033[33mhello world\033[m'
Observe that the rendering is OK
Check the "allowTransparency" toggle
Reload the webgl addon because the rendering is messed up: Uncheck and then check the webgl checkbox under "Addon". (I believe reloading the addon is NOT what is causing problem here)
Observe that the "hello world" text is abnormally thin

Note that the light theme have a completely opaque background, so the rendering theoretically should just be the same.

贡献者指南

研究方向: 研究 webgl 渲染器代码，特别是 allowTransparency 如何影响文本渲染。查看 webgl 插件中的着色器程序和渲染循环（可能在 src/renderer/webgl/ 目录下）。比较 allowTransparency=false 与 true 时的渲染路径。问题可能与背景的 alpha 混合有关，即使颜色是不透明的。检查文本位图是否被错误地混合。同时，查看 issue #1898 中的评论以获取更多上下文。考虑添加一个测试来验证在 allowTransparency=true 时使用不透明背景的渲染效果。
技术栈: typescript
领域: frontend
议题类型: 缺陷
难度: 3
预计时间: 1-2 天
活动状态: 活跃
清晰度: 清晰
前置要求: Git
新手友好度: 60