PAG动效框架源码笔记（三）播放流程

转载请注明出处：http://www.olinone.com/

PAG框架支持单PAGView同时渲染多个PAGFile，相较于渲染单一文件，框架首先需要解决多文件渲染同步问题

1、多文件渲染帧率同步

多文件有着不同的帧率(FPS) ，为了实现同一容器渲染不同帧率文件，传统的基于定时器模式（定时回调，间隔与帧率同步）的回调已无法满足该场景

2、多文件渲染进度同步

多文件渲染需要避免多图层渲染进度不一致问题；为了保证播放流畅度，通常会在子线程解码视频帧，当渲染多视频图层时，如何保证多解码线程下的帧同步？

3、多文件播放区间控制

PAG支持File自定义显示区间，每个File文件时长也不一致，如何控制不同文件的播放区间？

播放进度

PAG没有采用类似于CMTime帧数的方式记录播放进度，而是通过时长百分比记录各层级播放进度，从而实现不同帧率（FPS）文件的进度同步

bool PAGComposition::gotoTime(int64_t layerTime) {
  auto changed = PAGLayer::gotoTime(layerTime);
  auto compositionOffset =
      // 相对起始时间
      static_cast<PreComposeLayer*>(layer)->compositionStartTime - layer->startTime + startFrame;
  auto compositionOffsetTime =
      static_cast<Frame>(floor(compositionOffset * 1000000.0 / frameRateInternal()));
  for (auto& layer : layers) {
    // 各图层记录各自的播放进度
    if (layer->gotoTime(layerTime - compositionOffsetTime)) {
      changed = true;
    }
  }
  return changed;
}

bool PAGLayer::gotoTime(int64_t layerTime) {
  ...
  // 使用各自帧率转化成对应帧
  auto layerFrame = TimeToFrame(layerTime, frameRateInternal());
  auto oldContentFrame = contentFrame;
  contentFrame = layerFrame - startFrame;
  ...
  return changed;
}

