什么是离屏渲染

离屏渲染（off-screen rendering）是指把渲染结果输出到屏幕外的缓冲区（纹理、帧缓冲、离屏 canvas 等），然后再把该结果用于合成、后处理或最终显示。常用于避免闪烁、并行渲染、后处理特效、生成缩略图或在后台线程绘制。

要点

  • 常见实现：Web：OffscreenCanvas、WebGL FBO（framebuffer）/render-to-texture；桌面：OpenGL FBO、DirectX 渲染目标、Vulkan 图像。
  • 优点：消除闪烁、支持异步/Worker 渲染、方便后处理（模糊、色调映射）、可重用纹理减少重复计算。
  • 缺点：额外内存和拷贝、需要同步（可能阻塞）、管理生命周期复杂。
  • 最佳实践：重用缓冲区/纹理、尽量在 Worker 中使用 OffscreenCanvas 做计算密集型 2D 渲染、选择合适像素格式、避免频繁大小变更。

简短示例（使用 OffscreenCanvas 在 Worker 中离屏绘制并传回主线程显示）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// main.js
const canvas = document.querySelector('#canvas');
const off = canvas.transferControlToOffscreen();
const worker = new Worker('worker.js');
worker.postMessage({ canvas: off, width: 800, height: 600 }, [off]);

// worker.js
self.onmessage = (e) => {
  const { canvas, width, height } = e.data;
  canvas.width = width; canvas.height = height;
  const ctx = canvas.getContext('2d');
  // 离屏绘制
  ctx.fillStyle = '#012';
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = '#fff';
  ctx.font = '24px sans-serif';
  ctx.fillText('离屏渲染示例', 20, 40);
  // 如果需要把结果传回主线程为 ImageBitmap:
  canvas.convertToBlob().then(blob => {
    return createImageBitmap(blob);
  }).then(bitmap => {
    self.postMessage({ bitmap }, [bitmap]);
  });
};

// 在 main.js 中接收并绘制 bitmap（可选）
worker.onmessage = (e) => {
  const bitmap = e.data.bitmap;
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.drawImage(bitmap, 0, 0);
};

简要说明：主线程把 canvas 转为 OffscreenCanvas 传给 Worker，Worker 在离屏 canvas 上绘制并可把结果以 ImageBitmap/Blob 等形式回传或直接让浏览器合成显示。