Alternative Möglichkeit, Webgl-Kontext als Binärdaten zu senden OHNE gl.readPixels zu verwenden

Ich habe zwei HTML-Clients erstellt, die über einen Websocket-Server miteinander kommunizieren. Ein Client zeichnet mithilfe von Three.js ein 3D-Modell auf der Arbeitsfläche und sendet den Canvas-Kontext, also webGl, als Binärdaten an den anderen Client, den der Websocket-Server für möglich hält.Alternative Möglichkeit, Webgl-Kontext als Binärdaten zu senden OHNE gl.readPixels zu verwenden

Das Problem ist, dass die readPixels() -Methode zu langsam ist. Ich muss diesen Strom so flüssig wie möglich machen.

function animate() { 

    requestAnimationFrame(animate); 

    render(); 

    var ctx = renderer.getContext();   

    var byteArray = new Uint8Array(1280 * 720 * 4); 

    ctx.readPixels(0,0,1280, 720, ctx.RGBA, ctx.UNSIGNED_BYTE, byteArray); 

    socket.send(byteArray.buffer); 

}

Renderer ist ein THREE.WebGLRenderer.

Irgendwelche Vorschläge?

EDIT:

Hier ist der Code, den ich als Grundlage für die 3D-Zeichnen verwendet link

Quelle

2016-05-21 Patricia

ReadPixels ist zu langsam im Vergleich zu was ?? Datenübertragung muss viel langsamer sein, nicht wahr? –

Ist zu langsam im Vergleich zur Verwendung von context.getImageData(). Data, aber leider funktioniert es nur mit 2D-Kontext. – Patricia

Einige nützliche Informationen https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#General_performance_tips – rafaelcastrocouto

Sie versuchen canvas.toDataURL("image/jpg"); mit könnte (oder png), um die Bilddaten packen, das ist ein zuverlässiger Weg, um das Bild des Erhaltens Daten aus einem WebGL-Kontext. Ich bin mir nicht so sicher, wie die Leistung mit readPixels verglichen wird, ich habe es nur für Screenshots verwendet.

Quelle

2016-05-23 07:01:30

Wirklich interessant diese Methode und ihre Art schnell. Ich werde versuchen, die DataURL über den Socket als Zeichenfolgendatei zu senden und auf dem anderen Client-Zeichenbereich zu zeichnen. – Patricia

Es hat super schnell geklappt! Vielen Dank! Die einzige Sache ist, dass die Zeichenfläche, die die Daten-URL empfängt, flackert. Ich lege die 'canvas.toDataURL (" image/jpg ");' -Methode unter die 'renderer.render (Szene, Kamera);', irgendeine Idee, wie man dieses Flackern stoppt? – Patricia

Alternative Möglichkeit, Webgl-Kontext als Binärdaten zu senden OHNE gl.readPixels zu verwenden

Antwort

Verwandte Themen