I've been tackling a visualization project on a web server, and while I've achieved the desired look and functionality, the performance is not up to par. The project involves a large grid that models a space, with individual cubes displayed in different colors to indicate the likelihood of an object's presence in that area. The colors need to change dynamically as more data is received. Below is the current code for the project (named VFF.js):
//code here
I've experimented with various methods to improve performance, such as reducing the number of materials used and attempting to merge the cube meshes. While merging meshes significantly improved speed, it resulted in a single material for all cubes, which is not suitable. I also explored MeshFaceMaterial but was unsure of its compatibility with merged meshes. Any suggestions or alternative approaches to enhance performance would be greatly appreciated!
To test the project, I'm running it on a simple HTML file:
<html>
<head>
<title>VFF Vizualization Test</title>
</head>
<body>
<canvas id="VFFCanvas" width="640" height="480"></canvas>
<script src="three.min.js"></script>
<script src="VFF.js"></script>
</body>
</html>