From 985764e088980124bd04145d1dcb0b9b7ab0f3a9 Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Wed, 19 Feb 2025 15:26:18 +0100 Subject: [PATCH 1/3] using original alpha for masking --- src/app/hero/liquid-frag.ts | 2 +- src/app/hero/parse-logo-image.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/hero/liquid-frag.ts b/src/app/hero/liquid-frag.ts index efeeb81..8530634 100644 --- a/src/app/hero/liquid-frag.ts +++ b/src/app/hero/liquid-frag.ts @@ -140,7 +140,7 @@ void main() { float thin_strip_2_width = cycle_width * thin_strip_2_ratio; - opacity = smoothstep(1., 1. - 1e-4 - u_edgeBlur, edge); + opacity = img.a; opacity *= get_img_frame_alpha(img_uv, 1e-2); diff --git a/src/app/hero/parse-logo-image.ts b/src/app/hero/parse-logo-image.ts index 835fd85..9795c59 100644 --- a/src/app/hero/parse-logo-image.ts +++ b/src/app/hero/parse-logo-image.ts @@ -69,7 +69,7 @@ export function parseLogoImage(file: File): Promise<{ imageData: ImageData; pngB var g = data[idx4 + 1]; var b = data[idx4 + 2]; var a = data[idx4 + 3]; - if ((r === 255 && g === 255 && b === 255 && a === 255) || a === 0) { + if (a === 0) { shapeMask[y * width + x] = false; } else { shapeMask[y * width + x] = true; @@ -148,7 +148,7 @@ export function parseLogoImage(file: File): Promise<{ imageData: ImageData; pngB outImg.data[px] = 255; outImg.data[px + 1] = 255; outImg.data[px + 2] = 255; - outImg.data[px + 3] = 255; + outImg.data[px + 3] = 0; } else { const raw = u[idx] / maxVal; const remapped = Math.pow(raw, alpha); From 93ee45503f0f1e735bd130bca1c3968deb64d3ae Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Wed, 19 Feb 2025 15:43:47 +0100 Subject: [PATCH 2/3] keep alpha 0-255 range --- src/app/hero/parse-logo-image.ts | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/app/hero/parse-logo-image.ts b/src/app/hero/parse-logo-image.ts index 9795c59..2b05a1d 100644 --- a/src/app/hero/parse-logo-image.ts +++ b/src/app/hero/parse-logo-image.ts @@ -69,17 +69,20 @@ export function parseLogoImage(file: File): Promise<{ imageData: ImageData; pngB var g = data[idx4 + 1]; var b = data[idx4 + 2]; var a = data[idx4 + 3]; - if (a === 0) { - shapeMask[y * width + x] = false; - } else { - shapeMask[y * width + x] = true; + + // keep original value + shapeMask[y * width + x] = a; + + // or #ffffff transparent + if (r === 255 && g === 255 && b === 255) { + shapeMask[y * width + x] = 0; } } } function inside(x: number, y: number) { if (x < 0 || x >= width || y < 0 || y >= height) return false; - return shapeMask[y * width + x]; + return shapeMask[y * width + x] > 0; } // 2) Identify boundary (pixels that have at least one non-shape neighbor) @@ -87,7 +90,7 @@ export function parseLogoImage(file: File): Promise<{ imageData: ImageData; pngB for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { var idx = y * width + x; - if (!shapeMask[idx]) continue; + if (shapeMask[idx] > 0) continue; var isBoundary = false; for (var ny = y - 1; ny <= y + 1 && !isBoundary; ny++) { for (var nx = x - 1; nx <= x + 1 && !isBoundary; nx++) { @@ -110,7 +113,7 @@ export function parseLogoImage(file: File): Promise<{ imageData: ImageData; pngB function getU(x: number, y: number, arr: Float32Array) { if (x < 0 || x >= width || y < 0 || y >= height) return 0; - if (!shapeMask[y * width + x]) return 0; + if (shapeMask[y * width + x] === 0) return 0; return arr[y * width + x]; } @@ -118,7 +121,7 @@ export function parseLogoImage(file: File): Promise<{ imageData: ImageData; pngB for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { var idx = y * width + x; - if (!shapeMask[idx] || boundaryMask[idx]) { + if (shapeMask[idx] === 0 || boundaryMask[idx]) { newU[idx] = 0; continue; } @@ -144,11 +147,8 @@ export function parseLogoImage(file: File): Promise<{ imageData: ImageData; pngB for (var x = 0; x < width; x++) { var idx = y * width + x; var px = idx * 4; - if (!shapeMask[idx]) { - outImg.data[px] = 255; - outImg.data[px + 1] = 255; - outImg.data[px + 2] = 255; - outImg.data[px + 3] = 0; + if (shapeMask[idx] === 0) { + } else { const raw = u[idx] / maxVal; const remapped = Math.pow(raw, alpha); @@ -156,8 +156,8 @@ export function parseLogoImage(file: File): Promise<{ imageData: ImageData; pngB outImg.data[px] = gray; outImg.data[px + 1] = gray; outImg.data[px + 2] = gray; - outImg.data[px + 3] = 255; } + outImg.data[px + 3] = shapeMask[idx]; } } ctx.putImageData(outImg, 0, 0); From 162ce977b0cb178fb0234c25f350975dac23e138 Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Wed, 19 Feb 2025 16:49:48 +0100 Subject: [PATCH 3/3] no blur on texture edges --- src/app/hero/liquid-frag.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/hero/liquid-frag.ts b/src/app/hero/liquid-frag.ts index 8530634..69ac39a 100644 --- a/src/app/hero/liquid-frag.ts +++ b/src/app/hero/liquid-frag.ts @@ -141,7 +141,7 @@ void main() { opacity = img.a; - opacity *= get_img_frame_alpha(img_uv, 1e-2); + opacity *= get_img_frame_alpha(img_uv, 0.); float noise = snoise(uv - t);