<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">Hi, all<div class=""><br class=""></div><div class="">Last week I focus on how to improve performance of current dev version.</div><div class=""><br class=""></div><div class="">At first, I read a lot of articles like:</div><div class=""><br class=""></div><div class="">- <a href="http://www.ianww.com/blog/2012/11/04/optimizing-three-dot-js-performance-simulating-tens-of-thousands-of-independent-moving-objects/" class="">http://www.ianww.com/blog/2012/11/04/optimizing-three-dot-js-performance-simulating-tens-of-thousands-of-independent-moving-objects/</a></div><div class="">- <a href="https://stackoverflow.com/questions/22028288/how-to-optimize-rendering-of-many-spheregeometry-in-three-js" class="">https://stackoverflow.com/questions/22028288/how-to-optimize-rendering-of-many-spheregeometry-in-three-js</a></div><div class=""><br class=""></div><div class="">and summarized three ways:</div><div class=""><br class=""></div><div class="">- reuse geometry and material</div><div class="">- combine the mesh</div><div class="">- use web worker</div><div class=""><br class=""></div><div class="">I have try to use first method by <a href="https://github.com/netjson/netjsongraph.js/commit/bb217902124b35ebba4336d9e52af8de2b3a8446" class="">https://github.com/netjson/netjsongraph.js/commit/bb217902124b35ebba4336d9e52af8de2b3a8446</a></div><div class="">However, other two methods let me in trouble. First, our nodes and links are <span style="background-color: rgb(255, 255, 255);" class=""><font color="#3d3d3d" face="Arial, sans-serif" class="">mutually independent and the position of them is dynamic, so I can not combine them into one. Second, I tried to use Web Worker follow the below articles in three place in my code: elements creation, position of elements calculation and tick called in static rendering, but they all failed. I discovered only data with no function can be posted into Web Worker, so the three.js geometry and d3 simulation can not be posted into Web Worker, so it can’t use Web Worker in these three place. I will find appropriate scene in the future.</font></span></div><div class=""><span style="background-color: rgb(255, 255, 255);" class=""><font color="#3d3d3d" face="Arial, sans-serif" class=""><br class=""></font></span></div><div class=""><font color="#3d3d3d" face="Arial, sans-serif" class=""><span style="background-color: rgb(255, 255, 255);" class="">- </span></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers" class="">https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers</a></div><div class="">- <a href="https://www.html5rocks.com/en/tutorials/workers/basics/" class="">https://www.html5rocks.com/en/tutorials/workers/basics/</a></div><div class="">- <a href="https://github.com/mrdoob/three.js/blob/master/examples/raytracing_sandbox.html" class="">https://github.com/mrdoob/three.js/blob/master/examples/raytracing_sandbox.html</a></div><div class=""><br class=""></div><div class="">And there is anther problem is linewidth has no effect: <a href="https://github.com/netjson/netjsongraph.js/issues/47" class="">https://github.com/netjson/netjsongraph.js/issues/47</a></div><div class=""><br class=""></div><div class="">Current 1k nodes and 2k links can be rendering under 60 FPS, and 10k nodes still slow.</div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">Next week I would fix #47 and continue to improve performance.</div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">Best regards</div><div class=""><br class=""></div><div class="">Xiang</div></body></html>