Metal渲染视图（MTKView）无限网格窗口Resize时闪烁问题求助

问题背景 #

我正在开发类似Desmos/Geogebra的无限网格图形软件，采用Metal渲染MTKView。目前代码运行基本正常，但窗口调整大小（Resize）时网格频繁出现闪烁，而通过scrollWheel事件触发缩放重绘时无此问题。

代码核心逻辑：

• 在draw()函数中计算视图内可见的网格点数量
• 调用drawPrimitives函数，将instanceCount参数设为可见点数量
• 着色器文件中通过instance_id属性计算每个图元的位置

已排除性能问题（帧率稳定且较高），尝试调整isPaused和enableSetNeedsDisplay属性，但无法实现isPaused = true且enableSetNeedsDisplay = false的有效配置，闪烁时机随机，求助解决该问题。

问题根源分析 #

1. 主线程阻塞导致同步异常：当前drawGrid()中调用了commandBuffer.waitUntilCompleted()，强制主线程等待GPU完成绘制，Resize过程中多次触发绘制会引发主线程卡顿，进而导致视图刷新不同步产生闪烁。
2. Resize回调未正确处理：mtkView(_:drawableSizeWillChange:)方法为空，未在Drawable尺寸变化时同步更新绘制参数或触发可靠重绘。
3. 浮点计算精度问题：Resize时bounds变化，可见点数量的浮点计算可能因精度误差导致帧间instanceCount突变，引发网格点跳变闪烁。

具体修复步骤 #

1. 移除主线程阻塞的同步调用 #

删除commandBuffer.waitUntilCompleted()，让GPU异步处理绘制命令，避免Resize过程中主线程卡顿：

// 移除这行代码
// commandBuffer.waitUntilCompleted()

2. 正确实现Resize回调 #

在Drawable尺寸变化时显式触发重绘，确保绘制状态与视图尺寸同步：

func mtkView(_ view: MTKView, drawableSizeWillChange size: CGSize) {
    self.setNeedsDisplay()
}

3. 优化可见点数量计算精度 #

通过添加微小偏移量避免浮点取整误差，确保帧间instanceCount稳定：

// 修改drawGrid中的instanceCount计算逻辑
let width = Float(bounds.width)
let height = Float(bounds.height)
let xCount = Int(floor((width - xoffset + 0.0001) / spacing) + 1)
let yCount = Int(floor((height - yoffset + 0.0001) / spacing) + 1)
let instanceCount = xCount * yCount

4. 确认渲染通道的清除操作 #

确保Resize时每次绘制都正确清除缓冲区，避免残留上一帧内容：

if let passDescriptor = self.currentRenderPassDescriptor {
    passDescriptor.colorAttachments[0].loadAction = .clear
    passDescriptor.colorAttachments[0].clearColor = self.clearColor
}

修改后的完整MetalView代码 #

import AppKit
import MetalKit

class MetalView : MTKView {
    
    var queue : MTLCommandQueue!
    var pipelineState : MTLRenderPipelineState!
    
    private var spacing : Float = 10.0
    private var xoffset : Float = 0
    private var yoffset : Float = 0
    
    
    required init(coder: NSCoder) {
        super.init(coder: coder)
        
        self.device = MTLCreateSystemDefaultDevice()
        self.queue = device?.makeCommandQueue()
        self.clearColor = MTLClearColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
        self.colorPixelFormat = .bgra8Unorm
        
        self.isPaused = true
        self.enableSetNeedsDisplay = true
        
        makePipeline()
    }
    
    override func draw(_ dirtyRect: NSRect) {
        drawGrid()
    }
    
    private func drawGrid(){
        guard let drawable = self.currentDrawable,
              let passDescriptor = self.currentRenderPassDescriptor,
              let commandBuffer = queue.makeCommandBuffer(),
              let renderEncoder = commandBuffer.makeRenderCommandEncoder(descriptor: passDescriptor)
        else {
            print("errore")
            return
        }
        
        let width = Float(bounds.width)
        let height = Float(bounds.height)
        let infos = [width, height, xoffset, yoffset, spacing]
        
        // 优化可见点数量计算，避免浮点精度问题
        let xCount = Int(floor((width - xoffset + 0.0001) / spacing) + 1)
        let yCount = Int(floor((height - yoffset + 0.0001) / spacing) + 1)
        let instanceCount = xCount * yCount
        
        renderEncoder.setRenderPipelineState(pipelineState)
        renderEncoder.setVertexBytes(infos, length: MemoryLayout<Float>.size * infos.count, index: 0)
        renderEncoder.drawPrimitives(type: .point, vertexStart: 0, vertexCount: 1,
                                     instanceCount: instanceCount)
        
        renderEncoder.endEncoding()
        
        commandBuffer.present(drawable)
        commandBuffer.commit()
    }
    
    private func makePipeline() {
        guard let library = device?.makeDefaultLibrary() else {
            print("errore makePipeline")
            return
        }
        
        let pipelineStateDescriptor = MTLRenderPipelineDescriptor()
        pipelineStateDescriptor.vertexFunction = library.makeFunction(name: "vertex_function")
        pipelineStateDescriptor.fragmentFunction = library.makeFunction(name: "fragment_function")
        pipelineStateDescriptor.colorAttachments[0].pixelFormat = .bgra8Unorm
        
        do {
            pipelineState = try device?.makeRenderPipelineState(descriptor: pipelineStateDescriptor)
        } catch let error as NSError {
            print("Errore nella creazione della pipeline")
            print(error)
        }
    }
    
    func mtkView(_ view: MTKView, drawableSizeWillChange size: CGSize) {
        // 尺寸变化时触发重绘，确保绘制同步
        self.setNeedsDisplay()
    }
}

可选：着色器代码优化 #

将xdots计算移到CPU端并作为参数传入，减少GPU重复计算量：

#include <metal_stdlib>
using namespace metal;

struct Fragment{
    float4 position [[position]];
    float pointSize [[point_size]] = 5.0f;
    float4 color;
};

vertex Fragment vertex_function (unsigned int instanceID [[instance_id]],
                                 constant float *parameters [[buffer(0)]])
{
    const float width = parameters[0];
    const float height = parameters[1];
    const float xoffset = parameters[2];
    const float yoffset = parameters[3];
    const float spacing = parameters[4];
    const int xdots = int(parameters[5]); // 从CPU传入的计算结果
    
    float non_normalized_x = xoffset + (instanceID % xdots) * spacing;
    float non_normalized_y = yoffset + (instanceID / xdots) * spacing;
    
    float normalized_x = non_normalized_x / width * 2 - 1;
    float normalized_y = non_normalized_y / height * 2 - 1;
    
    Fragment f;
    f.position = float4(normalized_x, normalized_y, 0, 1);
    f.color = float4(0.8,0.8,0.8,1);
    
    return f;
}

fragment float4 fragment_function(Fragment in [[stage_in]])
{
    return in.color;
}

内容的提问来源于stack exchange，提问作者Mattia Marini