如何在WebGPU中实现纹理垂直翻转？

WebGPU目前没有提供和WebGL中gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)直接对等的原生配置项，你在device.createTexture()和device.queue.copyExternalImageToTexture()接口中找不到相关参数是正常情况，这两个接口本身确实没有内置垂直翻转的能力。

你可以根据自身场景选择以下几种合规的解决方案：

• 外部图像预翻转
  在把图像传入WebGPU之前，先通过2D Canvas完成翻转操作：创建和输入图像尺寸相同的离屏Canvas，获取2D上下文后调用scale(1, -1)做Y轴翻转，平移坐标避免图像超出绘制区域后，调用drawImage()把原图像绘制到Canvas上，之后直接把这个Canvas作为copyExternalImageToTexture()的源输入，最终得到的纹理就是已经完成垂直翻转的状态。该方案适合纹理数量少、对性能要求不高的场景。
• 计算管线批量翻转
  如果需要处理大量纹理，不想占用CPU侧的Canvas渲染资源，可以用轻量计算管线完成翻转：先按正常流程创建原纹理，将外部图像数据拷贝进去，再创建同规格的目标纹理作为翻转输出；编写计算着色器，按行读取原纹理像素，把第i行的像素写入目标纹理的第总高度 - 1 - i行的对应位置；提交计算任务后直接使用目标纹理即可，该方案性能开销极低，适合批量处理纹理的场景。

另外补充说明：你目前在片元着色器中使用uv.y = 1.0 - uv.y的实现方式不属于hack方案，这是WebGPU场景下被广泛使用的常规实现，性能开销可以忽略不计，对于单纹理或者少量纹理的场景，反而比上述两种方案更简洁高效。

内容的提问来源于stack exchange，提问作者Georgi B. Nikolov