From 89b320a5e21cc02382cc3021046e9c8e799eb576 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Sun, 10 Jul 2022 07:20:18 -0700
Subject: [PATCH] Clear glyph pixels when all channels differ < 35

Fixes #3892
Also helps with #3877
---
 addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts | 9 +++++----
 src/browser/renderer/atlas/DynamicCharAtlas.ts       | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index 555506fd..62ac9eee 100644
--- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -588,7 +588,8 @@ export class WebglCharAtlas implements IDisposable {
 }
 
 /**
- * Makes a partiicular rgb color in an ImageData completely transparent.
+ * Makes a particular rgb color and colors that are nearly the same in an ImageData completely
+ * transparent.
  * @returns True if the result is "empty", meaning all pixels are fully transparent.
  */
 function clearColor(imageData: ImageData, color: IColor): boolean {
@@ -597,9 +598,9 @@ function clearColor(imageData: ImageData, color: IColor): boolean {
   const g = color.rgba >>> 16 & 0xFF;
   const b = color.rgba >>> 8 & 0xFF;
   for (let offset = 0; offset < imageData.data.length; offset += 4) {
-    if (imageData.data[offset] === r &&
-        imageData.data[offset + 1] === g &&
-        imageData.data[offset + 2] === b) {
+    if (Math.abs(imageData.data[offset] - r) +
+        Math.abs(imageData.data[offset + 1] - g) +
+        Math.abs(imageData.data[offset + 2] - b) < 35) {
       imageData.data[offset + 3] = 0;
     } else {
       isEmpty = false;
diff --git a/src/browser/renderer/atlas/DynamicCharAtlas.ts b/src/browser/renderer/atlas/DynamicCharAtlas.ts
index 88194615..59069879 100644
--- a/src/browser/renderer/atlas/DynamicCharAtlas.ts
+++ b/src/browser/renderer/atlas/DynamicCharAtlas.ts
@@ -383,7 +383,8 @@ export class NoneCharAtlas extends BaseCharAtlas {
 }
 
 /**
- * Makes a partiicular rgb color in an ImageData completely transparent.
+ * Makes a particular rgb color and colors that are nearly the same in an ImageData completely
+ * transparent.
  * @returns True if the result is "empty", meaning all pixels are fully transparent.
  */
 function clearColor(imageData: ImageData, color: IColor): boolean {
@@ -392,9 +393,9 @@ function clearColor(imageData: ImageData, color: IColor): boolean {
   const g = color.rgba >>> 16 & 0xFF;
   const b = color.rgba >>> 8 & 0xFF;
   for (let offset = 0; offset < imageData.data.length; offset += 4) {
-    if (imageData.data[offset] === r &&
-        imageData.data[offset + 1] === g &&
-        imageData.data[offset + 2] === b) {
+    if (Math.abs(imageData.data[offset] - r) +
+        Math.abs(imageData.data[offset + 1] - g) +
+        Math.abs(imageData.data[offset + 2] - b) < 35) {
       imageData.data[offset + 3] = 0;
     } else {
       isEmpty = false;