Алгоритмы смещения пикселей холста с субпиксельным сглаживанием в javascript

1) Вы упоминаете два очень разных алгоритма: отображение смещения - это трехмерная техника, поэтому она включает в себя «Z» и проекцию, а другой - более простой алгоритм сдвига 2D-пикселей.

(В предоставленной ссылке на звуковой шаг используется слово «отображение смещения», но это метод смещения пикселей.)

2) Каким бы ни был размер вашего проекта MVC, алгоритм должен быть изолированным и иметь сигнатуру вида:

var pixelShift = function (sourceCanvas, shiftCanvas, xOffset, yOffset) 

и либо вернуть новый холст, либо изменить sourceCanvas на месте.

Если такой функции нет, пожалуйста, не говорите о MVC, если только M не означает «беспорядок». ;-) -

3) Алгоритм на самом деле довольно прост, вы должны перебрать целевой пиксель и посмотреть цвет пикселя, из которого они должны исходить (а не наоборот):

var pixelShift = function (sourceCanvas, shiftCanvas, xOffset, yOffset) {
    var shiftXY           = { xS:0, yS:0     };
    var shiftCanvasWidth  = shiftCanvas.width ;
    var shiftCanvasHeight = shiftCanvas.height;
    for ( var x=0 ; x < shiftCanvasWidth ; x ++) {
        for ( var y = 0 ; y < shiftCanvasHeight ; y++ ) {
            readShift ( shiftCanvas, x, y, shiftXY );
            var sourceColor = readPixelColor ( sourceCanvas, 
                                                 xOffset + shiftXY.xS, 
                                                         yOffset + shiftXY.yS) ;
            writePixel(sourceCanvas, xOffset + x , yOffset + y, sourceColor );
        }
     }
 };

 // sourceColor represents the color within a 32 bits integer (r,g,b,a * 8 bits).

было бы слишком долго писать все здесь, но:

-- в цикле pixelShift вы должны иметь дело не с исходным холстом, а с 32-битным массивом производительности.

-- канва сдвига должна быть преобразована ОДИН РАЗ в массив Int8Array и сохранена как эта.
размер этого массива равен shiftWidth * shiftHeight
нечетный индекс содержит сдвиг x, четный содержит сдвиг y.
массив предварительно -processed и содержит значение сдвига - 128.
для этого массива сдвига:

shiftX (x,y) = shiftArray [ 2 * (x + y * shiftWidth)     ] ;                                               
shiftY (x,y) = shiftArray [ 2 * (x + y * shiftWidth) + 1 ] ;  

-- Таким образом, pixelShift должен выглядеть так:

var pixelShift = function (sourceCanvas, 
                               shiftArray, shiftWidth, shiftHeight, xOffset, yOffset) {  
          [ Get a 32 bit performance array out of the canvas's target area ]  
          [ process this array using the shiftArray ]  
          [ write back the processed array onto the canvas's target area ]  
 }

-- И основной цикл может быть обработан линейным образом:

        var areaSize = shiftWidth * shiftHeight ;
        for ( pixelIndex=0 ; pixelIndex < areaSize ; pixelIndex++ ) {
            var linearShift = shiftArray [ 2*pixelIndex ] 
                                       + shiftWidth * shiftArray [ 2*pixelIndex + 1 ]  ;
            targetAreaArray [ pixelIndex ] = targetAreaArray [ pixelIndex + linearShift ] ;
            }

-- Rq : вы можете выполнить проверку границ (pixelIndex + linearShift) в пределах [0, areaSize[.

-- Я думаю, что теперь вы не можете работать быстрее.
Узким местом в производительности будут getImageData и putImageData, которые вам нужны для получения/помещения целевой области, но, насколько я знаю, нет другого способа получить бинарное представление на Canvas, чем эти две функции sloooooow.