Tránh phía CPU chuyển đổi với texImage2D trong Firefox

Question

Bất cứ khi nào tôi sử dụng kết cấu trong webgl Firefox (Firefox Developer Edition 50.0a2 cho OSX, để được excact) kết quả đầu ra những cảnh báo trong giao diện điều khiển:

Error: WebGL: texSubImage2D: Incurred CPU-side conversion, which is very slow
Error: WebGL: texSubImage2D: Incurred CPU pixel conversion, which is very slow
Error: WebGL: texSubImage2D: Chosen format/type incurred an expensive reformat: 0x1908/0x1401

Có cách nào để tránh điều đó? Tôi đã thử tất cả các kết hợp các định dạng và kiểu được phép cho cuộc gọi texImage2D, nhưng tôi nhận được chuyển đổi trên CPU bất kể tôi cố gắng gì.

Dưới đây là một ví dụ nhỏ cho thấy những gì tôi đang làm:

var gl = document.querySelector('canvas').getContext('webgl'); 
 

 
var textureSize = 512; 
 
var canvas = document.createElement('canvas'); 
 
canvas.width = textureSize; 
 
canvas.height = textureSize; 
 

 
var ctx = canvas.getContext('2d'); 
 
ctx.fillStyle = 'rgba(0, 1, 0, 0.0)'; 
 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
 

 
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; 
 
ctx.fillRect(0, 0, 400, 400); 
 

 
var texture = gl.createTexture(); 
 
gl.bindTexture(gl.TEXTURE_2D, texture); 
 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

<canvas />

Answer 1

mẫu của bạn không in cảnh báo trong firefox 48 trên OSX vì vậy tôi chỉ có thể đoán nhưng

Canvas 2D sử dụng alpha cấp tiến. WebGL, theo mặc định, sử dụng alpha chưa được phân giải trước cho họa tiết. Điều đó có nghĩa là để chuyển nội dung của kết cấu canvas, nó phải được chuyển đổi sang alpha được xử lý trước tùy thuộc vào cách nó được triển khai có thể chậm.

Nếu bạn không cần alpha un-premultiplied trong kết cấu của bạn thì bạn có thể nói với WebGL bạn muốn dữ liệu premultiplied khi gọi texImage2D và texSubImage2D bằng cách gọi gl.pixelStorei và nói với nó như thế này

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); 

Trong trường hợp này trình duyệt có thể chỉ sử dụng dữ liệu canvas như vậy. Điều này có thể làm cho cảnh báo biến mất. Lưu ý nếu bạn chỉ tải lên một lần có thể bạn không nên quan tâm. Nếu bạn đang tải lên mỗi khung hình thì có lẽ bạn nên làm như vậy.

Lưu ý rằng hiệu ứng gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); TẤT CẢ các kết quả tải lên kết cấu bao gồm dữ liệu thô. Ví dụ

gl.texImage2D(
    gl.TEXTURE_2D, 0, gl.RGBA, 
    1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, 
    new Uint8Array([128, 192, 255, 128])); 

nếu UNPACK_PREMULTIPLY_ALPHA_WEBGL là true trình duyệt sẽ làm premultiplication trước khi tải lên các kết cấu để [255, 255, 255, 128] sẽ trở thành [64, 96, 128, 128].

UNPACK_FLIP_Y_WEBGL cũng có thể ảnh hưởng đến tốc độ tải lên tùy thuộc vào cách nó được triển khai trong trình duyệt.