Speeding up the rendering of 3D mesh plots for large csv files

plotly.js
1

I am currently using 3D Mesh plot to plot 3D model data from CSV files. I am creating 3D models of icebergs in a browser. An example of the point data used to create the 3D model is as follows:

X_Value Y_Value Z_Value
1 3 4
-3 -4 132.0
…
…

My csv files are potentially thousands of lines long. This causes the 3D mesh plot to take a fairly long time to render the model (~30-60s), while causing my entire browser to be unresponsive. I can reduce the number of lines in the file, but it reduces the characteristics of the resulting 3D models, which isn’t what I want.

My questions are: Is there any way to decrease the time it takes to render these models (such as prerendering the model somehow)? In addition, is there a way to prevent my entire browser from becoming unresponsive during the rendering process?

2

Do you have an example CSV file that you can share? A screenshot of the result would also be helpful.

Are you plotting these meshes in the workspace (ie https://plot.ly/create/) or programmatically (Python, JavaScript, or R)?

Thanks,

3

I am plotting the meshes in JavaScript.

I tried uploading a CSV file but it says the only accepted formats are for images. I will copy and paste part of the file in here:

Report_Number, Iceberg_Number, X_Value, Y_Value, Z_Value
11, R11I02, -214.0491, 8.4131, -10
11, R11I02, -214.049, 4.2099, -15
11, R11I02, -214.0488, -7.0448, -20
11, R11I02, -214.0488, -22.7225, -20
11, R11I02, -214.049, -22.4654, -15
11, R11I02, -214.0491, -24.3884, -10
11, R11I02, -208.2283, 15.8678, -10
11, R11I02, -208.2283, 12.2097, -15
11, R11I02, -208.2283, 5.5737, -20
11, R11I02, -208.2283, -32.3024, -20
11, R11I02, -208.2283, -29.967, -15
11, R11I02, -208.2283, -30.4919, -10
11, R11I02, -202.4051, 23.3256, -10
11, R11I02, -202.4051, 18.997, -15
11, R11I02, -202.4051, 12.8369, -20
11, R11I02, -202.4051, -1.176, -25
11, R11I02, -202.4051, -30.7139, -25
11, R11I02, -202.4051, -37.8897, -20
11, R11I02, -202.4051, -36.3966, -15
11, R11I02, -202.4051, -35.3186, -10
11, R11I02, -196.582, 29.9566, -10
11, R11I02, -196.582, 25.7843, -15
11, R11I02, -196.582, 19.6221, -20
11, R11I02, -196.582, 8.4589, -25
11, R11I02, -196.582, -2.012, -30
11, R11I02, -196.582, -24.5726, -30
11, R11I02, -196.582, -37.1072, -25
11, R11I02, -196.582, -42.8543, -20
11, R11I02, -196.582, -41.2013, -15
etc.

The first two columns can be ignored and are not sent to the browser.

An example screen shot of the finished product is as follows:

iceberg.png668×622 16.2 KB

4

Thanks @andrewway. Can you please post the CSV to GitHub and link here (or somewhere else online)? We can’t replicate and profile the loading time without the data.

5

Even better is if you can recreate the above on Codepen and link here.

6

Sure thing. I actually have the site hosted on a webserver, if that would work as well.

http://159.203.45.187:3000/interface

You just need to click “load” to render the model.

The link to “KATIE’s” CSV file is here: https://github.com/AndrewWay/aoslnet/blob/release-0.6/public/data/processing/r11i02.Txt

7

@andrewway Thank you! Investigating and will get back to you.

1 Like
8

@andrewway may I ask you to run server once again or drop the code to codepen/gist?

9

@dimayv @jack I put a barebones version of the code on codepen. Here is the link:

You just need to click load, and the browser will take some time to load the 3D model.

Please ignore the xyz data arrays in the bottom of the javascript file. Codepen wasn’t allowing me to make a request to my webserver to get the data, so I was forced to hardcode the huge arrays in the javascript file.

My server is also running again:

http://159.203.45.187:3000/interface

10

@andrewway thank you for the detailed demo!
Yes, the reason is alhpahull: 5 property, which enables alpha-shape algorithm, which performs delaunay-triangulation, which is quite slow (O(n log n) average case), see docs.
There are two possible solutions.

  1. Use alphahull: 0 to enable convex-hull calculation, although that loses details.
  2. Use i, j, and k indexes as mesh parameters to provide pre-calculated triangles.
1 Like
11

Thank you very much. I am definitely more interested in option number 2.

Can python plotly be used to pre-calculate the triangles such that I can upload them to my server and use them in JavaScript plotly?

12

You need to find 3d alpha shape for that purpose. Unfortunately python is not my expertise.

Also there is theoretical possibility to increase performance of alpha-shape calculation used now, considering that delaunator is about 20 times faster than delaunay-triangulate, but that would take some time to refactor delaunator to use 3d points.

13

Can python plotly be used to pre-calculate the triangles such that I can upload them to my server and use them in JavaScript plotly?

Hey @empet , have you precalculated i, j, k in Python for Plotly meshes before? Seems like if anyone has done this, it would be you :slight_smile:

14

@andrewway This might also be helpful example code for pre-calculating i, j, k in Python:

15

The lists i,j,k are defined from simplices (triangles) returned by the Delaunay triangulation or read from a ply file, off file and more.
A triangle is a list o three integers. Hence the answer is yes, you can precalculcate i, j, k trom the triangles associated to that trisurf.