I have a tube shape made up of 18738 points stored in a JSON file. The tube is constructed using 2000 points (considering every 9th point). It is comprised of 2000 segments (a requirement), each segment has 12 faces with individual colors applied to them.
When I display the model using THREE.WebGLRenderer on a desktop browser, the frame rate is between 54-60 FPS. But when I use THREE.CanvasRenderer on the same desktop browser, the frame rate drops to 1-2 FPS.
I need to run this model on an iPad, so I am limited to using THREE.CanvasRenderer. Decreasing the number of segments would improve the frame rate, but it's essential to keep the 2000 segments.
The JSON file has the following structure:
{"id":"0",
"r30" :"5.247","r60" :"5.088","r90" :"4.77","r120" :"5.724","r150" :"5.83","r180" :"5.459","r210" :"5.194","r240" :"5.035","r270" :"5.247","r300" :"5.565","r330" :"5.618","md":"20","point" :new THREE.Vector3(0,0,20)}
Similarly, I have 18738 points and I'm plotting every 9th point to create the tube shape.
tubeMesh = new THREE.Mesh(tube, new THREE.MeshBasicMaterial({
color: 0xffffff,
shading: THREE.FlatShading,
side: THREE.DoubleSide,
wireframe: false,
transparent: false,
vertexColors: THREE.FaceColors,
overdraw: false
}));
What can I do to boost the FPS performance using THREE.CanvasRenderer ?
r53