SHARING: hi-res image upscaling using bicubic interpolation

Hey there!

I want to share something that is often asked: how to implement bicubic interpolation to upscale matrices and textures.

Image upscaling is the process by which we increase the resolution of an image while trying to minimize the loss in image quality that occurs due to enlarging.

In Jitter, we have two methods to increase the resolution of images:
Nearest Neighbor (NN):

• Nearest Neighbor interpolation is the simplest upscaling method.

• Each pixel in the upscaled image is assigned the value of its nearest neighbor in the original image.

• It’s fast but tends to produce blocky and pixelated results.

(e.g. jit.matrix @interp 0)

Bilinear Interpolation:

• Bilinear interpolation calculates a weighted average of the four nearest neighbors’ pixel values in the original image.

• This method produces smoother results compared to NN but may still lack fine details.

(e.g. jit.matrix @interp 1)

What I'm sharing with you is an interpolation method known as bicubic interpolation.
Bicubic interpolation:

• Bicubic interpolation calculates a weighted average of the 16 nearest neighbors’ pixel values in the original image.

• It alleviates the artifacts caused by NN and bilinear interpolation, but can be computationally intensive.

Bicubic interpolation is here implemented in Javascript, to perform the upscaling on matrices with arbitrary number planes, and in jit.gl.pix, to perform the upscaling on textures.

Note: this algorithm works only with upscaling. In order to perform hi-res downscaling (aliasing-free), check out the object cv.jit.resize from the cv.jit package

Hope this can be helpful,
Ciao!