AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[skottie] Add spread/choke support for glow styles

Browse Source 
Spread/choke operates as a compression of the alpha channel towards the
low bits.

Change-Id: I82aec1321b60f7f75a79e8280e761d4629f6c923
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/305183
Reviewed-by: Michael Ludwig <michaelludwig@google.com>
Commit-Queue: Florin Malita <fmalita@google.com>
This commit is contained in:
Florin Malita 2020-07-22 13:57:10 -04:00 committed by Skia Commit-Bot
parent 59e18dc6dd
commit 72db717348
2 changed files with 63 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
modules/skottie/src/effects/GlowStyles.cpp
View File

@ -15,6 +15,8 @@
#include "modules/skottie/src/SkottieValue.h"
#include "modules/sksg/include/SkSGRenderEffect.h"
#include <cmath>
namespace skottie::internal {
namespace {
@ -32,33 +34,81 @@ public:
this->bind(abuilder, jstyle["o" ], fOpacity);
this->bind(abuilder, jstyle["s" ], fSize);
this->bind(abuilder, jstyle["sr"], fInnerSource);
this->bind(abuilder, jstyle["ch"], fChoke);
}
private:
void onSync() override {
const auto sigma = fSize * kBlurSizeToSigma,
opacity = SkTPin(fOpacity / 100, 0.0f, 1.0f);
opacity = SkTPin(fOpacity / 100, 0.0f, 1.0f),
choke = SkTPin(fChoke / 100, 0.0f, 1.0f);
const auto color = static_cast<SkColor4f>(fColor);
// Select and colorize the source alpha channel.
SkColorMatrix cm{0, 0, 0, 0, color.fR,
0, 0, 0, 0, color.fG,
0, 0, 0, 0, color.fB,
0, 0, 0, opacity * color.fA, 0};
// Select the source alpha channel.
SkColorMatrix mask_cm{
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
0, 0, 0, 1, 0
};
// Inner glows with an edge source use the alpha inverse.
if (fType == Type::kInnerGlow && SkScalarRoundToInt(fInnerSource) == kEdge) {
cm.preConcat({1, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
0, 0, 0,-1, 1});
mask_cm.preConcat({
1, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
0, 0, 0,-1, 1
});
}
auto f = SkImageFilters::ColorFilter(SkColorFilters::Matrix(cm), nullptr);
// Add glow color and opacity.
const SkColorMatrix color_cm {
0, 0, 0, 0, color.fR,
0, 0, 0, 0, color.fG,
0, 0, 0, 0, color.fB,
0, 0, 0, opacity * color.fA, 0
};
// Alpha choke only applies when a blur is in use.
const auto requires_alpha_choke = (sigma > 0 && choke > 0);
if (!requires_alpha_choke) {
// We can fold the colorization step with the initial source alpha.
mask_cm.postConcat(color_cm);
}
auto f = SkImageFilters::ColorFilter(SkColorFilters::Matrix(mask_cm), nullptr);
if (sigma > 0) {
f = SkImageFilters::Blur(sigma, sigma, std::move(f));
}
if (requires_alpha_choke) {
// Choke/spread semantics (applied to the blur result):
//
// 0 -> no effect
// 1 -> all non-transparent values turn opaque (the blur "spreads" all the way)
// (0..1) -> some form of gradual/nonlinear transition between the two.
//
// One way to emulate this effect is by upscaling the blur alpha by 1 / (1 - choke):
static constexpr float kMaxAlphaScale = 1e6f,
kChokeGamma = 0.2f;
const auto alpha_scale =
std::min(sk_ieee_float_divide(1, 1 - std::pow(choke, kChokeGamma)), kMaxAlphaScale);
SkColorMatrix choke_cm(1, 0, 0, 0, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
0, 0, 0, alpha_scale, 0);
f = SkImageFilters::ColorFilter(SkColorFilters::Matrix(choke_cm), std::move(f));
// Colorization is deferred until after alpha choke. It also must be applied as a
// separate color filter to ensure the choke scale above is clamped.
f = SkImageFilters::ColorFilter(SkColorFilters::Matrix(color_cm), std::move(f));
}
sk_sp<SkImageFilter> source;
if (fType == Type::kInnerGlow) {
@ -82,6 +132,7 @@ private:
VectorValue fColor;
ScalarValue fOpacity = 100, // percentage
fSize = 0,
fChoke = 0,
fInnerSource = kEdge;
using INHERITED = DiscardableAdapterBase<GlowAdapter, sksg::ExternalImageFilter>;

1
resources/skottie/skottie-glow-spread.json Normal file
View File

@ -0,0 +1 @@
{"v":"5.7.1","fr":60,"ip":0,"op":601,"w":500,"h":500,"nm":"glow spread","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":600,"s":[720]}],"ix":5},"ir":{"a":0,"k":35,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":100,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[0.186933204532,0.489476114511,1,1],"ix":4},"o":{"a":0,"k":75,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[150,150],"ix":2},"p":{"a":0,"k":[80,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.230637252331,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":21,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.799341320992,0.889966309071,0.211565569043,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":600,"s":[-360]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":601,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"inner","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,375,0],"ix":2},"a":{"a":0,"k":[250,250,0],"ix":1},"s":{"a":0,"k":[75,75,100],"ix":6}},"ao":0,"sy":[{"c":{"a":0,"k":[1,0,0,1],"ix":5},"o":{"a":0,"k":50,"ix":2},"s":{"a":0,"k":42,"ix":11},"r":{"a":0,"k":100,"ix":12},"sr":{"a":0,"k":1,"ix":9},"ch":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":300,"s":[97]},{"t":600,"s":[0]}],"ix":10},"bm":{"a":0,"k":1,"ix":1},"no":{"a":0,"k":0,"ix":3},"j":{"a":0,"k":0,"ix":13},"ty":4,"nm":"Inner Glow"}],"w":500,"h":500,"ip":0,"op":601,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"outer","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,125,0],"ix":2},"a":{"a":0,"k":[250,250,0],"ix":1},"s":{"a":0,"k":[75,75,100],"ix":6}},"ao":0,"sy":[{"c":{"a":0,"k":[1,0,0,1],"ix":5},"o":{"a":0,"k":75,"ix":2},"s":{"a":0,"k":42,"ix":10},"r":{"a":0,"k":100,"ix":11},"ch":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":300,"s":[100]},{"t":600,"s":[0]}],"ix":9},"bm":{"a":0,"k":1,"ix":1},"no":{"a":0,"k":0,"ix":3},"j":{"a":0,"k":0,"ix":12},"ty":3,"nm":"Outer Glow"}],"w":500,"h":500,"ip":0,"op":601,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":1,"nm":"White Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2},"a":{"a":0,"k":[250,250,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":500,"sh":500,"sc":"#ffffff","ip":0,"op":601,"st":0,"bm":0}],"markers":[]}