一个简单利用WebGL绘制频谱瀑布图示例
阅读原文时间:2023年08月11日阅读:3

还是比较节省性能的,这个还是包含了生成测试数据的性能,实际应用如果是直接通信获得数据应该还能少几毫秒吧!

  1. 用了React,但是关系不大

  2. WebGL的基础用法(推荐看一看掘金里的一个教程:WebGL 入门与实践

  3. 有兴趣应该读一读这个的源码GPU.JS,因为一开始偷学了一手flatten2dArrayTo这个方法,后来发现实现上述效果的功能的实现原理和GPU

    .JS的加速原理差不多的

  4. 需要稍微写一个fragmentShader的代码;因为要把大多数耗时的计算扔到这个里面执行

  5. 需要将测试数据生成的matrix二维数组通过flatten2dArrayTo转化为Uint8Array

    const 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);
    // ...
  6. 需要给GL定义:调色板作为第0个纹理,数据转化为的Uint8Array当作第1个纹理

    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);
    }
    }
    };

  7. canvas尺寸变化的时候告诉GL {width,height} 方便在片元着色器中取到对应点的value

    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);
    }

    }, []);

  8. 一个fragmentShader,主要是要把通过像素位置获取对应二维的数组中对应的数据值(重点是那个decode32函数,网上找了挺久的How do I convert a vec4 rgba value to a float? ),然后根据最小最大和调色板确定绘制的颜色

    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工程师

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器