[skottie] Motion blur support

Unlike all other Skottie effects, motion blur requires sampling at multiple
points on the timeline.

To support this:

  1) Introduce MotionBlurEffect - a custom SG render node which can drive
     the timeline of its subtree using an sksg::Animator.

  2) Introduce MotionBlurController to swap for a regular LayerController
     when needed.  MotionBlurController dispatches time ticks to
     MotionBlurEffect instead of directly to the layer animators.

The actual motion blur impl is based on
https://skia-review.googlesource.com/c/skia/+/221416.

Motion blur requires Lottie files exported with this BodyMovin patch:
https://github.com/bodymovin/bodymovin-extension/pull/15

Change-Id: I075e101ea91ec9aa300bac35ee810fd539f1aced
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/225416
Reviewed-by: Mike Reed <reed@google.com>
Commit-Queue: Florin Malita <fmalita@chromium.org>
This commit is contained in:
Florin Malita 2019-07-03 10:09:31 -04:00 committed by Skia Commit-Bot
parent 8c4ee90b6c
commit 5f1108ce46
9 changed files with 258 additions and 36 deletions

View File

@ -34,6 +34,8 @@ skia_skottie_sources = [
"$_src/effects/GradientEffect.cpp",
"$_src/effects/LevelsEffect.cpp",
"$_src/effects/LinearWipeEffect.cpp",
"$_src/effects/MotionBlurEffect.cpp",
"$_src/effects/MotionBlurEffect.h",
"$_src/effects/MotionTileEffect.cpp",
"$_src/effects/RadialWipeEffect.cpp",
"$_src/effects/TintEffect.cpp",

View File

@ -129,6 +129,15 @@ sk_sp<sksg::RenderNode> AnimationBuilder::attachComposition(const skjson::Object
std::vector<sk_sp<sksg::RenderNode>> layers;
AttachLayerContext layerCtx(*jlayers);
// Optional motion blur params.
if (const skjson::ObjectValue* jmb = jcomp["mb"]) {
static constexpr size_t kMaxSamplesPerFrame = 64;
layerCtx.fMotionBlurSamples = std::min(ParseDefault<size_t>((*jmb)["spf"], 1ul),
kMaxSamplesPerFrame);
layerCtx.fMotionBlurAngle = SkTPin(ParseDefault((*jmb)["sa"], 0.0f), 0.0f, 720.0f);
layerCtx.fMotionBlurPhase = SkTPin(ParseDefault((*jmb)["sp"], 0.0f), -360.0f, 360.0f);
}
layers.reserve(jlayers->size());
for (const auto& l : *jlayers) {
if (auto layer = this->attachLayer(l, scope, &layerCtx)) {

View File

@ -10,6 +10,7 @@
#include "modules/skottie/src/SkottieAdapter.h"
#include "modules/skottie/src/SkottieJson.h"
#include "modules/skottie/src/effects/Effects.h"
#include "modules/skottie/src/effects/MotionBlurEffect.h"
#include "modules/sksg/include/SkSGClipEffect.h"
#include "modules/sksg/include/SkSGDraw.h"
#include "modules/sksg/include/SkSGGroup.h"
@ -193,6 +194,60 @@ sk_sp<sksg::RenderNode> AttachMask(const skjson::ArrayValue* jmask,
return sksg::MaskEffect::Make(std::move(childNode), std::move(maskNode));
}
class LayerController final : public sksg::Animator {
public:
LayerController(sksg::AnimatorList&& layer_animators,
sk_sp<sksg::RenderNode> layer,
size_t tanim_count, float in, float out)
: fLayerAnimators(std::move(layer_animators))
, fLayerNode(std::move(layer))
, fTransformAnimatorsCount(tanim_count)
, fIn(in)
, fOut(out) {}
protected:
void onTick(float t) override {
const auto active = (t >= fIn && t < fOut);
if (fLayerNode) {
fLayerNode->setVisible(active);
}
// When active, dispatch ticks to all layer animators.
// When inactive, we must still dispatch ticks to the layer transform animators
// (active child layers depend on transforms being updated).
const auto dispatch_count = active ? fLayerAnimators.size()
: fTransformAnimatorsCount;
for (size_t i = 0; i < dispatch_count; ++i) {
fLayerAnimators[i]->tick(t);
}
}
private:
const sksg::AnimatorList fLayerAnimators;
const sk_sp<sksg::RenderNode> fLayerNode;
const size_t fTransformAnimatorsCount;
const float fIn,
fOut;
};
class MotionBlurController final : public sksg::Animator {
public:
explicit MotionBlurController(sk_sp<MotionBlurEffect> mbe)
: fMotionBlurEffect(std::move(mbe)) {}
protected:
// When motion blur is present, time ticks are not passed to layer animators
// but to the motion blur effect. The effect then drives the animators/scene-graph
// during reval and render phases.
void onTick(float t) override {
fMotionBlurEffect->setT(t);
}
private:
const sk_sp<MotionBlurEffect> fMotionBlurEffect;
};
} // namespace
AnimationBuilder::AttachLayerContext::AttachLayerContext(const skjson::ArrayValue& jlayers)
@ -315,6 +370,12 @@ AnimationBuilder::AttachLayerContext::attachLayerTransformImpl(const skjson::Obj
return fLayerTransformMap.set(layer_index, { std::move(transform), std::move(ascope) });
}
bool AnimationBuilder::AttachLayerContext::hasMotionBlur(const skjson::ObjectValue& jlayer) const {
return fMotionBlurSamples > 1
&& fMotionBlurAngle > 0
&& ParseDefault(jlayer["mb"], false);
}
sk_sp<sksg::RenderNode> AnimationBuilder::attachLayer(const skjson::ObjectValue* jlayer,
AnimatorScope* ascope,
AttachLayerContext* layerCtx) const {
@ -434,46 +495,28 @@ sk_sp<sksg::RenderNode> AnimationBuilder::attachLayer(const skjson::ObjectValue*
// Optional blend mode.
layer = this->attachBlendMode(*jlayer, std::move(layer));
class LayerController final : public sksg::Animator {
public:
LayerController(sksg::AnimatorList&& layer_animators,
sk_sp<sksg::RenderNode> layer,
size_t tanim_count, float in, float out)
: fLayerAnimators(std::move(layer_animators))
, fLayerNode(std::move(layer))
, fTransformAnimatorsCount(tanim_count)
, fIn(in)
, fOut(out) {}
const auto has_animators = !layer_animators.empty();
void onTick(float t) override {
const auto active = (t >= fIn && t < fOut);
std::unique_ptr<sksg::Animator> controller =
skstd::make_unique<LayerController>(std::move(layer_animators), layer,
transform_animator_count,
layer_info.fInPoint,
layer_info.fOutPoint);
if (fLayerNode) {
fLayerNode->setVisible(active);
}
// Optional motion blur.
if (has_animators && layerCtx->hasMotionBlur(*jlayer)) {
SkASSERT(layerCtx->fMotionBlurAngle >= 0);
// When active, dispatch ticks to all layer animators.
// When inactive, we must still dispatch ticks to the layer transform animators
// (active child layers depend on transforms being updated).
const auto dispatch_count = active ? fLayerAnimators.size()
: fTransformAnimatorsCount;
for (size_t i = 0; i < dispatch_count; ++i) {
fLayerAnimators[i]->tick(t);
}
}
// Wrap both the layer node and the controller.
auto motion_blur = MotionBlurEffect::Make(std::move(controller), std::move(layer),
layerCtx->fMotionBlurSamples,
layerCtx->fMotionBlurAngle,
layerCtx->fMotionBlurPhase);
controller = skstd::make_unique<MotionBlurController>(motion_blur);
layer = std::move(motion_blur);
}
private:
const sksg::AnimatorList fLayerAnimators;
const sk_sp<sksg::RenderNode> fLayerNode;
const size_t fTransformAnimatorsCount;
const float fIn,
fOut;
};
ascope->push_back(skstd::make_unique<LayerController>(std::move(layer_animators), layer,
transform_animator_count,
layer_info.fInPoint,
layer_info.fOutPoint));
ascope->push_back(std::move(controller));
if (!layer) {
return nullptr;

View File

@ -231,12 +231,18 @@ struct AnimationBuilder::AttachLayerContext {
sk_sp<sksg::RenderNode> fCurrentMatte;
sk_sp<sksg::Transform> fCameraTransform;
size_t fMotionBlurSamples = 1;
float fMotionBlurAngle = 0,
fMotionBlurPhase = 0;
enum class TransformType { kLayer, kCamera };
TransformRec attachLayerTransform(const skjson::ObjectValue& jlayer,
const AnimationBuilder* abuilder,
TransformType type = TransformType::kLayer);
bool hasMotionBlur(const skjson::ObjectValue& jlayer) const;
private:
sk_sp<sksg::Transform> attachParentLayerTransform(const skjson::ObjectValue& jlayer,
const AnimationBuilder* abuilder,

View File

@ -0,0 +1,108 @@
/*
* Copyright 2019 Google Inc.
*
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
#include "modules/skottie/src/effects/MotionBlurEffect.h"
#include "include/core/SkCanvas.h"
#include "modules/sksg/include/SkSGInvalidationController.h"
namespace skottie {
namespace internal {
sk_sp<MotionBlurEffect> MotionBlurEffect::Make(std::unique_ptr<sksg::Animator> animator,
sk_sp<sksg::RenderNode> child,
size_t samples_per_frame,
float shutter_angle, float shutter_phase) {
if (!samples_per_frame || shutter_angle <= 0) {
return nullptr;
}
// shutter_angle is [ 0 .. 720], mapped to [ 0 .. 2] (frame space)
// shutter_phase is [-360 .. 360], mapped to [-1 .. 1] (frame space)
const auto samples_duration = shutter_angle / 360,
phase = shutter_phase / 360,
dt = samples_duration / (samples_per_frame - 1);
return sk_sp<MotionBlurEffect>(new MotionBlurEffect(std::move(animator),
std::move(child),
samples_per_frame,
phase, dt));
}
MotionBlurEffect::MotionBlurEffect(std::unique_ptr<sksg::Animator> animator,
sk_sp<sksg::RenderNode> child,
size_t samples, float phase, float dt)
: INHERITED({std::move(child)})
, fAnimator(std::move(animator))
, fSampleCount(samples)
, fPhase(phase)
, fDT(dt) {}
const sksg::RenderNode* MotionBlurEffect::onNodeAt(const SkPoint&) const {
return nullptr;
}
SkRect MotionBlurEffect::onRevalidate(sksg::InvalidationController*, const SkMatrix& ctm) {
SkASSERT(this->children().size() == 1ul);
const auto& child = this->children()[0];
auto bounds = SkRect::MakeEmpty();
// Use a local inval controller to suppress descendent invals during sampling
// (superseded by our local inval bounds).
sksg::InvalidationController ic;
auto t = fT + fPhase;
for (size_t i = 0; i < fSampleCount; ++i) {
fAnimator->tick(t);
t += fDT;
if (!child->isVisible()) {
continue;
}
bounds.join(child->revalidate(&ic, ctm));
}
return bounds;
}
void MotionBlurEffect::onRender(SkCanvas* canvas, const RenderContext* ctx) const {
SkASSERT(this->children().size() == 1ul);
const auto& child = this->children()[0];
SkAutoCanvasRestore acr(canvas, false);
canvas->saveLayer(this->bounds(), nullptr);
SkPaint frame_paint;
frame_paint.setAlphaf(1.0f / fSampleCount);
frame_paint.setBlendMode(SkBlendMode::kPlus);
sksg::InvalidationController ic;
auto t = fT + fPhase;
for (size_t i = 0; i < fSampleCount; ++i) {
fAnimator->tick(t);
t += fDT;
if (!child->isVisible()) {
continue;
}
child->revalidate(&ic, canvas->getTotalMatrix());
canvas->saveLayer(nullptr, &frame_paint);
child->render(canvas, ctx);
canvas->restore();
}
}
} // namespace internal
} // namespace skottie

View File

@ -0,0 +1,51 @@
/*
* Copyright 2019 Google Inc.
*
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
#ifndef SkottieMotionBlurEffect_DEFINED
#define SkottieMotionBlurEffect_DEFINED
#include "modules/sksg/include/SkSGRenderNode.h"
#include "modules/sksg/include/SkSGScene.h"
namespace skottie {
namespace internal {
class MotionBlurEffect final : public sksg::CustomRenderNode {
public:
static sk_sp<MotionBlurEffect> Make(std::unique_ptr<sksg::Animator> animator,
sk_sp<sksg::RenderNode> child,
size_t samples_per_frame,
float shutter_angle, float shutter_phase);
SG_ATTRIBUTE(T, float, fT)
protected:
const RenderNode* onNodeAt(const SkPoint&) const override;
SkRect onRevalidate(sksg::InvalidationController* ic, const SkMatrix& ctm) override;
void onRender(SkCanvas* canvas, const RenderContext* ctx) const override;
private:
MotionBlurEffect(std::unique_ptr<sksg::Animator> animator,
sk_sp<sksg::RenderNode> child,
size_t sample_count, float phase, float dt);
const std::unique_ptr<sksg::Animator> fAnimator;
const size_t fSampleCount;
const float fPhase,
fDT;
float fT = 0;
using INHERITED = sksg::CustomRenderNode;
};
} // namespace internal
} // namespace skottie
#endif // SkottieMotionBlurEffect_DEFINED

View File

@ -0,0 +1 @@
{"v":"5.5.5","fr":30,"ip":0,"op":60,"w":500,"h":500,"nm":"motion blur - phase -360","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"wire","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":59.5,"s":[720]}],"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":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":18,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":243,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0,1,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":60,"st":0,"cp":true,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"blur","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":59.5,"s":[720]}],"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":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":18,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":243,"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,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":60,"st":0,"cp":true,"mb":true,"bm":0},{"ddd":0,"ind":3,"ty":1,"nm":"White Solid 2","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":60,"st":0,"cp":false,"bm":0}],"markers":[],"mb":{"sa":720,"sp":-360,"spf":16,"asl":32}}

View File

@ -0,0 +1 @@
{"v":"5.5.5","fr":30,"ip":0,"op":60,"w":500,"h":500,"nm":"motion blur - phase 0","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"wire","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":59.5,"s":[720]}],"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":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":18,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":243,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0,1,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":60,"st":0,"cp":true,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"blur","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":59.5,"s":[720]}],"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":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":18,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":243,"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,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":60,"st":0,"cp":true,"mb":true,"bm":0},{"ddd":0,"ind":3,"ty":1,"nm":"White Solid 2","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":60,"st":0,"cp":false,"bm":0}],"markers":[],"mb":{"sa":720,"sp":0,"spf":16,"asl":32}}

View File

@ -0,0 +1 @@
{"v":"5.5.5","fr":30,"ip":0,"op":60,"w":500,"h":500,"nm":"motion blur - phase 360","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"wire","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":59.5,"s":[720]}],"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":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":18,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":243,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0,1,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":60,"st":0,"cp":true,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"blur","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":59.5,"s":[720]}],"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":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":18,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":243,"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,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":60,"st":0,"cp":true,"mb":true,"bm":0},{"ddd":0,"ind":3,"ty":1,"nm":"White Solid 2","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":60,"st":0,"cp":false,"bm":0}],"markers":[],"mb":{"sa":720,"sp":360,"spf":16,"asl":32}}