一个关于webgl性能优化的问题(大数据量下的颜色数据压缩)

Question

首先说一下我的需求：

在一个网页中画点和边(边的数量远远大于点，比如有1万个点，十几万条边这样)

是使用webgl绘制的，现在经过一系列优化，其他方面已经比较快了，总体也能画下来，但是现在瓶颈在于Float32Array的生成上面：

可以看一下这个图，Float32Array(以及后面的Int8Array)的生成占据了大量的时间，但是这个是浏览器提供的API。

实际上，对于一个几十万的数组调用Float32Array也的确比较慢的，可以参考如下测试代码：

 let arr = []
    for(let i = 0; i < 400000; i += 1){
        arr.push((Math.random() * 1000).toFixed(2))
    }

    console.log("time begin", Date.now());

    let float23arr = new Float32Array(arr);

    console.log("time end", Date.now())

花费的时间也有200ms了，而实际上400000数据对应不了多少点：

可以看传入Float32Array的点，我发现：

* 这里直接用 gl.drawArrays 我认为是合理的，因为这种节点链接图没什么重叠，所以使用坐标索引反而会增加内存
* 问题在于颜色，颜色很多都是重复的，实际上一个图总共也没几种颜色，目前这种做法非常浪费。

所以我现在需要想个办法把颜色压缩一下，一开始想用一个数组加索引的方式，但是 shader 又不支持传入动态的大小的数组(颜色一开始没有办法确定用几种)

后来又想把RBGA这几个值合成一个，但是这样要么会丧失精度，要么会可能越界，所以感觉也不太行。

所以各路大神，你们认为这种情况该如何进行压缩和优化呢？

Answer 1

如果颜色是有规律的，循环重复的，可以在顶点着色器中用gl_VertexID自动根据顶点ID生成颜色。这样就连颜色数组都不用传了