Question

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

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

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

1 个答案: