first of all, let"s talk about my requirements:

draw dots and edges in a web page (the number of edges is much larger than points, for example, there are 10,000 dots, hundreds of thousands of edges)

is drawn using webgl. After a series of optimizations, other aspects have been relatively fast and can be drawn as a whole, but now the bottleneck lies in the generation of Float32Array:

Float32Array(Int8Array)API

Float32Array:

200ms400000:

you can look at the points passed in Float32Array, and I found that

*  gl.drawArrays 
* 

so now I need to figure out a way to compress the colors. At first, I want to use an array indexed, but shader does not support passing in dynamic arrays of sizes (there is no way to determine how many colors to use at first)

later, I want to combine the values of RBGA into one, but this will either lose precision or may cross the boundary, so it doesn"t feel very good.

so all kinds of gods, how do you think this situation should be compressed and optimized?