Improve rounded corner rendering with squircles

[richiemcilroy]

Refactored the rounded rectangle SDF to support squircle corners using a power metric, improving visual quality and flexibility. The fragment shader now applies rounded corners with smoother edge softness and masking, and handles cases where rounding is zero.

Demo: https://Cap.link/2zwsqmfvtaznb1n

Summary by CodeRabbit

• New Features

  • Rounded corners now render with smooth, anti-aliased edges for a cleaner look.
  • Edge softness improves blending at the boundaries for more natural visuals.
  • Automatically bypasses rounding when set to zero for crisp rectangular frames.

• Style

  • Enhanced corner curvature for video frames, reducing harsh edges and visual artifacts.
  • More consistent appearance across varying corner radii.

[coderabbitai[bot]]

Walkthrough

Refactors rounded-corner masking in the composite video frame shader by adding a super-ellipse metric (squircle), introducing SQUIRCLE_POWER, clamping radius, guarding zero/negative rounding, and replacing a binary mask with a smooth, edge-softened blend for color and alpha.

Changes

Cohort / File(s)	Summary
Shader: rounded-corner mask refactor crates/rendering/src/shaders/composite-video-frame.wgsl	Added const SQUIRCLE_POWER: f32 = 4.5; rewrote sdf_rounded_rect to clamp radius and compute a super-elliptic distance metric; updated apply_rounded_corners to early-exit for rounding_px <= 0.0, compute distance via the new SDF, and apply smooth edge masking with smoothstep and edge_softness to blend color/alpha.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant VS as Vertex Shader
  participant FS as Fragment Shader
  participant SDF as sdf_rounded_rect
  participant Blend as Edge Mask & Blend

  VS->>FS: Interpolated position, uv, inputs
  FS->>SDF: Compute distance with clamped radius (squircle power)
  SDF-->>FS: Composite distance metric
  alt rounding_px <= 0
    FS->>Blend: Bypass masking, use original color/alpha
  else rounding_px > 0
    FS->>Blend: smoothstep(distance, edge_softness)
    Blend-->>FS: Masked color/alpha (soft edges)
  end
  FS-->>Output: Final fragment color

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I rounded the corners with a squircle’s grace,
Soft edges bloom where hard lines used to chase.
A shader’s hush—smoothstep’s gentle art—
Blending light and alpha, pixel heart.
Hop, hop! says the dev-rabbit, bright—
Curves now purr in the composite night.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "Improve rounded corner rendering with squircles" succinctly and accurately describes the primary change: refactoring the rounded-rectangle SDF to use a squircle/super-elliptic power and updating the shader to produce smoother rounded corners. It is a single clear sentence, concise, and directly related to the PR changes and objectives.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch corner-smoothing

[!TIP]

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}