Skip to content

Commit

Permalink
[Impeller] Add rounded rect SDF blur (flutter#35084)
Browse files Browse the repository at this point in the history
  • Loading branch information
bdero authored Aug 2, 2022
1 parent ca8cd6f commit c07e1ac
Show file tree
Hide file tree
Showing 9 changed files with 293 additions and 2 deletions.
4 changes: 4 additions & 0 deletions ci/licenses_golden/licenses_flutter
Original file line number Diff line number Diff line change
Expand Up @@ -570,6 +570,8 @@ FILE: ../../../flutter/impeller/entity/contents/path_contents.cc
FILE: ../../../flutter/impeller/entity/contents/path_contents.h
FILE: ../../../flutter/impeller/entity/contents/radial_gradient_contents.cc
FILE: ../../../flutter/impeller/entity/contents/radial_gradient_contents.h
FILE: ../../../flutter/impeller/entity/contents/rrect_shadow_contents.cc
FILE: ../../../flutter/impeller/entity/contents/rrect_shadow_contents.h
FILE: ../../../flutter/impeller/entity/contents/solid_color_contents.cc
FILE: ../../../flutter/impeller/entity/contents/solid_color_contents.h
FILE: ../../../flutter/impeller/entity/contents/solid_stroke_contents.cc
Expand Down Expand Up @@ -621,6 +623,8 @@ FILE: ../../../flutter/impeller/entity/shaders/gradient_fill.frag
FILE: ../../../flutter/impeller/entity/shaders/gradient_fill.vert
FILE: ../../../flutter/impeller/entity/shaders/radial_gradient_fill.frag
FILE: ../../../flutter/impeller/entity/shaders/radial_gradient_fill.vert
FILE: ../../../flutter/impeller/entity/shaders/rrect_blur.frag
FILE: ../../../flutter/impeller/entity/shaders/rrect_blur.vert
FILE: ../../../flutter/impeller/entity/shaders/solid_fill.frag
FILE: ../../../flutter/impeller/entity/shaders/solid_fill.vert
FILE: ../../../flutter/impeller/entity/shaders/solid_stroke.frag
Expand Down
8 changes: 6 additions & 2 deletions impeller/entity/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ impeller_shaders("entity_shaders") {
"shaders/glyph_atlas.vert",
"shaders/gradient_fill.frag",
"shaders/gradient_fill.vert",
"shaders/radial_gradient_fill.vert",
"shaders/radial_gradient_fill.frag",
"shaders/rrect_blur.vert",
"shaders/rrect_blur.frag",
"shaders/solid_fill.frag",
"shaders/solid_fill.vert",
"shaders/solid_stroke.frag",
Expand All @@ -42,8 +46,6 @@ impeller_shaders("entity_shaders") {
"shaders/texture_fill.vert",
"shaders/vertices.vert",
"shaders/vertices.frag",
"shaders/radial_gradient_fill.vert",
"shaders/radial_gradient_fill.frag",
]
}

Expand Down Expand Up @@ -77,6 +79,8 @@ impeller_component("entity") {
"contents/path_contents.h",
"contents/radial_gradient_contents.cc",
"contents/radial_gradient_contents.h",
"contents/rrect_shadow_contents.cc",
"contents/rrect_shadow_contents.h",
"contents/solid_color_contents.cc",
"contents/solid_color_contents.h",
"contents/solid_stroke_contents.cc",
Expand Down
2 changes: 2 additions & 0 deletions impeller/entity/contents/content_context.cc
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ ContentContext::ContentContext(std::shared_ptr<Context> context)
CreateDefaultPipeline<SolidFillPipeline>(*context_);
radial_gradient_fill_pipelines_[{}] =
CreateDefaultPipeline<RadialGradientFillPipeline>(*context_);
rrect_blur_pipelines_[{}] =
CreateDefaultPipeline<RRectBlurPipeline>(*context_);
texture_blend_pipelines_[{}] =
CreateDefaultPipeline<BlendPipeline>(*context_);
blend_color_pipelines_[{}] =
Expand Down
10 changes: 10 additions & 0 deletions impeller/entity/contents/content_context.h
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
#include "impeller/entity/gradient_fill.vert.h"
#include "impeller/entity/radial_gradient_fill.frag.h"
#include "impeller/entity/radial_gradient_fill.vert.h"
#include "impeller/entity/rrect_blur.frag.h"
#include "impeller/entity/rrect_blur.vert.h"
#include "impeller/entity/solid_fill.frag.h"
#include "impeller/entity/solid_fill.vert.h"
#include "impeller/entity/solid_stroke.frag.h"
Expand All @@ -59,6 +61,9 @@ using SolidFillPipeline =
using RadialGradientFillPipeline =
PipelineT<RadialGradientFillVertexShader, RadialGradientFillFragmentShader>;
using BlendPipeline = PipelineT<BlendVertexShader, BlendFragmentShader>;
using RRectBlurPipeline =
PipelineT<RrectBlurVertexShader, RrectBlurFragmentShader>;
using BlendPipeline = PipelineT<BlendVertexShader, BlendFragmentShader>;
using BlendColorPipeline =
PipelineT<AdvancedBlendVertexShader, AdvancedBlendColorFragmentShader>;
using BlendColorBurnPipeline =
Expand Down Expand Up @@ -147,6 +152,10 @@ class ContentContext {
ContentContextOptions opts) const {
return GetPipeline(radial_gradient_fill_pipelines_, opts);
}
std::shared_ptr<Pipeline> GetRRectBlurPipeline(
ContentContextOptions opts) const {
return GetPipeline(rrect_blur_pipelines_, opts);
}

std::shared_ptr<Pipeline> GetSolidFillPipeline(
ContentContextOptions opts) const {
Expand Down Expand Up @@ -293,6 +302,7 @@ class ContentContext {
mutable Variants<GradientFillPipeline> gradient_fill_pipelines_;
mutable Variants<SolidFillPipeline> solid_fill_pipelines_;
mutable Variants<RadialGradientFillPipeline> radial_gradient_fill_pipelines_;
mutable Variants<RRectBlurPipeline> rrect_blur_pipelines_;
mutable Variants<BlendPipeline> texture_blend_pipelines_;
mutable Variants<TexturePipeline> texture_pipelines_;
mutable Variants<GaussianBlurPipeline> gaussian_blur_pipelines_;
Expand Down
111 changes: 111 additions & 0 deletions impeller/entity/contents/rrect_shadow_contents.cc
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#include "impeller/entity/contents/rrect_shadow_contents.h"
#include <optional>

#include "impeller/entity/contents/content_context.h"
#include "impeller/entity/entity.h"
#include "impeller/geometry/path.h"
#include "impeller/geometry/path_builder.h"
#include "impeller/renderer/render_pass.h"
#include "impeller/renderer/vertex_buffer_builder.h"
#include "impeller/tessellator/tessellator.h"

namespace impeller {

RRectShadowContents::RRectShadowContents() = default;

RRectShadowContents::~RRectShadowContents() = default;

void RRectShadowContents::SetRRect(std::optional<Rect> rect,
Scalar corner_radius) {
rect_ = rect;
corner_radius_ = corner_radius;
}

void RRectShadowContents::SetSigma(Sigma sigma) {
sigma_ = sigma;
}

void RRectShadowContents::SetColor(Color color) {
color_ = color.Premultiply();
}

std::optional<Rect> RRectShadowContents::GetCoverage(
const Entity& entity) const {
if (!rect_.has_value()) {
return std::nullopt;
}

Scalar radius = Radius{sigma_}.radius;

auto ltrb = rect_->GetLTRB();
Rect bounds = Rect::MakeLTRB(ltrb[0] - radius, ltrb[1] - radius,
ltrb[2] + radius, ltrb[3] + radius);
return bounds.TransformBounds(entity.GetTransformation());
};

bool RRectShadowContents::Render(const ContentContext& renderer,
const Entity& entity,
RenderPass& pass) const {
if (!rect_.has_value()) {
return true;
}

using VS = RRectBlurPipeline::VertexShader;
using FS = RRectBlurPipeline::FragmentShader;

VertexBufferBuilder<VS::PerVertexData> vtx_builder;

auto blur_radius = Radius{sigma_}.radius;
auto positive_rect = rect_->GetPositive();
{
auto left = -blur_radius;
auto top = -blur_radius;
auto right = positive_rect.size.width + blur_radius;
auto bottom = positive_rect.size.height + blur_radius;

vtx_builder.AddVertices({
{Point(left, top)},
{Point(right, top)},
{Point(left, bottom)},
{Point(left, bottom)},
{Point(right, top)},
{Point(right, bottom)},
});
}

Command cmd;
cmd.label = "RRect Shadow";
cmd.pipeline =
renderer.GetRRectBlurPipeline(OptionsFromPassAndEntity(pass, entity));
cmd.stencil_reference = entity.GetStencilDepth();

cmd.primitive_type = PrimitiveType::kTriangle;
cmd.BindVertices(vtx_builder.CreateVertexBuffer(pass.GetTransientsBuffer()));

VS::VertInfo vert_info;
vert_info.mvp = Matrix::MakeOrthographic(pass.GetRenderTargetSize()) *
entity.GetTransformation() *
Matrix::MakeTranslation({positive_rect.origin});
VS::BindVertInfo(cmd, pass.GetTransientsBuffer().EmplaceUniform(vert_info));

FS::FragInfo frag_info;
frag_info.color = color_;
frag_info.blur_radius = blur_radius;
frag_info.rect_size = Point(positive_rect.size);
frag_info.corner_radius =
std::min(corner_radius_, std::min(positive_rect.size.width / 2.0f,
positive_rect.size.height / 2.0f));
FS::BindFragInfo(cmd, pass.GetTransientsBuffer().EmplaceUniform(frag_info));

if (!pass.AddCommand(std::move(cmd))) {
return false;
}

return true;
}

} // namespace impeller
51 changes: 51 additions & 0 deletions impeller/entity/contents/rrect_shadow_contents.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#pragma once

#include <functional>
#include <memory>
#include <vector>

#include "impeller/entity/contents/contents.h"
#include "impeller/entity/contents/filters/filter_contents.h"
#include "impeller/geometry/color.h"

namespace impeller {

class Path;
class HostBuffer;
struct VertexBuffer;

class RRectShadowContents final : public Contents {
public:
RRectShadowContents();

~RRectShadowContents() override;

void SetRRect(std::optional<Rect> rect, Scalar corner_radius = 0);

void SetSigma(Sigma sigma);

void SetColor(Color color);

// |Contents|
std::optional<Rect> GetCoverage(const Entity& entity) const override;

// |Contents|
bool Render(const ContentContext& renderer,
const Entity& entity,
RenderPass& pass) const override;

private:
std::optional<Rect> rect_;
Scalar corner_radius_;
Sigma sigma_;

Color color_;

FML_DISALLOW_COPY_AND_ASSIGN(RRectShadowContents);
};

} // namespace impeller
57 changes: 57 additions & 0 deletions impeller/entity/entity_unittests.cc
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
#include "impeller/entity/contents/filters/blend_filter_contents.h"
#include "impeller/entity/contents/filters/filter_contents.h"
#include "impeller/entity/contents/filters/inputs/filter_input.h"
#include "impeller/entity/contents/rrect_shadow_contents.h"
#include "impeller/entity/contents/solid_color_contents.h"
#include "impeller/entity/contents/solid_stroke_contents.h"
#include "impeller/entity/contents/texture_contents.h"
Expand Down Expand Up @@ -1174,5 +1175,61 @@ TEST_P(EntityTest, ClipContentsShouldRenderIsCorrect) {
}
}

TEST_P(EntityTest, RRectShadowTest) {
bool first_frame = true;
auto callback = [&](ContentContext& context, RenderPass& pass) {
if (first_frame) {
first_frame = false;
ImGui::SetNextWindowPos({10, 10});
}

static Color color = Color::Red();
static float corner_radius = 100;
static float blur_radius = 100;
static bool show_coverage = false;
static Color coverage_color = Color::Green().WithAlpha(0.2);

ImGui::Begin("Controls", nullptr, ImGuiWindowFlags_AlwaysAutoResize);
ImGui::SliderFloat("Corner radius", &corner_radius, 0, 300);
ImGui::SliderFloat("Blur radius", &blur_radius, 0, 300);
ImGui::ColorEdit4("Color", reinterpret_cast<Scalar*>(&color));
ImGui::Checkbox("Show coverage", &show_coverage);
if (show_coverage) {
ImGui::ColorEdit4("Coverage color",
reinterpret_cast<Scalar*>(&coverage_color));
}
ImGui::End();

auto [top_left, bottom_right] = IMPELLER_PLAYGROUND_LINE(
Point(200, 200), Point(600, 400), 30, Color::White(), Color::White());
auto rect =
Rect::MakeLTRB(top_left.x, top_left.y, bottom_right.x, bottom_right.y);

auto contents = std::make_unique<RRectShadowContents>();
contents->SetRRect(rect, corner_radius);
contents->SetColor(color);
contents->SetSigma(Radius(blur_radius));

Entity entity;
entity.SetTransformation(Matrix::MakeScale(GetContentScale()));
entity.SetContents(std::move(contents));
entity.Render(context, pass);

auto coverage = entity.GetCoverage();
if (show_coverage && coverage.has_value()) {
auto bounds_contents = std::make_unique<SolidColorContents>();
bounds_contents->SetPath(
PathBuilder{}.AddRect(entity.GetCoverage().value()).TakePath());
bounds_contents->SetColor(coverage_color.Premultiply());
Entity bounds_entity;
bounds_entity.SetContents(std::move(bounds_contents));
bounds_entity.Render(context, pass);
}

return true;
};
ASSERT_TRUE(OpenPlaygroundHere(callback));
}

} // namespace testing
} // namespace impeller
34 changes: 34 additions & 0 deletions impeller/entity/shaders/rrect_blur.frag
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

uniform FragInfo {
vec4 color;
float blur_radius;
vec2 rect_size;
float corner_radius;
}
frag_info;

in vec2 v_position;

out vec4 frag_color;

// Simple logistic sigmoid with a domain of [-1, 1] and range of [0, 1].
float Sigmoid(float x) {
return 1.03731472073 / (1 + exp(-4 * x)) - 0.0186573603638;
}

float RRectDistance(vec2 sample_position, vec2 rect_size, float corner_radius) {
vec2 space = abs(sample_position) - rect_size + corner_radius;
return length(max(space, 0.0)) + min(max(space.x, space.y), 0.0) -
corner_radius;
}

void main() {
vec2 center = v_position - frag_info.rect_size / 2.0;
float dist =
RRectDistance(center, frag_info.rect_size / 2.0, frag_info.corner_radius);
float shadow_mask = Sigmoid(-dist / frag_info.blur_radius);
frag_color = frag_info.color * shadow_mask;
}
18 changes: 18 additions & 0 deletions impeller/entity/shaders/rrect_blur.vert
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

uniform VertInfo {
mat4 mvp;
}
vert_info;

in vec2 position;

out vec2 v_position;

void main() {
gl_Position = vert_info.mvp * vec4(position, 0.0, 1.0);
// The fragment stage uses local coordinates to compute the blur.
v_position = position;
}

0 comments on commit c07e1ac

Please sign in to comment.