Un IMagedata CanvasPixElarray è direttamente disponibile per un contesto WebGL di Canvas?

Question

Sto usando tre.js per disegnare modelli 3D su un rendering di tela WebGL al di sopra di semplici elementi DOM e devo effettuare il rilevamento delle collisioni tra di loro. Il mio metodo attualmente funzionante è usare il rendering.domelement.todataurl (), caricarlo come un oggetto IMagedata, quindi disegnalo su un contesto di tela 2D separato, quindi tira l'array di pixel getImageData () e itera Questa fantastica funzione di collisione pixel.

Questo è incredibilmente lento e tira il mio frame rate verso il basso verso un ~ 5-8 fps quasi ingiocabile. Senza eseguire questo rilevamento di successo ottengo circa 40-50 fps.

La mia ipotesi migliore è che il rallentamento sia incredibilmente ingombrante todataurl ()-> caricano immagine-> drawImage ()-> getImageagatata ().

La mia domanda diventa: Esiste un modo migliore per accedere ai dati pixel 2D appiattiti disponibili sulla tela WebGL? O forse un metodo migliore per estrapolare le coordinate dei miei oggetti 3D senza parallasse? Onestamente, qualsiasi modo per ottenere una sorta di rilevamento delle collisioni più velocemente di quanto sto facendo attualmente sarà immensamente utile.

MODIFICARE: WebGL Context.Readpixels () funziona grande Per me, ed è super veloce rispetto al mio precedente Kludge. Anche se va notato che l'array di dati è rispecchiata dall'alto verso il basso rispetto a un normale array di dati pixel di immagini. Ho semplicemente capovolto la mia routine di collisione e il controllo del valore e ho fatto funzionare questo, anche se gli altri potrebbero essere inciampato in modi più difficili. Buona fortuna!

Answer 1

Puoi usare gl.readPixels:

// Render your scene first then...
var left = 0;
var top = 0;
var width = canvas.width;
var height = canvas.height;
var pixelData = new Uint8Array(width * height * 4);
gl.readPixels(left, top, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);

Pixeldata ora contiene i dati pixel della scena come bytes non firmati (0-255) disposti come [R, G, B, A, R, G, B, A...] Dovrebbe essere gli stessi dati di getImageData Ma a un costo molto più basso.

[MODIFICARE:]

Ho dimenticato di menzionare che se hai intenzione di farlo, ti consigliamo di creare il tuo contesto webgl con il preserveDrawingBuffer Opzione, così:

var gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});

Ciò impedisce al meccanismo interno di WebGL di cancellare il buffer prima di arrivarci (il che porterebbe a leggere un sacco di pixel vuoti). Abilitare questa opzione ha il potenziale per rallentare il rendering, ma dovrebbe comunque essere un carico più veloce di 5-8 fps! :)

Answer 2

 renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer:true });



 var gl = renderer.getContext()
 var buf = new Uint8Array(200 * 200 * 4);
 gl.readPixels(0, 0, 200, 200, gl.RGBA, gl.UNSIGNED_BYTE, buf);


console.log(buf);

Funziona bene.