Impeller 架构解析：从 Entity Pass 到 Command Buffer 的光栅化流水线

大家好，今天我们来深入探讨 Flutter 的下一代渲染引擎 Impeller 的核心架构，尤其是从 Entity Pass 到最终 Command Buffer 的光栅化流水线。Impeller 的设计目标是解决 Skia 在 Flutter 场景下的性能瓶颈，提供更可预测、更高效的渲染体验。我们将从 Impeller 的基本概念入手，逐步分析光栅化流水线的各个阶段，并结合代码示例来加深理解。

1. Impeller 架构概览

Impeller 采用了一种预编译着色器、基于场景图、使用 Vulkan/Metal/OpenGL ES 作为后端 API 的架构。其核心组件包括：

Scene Graph: 场景图是 Impeller 中组织渲染对象的一种数据结构。它是一个树状结构，每个节点代表一个可渲染的 Entity。
Entity: Entity 是场景图中的基本渲染单元，包含几何信息、材质信息、变换信息等。
Content: Content 定义了如何渲染一个 Entity。它可以是简单的颜色填充、图片绘制、文本渲染等。
Render Pass: Render Pass 定义了一系列渲染操作，例如清除屏幕、渲染 Entity、进行后处理等。
Command Buffer: Command Buffer 是一系列 GPU 指令的集合。 Impeller 将 Render Pass 转换为 Command Buffer，然后提交给 GPU 执行。
AiksContext: AiksContext 是 Impeller 的上下文对象，负责管理资源、协调渲染流程。

2. Entity Pass 的创建和遍历

Entity Pass 是 Impeller 渲染流程的起点。它负责遍历场景图，并将每个 Entity 转换为相应的渲染指令。

// 简化的 EntityPass 创建流程
std::unique_ptr<RenderPass> CreateRenderPass(const Scene& scene,
                                                const RenderTarget& render_target,
                                                const AiksContext& aiks_context) {
  auto render_pass = std::make_unique<RenderPass>(render_target);

  // 遍历场景图
  scene.VisitAll(
      [&](const Entity& entity) {
        // 根据 Entity 的 Content 类型，创建相应的渲染指令
        if (entity.GetContent()->GetType() == ContentType::kColor) {
          // 处理颜色填充
          auto color_content = static_cast<const ColorContent*>(entity.GetContent());
          AddColorFillCommands(render_pass.get(), entity, *color_content, aiks_context);
        } else if (entity.GetContent()->GetType() == ContentType::kImage) {
          // 处理图片绘制
          auto image_content = static_cast<const ImageContent*>(entity.GetContent());
          AddImageDrawCommands(render_pass.get(), entity, *image_content, aiks_context);
        }
        // ... 其他 Content 类型的处理
      });

  return render_pass;
}

上述代码展示了一个简化的 CreateRenderPass 函数，它接收一个 Scene 对象、一个 RenderTarget 对象和一个 AiksContext 对象作为参数。函数首先创建一个 RenderPass 对象，然后遍历 Scene 对象中的所有 Entity。对于每个 Entity，函数根据其 Content 类型，调用相应的函数来添加渲染指令。例如，如果 Content 类型为 kColor，则调用 AddColorFillCommands 函数来添加颜色填充指令；如果 Content 类型为 kImage，则调用 AddImageDrawCommands 函数来添加图片绘制指令。

3. Content 类型的处理和几何数据的准备

不同的 Content 类型需要不同的处理方式。例如，颜色填充需要创建一个简单的矩形几何体，而图片绘制需要加载图片数据并创建一个纹理对象。

// 颜色填充指令的添加
void AddColorFillCommands(RenderPass* render_pass,
                          const Entity& entity,
                          const ColorContent& color_content,
                          const AiksContext& aiks_context) {
  // 创建矩形几何体
  auto geometry = CreateRectangleGeometry(entity.GetBounds());

  // 创建材质
  auto material = aiks_context.GetMaterial(MaterialType::kColor);

  // 创建渲染指令
  auto command = std::make_unique<DrawCommand>();
  command->geometry = geometry;
  command->material = material;
  command->transform = entity.GetTransform();
  command->color = color_content.GetColor();

  // 添加渲染指令到 RenderPass
  render_pass->AddCommand(std::move(command));
}

// 图片绘制指令的添加
void AddImageDrawCommands(RenderPass* render_pass,
                         const Entity& entity,
                         const ImageContent& image_content,
                         const AiksContext& aiks_context) {
  // 加载图片数据
  auto image = image_content.GetImage();
  if (!image) {
    return;
  }

  // 创建纹理对象
  auto texture = aiks_context.GetTexture(image);

  // 创建矩形几何体
  auto geometry = CreateRectangleGeometry(entity.GetBounds());

  // 创建材质
  auto material = aiks_context.GetMaterial(MaterialType::kImage);

  // 创建渲染指令
  auto command = std::make_unique<DrawCommand>();
  command->geometry = geometry;
  command->material = material;
  command->transform = entity.GetTransform();
  command->texture = texture;

  // 添加渲染指令到 RenderPass
  render_pass->AddCommand(std::move(command));
}

