时间戳

首页 > 解决方案 > 线像素化

ios - 线像素化

问题描述

使用金属我正在使用四个点使用贝塞尔曲线绘制线条。我使用近 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;
}

标签： iosmetalmetalkit

解决方案

您需要启用 MSAA（多重采样抗锯齿）。你如何做到这一点取决于你确切的金属视图配置，但最简单的方法是如果你使用MTKView. 要在 中启用 MSAA MTKView，您只需：

metalView.sampleCount = 4

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

pipelineDescriptor.sampleCount = 4

这应该会大大提高曲线的质量并减少像素化。然而，它确实带来了性能成本，因为 GPU 必须做更多的工作来渲染你的帧。

推荐阅读