你可以在 WebGL 着色器中使用浮点数组吗？答案

【问题标题】：Can you use a float array in a WebGL Shader?你可以在 WebGL 着色器中使用浮点数组吗？
【发布时间】：2022-01-08 00:42:41
【问题描述】：

我正在尝试使用 WebGL 着色器来可视化一些音频数据。我有一个代表标准化 .wav 文件的数字数组：

"demo": {"duration": 0.021111111111111112, "samplerate": 44100, "subsample": 100, "data": 
[-0.018585205078125, -0.05145263671875, 0.0645751953125, -0.059326171875, 0.006072998046875, 
-0.0294189453125, 0.04620361328125, 0.0694580078125, -0.0849609375, -0.053253173828125, 
-0.133697509765625, 0.002166748046875, 0.110931396484375, 0.052337646484375, 0.1214599609375, 
-0.19488525390625, 0.00970458984375, 0.0145263671875, -0.01446533203125, 0.12530517578125, 
-0.115997314453125, 0.010589599609375, -0.127838134765625, 0.0775146484375, -0.0048828125, 
0.001007080078125, -0.164337158203125, -0.146270751953125, 0.077545166015625, -0.012725830078125, 
0.087158203125, -0.130462646484375, 0.088287353515625, -0.02996826171875, 0.156280517578125, 
0.0230712890625, 0.199920654296875, -0.062164306640625, -0.166107177734375, 0.04888916015625, 
-0.00384521484375, 0.1611328125, -0.153961181640625, -0.164947509765625, 0.03314208984375, 
0.098052978515625, 0.042083740234375, 0.1318359375, -0.2388916015625, 0.100006103515625, 
0.04754638671875, 0.009674072265625, 0.1630859375, -0.161834716796875, 0.005584716796875, 
-0.126953125, 0.04388427734375, 0.048095703125, 0.13763427734375, -0.148406982421875, 
-0.250274658203125, 0.04815673828125, 0.087371826171875, 0.0931396484375, -0.02789306640625, 
-0.282073974609375, 0.134063720703125, 0.14483642578125, -0.0025634765625, 0.206756591796875, 
-0.350555419921875, 0.19439697265625, -0.004638671875, 0.03741455078125, 0.203338623046875, 
-0.222137451171875, 0.04315185546875, -0.19219970703125, 0.10284423828125, 0.069976806640625, 
0.062530517578125, -0.0782470703125, -0.22076416015625, 0.13287353515625, 0.031341552734375, 
0.08673095703125]}

我一直在关注 this example 通过 Uint8Array(numPoints) 在着色器中使用音频数据，并且想知道：

我的归一化波形数据能否转换为Uint8Array？
Uint8Arrays 是唯一可以传入着色器的数组吗？
我的实际波形包含大量数据，大约 1MB。我想知道这是否是尝试通过纹理传递到着色器的数据量不合理，是否有办法让我对数据进行“二次采样”以便需要更少的点？

【问题讨论】：

标签： webgl

【解决方案1】：

虽然您当然可以将标准化数据转换为无符号字节，但您可以通过 OES_texture_float 扩展名使用浮点纹理（WebGL2 上下文不需要）。考虑到单个 RGBA FullHD 帧缓冲区已经是 ~8.3MB 并且minimum supported 最大纹理大小为 4096（=67.1MB），1MB 的数据并不算多。是否可以对数据进行稀疏采样取决于您的要求/用例。

【讨论】：

很好的答案。想知道，我们可以通过纹理lod extension有效地实现稀疏采样吗？指定 lod 是否有效地指定了我们想要使用多少纹理样本？
是的，但是 iirc 您需要手动生成 mipmap，因为 generateMipmap 它不支持浮点纹理，您可以利用线性过滤（通过 OES_texture_float_linear 扩展）来隐式平均数据点，具体取决于关于您的采样模式。