RenderCraft

Flutter 高性能渲染引擎实验项目，探索多层渲染策略和帧率优化

项目简介

这是一个探索 Flutter 渲染性能极限的技术实验项目，专注于：

• 多层渲染策略的实现和切换
• 大数据量场景下的帧率优化
• GPU 计算和原生加速的集成

项目包含两个简单的 demo（K 线图和折线图）用于演示不同数据规模下的渲染性能。

核心特性

三层渲染策略

根据数据量自动选择最优渲染方案：

数据规模	渲染方式	说明
< 5K 点	Canvas Path	CPU 渲染，适合小数据
5K - 100K 点	Fragment Shader	GPU 加速，中等规模
> 100K 点	Native Texture	原生计算 + 纹理传输

性能优化技术

数据处理

• 智能分箱算法（保留 min/max/avg）
• Isolate 后台计算
• FFI 零拷贝数据传输

GPU 加速

• GLSL Fragment Shader（Flutter 层）
• Metal Compute Shader（iOS）
• NEON SIMD（Android）

渲染优化

• 自定义 RenderBox 替代 CustomPainter
• 增量渲染（markNeedsPaint）
• 帧率监测和性能分析

快速开始

# 安装依赖
flutter pub get

# iOS 依赖（可选）
cd ios && pod install && cd ..

# 运行
flutter run

技术实现

1. 自定义 RenderBox

使用 Flutter 的 RenderObject API 直接操作渲染管线：

class ChartRenderBox extends RenderBox {
  @override
  void paint(PaintingContext context, Offset offset) {
    // 直接绘制，避免 CustomPainter 的额外开销
  }

  void updateData(List<double> newData) {
    markNeedsPaint(); // 增量渲染，无需 layout
  }
}

2. Fragment Shader GPU 加速

// shaders/line_chart.frag
void main() {
  vec2 uv = FlutterFragCoord().xy / iResolution.xy;
  // GPU 并行计算每个像素
  fragColor = computePixelColor(uv);
}

3. 数据分箱算法

将百万级数据降维到屏幕像素级别：

// 示例：1M 数据点 → 1000 bins
final bins = await compute(binDataInIsolate, {
  'data': millionPoints,
  'binCount': screenWidth,
});

4. FFI 零拷贝传输

// 避免 Platform Channel 的序列化开销
final Pointer<Float> ptr = calloc<Float>(count);
nativeProcessData(ptr, count);

项目结构

lib/
├── chart/              # 折线图 demo
├── kline/              # K 线图 demo
├── platform/           # 原生平台桥接
└── core/               # 通用工具

ios/Runner/Metal/       # iOS Metal 渲染实现
android/app/cpp/        # Android NEON SIMD 实现
native/                 # FFI 共享代码
shaders/                # GLSL Shader 源码

性能参考

测试环境：iPhone 14 Pro, Flutter 3.35

数据量	帧率	渲染耗时
10K	60 fps	~16ms
100K	60 fps	~18ms
1M	~58 fps	~25ms

以上数据仅供参考，实际性能取决于设备和数据特征

技术栈

• 框架: Flutter 3.35+ / Dart 3.9+
• 状态管理: Riverpod
• 渲染: RenderObject + Fragment Shader
• 原生加速: Metal (iOS) / NEON SIMD (Android)
• 跨平台调用: FFI + Pigeon

许可证

MIT License

作者

levy