Loại bỏ "Rats! WebGL đã đạt được một cú đánh." thanh lỗi trong Google Chrome

Question

Gần đây tôi đã bắt đầu sử dụng WebGL trên trang web mà tôi đang phát triển. Nó đang được sử dụng như một tính năng nâng cao và trang web rơi trở lại kết xuất canvas nếu WebGL không được hỗ trợ hoặc có lỗi.

Thật không may khi ngoại lệ WebGL xảy ra trong Google Chrome, thanh thông báo lỗi xuất hiện. Thanh này không biến mất cho đến khi người dùng tương tác với nó. Nếu họ tải lại hoặc điều hướng đến một trang khác, thông báo sẽ xuất hiện lại vào lần tiếp theo trang web cố gắng sử dụng WebGL.

Trong trường hợp trang web của tôi, điều này có nghĩa rằng các thông báo lỗi WebGL sẽ không bao giờ đi xa vì mỗi trang cố gắng sử dụng WebGL. Sau khi xảy ra lỗi, Chrome sẽ không sử dụng lại WebGL trên cùng một trang web cho đến khi người dùng thông báo cho Tải lại, vì vậy thông báo lỗi liên tục không thực sự chỉ ra lỗi liên tục, chỉ liên tục cố gắng sử dụng WebGL.

---

Khi một lỗi WebGL xảy ra, hộp thoại này có thể được sao chép trên trang web đó chỉ bằng cách chạy:

document.createElement('canvas').getContext('experimental-webgl'); 

này không gây bất kỳ ngoại lệ, và phương pháp .onerror của tôi trên các yếu tố vải không gọi là.

Tôi chưa thể điều tra quá sâu vì tôi không thể tái tạo một lỗi WebGL một cách đáng tin cậy. (Thậm chí nếu tôi có thể sinh sản một trên máy tính của tôi, nó có thể không thể lặp lại vào người khác.)

---

Hành vi này sẽ là hợp lý cho một trang web dựa trên WebGL, nhưng tôi không, vì vậy thông điệp chỉ là mất tập trung và gây nhầm lẫn cho người dùng.

Có cách nào để chặn thông báo lỗi này không? Tôi không ngại quay lại trạng thái Bỏ qua vì đã tắt WebGL khi xảy ra lỗi.

Answer 1

Nếu bạn muốn bỏ qua ngoại lệ, thì sau đây là đủ.

canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); Stopdrawing(); }, false); 

Nếu bạn muốn thử lại tải bối cảnh webgl

canvas.addEventListener("webglcontextrestored", function (event) {initializeResources(); }, false); 

EDIT:

Nếu bạn muốn kiểm tra nếu bối cảnh được xử lý một cách chính xác sau đó tận dụng các phần mở rộng WEBGL_lose_context trên webgl bối cảnh.

gl.getExtension("WEBGL_lose_context").loseContext() 
gl.getExtension("WEBGL_lose_context").restoreContext() 

Answer 2

Cho tôi lứa tuổi để giải quyết vấn đề này - có vẻ như là chuột! lỗi xảy ra khi thay đổi kích thước khung hình có ngữ cảnh 3D dựa trên nó khi sử dụng Chrome. Giải pháp là bắt kích thước thay đổi thông qua một người nghe và tạo lại khung và bối cảnh tại thời điểm đó. Hy vọng rằng sẽ giúp.