基于gpu.js的GPU图像最近邻放大算法问题求助

我来帮你搞定这个gpu.js的最近邻放大问题！之前的错误大概率是没理清输出线程索引→输出像素坐标→源像素坐标的映射逻辑，尤其是没区分RGBA分量的索引和像素本身的索引，导致坐标匹配混乱。

下面是运算量极低的正确实现思路和代码：

核心逻辑拆解 #

最近邻放大的本质是让源图像的每个像素对应输出图像中scale×scale个完全相同的像素。我们只需要根据gpu.js的this.thread.x（输出缓冲区的一维索引），反向推导它对应源图像的哪个像素分量即可，全程都是整数运算，GPU跑起来快得飞起。

完整Kernel实现 #

const gpu = new GPU();

// 创建最近邻放大Kernel
const nearestNeighborUpscale = gpu.createKernel(function(sourceBuffer, sourceWidth, scale) {
    // 1. 区分当前线程处理的是RGBA中的哪个分量（0=R,1=G,2=B,3=A）
    const componentIdx = this.thread.x % 4;
    // 2. 计算当前线程对应的输出像素的一维索引（去掉分量维度）
    const outputPixelIndex = Math.floor(this.thread.x / 4);
    
    // 3. 把输出像素的一维索引转成二维坐标(xOut, yOut)
    const outputWidth = sourceWidth * scale;
    const xOut = outputPixelIndex % outputWidth;
    const yOut = Math.floor(outputPixelIndex / outputWidth);
    
    // 4. 反向推导对应的源像素坐标（最近邻直接取整）
    const xIn = Math.floor(xOut / scale);
    const yIn = Math.floor(yOut / scale);
    
    // 5. 计算源缓冲区中对应分量的索引
    const sourceComponentIndex = (yIn * sourceWidth + xIn) * 4 + componentIdx;
    
    // 返回源像素的对应分量值
    return sourceBuffer[sourceComponentIndex];
})
// 设置输出缓冲区长度：源长度 × scale²（每个像素扩展成scale×scale个，分量数不变）
.setOutput([sourceBuffer.length * scale * scale]);

关键细节说明 #

1. 分量与像素索引分离：输入是一维RGBA数组，每个像素占4个连续位置，所以必须先把this.thread.x拆成「分量索引」和「像素索引」，否则会把不同像素的分量混在一起。
2. 输出宽度计算正确：输出图像的宽度是源宽度×scale，绝对不能用屏幕宽度！这是之前出错的核心原因之一——用屏幕宽度会导致坐标映射完全错位。
3. 极低运算量：全程只有整数除法、取模、乘法，没有任何复杂运算，GPU可以并行高效处理，完全符合大规模矩阵运算的优化需求。

使用示例 #

// 假设你有一个4×4的源图像RGBA数组（共64个值）
const sourceBuffer = new Float32Array(64);
// 填充源图像数据...

// 放大2倍
const scaledBuffer = nearestNeighborUpscale(sourceBuffer, 4, 2);
// scaledBuffer的长度是64×2×2=256，对应8×8的放大后图像

内容的提问来源于stack exchange，提问作者john doe