I developed a unique setup where two HTML clients are able to communicate with each other using a websocket server. One client utilizes Three.js to draw a 3D model on its canvas and then transmits the webGl canvas context as binary data to the other client through the websocket server.
However, I have encountered an issue with the readPixels() method being too slow for my needs. Ensuring that this streaming process is smooth and seamless is essential.
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);
}
The 'renderer' mentioned in the code is a THREE.WebGLRenderer.
Any insights or recommendations on how to optimize this process?
EDIT:
If you're interested, here is the base code I used for implementing the 3D drawing: link