在 AddColorFillCommands 函数中，我们首先使用 CreateRectangleGeometry 函数创建一个矩形几何体，该矩形几何体与 Entity 的 bounds 相对应。然后，我们从 AiksContext 中获取一个颜色材质。接着，我们创建一个 DrawCommand 对象，并将几何体、材质、变换和颜色信息设置到该对象中。最后，我们将 DrawCommand 对象添加到 RenderPass 中。

在 AddImageDrawCommands 函数中，我们首先加载图片数据并创建一个纹理对象。然后，我们使用 CreateRectangleGeometry 函数创建一个矩形几何体，该矩形几何体与 Entity 的 bounds 相对应。接着，我们从 AiksContext 中获取一个图片材质。最后，我们创建一个 DrawCommand 对象，并将几何体、材质、变换和纹理信息设置到该对象中。最后，我们将 DrawCommand 对象添加到 RenderPass 中。

4. DrawCommand 的结构和作用

DrawCommand 是 Impeller 中描述一个渲染操作的数据结构。它包含以下信息：

geometry: 几何体数据，例如顶点坐标、索引等。
material: 材质信息，例如着色器程序、纹理对象、颜色等。
transform: 变换矩阵，用于将几何体从模型空间转换到世界空间。
color: 颜色值，用于颜色填充或纹理混合。
texture: 纹理对象，用于图片绘制或纹理采样。

DrawCommand 的作用是将渲染所需的所有信息打包在一起，方便后续的光栅化流程使用。

5. 光栅化流水线：从 DrawCommand 到 Command Buffer

光栅化流水线是将 DrawCommand 转换为 GPU 指令的过程。它通常包括以下几个阶段：

顶点着色 (Vertex Shading): 顶点着色器负责处理几何体的顶点数据，例如进行坐标变换、计算光照等。
图元装配 (Primitive Assembly): 图元装配器将顶点数据组合成图元，例如三角形、线段等。
光栅化 (Rasterization): 光栅化器将图元转换为像素片段。
片段着色 (Fragment Shading): 片段着色器负责处理像素片段，例如进行纹理采样、计算颜色等。
像素操作 (Pixel Operations): 像素操作器负责将像素片段写入帧缓冲区，例如进行深度测试、混合等。

Impeller 使用预编译着色器的方式来优化光栅化流水线。这意味着着色器程序在编译时就已经确定，避免了运行时的编译开销。

// 简化的 Command Buffer 生成流程
void RenderPass::Render(const AiksContext& aiks_context,
                        CommandBuffer& command_buffer) const {
  for (const auto& command : commands_) {
    // 获取着色器程序
    auto shader_program = command->material->GetShaderProgram();

    // 设置顶点数据
    command_buffer.SetVertexBuffer(command->geometry->GetVertexBuffer());
    command_buffer.SetIndexBuffer(command->geometry->GetIndexBuffer());

    // 设置 Uniform 变量 (例如：变换矩阵，颜色值)
    command_buffer.SetUniform("u_transform", command->transform);
    if (command->color.has_value()) {
      command_buffer.SetUniform("u_color", command->color.value());
    }
    if (command->texture.has_value()) {
      command_buffer.SetTexture("u_texture", command->texture.value());
    }

    // 提交绘制指令
    command_buffer.DrawIndexed(command->geometry->GetIndexCount());
  }
}

上述代码展示了一个简化的 Render 函数，它负责将 RenderPass 中的 DrawCommand 转换为 CommandBuffer。对于每个 DrawCommand，函数首先获取其对应的着色器程序。然后，函数将几何体的顶点数据和索引数据设置到 CommandBuffer 中。接着，函数将 Uniform 变量（例如变换矩阵和颜色值）设置到 CommandBuffer 中。最后，函数提交绘制指令到 CommandBuffer。

6. Material 和 Shader 的选择

Material 对象封装了渲染所需的材质信息，包括着色器程序、纹理对象、颜色等。 Impeller 使用基于 Material 的渲染策略，根据不同的 Material 类型选择不同的着色器程序。

// 简化的 Material 获取流程
std::shared_ptr<Material> AiksContext::GetMaterial(MaterialType type) {
  if (materials_.count(type) > 0) {
    return materials_[type];
  }

  std::shared_ptr<Material> material;
  switch (type) {
    case MaterialType::kColor:
      material = std::make_shared<ColorMaterial>(shader_library_->GetShader("color.frag"));
      break;
    case MaterialType::kImage:
      material = std::make_shared<ImageMaterial>(shader_library_->GetShader("image.frag"));
      break;
    // ... 其他 Material 类型的处理
    default:
      return nullptr;
  }

  materials_[type] = material;
  return material;
}

