可以在 WebGL 着色器中使用浮点数组吗？
Can you use a float array in a WebGL Shader?
我正在尝试使用 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 吗？
Uint8Array您可以传入着色器的数组是唯一一种吗？- 我的实际波形包含大量数据，大约 ~1MB。我想知道尝试通过纹理传递到着色器的数据量是否不合理，是否有办法对数据进行“子采样”以便需要更少的点？
虽然您当然可以将规范化数据转换为无符号字节，但您可以通过 OES_texture_float extension (not needed with WebGL2 contexts). 1MB of data is not that much considering that a single RGBA FullHD framebuffer already is ~8.3MB and the minimum supported 最大纹理大小为 4096（=67.1MB）来使用浮点纹理。是否可以对数据进行稀疏采样取决于您的要求/用例。
我正在尝试使用 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吗？ Uint8Array您可以传入着色器的数组是唯一一种吗？- 我的实际波形包含大量数据，大约 ~1MB。我想知道尝试通过纹理传递到着色器的数据量是否不合理，是否有办法对数据进行“子采样”以便需要更少的点？
虽然您当然可以将规范化数据转换为无符号字节，但您可以通过 OES_texture_float extension (not needed with WebGL2 contexts). 1MB of data is not that much considering that a single RGBA FullHD framebuffer already is ~8.3MB and the minimum supported 最大纹理大小为 4096（=67.1MB）来使用浮点纹理。是否可以对数据进行稀疏采样取决于您的要求/用例。