canvas - Javascript: toDataURL really slow, how to speed up? -
i have animation being generating using three.js , being piped out c++ application via websockets. grabbing each frame canvas, encoding via base64 , sending out string. problem is, .todataurl() function calling cutting fps in half 60 30, know why have such dramatic effect , if there's other canvas data? let me know if need more info.
here's html/js code:
<!doctype html> <html lang="en"> <head> <title>three.js canvas - geometry - cube</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> <script src="../build/three.min.js"></script> <script src="js/renderers/projector.js"></script> <script src="js/renderers/canvasrenderer.js"></script> <script src="js/libs/stats.min.js"></script> <script> var container, stats; var camera, scene, renderer; var cube, plane; var targetrotation = 0; var targetrotationonmousedown = 0; var mousex = 0; var mousexonmousedown = 0; var windowhalfx = window.innerwidth / 2; var windowhalfy = window.innerheight / 2; var ofsocket; init(); animate(); function init() { container = document.createelement( 'div' ); document.body.appendchild( container ); var info = document.createelement( 'div' ); info.style.position = 'absolute'; info.style.top = '10px'; info.style.width = '100%'; info.style.textalign = 'center'; info.innerhtml = 'drag spin cube'; container.appendchild( info ); ofsocket = new websocket("ws://localhost:9093"); camera = new three.perspectivecamera( 70, window.innerwidth / window.innerheight, 1, 1000 ); camera.position.y = 150; camera.position.z = 500; scene = new three.scene(); // cube var geometry = new three.boxgeometry( 200, 200, 200 ); ( var = 0; < geometry.faces.length; += 2 ) { var hex = math.random() * 0xffffff; geometry.faces[ ].color.sethex( hex ); geometry.faces[ + 1 ].color.sethex( hex ); } var material = new three.meshbasicmaterial( { vertexcolors: three.facecolors, overdraw: 0.5 } ); cube = new three.mesh( geometry, material ); cube.position.y = 150; scene.add( cube ); // plane var geometry = new three.planebuffergeometry( 200, 200 ); geometry.rotatex( - math.pi / 2 ); var material = new three.meshbasicmaterial( { color: 0xe0e0e0, overdraw: 0.5 } ); plane = new three.mesh( geometry, material ); scene.add( plane ); renderer = new three.canvasrenderer(); renderer.setclearcolor( 0xf0f0f0 ); renderer.setpixelratio( window.devicepixelratio ); renderer.setsize( window.innerwidth, window.innerheight ); container.appendchild( renderer.domelement ); stats = new stats(); stats.domelement.style.position = 'absolute'; stats.domelement.style.top = '0px'; container.appendchild( stats.domelement ); document.addeventlistener( 'mousedown', ondocumentmousedown, false ); document.addeventlistener( 'touchstart', ondocumenttouchstart, false ); document.addeventlistener( 'touchmove', ondocumenttouchmove, false ); // window.addeventlistener( 'resize', onwindowresize, false ); } function onwindowresize() { windowhalfx = window.innerwidth / 2; windowhalfy = window.innerheight / 2; camera.aspect = window.innerwidth / window.innerheight; camera.updateprojectionmatrix(); renderer.setsize( window.innerwidth, window.innerheight ); } // function ondocumentmousedown( event ) { event.preventdefault(); document.addeventlistener( 'mousemove', ondocumentmousemove, false ); document.addeventlistener( 'mouseup', ondocumentmouseup, false ); document.addeventlistener( 'mouseout', ondocumentmouseout, false ); mousexonmousedown = event.clientx - windowhalfx; targetrotationonmousedown = targetrotation; } function ondocumentmousemove( event ) { mousex = event.clientx - windowhalfx; targetrotation = targetrotationonmousedown + ( mousex - mousexonmousedown ) * 0.02; } function ondocumentmouseup( event ) { document.removeeventlistener( 'mousemove', ondocumentmousemove, false ); document.removeeventlistener( 'mouseup', ondocumentmouseup, false ); document.removeeventlistener( 'mouseout', ondocumentmouseout, false ); } function ondocumentmouseout( event ) { document.removeeventlistener( 'mousemove', ondocumentmousemove, false ); document.removeeventlistener( 'mouseup', ondocumentmouseup, false ); document.removeeventlistener( 'mouseout', ondocumentmouseout, false ); } function ondocumenttouchstart( event ) { if ( event.touches.length === 1 ) { event.preventdefault(); mousexonmousedown = event.touches[ 0 ].pagex - windowhalfx; targetrotationonmousedown = targetrotation; } } function ondocumenttouchmove( event ) { if ( event.touches.length === 1 ) { event.preventdefault(); mousex = event.touches[ 0 ].pagex - windowhalfx; targetrotation = targetrotationonmousedown + ( mousex - mousexonmousedown ) * 0.05; } } // function animate() { requestanimationframe( animate ); render(); stats.update(); var image = renderer.domelement.todataurl("image/png"); ofsocket.send(image.replace("data:image/png;base64,", "")); } function render() { plane.rotation.y = cube.rotation.y += ( targetrotation - cube.rotation.y ) * 0.05; renderer.render( scene, camera ); } </script> </body> </html>
Comments
Post a Comment