在 GetMaterial 函数中，我们首先检查是否已经存在指定类型的 Material。如果存在，则直接返回该 Material。否则，我们创建一个新的 Material，并将其添加到 materials_ 缓存中。例如，如果 Material 类型为 kColor，则创建一个 ColorMaterial 对象，并使用 shader_library_ 获取颜色着色器程序。如果 Material 类型为 kImage，则创建一个 ImageMaterial 对象，并使用 shader_library_ 获取图片着色器程序。

7. Command Buffer 的提交和执行

CommandBuffer 是一系列 GPU 指令的集合。 Impeller 将 RenderPass 转换为 CommandBuffer 后，会将 CommandBuffer 提交给 GPU 执行。

// 简化的 Command Buffer 提交流程
void RenderTarget::Render(const Scene& scene, const AiksContext& aiks_context) {
  // 创建 RenderPass
  auto render_pass = CreateRenderPass(scene, *this, aiks_context);

  // 创建 CommandBuffer
  auto command_buffer = device_->CreateCommandBuffer();

  // 将 RenderPass 转换为 CommandBuffer
  render_pass->Render(aiks_context, *command_buffer);

  // 提交 CommandBuffer
  command_buffer->Commit();
  command_buffer->Present();
}

在 Render 函数中，我们首先创建一个 RenderPass 对象。然后，我们创建一个 CommandBuffer 对象。接着，我们将 RenderPass 对象转换为 CommandBuffer 对象。最后，我们将 CommandBuffer 对象提交给 GPU 执行。 Commit 函数将 CommandBuffer 提交到渲染队列。 Present 函数将渲染结果显示到屏幕上。

8. 预编译着色器的优势

Impeller 采用预编译着色器的策略，这意味着着色器程序在编译时就已经确定，避免了运行时的编译开销。这可以显著提高渲染性能，并减少 CPU 的负载。预编译着色器还可以帮助 Impeller 在不同的 GPU 平台上实现更好的兼容性。

9. 多线程渲染

Impeller 支持多线程渲染，可以将渲染任务分配到多个线程上执行。这可以进一步提高渲染性能，并减少主线程的负载。 Impeller 使用任务队列和线程池来实现多线程渲染。

表格总结：Impeller 光栅化流水线的主要阶段

阶段	描述	输入	输出
Entity Pass	遍历场景图，将每个 Entity 转换为相应的 DrawCommand。	Scene, RenderTarget, AiksContext	包含 DrawCommand 的 RenderPass
顶点着色	处理几何体的顶点数据，例如进行坐标变换、计算光照等。	顶点数据, 变换矩阵, 光照信息	变换后的顶点数据, 法线, 纹理坐标等
图元装配	将顶点数据组合成图元，例如三角形、线段等。	变换后的顶点数据	图元 (三角形, 线段等)
光栅化	将图元转换为像素片段。	图元	像素片段
片段着色	处理像素片段，例如进行纹理采样、计算颜色等。	像素片段, 纹理, 颜色	颜色值
像素操作	将像素片段写入帧缓冲区，例如进行深度测试、混合等。	颜色值, 深度值	帧缓冲区中的像素值
Command Buffer	将所有渲染指令转换为 GPU 可以执行的指令序列，并提交给 GPU 执行。	DrawCommand, Uniforms, Textures	GPU 指令序列

10. 性能优化策略

Impeller 采用了多种性能优化策略，包括：

预编译着色器: 避免运行时的编译开销。
基于 Material 的渲染: 减少着色器切换的次数。
多线程渲染: 将渲染任务分配到多个线程上执行。
几何体缓存: 避免重复创建几何体对象。
纹理缓存: 避免重复加载纹理数据。
指令合并: 将多个小的渲染指令合并成一个大的渲染指令，减少 GPU 的调用次数。

简化流程，关注关键点

Impeller 的光栅化流水线是一个复杂的过程，涉及多个阶段和组件。通过深入了解其架构，我们可以更好地理解 Flutter 的渲染原理，并为性能优化提供指导。今天我们重点讨论了从 Entity Pass 到 Command Buffer 的主要流程，涵盖了 Entity 的处理、几何数据的准备、光栅化流水线的阶段以及性能优化的策略。希望这次分享能够帮助大家更深入地理解 Impeller 的核心工作原理。

关键数据结构的职责

我们介绍了 Impeller 中几个关键的数据结构，例如 Entity、Content、RenderPass、DrawCommand 和 CommandBuffer，它们分别负责描述渲染对象、定义渲染内容、组织渲染指令、封装渲染信息和存储 GPU 指令。

预编译着色器的重要性

预编译着色器是 Impeller 的一项重要特性，它可以显著提高渲染性能并减少 CPU 负载。

Impeller 架构解析：从 Entity Pass 到 Command Buffer 的光栅化流水线

发表回复 取消回复

发表回复取消回复