Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimization: draw solid, single color borders as rect + clip. #2626

Merged
merged 1 commit into from Apr 6, 2018

Conversation

@glennw
Copy link
Member

glennw commented Apr 6, 2018

Due to various recent optimizations and features added for the
segment logic, it's now feasible to start drawing borders as
a solid rect + clip mask.

For now, we start with only the simplest and most common case,
borders with style: solid and a single color.

This optimization applies in a couple of ways:

  • Fewer shader switches and better batching. Specifically, we
    can often batch these simple borders into an existing solid
    rect batch. Additionally, the edge segments of borders are
    typically considered opaque segments, which are more efficient
    to batch, and help with early z-reject of other fragments.

  • Once we start to cache clip masks between elements, and also
    across frames / display lists, we'll automatically get some
    wins here by only rendering a border corner mask once where
    applicable. Many real world sites use a common border radius
    on all buttons, for example, so this can be a significant
    optimization in these cases.


This change is Reviewable

@glennw
Copy link
Member Author

glennw commented Apr 6, 2018

r? @kvark

This includes the 2 commits from #2618, it might be easier to review this after that's landed - only the last commit here is new.

Try run is here:

https://treeherder.mozilla.org/#/jobs?repo=try&revision=2d090150fea8692f35a4cbc961076d9a801f8930&selectedJob=172218279

Same results as in #2618 plus 1 new PASS in addition to those.

@glennw glennw requested a review from kvark Apr 6, 2018
Due to various recent optimizations and features added for the
segment logic, it's now feasible to start drawing borders as
a solid rect + clip mask.

For now, we start with only the simplest and most common case,
borders with style: solid and a single color.

This optimization applies in a couple of ways:
 * Fewer shader switches and better batching. Specifically, we
   can often batch these simple borders into an existing solid
   rect batch. Additionally, the edge segments of borders are
   typically considered opaque segments, which are more efficient
   to batch, and help with early z-reject of other fragments.

 * Once we start to cache clip masks between elements, and also
   across frames / display lists, we'll automatically get some
   wins here by only rendering a border corner mask once where
   applicable. Many real world sites use a common border radius
   on all buttons, for example, so this can be a significant
   optimization in these cases.
@glennw glennw force-pushed the glennw:border-solid-clip branch from 37e5870 to d26c75c Apr 6, 2018
@glennw
Copy link
Member Author

glennw commented Apr 6, 2018

Rebased on master so there is just the one commit now.

@kvark
Copy link
Member

kvark commented Apr 6, 2018

Once we start to cache clip masks between elements

I have a strong dejavu feeling about this :)

:lgtm_strong:


Reviewed 11 of 11 files at r1.
Review status: all files reviewed at latest revision, all discussions resolved.


Comments from Reviewable

@kvark
Copy link
Member

kvark commented Apr 6, 2018

@bors-servo
Copy link
Contributor

bors-servo commented Apr 6, 2018

📌 Commit d26c75c has been approved by kvark

bors-servo added a commit that referenced this pull request Apr 6, 2018
Optimization: draw solid, single color borders as rect + clip.

Due to various recent optimizations and features added for the
segment logic, it's now feasible to start drawing borders as
a solid rect + clip mask.

For now, we start with only the simplest and most common case,
borders with style: solid and a single color.

This optimization applies in a couple of ways:
 * Fewer shader switches and better batching. Specifically, we
   can often batch these simple borders into an existing solid
   rect batch. Additionally, the edge segments of borders are
   typically considered opaque segments, which are more efficient
   to batch, and help with early z-reject of other fragments.

 * Once we start to cache clip masks between elements, and also
   across frames / display lists, we'll automatically get some
   wins here by only rendering a border corner mask once where
   applicable. Many real world sites use a common border radius
   on all buttons, for example, so this can be a significant
   optimization in these cases.

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/webrender/2626)
<!-- Reviewable:end -->
@bors-servo
Copy link
Contributor

bors-servo commented Apr 6, 2018

Testing commit d26c75c with merge df73569...

@bors-servo
Copy link
Contributor

bors-servo commented Apr 6, 2018

☀️ Test successful - status-appveyor, status-taskcluster
Approved by: kvark
Pushing df73569 to master...

@bors-servo bors-servo merged commit d26c75c into servo:master Apr 6, 2018
4 checks passed
4 checks passed
Taskcluster (pull_request) TaskGroup: success
Details
code-review/reviewable 11 files reviewed
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
homu Test successful
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants
You can’t perform that action at this time.