Pag的2D渲染执行流程

Pag的渲染

背景

根据Pag文章里面说的，Pag之前长时间使用的Skia库作为底层渲染引擎。但由于Skia库体积过大，为了保证通用型（比如兼容CPU渲染）做了很多额外的事情。所以Pag的工程师们自己实现了一套2D图形框架替换掉Skia，在github里面在一个叫 TGFX 的目录内。我猜测腾讯的工程师这里是致敬暴雪的bgfx吧，不过这两个库其实有本质区别：bgfx更多是统一底层图形API为目标的，而tgfx是一套用于2D的渲染库，核心目标是替换掉Skia。其目前主要用OpenGL API用GPU实现渲染，默认不支持CPU渲染（也能通过SwiftShader来支持），在绝大部分设备上GPU渲染都会更高效。其API也和Skia的API相似度很高，只是没有SK开头罢了。这些API对于做Android应用开发的同学来说再熟悉不过了。不过我还是整体理一下里面的核心概念吧：

概念	描述
Bitmap	位图，它是像素的集合，是内存里的色彩的表现和承载者，一般用CPU解码图片后就会保存为Bitmap，也可以通过CPU去操作Bitmap的像素。
Texture	纹理，也代表一张图，在OpenGL内使用，可以简单的理解为在显存内的Bitmap，Pag里面的视频/素材 都是通过Texture渲染的。
Surface	表面，其实更像是一个装画的地方。画画我们可以在纸上画，也可以在墙上画。
Paint	画笔，可以自定义各种色彩，样式等，拿起什么样的比就画出什么样的画。
Canvas	画布，可以看做一种渲染过程，比如draw/drawTexture/drawPath等。经历过怎样的渲染过程就会产出什么样的结果。比如我画了一个狮子，再画一个老虎，那最终就会呈现出虎狮

概要

为了了解全貌，我这边把一些重要的概念和整体的Pag模块画了一个图，大家可以看到TGFX在整个libpag内的位置：

接下来我们还是从情景来分析pag渲染的具体流程。

Pag渲染流程分析

之前我们介绍了Pag的基本结构组织，这里来详细讲一下渲染过程，也就是如下两个方法调用：

1. 设置进度
pagPlayer.setProgress(progress);
2. 执行渲染
pagPlayer.flush();

设置进度

这个应该都大致能猜到，肯定核心逻辑就是会去设置到目标合成里通过归一化的percent通知到RootComposition当前有进度更新，需要准备下一次渲染的素材了之类的逻辑。具体代码如下：

