203 lines
8.6 KiB
JavaScript
203 lines
8.6 KiB
JavaScript
import { Skia, AlphaType, ColorType, } from '@shopify/react-native-skia';
|
||
/**
|
||
* Separable box blur on premultiplied RGBA (4-channel 0-255).
|
||
* Feather radius in pixels (at the working pick buffer resolution).
|
||
* Works on premultiplied values so that color naturally diffuses alongside alpha
|
||
* into the feather region — preventing "scatter dots" at resolution-mismatched boundaries.
|
||
*/
|
||
function boxBlurRgbaPremul(rgba, cols, rows, radius) {
|
||
const r = Math.max(1, Math.min(16, Math.round(radius)));
|
||
const tmp = new Uint8Array(cols * rows * 4);
|
||
const dst = new Uint8Array(cols * rows * 4);
|
||
// Horizontal pass
|
||
for (let y = 0; y < rows; y++) {
|
||
for (let x = 0; x < cols; x++) {
|
||
let sumR = 0, sumG = 0, sumB = 0, sumA = 0;
|
||
let cnt = 0;
|
||
const base = y * cols * 4;
|
||
for (let dx = -r; dx <= r; dx++) {
|
||
const xx = x + dx;
|
||
if (xx >= 0 && xx < cols) {
|
||
const idx = base + xx * 4;
|
||
sumR += rgba[idx];
|
||
sumG += rgba[idx + 1];
|
||
sumB += rgba[idx + 2];
|
||
sumA += rgba[idx + 3];
|
||
cnt++;
|
||
}
|
||
}
|
||
const o = base + x * 4;
|
||
tmp[o] = Math.round(sumR / cnt);
|
||
tmp[o + 1] = Math.round(sumG / cnt);
|
||
tmp[o + 2] = Math.round(sumB / cnt);
|
||
tmp[o + 3] = Math.round(sumA / cnt);
|
||
}
|
||
}
|
||
// Vertical pass
|
||
for (let x = 0; x < cols; x++) {
|
||
for (let y = 0; y < rows; y++) {
|
||
let sumR = 0, sumG = 0, sumB = 0, sumA = 0;
|
||
let cnt = 0;
|
||
for (let dy = -r; dy <= r; dy++) {
|
||
const yy = y + dy;
|
||
if (yy >= 0 && yy < rows) {
|
||
const idx = yy * cols * 4 + x * 4;
|
||
sumR += tmp[idx];
|
||
sumG += tmp[idx + 1];
|
||
sumB += tmp[idx + 2];
|
||
sumA += tmp[idx + 3];
|
||
cnt++;
|
||
}
|
||
}
|
||
const o = y * cols * 4 + x * 4;
|
||
dst[o] = Math.round(sumR / cnt);
|
||
dst[o + 1] = Math.round(sumG / cnt);
|
||
dst[o + 2] = Math.round(sumB / cnt);
|
||
dst[o + 3] = Math.round(sumA / cnt);
|
||
}
|
||
}
|
||
return dst;
|
||
}
|
||
/**
|
||
* Separable dilation (max filter) on premultiplied RGBA.
|
||
* Fills small holes (alpha=0) inside painted regions by taking the
|
||
* per-channel maximum in the neighborhood. Applied after boxBlur to
|
||
* eliminate scatter dots caused by segmentation gaps in the pick buffer.
|
||
*/
|
||
function dilateRgbaPremul(rgba, cols, rows, radius) {
|
||
const r = Math.max(1, Math.min(8, Math.round(radius)));
|
||
const tmp = new Uint8Array(cols * rows * 4);
|
||
const dst = new Uint8Array(cols * rows * 4);
|
||
// Horizontal pass
|
||
for (let y = 0; y < rows; y++) {
|
||
for (let x = 0; x < cols; x++) {
|
||
let maxR = 0, maxG = 0, maxB = 0, maxA = 0;
|
||
const base = y * cols * 4;
|
||
for (let dx = -r; dx <= r; dx++) {
|
||
const xx = x + dx;
|
||
if (xx >= 0 && xx < cols) {
|
||
const idx = base + xx * 4;
|
||
if (rgba[idx + 3] > maxA) {
|
||
maxR = rgba[idx];
|
||
maxG = rgba[idx + 1];
|
||
maxB = rgba[idx + 2];
|
||
maxA = rgba[idx + 3];
|
||
}
|
||
else if (rgba[idx + 3] === maxA && maxA > 0) {
|
||
maxR = Math.max(maxR, rgba[idx]);
|
||
maxG = Math.max(maxG, rgba[idx + 1]);
|
||
maxB = Math.max(maxB, rgba[idx + 2]);
|
||
}
|
||
}
|
||
}
|
||
const o = base + x * 4;
|
||
tmp[o] = maxR;
|
||
tmp[o + 1] = maxG;
|
||
tmp[o + 2] = maxB;
|
||
tmp[o + 3] = maxA;
|
||
}
|
||
}
|
||
// Vertical pass
|
||
for (let x = 0; x < cols; x++) {
|
||
for (let y = 0; y < rows; y++) {
|
||
let maxR = 0, maxG = 0, maxB = 0, maxA = 0;
|
||
for (let dy = -r; dy <= r; dy++) {
|
||
const yy = y + dy;
|
||
if (yy >= 0 && yy < rows) {
|
||
const idx = yy * cols * 4 + x * 4;
|
||
if (tmp[idx + 3] > maxA) {
|
||
maxR = tmp[idx];
|
||
maxG = tmp[idx + 1];
|
||
maxB = tmp[idx + 2];
|
||
maxA = tmp[idx + 3];
|
||
}
|
||
else if (tmp[idx + 3] === maxA && maxA > 0) {
|
||
maxR = Math.max(maxR, tmp[idx]);
|
||
maxG = Math.max(maxG, tmp[idx + 1]);
|
||
maxB = Math.max(maxB, tmp[idx + 2]);
|
||
}
|
||
}
|
||
}
|
||
const o = y * cols * 4 + x * 4;
|
||
dst[o] = maxR;
|
||
dst[o + 1] = maxG;
|
||
dst[o + 2] = maxB;
|
||
dst[o + 3] = maxA;
|
||
}
|
||
}
|
||
return dst;
|
||
}
|
||
/** 按 pickMap 展开的上色颜色图（与 pick 同尺寸，未上色像素 a=0）。支持 maskFeather 产生软边缘 alpha。 */
|
||
export function buildPaintColorMapImage(pickBuffer, cols, rows, paintedRegions, featherRadius = 0) {
|
||
const pixelCount = cols * rows;
|
||
const colorByPickCode = new Map();
|
||
for (const [regionId, color] of paintedRegions) {
|
||
colorByPickCode.set(regionId + 1, color);
|
||
}
|
||
// ── Perf fast-path: no feather → 1-pass direct unpremul RGBA (O(N)) ──
|
||
// Skips premul buffer, boxBlur H+V, dilate H+V, and unpremul conversion.
|
||
// The GPU shader handles boundary noise via unpremultiply (rgb /= a) +
|
||
// smoothstep gate, so no CPU-side dilate/filter is needed.
|
||
if (featherRadius <= 0.1 && featherRadius >= -0.1) {
|
||
const rgba = new Uint8Array(pixelCount * 4);
|
||
for (let i = 0; i < pixelCount; i++) {
|
||
const code = pickBuffer[i];
|
||
const color = code > 0 ? colorByPickCode.get(code) : undefined;
|
||
const o = i * 4;
|
||
if (color) {
|
||
rgba[o] = color.r;
|
||
rgba[o + 1] = color.g;
|
||
rgba[o + 2] = color.b;
|
||
rgba[o + 3] = 255;
|
||
}
|
||
}
|
||
const data = Skia.Data.fromBytes(rgba);
|
||
return Skia.Image.MakeImage({ width: cols, height: rows, alphaType: AlphaType.Unpremul, colorType: ColorType.RGBA_8888 }, data, cols * 4);
|
||
}
|
||
// ── Feathered path: premul + boxBlur + dilate + unpremul ──
|
||
// Build hard premultiplied RGBA: where a pick code maps to a painted color,
|
||
// store (R, G, B, 255) in premul space. Unpainted pixels stay (0,0,0,0).
|
||
const hardPremul = new Uint8Array(pixelCount * 4);
|
||
for (let i = 0; i < pixelCount; i++) {
|
||
const code = pickBuffer[i];
|
||
const color = code > 0 ? colorByPickCode.get(code) : undefined;
|
||
const o = i * 4;
|
||
if (color) {
|
||
hardPremul[o] = color.r;
|
||
hardPremul[o + 1] = color.g;
|
||
hardPremul[o + 2] = color.b;
|
||
hardPremul[o + 3] = 255;
|
||
}
|
||
}
|
||
// Box-blur premultiplied RGBA so color naturally diffuses alongside alpha
|
||
// into the feather region. This prevents scatter dots from bilinear
|
||
// interpolation at resolution-mismatched boundaries (where unpainted=black
|
||
// would otherwise leak into boundary samples).
|
||
const blurredPremul = boxBlurRgbaPremul(hardPremul, cols, rows, featherRadius);
|
||
// Dilation pass: fill small holes (alpha=0) inside painted regions that
|
||
// survive the box blur due to segmentation gaps in the pick buffer.
|
||
const filledPremul = dilateRgbaPremul(blurredPremul, cols, rows, featherRadius);
|
||
// Unpremultiply and store as RGBA for the final SkImage.
|
||
const rgba = new Uint8Array(pixelCount * 4);
|
||
for (let i = 0; i < pixelCount; i++) {
|
||
const o = i * 4;
|
||
const a = filledPremul[o + 3];
|
||
if (a > 0) {
|
||
rgba[o] = Math.min(255, Math.round((filledPremul[o] * 255) / a));
|
||
rgba[o + 1] = Math.min(255, Math.round((filledPremul[o + 1] * 255) / a));
|
||
rgba[o + 2] = Math.min(255, Math.round((filledPremul[o + 2] * 255) / a));
|
||
rgba[o + 3] = a;
|
||
}
|
||
}
|
||
const data = Skia.Data.fromBytes(rgba);
|
||
return Skia.Image.MakeImage({
|
||
width: cols,
|
||
height: rows,
|
||
// Unpremul: rgb stores the target paint color (unmodulated), alpha stores coverage (soft edge feather).
|
||
// This ensures ImageShader sampling returns the intended paint color + separate coverage alpha,
|
||
// without premultiplication assumptions that could cause dark fringes on soft edges.
|
||
alphaType: AlphaType.Unpremul,
|
||
colorType: ColorType.RGBA_8888,
|
||
}, data, cols * 4);
|
||
}
|
||
//# sourceMappingURL=paintColorMapTexture.js.map
|