bool PAGComposition::gotoTime(int64_t layerTime) {

auto changed = PAGLayer::gotoTime(layerTime);

auto compositionOffset =

// 相对起始时间

static_cast<PreComposeLayer*>(layer)->compositionStartTime - layer->startTime + startFrame;

auto compositionOffsetTime =

static_cast<Frame>(floor(compositionOffset * 1000000.0 / frameRateInternal()));

for (auto& layer : layers) {

// 各图层记录各自的播放进度

if (layer->gotoTime(layerTime - compositionOffsetTime)) {

changed = true;

}

return changed;

}

bool PAGLayer::gotoTime(int64_t layerTime) {

...

// 使用各自帧率转化成对应帧

auto layerFrame = TimeToFrame(layerTime, frameRateInternal());

auto oldContentFrame = contentFrame;

contentFrame = layerFrame - startFrame;

...

return changed;

}

采用时长百分比记录进度会导致flush绘制重复帧，为了解决性能问题，PAG引入了LayerCache角色，当重复绘制同一帧时可以直接使用缓存数据

Content* PAGLayer::getContent() {
  return layerCache->getContent(contentFrame);
}

Content* PAGLayer::getContent() {

return layerCache->getContent(contentFrame);

}

PAG信号源PAGValueAnimator通过绝对时间差值计算播放进度，多个PAGView共用一个全局信号触发器

// 获取绝对时间戳
static int64_t GetCurrentTimeUS() {
  static auto START_TIME = std::chrono::high_resolution_clock::now();
  auto now = std::chrono::high_resolution_clock::now();
  auto ns = std::chrono::duration_cast<std::chrono::nanoseconds>(now - START_TIME);
  return static_cast<int64_t>(ns.count() * 1e-3);
}

- (void)start {
  ...
  // PAG支持重复播放
  if (repeatedTimes >= (repeatCount + 1)) {
    repeatedTimes = 0;
  }
  self.animatorId = [PAGValueAnimator AddAnimator:self];
  // startTime不是最初开始时间，每次暂停恢复播放后会重新记录
  startTime = GetCurrentTimeUS() - playTime % duration - repeatedTimes * duration;
  animatedFraction = static_cast<double>(playTime) / duration;
  ...
}

- (void)onAnimationFrame:(int64_t)timestamp {
  auto count = (timestamp - startTime) / duration;
  if (repeatCount >= 0 && count > repeatCount) {
    // 播放结束
    playTime = duration;
    animatedFraction = 1.0;
    ...
  } else {
    // 当次播放时间戳
    playTime = (timestamp - startTime) % duration;
    animatedFraction = static_cast<double>(playTime) / duration;
    ...
}

// 获取绝对时间戳

static int64_t GetCurrentTimeUS() {

static auto START_TIME = std::chrono::high_resolution_clock::now();

auto now = std::chrono::high_resolution_clock::now();

auto ns = std::chrono::duration_cast<std::chrono::nanoseconds>(now - START_TIME);

return static_cast<int64_t>(ns.count() * 1e-3);

}

- (void)start {

...

// PAG支持重复播放

if (repeatedTimes >= (repeatCount + 1)) {

repeatedTimes = 0;

}

self.animatorId = [PAGValueAnimator AddAnimator:self];

// startTime不是最初开始时间，每次暂停恢复播放后会重新记录

startTime = GetCurrentTimeUS() - playTime % duration - repeatedTimes * duration;

animatedFraction = static_cast<double>(playTime) / duration;

...

}

- (void)onAnimationFrame:(int64_t)timestamp {

auto count = (timestamp - startTime) / duration;

if (repeatCount >= 0 && count > repeatCount) {

// 播放结束

playTime = duration;

animatedFraction = 1.0;

...

} else {

// 当次播放时间戳

playTime = (timestamp - startTime) % duration;

animatedFraction = static_cast<double>(playTime) / duration;

...

}

播放流程

1、信号触发

- (void)onAnimationUpdate {
  // 触发更新
  [self updateView];
}

- (BOOL)flush {
  ...
  // 更新播放进度
  [pagPlayer setProgress:[valueAnimator getAnimatedFraction]];
  // 触发刷新
  result = [pagPlayer flush];
  ...
}

- (void)onAnimationUpdate {

// 触发更新

[self updateView];

}

- (BOOL)flush {

...

// 更新播放进度

[pagPlayer setProgress:[valueAnimator getAnimatedFraction]];

// 触发刷新

result = [pagPlayer flush];

...

}

2、更新播放进度

void PAGPlayer::setProgress(double percent) {
  // 获取渲染图层，递归更新各图层播放进度
  auto pagComposition = stage->getRootComposition();
  pagComposition->setProgressInternal(realProgress);
}

void PAGLayer::setProgressInternal(double percent) {
  // 各图层起始播放时间不同，转化为全局整体播放时间戳
  gotoTimeAndNotifyChanged(startTimeInternal() + ProgressToTime(percent, durationInternal()));
}

void PAGPlayer::setProgress(double percent) {

// 获取渲染图层，递归更新各图层播放进度

auto pagComposition = stage->getRootComposition();

pagComposition->setProgressInternal(realProgress);

}

void PAGLayer::setProgressInternal(double percent) {

// 各图层起始播放时间不同，转化为全局整体播放时间戳

gotoTimeAndNotifyChanged(startTimeInternal() + ProgressToTime(percent, durationInternal()));

}

3、触发渲染

bool PAGPlayer::flushInternal(BackendSemaphore* signalSemaphore) {
  // 图层预处理，生成播放时间戳对应的图形模型，模型转化参考上一章层级视图讲解
  prepareInternal();
  // 绘制图层对象
  if (!pagSurface->draw(renderCache, lastGraphic, signalSemaphore, _autoClear)) {
    return false;
  }
  ...
}

void PAGSurface::onDraw(std::shared_ptr<Graphic> graphic, std::shared_ptr<tgfx::Surface> target, RenderCache* cache) {
  auto canvas = target->getCanvas();
  if (graphic) {
    // 预处理，比如视频帧解码
    graphic->prepare(cache);
    // 渲染到画布Canvas
    graphic->draw(canvas, cache);
  }
}

bool PAGPlayer::flushInternal(BackendSemaphore* signalSemaphore) {

// 图层预处理，生成播放时间戳对应的图形模型，模型转化参考上一章层级视图讲解

prepareInternal();

// 绘制图层对象

if (!pagSurface->draw(renderCache, lastGraphic, signalSemaphore, _autoClear)) {

return false;

}

...

}

void PAGSurface::onDraw(std::shared_ptr<Graphic> graphic, std::shared_ptr<tgfx::Surface> target, RenderCache* cache) {

auto canvas = target->getCanvas();

if (graphic) {

// 预处理，比如视频帧解码

graphic->prepare(cache);

// 渲染到画布Canvas

graphic->draw(canvas, cache);

}

4、图形解码（以视频帧为例）

// 预处理解码
void RenderCache::prepareSequenceImage(std::shared_ptr<SequenceInfo> sequence, Frame targetFrame) {
  // 解码队列，每个资源对应一个解码队列
  auto queue = getSequenceImageQueue(sequence, targetFrame);
  if (queue != nullptr) {
    queue->prepare(targetFrame);
  }
}

void SequenceImageQueue::prepare(Frame targetFrame) {
  // 获取当前帧对应的image数据，开始解码（比如AVC解码）
  auto image = sequence->makeFrameImage(reader, targetFrame);
  preparedImage = image->makeDecoded();
  preparedFrame = targetFrame;
}

// 创建异步解码任务
AsyncSource::AsyncSource(UniqueKey uniqueKey, std::shared_ptr<ImageGenerator> imageGenerator, bool mipMapped) {
  ...
  imageTask = ImageGeneratorTask::MakeFrom(generator, tryHardware);
}

ImageGeneratorTask::ImageGeneratorTask(std::shared_ptr<ImageGenerator> generator, bool tryHardware) : imageGenerator(std::move(generator)) {
  // 解码函数
  task = Task::Run([=] { imageBuffer = imageGenerator->makeBuffer(tryHardware); });
}

std::shared_ptr<tgfx::ImageBuffer> VideoReader::onMakeBuffer(Frame targetFrame) {
  auto targetTime = FrameToTime(targetFrame, frameRate);
  ... 
  // 解码
  auto sampleTime = demuxer->getSampleTimeAt(targetTime);
  auto success = decodeFrame(sampleTime);
  lastBuffer = videoDecoder->onRenderFrame();
  return lastBuffer;
}

// 预处理解码

void RenderCache::prepareSequenceImage(std::shared_ptr<SequenceInfo> sequence, Frame targetFrame) {

// 解码队列，每个资源对应一个解码队列

auto queue = getSequenceImageQueue(sequence, targetFrame);

if (queue != nullptr) {

queue->prepare(targetFrame);

}

void SequenceImageQueue::prepare(Frame targetFrame) {

// 获取当前帧对应的image数据，开始解码（比如AVC解码）

auto image = sequence->makeFrameImage(reader, targetFrame);

preparedImage = image->makeDecoded();

preparedFrame = targetFrame;

}

// 创建异步解码任务

AsyncSource::AsyncSource(UniqueKey uniqueKey, std::shared_ptr<ImageGenerator> imageGenerator, bool mipMapped) {

...

imageTask = ImageGeneratorTask::MakeFrom(generator, tryHardware);

}

ImageGeneratorTask::ImageGeneratorTask(std::shared_ptr<ImageGenerator> generator, bool tryHardware) : imageGenerator(std::move(generator)) {

// 解码函数

task = Task::Run([=] { imageBuffer = imageGenerator->makeBuffer(tryHardware); });

}

std::shared_ptr<tgfx::ImageBuffer> VideoReader::onMakeBuffer(Frame targetFrame) {

auto targetTime = FrameToTime(targetFrame, frameRate);

...

// 解码

auto sampleTime = demuxer->getSampleTimeAt(targetTime);

auto success = decodeFrame(sampleTime);

lastBuffer = videoDecoder->onRenderFrame();

return lastBuffer;

}

5、渲染图形

void draw(tgfx::Canvas* canvas, RenderCache* cache) const override {
    ...
    // 获取解码图形
    auto image = proxy->getImage(cache);
    canvas->drawImage(std::move(image));
}

std::shared_ptr<tgfx::Image> SequenceImageQueue::getImage(Frame targetFrame) {
  // 目标帧已解码直接返回
  if (targetFrame == preparedFrame) {
    currentImage = preparedImage;
    return currentImage;
  }
  // 同步等待解码后的数据
  auto image = sequence->makeFrameImage(reader, targetFrame);
  currentImage = image->makeDecoded();
  return currentImage;
}

std::shared_ptr<ImageBuffer> ImageGeneratorTask::getBuffer() const {
  // 等待直到解码完成
  task->wait();
  return imageBuffer;
}

void Task::wait() {
  std::unique_lock<std::mutex> autoLock(locker);
  if (!_executing) {
    return;
  }
  // 等待解码锁释放
  condition.wait(autoLock);
}

void draw(tgfx::Canvas* canvas, RenderCache* cache) const override {

...

// 获取解码图形

auto image = proxy->getImage(cache);

canvas->drawImage(std::move(image));

}

std::shared_ptr<tgfx::Image> SequenceImageQueue::getImage(Frame targetFrame) {

// 目标帧已解码直接返回

if (targetFrame == preparedFrame) {

currentImage = preparedImage;

return currentImage;

}

// 同步等待解码后的数据

auto image = sequence->makeFrameImage(reader, targetFrame);

currentImage = image->makeDecoded();

return currentImage;

}

std::shared_ptr<ImageBuffer> ImageGeneratorTask::getBuffer() const {

// 等待直到解码完成

task->wait();

return imageBuffer;

}

void Task::wait() {

std::unique_lock<std::mutex> autoLock(locker);

if (!_executing) {

return;

}

// 等待解码锁释放

condition.wait(autoLock);

}

总结

为了优化播放体验，PAG使用了多种性能优化策略，包括提前预解码、渲染帧复用、GPU优化等等

void RenderCache::prepareLayers() {
// 提前 500ms 开始解码
int64_t timeDistance = DECODING_VISIBLE_DISTANCE;
auto layerDistances = stage->findNearlyVisibleLayersIn(timeDistance);
for (auto& item : layerDistances) {
  for (auto pagLayer : item.second) {
    if (pagLayer->layerType() == LayerType::PreCompose) {
      preparePreComposeLayer(static_cast<PreComposeLayer*>(pagLayer->layer));
    } else if (pagLayer->layerType() == LayerType::Image) {
      prepareImageLayer(static_cast<PAGImageLayer*>(pagLayer));
    }
  }
}
}

void RenderCache::prepareLayers() {

// 提前 500ms 开始解码

int64_t timeDistance = DECODING_VISIBLE_DISTANCE;

auto layerDistances = stage->findNearlyVisibleLayersIn(timeDistance);

for (auto& item : layerDistances) {

for (auto pagLayer : item.second) {

if (pagLayer->layerType() == LayerType::PreCompose) {

preparePreComposeLayer(static_cast<PreComposeLayer*>(pagLayer->layer));

} else if (pagLayer->layerType() == LayerType::Image) {

prepareImageLayer(static_cast<PAGImageLayer*>(pagLayer));

}

PAG应用框架层主要负责上层业务逻辑处理，包括文件视频解码、播放流程控制以及生成渲染引擎所需要的数据源等，接下来将结合OpenGL讲解TGFX渲染引擎部分

PAG动效框架源码笔记（三）播放流程

1、多文件渲染帧率同步

2、多文件渲染进度同步

3、多文件播放区间控制

播放进度

播放流程

1、信号触发

2、更新播放进度

3、触发渲染

4、图形解码（以视频帧为例）

5、渲染图形

总结

2 thoughts on “PAG动效框架源码笔记（三）播放流程”

回复匿名取消回复

1、多文件渲染帧率同步

2、多文件渲染进度同步

3、多文件播放区间控制

播放进度

播放流程

1、信号触发

2、更新播放进度

3、触发渲染

4、图形解码（以视频帧为例）

5、渲染图形

总结

2 thoughts on “PAG动效框架源码笔记 （三）播放流程”

回复 匿名 取消回复

2 thoughts on “PAG动效框架源码笔记（三）播放流程”

回复匿名取消回复