如何在 WebGL 中绘制 0-255 的离散整数值的渐变而不为每种颜色创建缓冲区

Question

您好，我正在使用 Dartlang 和 WebGl 编写神经网络可视化，我的神经元输出范围为 0-1。我想使用红色光谱中 255 个值的采样深度将神经元输出显示为颜色的函数。我已经学习了基本的 WegGL，并且我知道我需要将颜色绑定到一个数组，然后使用 GPU 程序读取它。我的程序为输出接近 1 的神经元绘制红色三角形，为输出接近 0 的神经元绘制白色三角形。我的问题是如何绘制介于白色和红色之间的值的颜色，而不为每个神经元创建 gl 缓冲区255 个值。我假设我将在 GPU 程序本身中做一些事情，并将神经元输出的值绑定到数组，然后让 GPU 程序将其转换为 vec4 颜色。

我当前完整代码的链接在这里：https://github.com/SlightlyCyborg/dart-neuralnet/blob/master/web/part1.dart

这也是我的代码片段：

program = new GlProgram('''
      precision mediump float;

      varying vec4 vColor;

      void main(void) {
        gl_FragColor = vColor;
      }
    ''','''
      attribute vec3 aVertexPosition;
      attribute vec4 aVertexColor;

      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;

      varying vec4 vColor;

      void main(void) {
          gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
          vColor = aVertexColor;
      }
    ''', ['aVertexPosition', 'aVertexColor'], ['uMVMatrix', 'uPMatrix']);
gl.useProgram(program.program);

这里是我为 on_neuron_color 绑定缓冲区的地方

    gl.bindBuffer(ARRAY_BUFFER, on_color_buff);
    gl.bufferDataTyped(ARRAY_BUFFER, new Float32List.fromList([
       1.0,  0.0,  0.0, 1.0,
       1.0,  0.0,  0.0, 1.0,
       1.0,  0.0,  0.0, 1.0
       ]), STATIC_DRAW);

这是我使用该颜色绘制的地方：

  gl.bindBuffer(ARRAY_BUFFER,tri_buff);
  gl.vertexAttribPointer(program.attributes['aVertexPosition'], 3, FLOAT, false, 0, 0);
  gl.bindBuffer(ARRAY_BUFFER, on_color_buff);
  gl.vertexAttribPointer(program.attributes['aVertexColor'], 4, FLOAT, false, 0, 0);
  setMatrixUniforms();
  gl.drawArrays(TRIANGLE_STRIP, 0, 3);

Answer 1

我不明白你真正想做什么，但是......

如果您将片段着色器更改为

precision mediump float;

uniform vec4 uColor;

void main(void) {
    gl_FragColor = uColor;
}

然后你可以设置 WebGL 绘制的颜色

gl.uniform4f(program.uniforms['uColor'], r, g, b, a);

或

gl.uniform4fv(program.uniforms['uColor'], arrayOf4Floats);

您不需要任何颜色缓冲区，并且可以从顶点着色器中删除对 color 的所有引用。