Convolution is slow

[targos]

There are probably multiple places where we can improve it.

Biggest bottleneck is the border handling (70% of the time is spent there):

image-js-typescript/src/filters/convolution.ts

Lines 192 to 268 in d3f0d99

	// Apply convolution on the left and right borders
	for (let channel = 0; channel < channels; channel++) {
	for (let bY = 0; bY < height; bY++) {
	for (let bX = 0; bX < kernelOffsetX; bX++) {
	const index = bY * width + bX;
	const bXopp = width - bX - 1;
	const bYopp = height - bY - 1;
	const indexOpp = bYopp * width + bXopp;
	newImage.setValueByIndex(
	index,
	channel,
	computeConvolutionValue(
	bX,
	bY,
	channel,
	image,
	kernel,
	interpolateBorder,
	{ clamp },
	),
	);
	newImage.setValueByIndex(
	indexOpp,
	channel,
	computeConvolutionValue(
	bXopp,
	bYopp,
	channel,
	image,
	kernel,
	interpolateBorder,
	{ clamp },
	),
	);
	}
	}
	}
	// apply the convolution on the top and bottom borders
	for (let channel = 0; channel < channels; channel++) {
	for (let bX = 0; bX < width; bX++) {
	for (let bY = 0; bY < kernelOffsetY; bY++) {
	const index = bY * width + bX;
	const bXopp = width - bX - 1;
	const bYopp = height - bY - 1;
	const indexOpp = bYopp * width + bXopp;
	newImage.setValueByIndex(
	index,
	channel,
	computeConvolutionValue(
	bX,
	bY,
	channel,
	image,
	kernel,
	interpolateBorder,
	{ clamp },
	),
	);
	newImage.setValueByIndex(
	indexOpp,
	channel,
	computeConvolutionValue(
	bXopp,
	bYopp,
	channel,
	image,
	kernel,
	interpolateBorder,
	{ clamp },
	),
	);
	}
	}
	}

Tested with:

import { Image } from 'image-js';

const img = new Image(2000, 1000);

img.gaussianBlur({ sigma: 10 });

console.time('blur')
img.gaussianBlur({ sigma: 10 });
console.timeEnd('blur')

console.log(img);

[targos]

First improvement: #336

[Xstoudi]

Still seem slow.
At some point, could we consider using WebGPU when supported in environment to handle heavy operations?