RUST-TAURI渲染万级三角形性能低下的优化问询

我在Windows10环境下使用rustc 1.80.1（stable-x86_64-pc-windows-msvc）搭配Tauri框架，对比Qt5-C++的GUI网格渲染性能。实现了一个在800×800画布上展示正弦圆波动画的Demo，但渲染12800个三角形的网格时，端到端帧率仅为1.3-1.5 FPS（对应数据量307200字节）。

耗时拆解 #

前端渲染耗时 #

Javascript前端将12800个三角形渲染到画布仅需21ms，日志输出：

loop Time=763 : cycle=882 mesh=741 : render=21 FPS=1.31

对应代码：

while(notdone) {
  if (time >= totalTime) notdone = false;
  sTime = performance.now();
  let cTime = sTime - bTime;

  const meshElements = await invoke('animate_mesh', { width, height, numSeg, time });

  const mTime = performance.now();
  renderMesh(ctx, meshElements);
  const eTime = performance.now();

  const meshTime = mTime - sTime;
  const render = eTime - mTime;
  const loop = eTime - sTime;
  const fps = 1000 / loop;

  // Log FPS to the console
  console.log(`Frame loop=${loop.toFixed(0)} : cycle=${cTime.toFixed(0)}
               mesh=${meshTime.toFixed(0)} :  render=${render.toFixed(0)}
               fNum=${++fc}: FPS=${fps.toFixed(2)}`);

  time += 0.1; // Increment time for the next frame

  bTime = sTime;
}

后端生成耗时 #

Rust后端生成网格数据仅需2-3ms，日志输出：

animate_mesh len:12800 size1:307200 size2:0 time:2.7773ms

对应代码：

fn animate_mesh(width: u32, height: u32, numSeg: u32, time: f64) -> Vec<Element> {
  let start_time = std::time::Instant::now(); // Start the timer
  //log::info!("animate_mesh...");
  let elements = sinusoidal_field(width, height, numSeg, time);
  let size1 = std::mem::size_of_val(&elements)*elements.len();

  let duration = start_time.elapsed(); // Measure the elapsed time
  let fps = 1.0 / duration.as_secs_f64(); // Calculate FPS

  //log::info!("animate_mesh dt:{:?} FPS: {:.2}", duration, fps); // Print FPS to console

  let len = elements.len() as usize;
  let mut elements1: Vec<Element> = Vec::with_capacity(len);
  let size2 = std::mem::size_of_val(&elements1)*elements1.len();

  log::info!( "animate_mesh len:{:?} size1:{:?}  size2:{:?} time:{:?} FPS: {:.2}",
              len, size1, size2, duration, fps ); // Print FPS to console
  elements
}

RPC传输性能瓶颈 #

当后端返回空数据（返回elements1而非elements）时，帧率可达200FPS，日志输出：

loop Time=5 : cycle=4 mesh=5 : render=0 FPS=196.08

这说明当前Tauri RPC的实际传输性能仅为300-400 kbps，远低于空返回时的30-40 mbps水平。

核心问题 #

1. 当前Tauri RPC的配置或使用方式是否存在根本性问题？
2. 如何优化性能，实现处理10-20万元素时达到5-10 FPS？

优化尝试：二进制编解码 #

尝试用二进制缓冲编解码替代默认的serde序列化/反序列化，结果性能反而下降约10%，日志输出：

loop=960 : cycle=973 : mesh=887 : render=73 FPS=1.04

相关代码：
Rust端：

let mut buffer = Vec::new();
buffer.extend_from_slice(&v0.x.to_le_bytes());  // 遍历处理所有坐标与数值

Javascript端：

const dataView = new DataView(buffer);
val = dataView.getFloat64(offset, true);

注：尝试一次性序列化整个向量时，前端解码失败，疑似缓冲区存在无法解析的序列化头。目前已转回优化Qt5图形实现。

内容的提问来源于stack exchange，提问作者sith