WebGL performance optimization (color data compression under large data volume)

Asked Apr 19 '18 at 07:04

Active Apr 19 '18 at 07:29

Viewed 258 times

Firstly it is about what I need：

I want to draw nodes and their link edges in a web page (the number of edges is larger than nodes, for example, 10,000 nodes and 100,000 links). The following is a demo:

I use WebGL and after optimizations in other aspects, It can draw in a relatively short time， but there are still some problems:

As you can see, most time is used by Float32Array, but this is the browser's own API.

So what I can do is reducing the number of elements for Float32Array.

Now，the content of elements for Float32Array(The pixi.js I use is from pixi.js and I changed something)：

The color data is redundant. (Note: the coordinate data is basically not shared)

I tried to use a color Array and index but I found that uncertain sized arrays are not accepted by the shader.

I also tried to combine several values（rbga）into one value, but it can cause losing accuracy or Cross-border

So I don't know what I can do now.

I wonder if you know how to handle the redundant color data under this situation or if you have other ideas about how to optimize the WebGL, Thank you very much.

edited Apr 19 '18 at 07:29

asked Apr 19 '18 at 07:04

聂小涛

Please provide some sample code and data to work with. – Tschallacka Apr 19 '18 at 07:12
Already added the github uri at the end – 聂小涛 Apr 19 '18 at 07:19
1

Please read https://stackoverflow.com/help/mcve If you can isolate and demonstrate the problem in a small example, it's easier for people here to provide you an answer. – Tschallacka Apr 19 '18 at 07:23
Firstly, It is already a small example from our whole project, secondly I don't think I should provide some sample code in that case and it is just a question about general ideas but not the specific code , Thanks ~ – 聂小涛 Apr 19 '18 at 07:28
and I think maybe sample code is not needed, so I removed – 聂小涛 Apr 19 '18 at 07:30
Why are you uploading the data every frame to begin with? – LJᛃ Apr 19 '18 at 13:53
Typical stack overflow, a perfectly fine high level question that is very similar to the exact issue I'm having, and it's closed without any answers. – Xander Luciano Jul 27 '18 at 06:18

WebGL performance optimization (color data compression under large data volume)

0 Answers0