(资料图片仅供参考)
还是比较节省性能的，这个还是包含了生成测试数据的性能，实际应用如果是直接通信获得数据应该还能少几毫秒吧！
准备工作用了React，但是关系不大WebGL的基础用法（推荐看一看掘金里的一个教程：WebGL 入门与实践）有兴趣应该读一读这个的源码GPU.JS,因为一开始偷学了一手flatten2dArrayTo这个方法，后来发现实现上述效果的功能的实现原理和GPU.JS的加速原理差不多的需要稍微写一个fragmentShader的代码；因为要把大多数耗时的计算扔到这个里面执行重要代码需要将测试数据生成的matrix二维数组通过flatten2dArrayTo转化为Uint8Arrayconst size = { width: 1400, height: 600 }; const sourceArr = new Float32Array(size.width * size.height).fill(-999.0); const matrix = []; // 一个二维数组 setInterval(() => { const res = []; // TODO 按某些规则生成一行数据放入res matrix.unshift(res); if (matrix.length > size.height) { matrix.pop(); } flatten2dArrayTo(matrix, sourceArr); }, 20); // 二维数组转一维数组 const flatten2dArrayTo = (array, target) => { let offset = 0; for (let y = 0; y < array.length; y += 1) { target.set(array[y], offset); offset += array[y].length; } }; // ...实际给GL使用再将Float32Array转为Uint8Array const d = sourceArr; new Uint8Array(d.buffer); // ...const drawDance = (palette, data, width, height, l) => { if (canRef.current) { const gl = canRef.current.getContext?.("webgl"); if (gl) { // 这个暂时没用 const lengthHandle = gl.getUniformLocation(gl.program, "length"); gl.uniform1f(lengthHandle, l); // 纹理0：一个256*2的调色板 const paletteLoc = gl.getUniformLocation(gl.program, "u_Palette"); gl.uniform1i(paletteLoc, 0); // 纹理1：Float32Array转为Uint8Array的数据纹理 const samplerLoc = gl.getUniformLocation(gl.program, "u_Sampler"); gl.uniform1i(samplerLoc, 1); // 纹理0放入 gl.activeTexture(gl.TEXTURE0); const texture1 = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture1); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 256 * 2, 1, 0, gl.RGB, gl.UNSIGNED_BYTE, palette); // 纹理1放入 gl.activeTexture(gl.TEXTURE1); const texture2 = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture2); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, bvbv(data)); // canvas那么大的一个网格 drawBuffer(gl, [-1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, -1.0], "a_Position"); // 释放纹理 gl.deleteTexture(texture1); gl.deleteTexture(texture2); } } };const onResize = useCallback(() => { const { offsetHeight: height, offsetWidth: width } = containerRef.current || {}; const can = React.createElement("canvas", { width, height, style: { background: "#90202020" }, ref: canRef, }); containerRef.current && render(can, containerRef.current); const gl = canRef.current.getContext("webgl"); if (gl) { // 重新设置gl视口,gl的Oxy在canvas的中心 initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE); gl.viewport(0, 0, width, height); const widthHandle = gl.getUniformLocation(gl.program, "width"); const heightHandle = gl.getUniformLocation(gl.program, "height"); gl.uniform1f(widthHandle, width); gl.uniform1f(heightHandle, height); // 缩放相关的不重要 const x1H = gl.getUniformLocation(gl.program, "x1"); const x2H = gl.getUniformLocation(gl.program, "x2"); gl.uniform1f(x1H, 0); gl.uniform1f(x2H, width); } }, []);precision mediump float; uniform float width; uniform float height; uniform float length; uniform float x1; uniform float x2; uniform sampler2D u_Palette; uniform sampler2D u_Sampler; vec2 reslution =vec2(width,height); highp float decode32(highp vec4 rgba) { highp float Sign = 1.0 - step(128.0,rgba[0])*2.0; highp float Exponent = 2.0 * mod(rgba[0],128.0) + step(128.0,rgba[1]) - 127.0; highp float Mantissa = mod(rgba[1],128.0)*65536.0 + rgba[2]*256.0 +rgba[3] + float(0x800000); highp float Result = Sign * exp2(Exponent) * (Mantissa * exp2(-23.0 )); return Result; } void main(){ // gl_FragColor=vec4(gl_FragCoord.xyx/reslution.xyx,1.0); if(gl_FragCoord.y < 10.0){ // 简单画个调色板示意图 gl_FragColor=texture2D(u_Palette,gl_FragCoord.xy/reslution.xy); } else{ // 绘制数据点 float xx=x1+gl_FragCoord.x/reslution.x*(x2-x1); vec2 pos = vec2(xx,reslution.y-gl_FragCoord.y)/vec2(reslution.x,reslution.y); vec4 color=texture2D(u_Sampler,pos)*255.0; float val=decode32(color.abgr); if(val < -99.0){ gl_FragColor=vec4(0.0,0.0,0.0,1.0); } else{ gl_FragColor=texture2D(u_Palette,vec2((val+20.0)/100.0,1.0)); } } }基本上述代码过程就能实现了；直接看源码吧：ctrlcv->AudioDance8 ctrlCV工程师
