recording total elapsed time and the time taken for each 250 line-segment chunk. * SVG Path Benchmark: * http://bl.ocks.org/1296930 * Canvas Path Benchmark: * http://bl.ocks.org/1297383 Drawing into an HTML5 Canvas can be 40x faster than using SVG
Canvas fast animate GIF Preview GIF Polyfill PNG offload 3D 2D X3D Model X3D interactive 3D + 2D interactive 2D 3D 2D + 3D node-webgl toDataURL Canvg node-gif GIF.js Canvg toDataURL custom element x3dom.js
'M'+(data[x][y][0]+displayWidth/2).toFixed(10)+ … +(data[x][y+1][1]+displayHeight/2).toFixed(10)+’Z’, depth: depth, data: originalData[x][y] }); }} d0.sort(function(a, b){return b.depth-a.depth}); var dr=node.selectAll('path').data(d0); dr.enter().append("path"); 3D in SVG note : Rendering order in SVG
DOM Canvas fast, small and social-media friendly browser compatibility, off-load from server PNG GIF animation preview in non-browser environment better browser compatibility thean CSS3D & SMIL faster interactive rendering make it possible to rasterise HTML leverge layout & flow engine work with css3 animation X3D directly use prebuilt 3D Model WRAP UP