Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

WebGL: Ngăn xóa color buffer (preserveDrawingBuffer)

Mặc định WebGL xóa drawing buffer (color, depth, stencil) trước mỗi frame vẽ mới. Để giữ nội dung frame trước (ví dụ vẽ tích lũy, paint app), bật preserveDrawingBuffer: true khi tạo context.

Cách bật

var canvas = document.getElementById('mycanvas');
var gl = canvas.getContext('webgl', { preserveDrawingBuffer: true });

Tác động

  • Mặc định (false): Buffer bị xóa đầu mỗi frame → hiệu năng tốt, tiết kiệm bộ nhớ GPU.
  • Bật (true): Buffer giữ nguyên → có thể vẽ tích lũy, đọc pixel bằng readPixels() sau khi vẽ, chụp ảnh canvas (toDataURL()) đúng nội dung.

Lưu ý

  • Bật preserveDrawingBuffer có thể giảm hiệu năng (GPU phải giữ buffer, không tối ưu được).
  • Chỉ bật khi thực sự cần: paint app, screenshot, đọc pixel sau render.
  • Nếu chỉ cần screenshot, có thể vẽ lên offscreen canvas rồi copy.

Mã trong bài gốc có lỗi: mycanvas.clearColor không tồn tại, đúng là gl.clearColor; mycanvas.clear đúng là gl.clear(gl.COLOR_BUFFER_BIT).