线像素化

Question

使用金属我正在使用贝塞尔曲线使用四个点绘制线。我正在使用近1500个三角形作为线条。这条线是像素化的。如何减少像素化。

vertex VertexOutBezier bezier_vertex(constant BezierParameters *allParams[[buffer(0)]],
                               constant GlobalParameters& globalParams[[buffer(1)]],
                               uint vertexId [[vertex_id]],
                               uint instanceId [[instance_id]])
{

    float t = (float) vertexId / globalParams.elementsPerInstance;


    rint(t);
    BezierParameters params = allParams[instanceId];

    float lineWidth = (1 - (((float) (vertexId % 2)) * 2.0)) * params.lineThickness;
 float2 a = params.a;
    float2 b = params.b;

    float cx = distance(a , b);


float2 p1 = params.p1 * 3.0;  // float2 p1 = params.p1 * 3.0;
    float2 p2 = params.p2 * 3.0;  // float2 p2 = params.p2 * 3.0;

    float nt = 1.0f - t;
    float nt_2 = nt * nt;
    float nt_3 = nt_2 * nt;
    float t_2 = t * t;
    float t_3 = t_2 * t;

    // Calculate a single point in this Bezier curve:
    float2 point = a * nt_3 + p1 * nt_2 * t + p2 * nt * t_2 + b * t_3;

    float2 tangent = -3.0 * a * nt_2 + p1 * (1.0 - 4.0 * t + 3.0 * t_2) + p2 * (2.0 * t - 3.0 * t_2) + 3 * b * t_2;
    tangent = (float2(-tangent.y , tangent.x  ));
    VertexOutBezier vo;       
    vo.pos.xy = point + (tangent * (lineWidth / 2.0f));
    vo.pos.zw = float2(0, 1);
    vo.color = params.color;

    return vo;
}

Answer 1

您需要启用MSAA（多样本抗锯齿）。如何执行此操作取决于您确切的金属视图配置，但是最简单的方法是使用MTKView。要在MTKView中启用MSAA，您要做的就是：

metalView.sampleCount = 4

然后，当您在调用MTLRenderPipelineDescriptor之前配置makeRenderPipelineState()时，添加以下内容：

pipelineDescriptor.sampleCount = 4

这将大大改善曲线的质量并减少像素化。但是，这确实会带来性能成本，因为GPU必须做更多的工作才能渲染帧。