OpenGLES转Metal迁移：像素缓冲区裁剪缩放实现迁移方案咨询

嘿，我来帮你把OpenGLES里那套像素缓冲区裁剪缩放的逻辑迁移到Metal平台～其实核心思路是相通的，只是API和流程细节有差异，下面一步步给你拆解清楚：

先梳理下GLES和Metal关键操作的对应点，方便你快速理解：

• glViewport → Metal中通过MTLViewport + renderCommandEncoder.setViewport()设置绘制区域
• 纹理绑定与参数配置 → Metal用MTLTexture + MTLSamplerState替代，对应GLES里的纹理绑定和glTexParameteri设置
• 顶点/纹理坐标适配cropRect → 逻辑和GLES一致，只是顶点数据用Metal的结构体组织
• 直通着色器 → Metal的顶点+片段着色器组合，实现简单的纹理采样输出

1. 准备基础Metal资源 #

首先得确保你已经搞定了Metal的基础环境：MTLDevice（设备）、MTLCommandQueue（命令队列）、MTLRenderPipelineState（渲染管线状态），还有要处理的源纹理（对应GLES里的dstTexture）和目标渲染纹理/缓冲区。

同时提前处理你的裁剪区域cropRect，计算对应的纹理坐标范围：假设源纹理尺寸是srcSize，cropRect是CGRect(x: cx, y: cy, width: cw, height: ch)，那么纹理坐标的起始和结束点就是(cx/srcSize.width, cy/srcSize.height)到((cx+cw)/srcSize.width, (cy+ch)/srcSize.height)。

2. 设置视口（替代glViewport） #

在GLES里你用glViewport指定绘制区域，Metal这边我们创建MTLViewport结构体，把它传给渲染命令编码器就行，这里要设置成你最终输出的目标尺寸：

let viewport = MTLViewport(
    originX: 0,
    originY: 0,
    width: Float(targetWidth),
    height: Float(targetHeight),
    znear: 0.0,
    zfar: 1.0
)
renderCommandEncoder.setViewport(viewport)

3. 配置顶点与纹理坐标（适配cropRect） #

和GLES一样，我们需要根据cropRect调整纹理坐标，同时准备NDC空间的顶点位置（Metal的NDC范围是[-1,1]，和GLES一致）：
首先定义顶点结构体，包含位置和纹理坐标：

struct Vertex {
    var position: SIMD4<Float>
    var texCoord: SIMD2<Float>
}

然后根据cropRect生成四个顶点数据（对应全屏的四边形，纹理坐标对应裁剪区域）：

let srcW = Float(srcSize.width)
let srcH = Float(srcSize.height)
let cx = Float(cropRect.origin.x)
let cy = Float(cropRect.origin.y)
let cw = Float(cropRect.size.width)
let ch = Float(cropRect.size.height)

let vertices: [Vertex] = [
    // 左下顶点
    Vertex(position: SIMD4<Float>(-1.0, -1.0, 0.0, 1.0), texCoord: SIMD2<Float>(cx/srcW, cy/srcH)),
    // 右下顶点
    Vertex(position: SIMD4<Float>(1.0, -1.0, 0.0, 1.0), texCoord: SIMD2<Float>((cx+cw)/srcW, cy/srcH)),
    // 右上顶点
    Vertex(position: SIMD4<Float>(1.0, 1.0, 0.0, 1.0), texCoord: SIMD2<Float>((cx+cw)/srcW, (cy+ch)/srcH)),
    // 左上顶点
    Vertex(position: SIMD4<Float>(-1.0, 1.0, 0.0, 1.0), texCoord: SIMD2<Float>(cx/srcW, (cy+ch)/srcH))
]

把顶点数据放到Metal缓冲区，传给渲染命令编码器：

guard let vertexBuffer = device.makeBuffer(
    bytes: vertices,
    length: vertices.count * MemoryLayout<Vertex>.stride,
    options: []
) else {
    // 处理创建失败的情况
    return
}
renderCommandEncoder.setVertexBuffer(vertexBuffer, offset: 0, index: 0)

4. 绑定纹理与采样器（替代glActiveTexture/glBindTexture/glTexParameteri） #

在GLES里你设置纹理过滤参数，Metal这边用MTLSamplerDescriptor来配置，对应你之前的GL_LINEAR过滤：

let samplerDescriptor = MTLSamplerDescriptor()
samplerDescriptor.minFilter = .linear // 对应GL_TEXTURE_MIN_FILTER = GL_LINEAR
samplerDescriptor.magFilter = .linear
samplerDescriptor.sAddressMode = .clampToEdge
samplerDescriptor.tAddressMode = .clampToEdge
guard let sampler = device.makeSamplerState(descriptor: samplerDescriptor) else {
    return
}

然后把源纹理和采样器绑定到片段着色器的参数槽位：

renderCommandEncoder.setFragmentTexture(sourceTexture, index: 0)
renderCommandEncoder.setFragmentSamplerState(sampler, index: 0)

这里的sourceTexture就是你要采样的纹理，对应GLES里的dstTexture。

5. 编写直通着色器 #

Metal需要顶点着色器和片段着色器的组合，实现直通逻辑很简单：

顶点着色器（传递坐标） #

#include <metal_stdlib>
using namespace metal;

struct VertexIn {
    float4 position [[attribute(0)]];
    float2 texCoord [[attribute(1)]];
};

struct VertexOut {
    float4 position [[position]];
    float2 texCoord;
};

vertex VertexOut vertexShader(VertexIn in [[stage_in]]) {
    VertexOut out;
    out.position = in.position;
    out.texCoord = in.texCoord;
    return out;
}

片段着色器（直接采样纹理输出） #

#include <metal_stdlib>
using namespace metal;

struct VertexOut {
    float4 position [[position]];
    float2 texCoord;
};

fragment float4 fragmentShader(VertexOut in [[stage_in]],
                               texture2d<float> sourceTexture [[texture(0)]],
                               sampler sourceSampler [[sampler(0)]]) {
    // 直接采样纹理返回颜色，就是直通逻辑
    return sourceTexture.sample(sourceSampler, in.texCoord);
}

注意要保证渲染管线状态的顶点输入布局和你定义的Vertex结构体匹配，不然会出问题。

6. 执行渲染命令 #

最后就是绘制顶点并提交命令：

// 用三角形带绘制四边形，只需要4个顶点
renderCommandEncoder.drawPrimitives(
    type: .triangleStrip,
    vertexStart: 0,
    vertexCount: 4
)

// 结束命令编码并提交
renderCommandEncoder.endEncoding()
let commandBuffer = commandQueue.makeCommandBuffer()!
commandBuffer.commit()
// 如果需要同步等待渲染完成，可以加这句
// commandBuffer.waitUntilCompleted()

• 纹理Y轴方向：Metal默认纹理Y轴原点在左下角，和GLES一致，但如果你的纹理来自CoreVideo等其他框架，可能需要反转Y坐标（比如用1.0 - texCoord.y）
• 渲染管线配置：确保渲染管线的颜色附件格式和目标纹理的格式一致，不然会渲染失败
• CoreVideo交互：如果要和CVOpenGLESTexture对应，可以用CVMetalTextureCache来创建Metal纹理，方便和CoreVideo的像素缓冲区交互

内容的提问来源于stack exchange，提问作者Deepak Sharma