I have a 3D model of a tube geometry with 18000 coordinates on the production side. To simplify, I am selecting every 9th coordinate to plot 9000 coordinates for building the tube geometry using only the CanvasRenderer.
When utilizing vertexColors: THREE.VertexColors in the WebGLRenderer, each face of the model displays a different color. However, switching to the CanvasRenderer results in the entire model turning white, even if changing to vertexColors: THREE.FaceColors.
Please refer to the jsfiddle link and my previous work where support was added by "mrdoob" for
material.vertexColors = THREE.FaceColorsSupport for vertex color in canvas rendering
Below is an image demonstrating color application based on values.
The image illustrates 12 values at 12 different degrees for each coordinate. A tube with radius segments of 12 has been created and these values are stored in a JSON file. With 2000 plotted points, there is a heavy load due to the large file size, despite only using 2000 out of the total 18000 points. Each segment consists of 12 faces, resulting in 24000 faces on the tube.
Refer to the programming logic below to apply colors based on parameter values:
// Fetching json data of resistivity values at different degrees as shown in the image
var result = getResValue();
for(var k=0; k<tube.faces.length; k++){
// Logic for applying color based on resistance value
}This current logic takes up too much rendering time and makes the model heavy causing low FPS on Android devices. The ultimate goal is to optimize the model for smooth performance on iPad using the CanvasRenderer exclusively.
How can this model be optimized for smoother performance on iPad? Are there alternative methods to apply colors to each face efficiently considering performance limitations?
Update:
After updating the library version to r53, randomly colored faces were achieved by implementing vertexColors: THREE.FaceColors and
face.color.setRGB( Math.random(), Math.random(), Math.random())The challenge now lies in applying colors as per requirements (via canvas mapping or any other feasible solution) and optimizing the model for light loading and smooth operation on iPad.