How can I speed up this 3D grid-based rendering system?

manpreet Best Answer 2 years ago

I have recently been developing an isometric, rendering system to map out 3D grids in Javascript. All of the items on the grid are cubes of equal dimensions, the only differences between each one is a texture to represent a value for that coordinate. My application requires large grids to be graphed, even though only a small portion is visible in the viewport at once.

Because I am using Canvas, which is slow to draw thousands of shapes per frame, I set my script to loop through each block but only draw its faces if they are 1.) next to an empty grid space and 2.) inside the viewport. This system works fine for smaller grids, but as my application will need considerably large ones (1000+x1000+x128), I will need to add some performance improvements for the final product.

Does anyone that has worked with rendering systems know any way I can further optimize my engine? One thing that I guess may be effective will be trying to not loop through each grid value, even if it is not being drawn. However, I do not know the most efficient way to know whether to loop through a grid value or not (I am currently going through EVERY value, then calculating whether it should be drawn).

If I have been too vague, please tell me and I will be happy to elaborate. Thank you for your time and expertise; I am a student and any help will greatly aid my learning.

manpreet 2 years ago