WebGL截图需通过readPixels读取帧缓冲区像素，经Y轴翻转后写入2D Canvas，再用toDataURL或toBlob导出；关键点是确保渲染完成、正确设置alpha和跨域属性，并匹配canvas实际尺寸。
WebGL 本身不提供直接截图或导出图片的 API，但可以通过读取帧缓冲区（framebuffer）像素数据，再用 Canvas 2D 的 toDataURL() 或 toBlob() 方法生成图片。
1. 确保 WebGL 渲染完成并同步读取
WebGL 是异步渲染，必须等绘制结束才能安全读取像素。常用做法是调用 gl.flush() 或 gl.finish()（后者会阻塞直到 GPU 完成，适合调试；生产环境推荐用 gl.flush() + 小延时或监听渲染完成逻辑）。
-
gl.finish()更可靠但影响性能，适合截图场景 - 避免在
requestAnimationFrame中立即读取，最好加微任务延迟（如setTimeout(fn, 0)）确保 GPU 提交完成
2. 从默认帧缓冲区读取像素数据
使用 gl.readPixels() 获取 RGBA 像素数组（注意：Y 轴翻转，WebGL 原点在左下，Canvas 在左上）：
- 参数顺序：
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelArray) - 创建足够大的
Uint8Array：长度为width * height * 4 - 读取后需垂直翻转数据（逐行交换第 0 行与最后一行等），或用
ctx.scale(1, -1)+ctx.translate(0, -height)绘制时翻转
3. 将像素写入 2D Canvas 并导出
新建一个 <canvas>，获取其 2D 上下文，用 ctx.putImageData() 写入翻转后的像素，再调用导出方法：
立即学习“Java免费学习笔记（深入）”；
-
canvas.toDataURL('image/png')→ 返回 base64 字符串，可设超链接下载 -
canvas.toBlob(callback, 'image/jpeg', 0.9)→ 更省内存，适合大图 - 注意 canvas 尺寸要和 WebGL 画布一致（非 CSS 显示尺寸，而是
canvas.width/canvas.height）
4. 处理常见问题
导出失败常因跨域纹理、未启用 Alpha 或读取区域越界：
- 若用了跨域图片纹理，需设置
img.crossOrigin = 'anonymous'，且服务端支持 CORS - 确保 WebGL 上下文创建时启用了 alpha：
{ alpha: true }（否则readPixels可能全黑） -
readPixels的 x/y/width/height 必须在画布范围内，超出会报错或返回空数据 - 部分浏览器对大图（如 >4096×4096）导出有限制，可分块读取或缩放后再导出
不复杂但容易忽略细节，关键是同步时机、Y 轴翻转和 canvas 像素匹配。