void PAGPlayer::setProgress(double percent) {LockGuard autoLock(rootLocker);auto pagComposition = stage->getRootComposition();if (pagComposition == nullptr) {return;}auto realProgress = percent;auto frameRate = pagComposition->frameRateInternal();if (_maxFrameRate < frameRate && _maxFrameRate > 0) {auto duration = pagComposition->durationInternal();auto totalFrames = TimeToFrame(duration, frameRate);auto numFrames = ceilf(totalFrames * _maxFrameRate / frameRate);// 首先计算在maxFrameRate的帧号，之后重新计算progressauto targetFrame = ProgressToFrame(realProgress, numFrames);realProgress = FrameToProgress(targetFrame, numFrames);}pagComposition->setProgressInternal(realProgress);
}

发现这里其实还有一个播放器的最大渲染帧率的转换逻辑，如果合成的帧率比PagPlayer的目标帧率还高，需要根据间隔去做采样为播放器的最大帧率。这个在低端设备上应该会对性能会有一些提升，能够更大程度的利用缓存。核心的pagComposition->setProgressInternal(realProgress);是实现在PagLayer内的，它会通过progress计算出当前应该播放的时间，然后调用gotoTimeAndNotifyChanged方法：

bool PAGLayer::gotoTimeAndNotifyChanged(int64_t targetTime) {auto changed = gotoTime(targetTime);if (changed) {notifyModified();}return changed;
}

顾名思义，先Seek到指定的时间，然后如果发现图层需要更新（核心是一个_stretchedFrameDuration，这个是在AE插件里面保存的值，如果是静态图之类的，会和duration相同，更新progress不需要改变内容），则会调用notifyModified去通知有更新，我们看看里面的实现：

void PAGLayer::notifyModified(bool contentChanged) {if (contentChanged) {contentVersion++;}auto parentLayer = getParentOrOwner();while (parentLayer) {parentLayer->contentVersion++;parentLayer = parentLayer->getParentOrOwner();}
}

可以看到首先把自己的contentVersion做了自增，然后如果有父图层以及父图层更新contentVersion，我们这里本身是根图层更新，不会涉及parent。下一次渲染的时候会对比这个contentVersion和上一次的是否一致，如果一致的话，就不需要重新绘制了，通过这个version来避免额外性能损耗。

渲染过程

渲染过程的流程主要是分为：

1. 组织渲染 – 主要是通过调用Canvas的一些方法，把所有渲染相关的指令组织起来，保存到上下文内
2. 执行渲染 – 把上面组织起来的所有渲染相关的指令flush到GPU内，完成一次渲染
3. 上屏渲染 – 等待渲染操作完成，把渲染完成的Buffer上屏到显示设备上

我这里先画一个简单的类图，把里面涉及到的大致的概念呈现出来，让大家有一个简单的认识。把里面的一些主要概念的关系画出来，也包含了里面的一些功能说明。

组织渲染

Pag执行渲染的方法叫做flush，就是把当前设置的这些配置要给执行了。Flush的实现核心是调用了flushInternal方法：

bool PAGPlayer::flushInternal(BackendSemaphore* signalSemaphore) {...prepareInternal();clock.mark("rendering");if (!pagSurface->draw(renderCache, lastGraphic, signalSemaphore, _autoClear)) {return false;}...return true;
}

我们这里省略了大部分其他代码，直接看了两个最重要的prepareInternal和pagSurface->draw()调用就可以了。
prepareInternal的实现如下：

void PAGPlayer::prepareInternal() {// 为了提升性能，预加载加载视频和图片renderCache->prepareLayers();// 通过contentVersion来判断stage是否有刷新，没有刷新的话就不用去重新渲染了if (contentVersion != stage->getContentVersion()) {// 更新当前的渲染内容版本号contentVersion = stage->getContentVersion();Recorder recorder = {};// 难道在这里就渲染了？并不是哦，只是组织图层到recorder里面stage->draw(&recorder);lastGraphic = recorder.makeGraphic();}if (lastGraphic) {lastGraphic->prepare(renderCache);}
}

可以看到这里在判断需要刷新stage的时候有个stage->draw(&recorder);调用，stage代码如下：

void PAGComposition::draw(Recorder* recorder) {... // 这里省略缓存策略auto preComposeLayer = static_cast<PreComposeLayer*>(layer);auto composition = preComposeLayer->composition;... // 这里省略位图或者视频策略，Clip和判空逻辑auto count = static_cast<int>(layers.size());// 遍历所有的图层，然后挨个调用DrawChildLayerfor (int i = 0; i < count; i++) {auto& childLayer = layers[i];if (!childLayer->layerVisible) {continue;}DrawChildLayer(recorder, childLayer.get());}... // 省略Clip逻辑
}

这个方法核心其实就是遍历所有的childLayer，然后挨个调用DrawChildLayer把每一层存入Recorder内，我们看看DrawChildLayer的代码：

void PAGComposition::DrawChildLayer(Recorder* recorder, PAGLayer* childLayer) {// 图层的特效Modifierauto filterModifier = childLayer->cacheFilters() ? nullptr : FilterModifier::Make(childLayer);// 多点追踪使用的，暂时可以不用理会auto trackMatte = TrackMatteRenderer::Make(childLayer);Transform extraTransform = {ToTGFX(childLayer->layerMatrix), childLayer->layerAlpha};LayerRenderer::DrawLayer(recorder, childLayer->layer,childLayer->contentFrame + childLayer->layer->startTime, filterModifier,trackMatte.get(), childLayer, &extraTransform);
}

看到这个代码有点晕了，开始有TGFX的影子了。这里核心是调用静态函数LayerRenderer::DrawLayer：

void LayerRenderer::DrawLayer(Recorder* recorder, Layer* layer, Frame layerFrame,std::shared_ptr<FilterModifier> filterModifier,TrackMatte* trackMatte, Content* layerContent,Transform* extraTransform) {if (TransformIllegal(extraTransform) || TrackMatteIsEmpty(trackMatte)) {return;}auto contentFrame = layerFrame - layer->startTime;// 这里比较核心返回一个layoutCache，里面有包含各种图层类型的渲染内容缓存的实现。auto layerCache = LayerCache::Get(layer);if (!layerCache->contentVisible(contentFrame)) {return;}auto content = layerContent ? layerContent : layerCache->getContent(contentFrame);... //省略alpha，Blend, 多点追踪逻辑auto saveCount = recorder->getSaveCount();... // 省略其他Transferm，Mask等逻辑// 核心draw逻辑content->draw(recorder);recorder->restoreToCount(saveCount);... // 省略多点追踪逻辑recorder->restore();
}

可以看到这里核心流程就是通过 auto layerCache = LayerCache::Get(layer); 创建/获取了一个LayerCache。然后执行LayerCache的content的draw方法到recorder对象内。看看LayerCache::Get的代码：

LayerCache* LayerCache::Get(Layer* layer) {std::lock_guard<std::mutex> autoLock(layer->locker);if (layer->cache == nullptr) {layer->cache = new LayerCache(layer);}return static_cast<LayerCache*>(layer->cache);
}
LayerCache::LayerCache(Layer* layer) : layer(layer) {switch (layer->type()) {case LayerType::Shape:contentCache = new ShapeContentCache(static_cast<ShapeLayer*>(layer));break;case LayerType::Text:contentCache = new TextContentCache(static_cast<TextLayer*>(layer));break;case LayerType::Solid:contentCache = new SolidContentCache(static_cast<SolidLayer*>(layer));break;case LayerType::Image:contentCache = new ImageContentCache(static_cast<ImageLayer*>(layer));break;case LayerType::PreCompose:contentCache = new PreComposeContentCache(static_cast<PreComposeLayer*>(layer));break;default:contentCache = new EmptyContentCache(layer);break;}contentCache->update();transformCache = new TransformCache(layer);if (!layer->masks.empty()) {maskCache = new MaskCache(layer);}updateStaticTimeRanges();maxScaleFactor = ToTGFX(layer->getMaxScaleFactor());
}

其实核心就是通过ContentCache类型分别创建GraphicContent类型。这个GraphicContent是一个用于具体实现不同类型的图形的结构了。有一点像Android里面的View。接下来调用了核心的content.draw(recorder)把需要渲染的GraphicsContent存入到我们的Recorder内。

void Recorder::drawGraphic(std::shared_ptr<Graphic> graphic) {auto content = Graphic::MakeCompose(std::move(graphic), matrix);if (content == nullptr) {return;}if (layerIndex == 0) {rootContents.push_back(content);} else {layerContents.push_back(content);}
}

从这里也说明了这些函数虽然叫做drawXXX但是在这一步并没有真正的执行任何渲染相关的指令。
接下来回到一开始的prepareInternal，我们已经分析了这里通过这个Recorder保存了渲染需要用的content。prepareInternal最后做的事情就是通过这个recorder再生成一个具体用于渲染的Graphic对象，并且再prepare这个Graphic：

  lastGraphic = recorder.makeGraphic();if (lastGraphic) {lastGraphic->prepare(renderCache);}

这个lastGraphic是一个LayerGraphic，而下一步lastGraphic->prepare才真正的是prepare要渲染的内容的。LayerGraphic是一个树形结构的包装对象，和Android里面的ViewGroup十分类似。其prepare也就是深度遍历这个渲染树，把所有的节点都prepare一遍。

void LayerGraphic::prepare(RenderCache* cache) const {for (auto& content : contents) {content->prepare(cache);}
}

针对不同的Content，会有不同的prepare过程。比如对图片的内容来说，就可以在这里去获取解码好的图片，如果没有解码好需要等待解码完成，视频也需要在这里等这个时间的帧解码好才能去做渲染。

渲染核心过程

组织渲染指令

准备工作看完了，我们这里开始来深入分析一下这个pagSurface->draw。先上代码，这里我加上了注释：

bool PAGSurface::draw(RenderCache* cache, std::shared_ptr<Graphic> graphic,BackendSemaphore* signalSemaphore, bool autoClear) {// 之前提到过，这里的drawable代表的是一个抽象的GPU渲染实例（GPUDrawable/OffscreenDrawable等），并不是做具体绘制的实例。if (!drawable->prepareDevice()) {return false;}// 获取用于渲染的上下文，这里拿到的是GLContextauto context = lockContext();if (!context) {return false;}if (surface != nullptr && autoClear && contentVersion == cache->getContentVersion()) {unlockContext();return false;}// 如果Surface为空，则创建。这里的Surface是指的TGFX内的if (surface == nullptr) {surface = drawable->createSurface(context);}if (surface == nullptr) {unlockContext();return false;}contentVersion = cache->getContentVersion();cache->attachToContext(context);auto canvas = surface->getCanvas();if (autoClear) {canvas->clear();}if (graphic) {// 核心渲染的操作，会生成draw callgraphic->draw(canvas, cache);}// 这里具体去执行draw call，把CPU内组合的渲染操作(Op最终同步到GPU内if (signalSemaphore == nullptr) {// 同步模式下直接flush操作surface->flush();} else {// 这里多了异步渲染模式下的同步锁操作。tgfx::GLSemaphore semaphore = {};surface->flush(&semaphore);signalSemaphore->initGL(semaphore.glSync);}cache->detachFromContext();drawable->setTimeStamp(pagPlayer->getTimeStampInternal());drawable->present(context);unlockContext();return true;
}

上面最核心的是两个调用。一个是生成DrawCall的

  if (graphic) {graphic->draw(canvas, cache);}

最终会把在prepareInternal里面生成的所有Content调用draw来生成这个content当前状态对应的OpenGL渲染指令集。我们这里用绘制一个Shape来举例：

void Shape::draw(tgfx::Canvas* canvas, RenderCache* renderCache) const {tgfx::Paint paint;auto snapshot = renderCache->getSnapshot(this);if (snapshot) {...// 这里省略了使用缓存的逻辑 ...}paint.setShader(shader);canvas->drawPath(path, paint);
}

是不是和我们在Android里面的drawPath很像？这里的canvas的实现是GLCanvas：

void GLCanvas::fillPath(const Path& path, const Paint& paint) {...// 注意这里，创建了一个GLDrawOpauto op = MakeSimplePathOp(path, glPaint, state->matrix);if (op) {draw(std::move(op), std::move(glPaint));return;}...op = GLTriangulatingPathOp::Make(glPaint.color, tempPath, state->clip.getBounds(), localMatrix);if (op) {save();resetMatrix();draw(std::move(op), std::move(glPaint));restore();return;}...drawMask(deviceBounds, mask->makeTexture(getContext()), std::move(glPaint));
}

我们这里省略了很多代码，基本可以看到流程就是创建GLDrawOp，在里面设置一堆参数，最后调用draw或者drawMask（最终也是调用到了draw），我们来看看这个draw方法：

void GLCanvas::draw(std::unique_ptr<GLDrawOp> op, GLPaint paint, bool aa) {if (drawContext == nullptr) {return;}// 设置抗锯齿类型auto aaType = AAType::None;if (static_cast<GLSurface*>(surface)->renderTarget->sampleCount() > 1) {aaType = AAType::MSAA;} else if (aa && !IsPixelAligned(op->bounds())) {aaType = AAType::Coverage;} else {const auto& matrix = state->matrix;auto rotation = std::round(RadiansToDegrees(atan2f(matrix.getSkewX(), matrix.getScaleX())));if (static_cast<int>(rotation) % 90 != 0) {aaType = AAType::Coverage;}}// 设置Maskauto masks = std::move(paint.coverageFragmentProcessors);Rect scissorRect = Rect::MakeEmpty();auto clipMask = getClipMask(op->bounds(), &scissorRect);if (clipMask) {masks.push_back(std::move(clipMask));}// 设置渲染区域op->setScissorRect(scissorRect);// 设置Blend图层叠加模式unsigned first;unsigned second;if (BlendAsCoeff(state->blendMode, &first, &second)) {op->setBlendFactors(std::make_pair(first, second));} else {op->setXferProcessor(PorterDuffXferProcessor::Make(state->blendMode));op->setRequireDstTexture(!GLCaps::Get(getContext())->frameBufferFetchSupport);}op->setAA(aaType);// 配置颜色op->setColors(std::move(paint.colorFragmentProcessors));op->setMasks(std::move(masks));// 添加到渲染队列drawContext->addOp(std::move(op));
}

基本的核心配置我已经在代码里给了注释。这个地方特别重要，属于渲染的核心流程，所以代码我没有省略。
这里设置了一些Paint的通用配置，然后加入到绘制的上下文drawContext->addOp(std::move(op));

void SurfaceDrawContext::addOp(std::unique_ptr<Op> op) {getOpsTask()->addOp(std::move(op));
}

很简单，其实就是把当前这一个Content的Op添加到opsTask列表里面了。说明这里其实还没有具体去执行这些OpenGL指令。值得注意的是这个getOpsTask里面有一个很重要的操作：

OpsTask* SurfaceDrawContext::getOpsTask() {if (opsTask == nullptr || opsTask->isClosed()) {replaceOpsTask();}return opsTask.get();
}void SurfaceDrawContext::replaceOpsTask() {opsTask = surface->getContext()->drawingManager()->newOpsTask(surface);
}

这个opsTask是通过replaceOpsTask里面的surface->getContext()->drawingManager()->newOpsTask(surface);创建的。这样就会被DrawingManager所管理起来，之后再被统一执行。

执行渲染

上面基本就把准备渲染的opTask准备好了。其实渲染的准备工作是最重要的，执行渲染只是把前面存放的即将用于渲染的指令具体去执行罢了。

if (signalSemaphore == nullptr) {surface->flush();} else {tgfx::GLSemaphore semaphore = {};surface->flush(&semaphore);signalSemaphore->initGL(semaphore.glSync);}

很明显这里面的这个Surface->flush就是渲染具体执行的地方了。里面的代码很简单：

bool Surface::flush(Semaphore* signalSemaphore) {// 解析渲染的目标。因为Pag支持设置渲染到纹理上，不一定都是上屏，所以这里会手动插入一个配置Target的TaskrenderTarget->getContext()->drawingManager()->newTextureResolveRenderTask(this);// 这里把之前保存的opTask都执行了return renderTarget->getContext()->drawingManager()->flush(signalSemaphore);
}

我们看看这里核心调用的DrawingManager->flush具体是做哪些事：

bool DrawingManager::flush(Semaphore* signalSemaphore) {auto* gpu = context->gpu();closeAllTasks();activeOpsTask = nullptr;for (auto& task : tasks) {task->execute(gpu);}removeAllTasks();return context->caps()->semaphoreSupport && gpu->insertSemaphore(signalSemaphore);
}

可以看到这里的核心就是会把之前所有的GLCanvas执行的opTask都执行一遍，然后再清空这个tasks列表。这样就完成了渲染指令的具体执行了。

上屏渲染

在PagSurface的draw最后几段代码如下：

  drawable->setTimeStamp(pagPlayer->getTimeStampInternal());drawable->present(context);

一开始的时候提到过，Pag里面的Drawable其实是一个渲染设备的封装。这个present在最后会调用到OpenGL的swapbuffer函数，将前面的所有操作交换缓冲区实现上屏到具体的渲染Target。这里我们就不具体去分析了。

总结

今天这个文章里面的代码比较多了，有一点乱，而且这里只是一次渲染，还没有讲到Pag如何管理渲染的缓存，实现上一期讲的纵向分层，水平分块把性能提升的。如果要深入理解建议自己去Debug到Pag的流程里面才能真正的了解内部渲染的执行过程，能够学到更多的东西。