javascript中的亚像素抗锯齿画布像素移位算法

我正试图找到一种使用javascript画布进行伪3d、扭曲纹理的方法

到目前为止，满足我需求的最好方法就是使用我主要遵循的方法

基本原理是使用位移贴图中选定像素的通道级别（RGBA），然后应用像素移位算法。。。到目前为止一切都很好

问题是，这种移动纹理图像像素的方法是非常二值的，并呈现出轻微的“锯齿”边缘，因为它只是移动“完整”像素

和PhotoShop或一些javascript方法相比，这种方法看起来不太现实。这是由于PS和IMs的亚像素处理能力，因此可以为像素间数据导出中间值

问题：有谁能建议一个步骤，将其集成到我的算法中，以产生高斯/锯齿平滑度输出

也许我可以简单地通过FFT运行图像数据，然后再返回？有没有这样的例子

我有点被难住了，我非常希望能得到一些指点。

1）您提到了两种非常不同的算法：置换贴图是一种3D技术，因此它涉及“Z”和投影，另一种是2D像素移动算法，更简单

（提供的soundstep链接使用了“位移映射”一词，但它是一种像素移位 技术。）

2） 无论您的MVC项目大小如何，算法都应该是隔离的，并具有如下特征：

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

并返回一个新画布或将sourceCanvas更改到位

如果没有这样的功能，请不要谈论MVC，除非M代表“混乱”。-）-

3） 该算法非常简单，事实上，您必须遍历目标像素并查看它们应该来自的像素的颜色（而不是相反）：

--因此，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 ] ;
            }

var areaSize=shifttwidth*shiftHeight；
对于（pixelIndex=0；pixelIndex

--Rq：您可能希望对[0，areaSize[]内的（pixelIndex+linearShift）执行边界检查

--我想现在你不能再快了。

---

性能瓶颈将是获取/放置目标区域所需的getImageData和putImageData，但据我所知，除了这两个Slooow函数之外，没有其他方法可以在画布上获取二进制视图。

我要尝试的第一件事是过采样：在（2x，2x）或（4x，4x）中渲染画布，然后缩小它，或者使用putImage，查看ImageSmoothInEnabled的值，当然，或者“手动”。（我在这里描述：如何快速处理ImageData）好主意！遗憾的是，这是一个非常密集的js过程，我正在这么做，增加画布大小实际上是最后的选择（像素越多，处理器越多）我还是会尝试一下，因为在桌面浏览器上，CPU非常便宜，而最昂贵的是getImageData/putImageData。在速度较慢的设备上……反正也没什么可做的……使用我在帖子中提到的性能数组。1）你能发布最里面的代码吗？2）一张或两张图片，这样我们就可以看到它看起来有多“糟糕”？顺便说一下，我发现了这个想法非常有趣，它让我想起了这一点：Hi@VincentPiel，目前很难将其分离出来，因为代码广泛地从一个更大的MVC应用程序中提取，但这个概念与我的链接中所示的几乎完全相同（我已经转移到其他内容上好几个星期了）。你应该能够看到我在这个链接中所指的失真

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 ] ;
            }