Improved auto detection
This commit is contained in:
378
src/workers/irregularSpriteDetection.worker.ts
Normal file
378
src/workers/irregularSpriteDetection.worker.ts
Normal file
@@ -0,0 +1,378 @@
|
||||
interface SpriteRegion {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
pixelCount: number;
|
||||
}
|
||||
|
||||
interface WorkerMessage {
|
||||
type: 'detectIrregularSprites';
|
||||
imageData: ImageData;
|
||||
sensitivity: number;
|
||||
maxSize?: number;
|
||||
}
|
||||
|
||||
interface WorkerResponse {
|
||||
type: 'spritesDetected';
|
||||
sprites: SpriteRegion[];
|
||||
backgroundColor: [number, number, number, number];
|
||||
}
|
||||
|
||||
// Pre-allocate arrays for better performance
|
||||
let maskBuffer: Uint8Array;
|
||||
let visitedBuffer: Uint8Array;
|
||||
let stackBuffer: Int32Array;
|
||||
|
||||
self.onmessage = function (e: MessageEvent<WorkerMessage>) {
|
||||
const { type, imageData, sensitivity, maxSize = 2048 } = e.data;
|
||||
|
||||
if (type === 'detectIrregularSprites') {
|
||||
const { sprites, backgroundColor } = detectIrregularSprites(imageData, sensitivity, maxSize);
|
||||
|
||||
const response: WorkerResponse = {
|
||||
type: 'spritesDetected',
|
||||
sprites,
|
||||
backgroundColor,
|
||||
};
|
||||
|
||||
self.postMessage(response);
|
||||
}
|
||||
};
|
||||
|
||||
function detectIrregularSprites(imageData: ImageData, sensitivity: number, maxSize: number): { sprites: SpriteRegion[]; backgroundColor: [number, number, number, number] } {
|
||||
const { data, width, height } = imageData;
|
||||
|
||||
// Downsample for very large images
|
||||
const shouldDownsample = width > maxSize || height > maxSize;
|
||||
let processedData: Uint8ClampedArray;
|
||||
let processedWidth: number;
|
||||
let processedHeight: number;
|
||||
let scale = 1;
|
||||
|
||||
if (shouldDownsample) {
|
||||
scale = Math.min(maxSize / width, maxSize / height);
|
||||
processedWidth = Math.floor(width * scale);
|
||||
processedHeight = Math.floor(height * scale);
|
||||
processedData = downsampleImageData(data, width, height, processedWidth, processedHeight);
|
||||
} else {
|
||||
processedData = data;
|
||||
processedWidth = width;
|
||||
processedHeight = height;
|
||||
}
|
||||
|
||||
// Fast background detection using histogram
|
||||
const backgroundColor = fastBackgroundDetection(processedData, processedWidth, processedHeight);
|
||||
|
||||
// Create optimized mask
|
||||
const mask = createOptimizedMask(processedData, processedWidth, processedHeight, backgroundColor, sensitivity);
|
||||
|
||||
// Clean up mask with morphological operations
|
||||
const cleanedMask = cleanUpMask(mask, processedWidth, processedHeight);
|
||||
|
||||
// Find connected components with optimized flood fill
|
||||
const sprites = findOptimizedConnectedComponents(cleanedMask, processedWidth, processedHeight);
|
||||
|
||||
// Filter noise
|
||||
const minSpriteSize = Math.max(4, Math.floor(Math.min(processedWidth, processedHeight) / 100));
|
||||
const filteredSprites = sprites.filter(sprite => sprite.pixelCount >= minSpriteSize);
|
||||
|
||||
// Scale results back up if downsampled
|
||||
const finalSprites = shouldDownsample
|
||||
? filteredSprites.map(sprite => ({
|
||||
x: Math.floor(sprite.x / scale),
|
||||
y: Math.floor(sprite.y / scale),
|
||||
width: Math.ceil(sprite.width / scale),
|
||||
height: Math.ceil(sprite.height / scale),
|
||||
pixelCount: sprite.pixelCount,
|
||||
}))
|
||||
: filteredSprites;
|
||||
|
||||
// Convert background color back to original format
|
||||
const finalBackgroundColor: [number, number, number, number] = [backgroundColor[0], backgroundColor[1], backgroundColor[2], backgroundColor[3]];
|
||||
|
||||
return {
|
||||
sprites: finalSprites,
|
||||
backgroundColor: finalBackgroundColor,
|
||||
};
|
||||
}
|
||||
|
||||
function downsampleImageData(data: Uint8ClampedArray, width: number, height: number, newWidth: number, newHeight: number): Uint8ClampedArray {
|
||||
const result = new Uint8ClampedArray(newWidth * newHeight * 4);
|
||||
const scaleX = width / newWidth;
|
||||
const scaleY = height / newHeight;
|
||||
|
||||
for (let y = 0; y < newHeight; y++) {
|
||||
for (let x = 0; x < newWidth; x++) {
|
||||
const srcX = Math.floor(x * scaleX);
|
||||
const srcY = Math.floor(y * scaleY);
|
||||
const srcIdx = (srcY * width + srcX) * 4;
|
||||
const dstIdx = (y * newWidth + x) * 4;
|
||||
|
||||
result[dstIdx] = data[srcIdx];
|
||||
result[dstIdx + 1] = data[srcIdx + 1];
|
||||
result[dstIdx + 2] = data[srcIdx + 2];
|
||||
result[dstIdx + 3] = data[srcIdx + 3];
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function fastBackgroundDetection(data: Uint8ClampedArray, width: number, height: number): Uint32Array {
|
||||
// Enhanced background detection focusing on edges and corners
|
||||
const colorCounts = new Map<string, number>();
|
||||
|
||||
// Sample from corners (most likely to be background)
|
||||
const cornerSamples = [
|
||||
[0, 0],
|
||||
[width - 1, 0],
|
||||
[0, height - 1],
|
||||
[width - 1, height - 1],
|
||||
];
|
||||
|
||||
// Sample from edges (also likely background)
|
||||
const edgeSamples: [number, number][] = [];
|
||||
const edgeStep = Math.max(1, Math.floor(Math.min(width, height) / 20));
|
||||
|
||||
// Top and bottom edges
|
||||
for (let x = 0; x < width; x += edgeStep) {
|
||||
edgeSamples.push([x, 0]);
|
||||
edgeSamples.push([x, height - 1]);
|
||||
}
|
||||
|
||||
// Left and right edges
|
||||
for (let y = 0; y < height; y += edgeStep) {
|
||||
edgeSamples.push([0, y]);
|
||||
edgeSamples.push([width - 1, y]);
|
||||
}
|
||||
|
||||
// Collect all samples
|
||||
const allSamples = [...cornerSamples, ...edgeSamples];
|
||||
|
||||
// Count colors with tolerance grouping
|
||||
const tolerance = 15;
|
||||
|
||||
for (const [x, y] of allSamples) {
|
||||
const idx = (y * width + x) * 4;
|
||||
const r = data[idx];
|
||||
const g = data[idx + 1];
|
||||
const b = data[idx + 2];
|
||||
const a = data[idx + 3];
|
||||
|
||||
// Find existing similar color or create new entry
|
||||
let matched = false;
|
||||
for (const [colorKey, count] of colorCounts.entries()) {
|
||||
const [existingR, existingG, existingB, existingA] = colorKey.split(',').map(Number);
|
||||
|
||||
if (Math.abs(r - existingR) <= tolerance && Math.abs(g - existingG) <= tolerance && Math.abs(b - existingB) <= tolerance && Math.abs(a - existingA) <= tolerance) {
|
||||
colorCounts.set(colorKey, count + 1);
|
||||
matched = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!matched) {
|
||||
const colorKey = `${r},${g},${b},${a}`;
|
||||
colorCounts.set(colorKey, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Find most common color
|
||||
let maxCount = 0;
|
||||
let backgroundColor = [0, 0, 0, 0];
|
||||
|
||||
for (const [colorKey, count] of colorCounts.entries()) {
|
||||
if (count > maxCount) {
|
||||
maxCount = count;
|
||||
backgroundColor = colorKey.split(',').map(Number);
|
||||
}
|
||||
}
|
||||
|
||||
return new Uint32Array(backgroundColor);
|
||||
}
|
||||
|
||||
function createOptimizedMask(data: Uint8ClampedArray, width: number, height: number, backgroundColor: Uint32Array, sensitivity: number): Uint8Array {
|
||||
const size = width * height;
|
||||
|
||||
// Reuse buffer if possible
|
||||
if (!maskBuffer || maskBuffer.length < size) {
|
||||
maskBuffer = new Uint8Array(size);
|
||||
}
|
||||
|
||||
// Map sensitivity (1-100) to more aggressive thresholds
|
||||
// Higher sensitivity = stricter background matching (lower tolerance)
|
||||
const colorTolerance = Math.round(50 - sensitivity * 0.45); // 50 down to 5
|
||||
const alphaTolerance = Math.round(40 - sensitivity * 0.35); // 40 down to 5
|
||||
|
||||
const [bgR, bgG, bgB, bgA] = backgroundColor;
|
||||
|
||||
let idx = 0;
|
||||
for (let i = 0; i < size; i++) {
|
||||
const r = data[idx];
|
||||
const g = data[idx + 1];
|
||||
const b = data[idx + 2];
|
||||
const a = data[idx + 3];
|
||||
|
||||
// Handle fully transparent pixels (common background case)
|
||||
if (a < 10) {
|
||||
maskBuffer[i] = 0; // Treat as background
|
||||
idx += 4;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Calculate color difference using Euclidean distance for better accuracy
|
||||
const rDiff = r - bgR;
|
||||
const gDiff = g - bgG;
|
||||
const bDiff = b - bgB;
|
||||
const aDiff = a - bgA;
|
||||
|
||||
const colorDistance = Math.sqrt(rDiff * rDiff + gDiff * gDiff + bDiff * bDiff);
|
||||
const alphaDistance = Math.abs(aDiff);
|
||||
|
||||
// Pixel is foreground if it's significantly different from background
|
||||
const isBackground = colorDistance <= colorTolerance && alphaDistance <= alphaTolerance;
|
||||
maskBuffer[i] = isBackground ? 0 : 1;
|
||||
|
||||
idx += 4;
|
||||
}
|
||||
|
||||
return maskBuffer;
|
||||
}
|
||||
|
||||
function cleanUpMask(mask: Uint8Array, width: number, height: number): Uint8Array {
|
||||
// Simple morphological closing to fill small gaps in sprites
|
||||
// and opening to remove small noise
|
||||
|
||||
const cleaned = new Uint8Array(mask.length);
|
||||
|
||||
// Erosion followed by dilation (opening) to remove small noise
|
||||
// Then dilation followed by erosion (closing) to fill gaps
|
||||
|
||||
// Simple 3x3 kernel operations
|
||||
for (let y = 1; y < height - 1; y++) {
|
||||
for (let x = 1; x < width - 1; x++) {
|
||||
const idx = y * width + x;
|
||||
|
||||
// Count non-zero neighbors in 3x3 area
|
||||
let neighbors = 0;
|
||||
for (let dy = -1; dy <= 1; dy++) {
|
||||
for (let dx = -1; dx <= 1; dx++) {
|
||||
const nIdx = (y + dy) * width + (x + dx);
|
||||
if (mask[nIdx]) neighbors++;
|
||||
}
|
||||
}
|
||||
|
||||
// Use majority rule for cleaning
|
||||
// If more than half the neighbors are foreground, make this foreground
|
||||
cleaned[idx] = neighbors >= 5 ? 1 : 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Copy borders as-is
|
||||
for (let x = 0; x < width; x++) {
|
||||
cleaned[x] = mask[x]; // Top row
|
||||
cleaned[(height - 1) * width + x] = mask[(height - 1) * width + x]; // Bottom row
|
||||
}
|
||||
for (let y = 0; y < height; y++) {
|
||||
cleaned[y * width] = mask[y * width]; // Left column
|
||||
cleaned[y * width + width - 1] = mask[y * width + width - 1]; // Right column
|
||||
}
|
||||
|
||||
return cleaned;
|
||||
}
|
||||
|
||||
function findOptimizedConnectedComponents(mask: Uint8Array, width: number, height: number): SpriteRegion[] {
|
||||
const size = width * height;
|
||||
|
||||
// Reuse buffers
|
||||
if (!visitedBuffer || visitedBuffer.length < size) {
|
||||
visitedBuffer = new Uint8Array(size);
|
||||
}
|
||||
if (!stackBuffer || stackBuffer.length < size * 2) {
|
||||
stackBuffer = new Int32Array(size * 2);
|
||||
}
|
||||
|
||||
// Clear visited array
|
||||
visitedBuffer.fill(0);
|
||||
|
||||
const sprites: SpriteRegion[] = [];
|
||||
|
||||
for (let y = 0; y < height; y++) {
|
||||
for (let x = 0; x < width; x++) {
|
||||
const idx = y * width + x;
|
||||
|
||||
if (mask[idx] && !visitedBuffer[idx]) {
|
||||
const sprite = optimizedFloodFill(mask, visitedBuffer, x, y, width, height);
|
||||
if (sprite) {
|
||||
sprites.push(sprite);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return sprites;
|
||||
}
|
||||
|
||||
function optimizedFloodFill(mask: Uint8Array, visited: Uint8Array, startX: number, startY: number, width: number, height: number): SpriteRegion | null {
|
||||
let stackTop = 0;
|
||||
stackBuffer[stackTop++] = startX;
|
||||
stackBuffer[stackTop++] = startY;
|
||||
|
||||
let minX = startX;
|
||||
let minY = startY;
|
||||
let maxX = startX;
|
||||
let maxY = startY;
|
||||
let pixelCount = 0;
|
||||
|
||||
while (stackTop > 0) {
|
||||
const y = stackBuffer[--stackTop];
|
||||
const x = stackBuffer[--stackTop];
|
||||
const idx = y * width + x;
|
||||
|
||||
if (x < 0 || x >= width || y < 0 || y >= height || visited[idx] || !mask[idx]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
visited[idx] = 1;
|
||||
pixelCount++;
|
||||
|
||||
// Update bounding box
|
||||
if (x < minX) minX = x;
|
||||
if (y < minY) minY = y;
|
||||
if (x > maxX) maxX = x;
|
||||
if (y > maxY) maxY = y;
|
||||
|
||||
// Add neighbors (check bounds to avoid stack overflow)
|
||||
if (x + 1 < width && !visited[idx + 1] && mask[idx + 1]) {
|
||||
stackBuffer[stackTop++] = x + 1;
|
||||
stackBuffer[stackTop++] = y;
|
||||
}
|
||||
if (x - 1 >= 0 && !visited[idx - 1] && mask[idx - 1]) {
|
||||
stackBuffer[stackTop++] = x - 1;
|
||||
stackBuffer[stackTop++] = y;
|
||||
}
|
||||
if (y + 1 < height && !visited[idx + width] && mask[idx + width]) {
|
||||
stackBuffer[stackTop++] = x;
|
||||
stackBuffer[stackTop++] = y + 1;
|
||||
}
|
||||
if (y - 1 >= 0 && !visited[idx - width] && mask[idx - width]) {
|
||||
stackBuffer[stackTop++] = x;
|
||||
stackBuffer[stackTop++] = y - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (pixelCount === 0) return null;
|
||||
|
||||
// Add padding
|
||||
const padding = 1;
|
||||
return {
|
||||
x: Math.max(0, minX - padding),
|
||||
y: Math.max(0, minY - padding),
|
||||
width: Math.min(width - Math.max(0, minX - padding), maxX - minX + 1 + 2 * padding),
|
||||
height: Math.min(height - Math.max(0, minY - padding), maxY - minY + 1 + 2 * padding),
|
||||
pixelCount,
|
||||
};
|
||||
}
|
||||
|
||||
export {};
|
||||
Reference in New Issue
Block a user