[impeller] antialias diagonal lines look lighter #166276

Activity

1. gaaclarke

   added

   e: impellerImpeller rendering backend issues and features requestsImpeller rendering backend issues and features requests

   team-engineOwned by Engine teamOwned by Engine team

   on Mar 31, 2025
2. gaaclarke commented on Mar 31, 2025

   

   gaaclarke

   on Mar 31, 2025

   MemberAuthor

   More actions

   I tried to reproduce this in Playgrounds and I can't

   TEST_P(AiksTest, HexagonExperimentAntialiasLines) {
     float scale = 5.0f;
     float line_width = 10.f;
   
     auto callback = [&]() -> sk_sp<DisplayList> {
       if (AiksTest::ImGuiBegin("Controls", nullptr,
                                ImGuiWindowFlags_AlwaysAutoResize)) {
         // Use ImGui::SliderFloat for consistency
         ImGui::SliderFloat("Scale", &scale, 0.001f, 5.0f);
         ImGui::SliderFloat("Width", &line_width, 1.0f, 20.0f);
   
         ImGui::End();
       }
       DisplayListBuilder builder;
       builder.Scale(static_cast<float>(GetContentScale().x),
                     static_cast<float>(GetContentScale().y));
   
       builder.DrawPaint(DlPaint(DlColor(0xff111111)));  // Background
   
       {
         DlPaint hex_paint;
         hex_paint.setColor(
             DlColor::kRed());  // Changed color to Red for visibility
         hex_paint.setStrokeWidth(line_width);  // Use the interactive width
   
         float cx = 512.0f;  // Center X
         float cy = 384.0f;  // Center Y
         float r = 80.0f;    // Radius (distance from center to vertex)
   
         float r_sin60 = r * std::sqrt(3.0f) / 2.0f;
         float r_cos60 = r / 2.0f;
   
         DlPoint v0 = DlPoint(cx + r, cy);                  // Right vertex
         DlPoint v1 = DlPoint(cx + r_cos60, cy - r_sin60);  // Top-right vertex
         DlPoint v2 = DlPoint(
             cx - r_cos60,
             cy - r_sin60);  // Top-left vertex (v1-v2 is top horizontal side)
         DlPoint v3 = DlPoint(cx - r, cy);                  // Left vertex
         DlPoint v4 = DlPoint(cx - r_cos60, cy + r_sin60);  // Bottom-left vertex
         DlPoint v5 =
             DlPoint(cx + r_cos60, cy + r_sin60);  // Bottom-right vertex (v4-v5 is
                                                   // bottom horizontal side)
   
         builder.Translate(cx, cy);
         builder.Scale(scale, scale);
         builder.Translate(-cx, -cy);
   
         builder.DrawLine(v0, v1, hex_paint);
         builder.DrawLine(v1, v2, hex_paint);  // Top side
         builder.DrawLine(v2, v3, hex_paint);
         builder.DrawLine(v3, v4, hex_paint);
         builder.DrawLine(v4, v5, hex_paint);  // Bottom side
         builder.DrawLine(v5, v0, hex_paint);  // Close the hexagon
       }
   
       return builder.Build();
     };
     ASSERT_TRUE(OpenPlaygroundHere(callback));
   }

   
3. gaaclarke commented on Mar 31, 2025

   

   gaaclarke

   on Mar 31, 2025

   MemberAuthor

   More actions

   Actually, the previous comment could reproduce it. I drew the hex the same color as the debugging color so it wasn't apparent. It's more apparent with contrasting colors. The diagonals are thinner.

   
4. gaaclarke commented on Mar 31, 2025

   

   gaaclarke

   on Mar 31, 2025

   MemberAuthor

   More actions

   This has to be a problem with the e calculation. If you switch the texture lookup to a smoothstep you can see the problem still manifests. The e calculation will determine how far away one is from the edge of the line (and thus how much red we get).

   
5. github-merge-queue

   added a commit that references this issue on Apr 1, 2025

   [impeller] fixes diagonal antialiased lines (#166298)

   ...

   576cdb4
6. gaaclarke

   closed this as completedin #166298on Apr 1, 2025
7. github-actions commented on Apr 15, 2025

   

   github-actionsbot

   on Apr 15, 2025 – with GitHub Actions

   More actions

   This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
8. github-actions

   locked as resolved and limited conversation to collaborators on Apr 15, 2025
9. zhangyuang

   added a commit that references this issue on Jun 9, 2025

   [impeller] fixes diagonal antialiased lines (flutter#166298)

   ...

   7527a69
10. romanejaquez

    added a commit that references this issue on Aug 14, 2025

    [impeller] fixes diagonal antialiased lines (flutter#166298)

    ...

    0b9da26