How do I draw gradients of discrete integer values

Question

Hello I am using Dartlang and WebGl to write a neural net visualization and I the neurons output ranges from 0-1. I want to display the neurons outputs as a function of color using a sampling depth of 255 values in the red spectrum. I have learned basic WegGL and I know that I need to bind a color to an array and then read it using a GPU program. My program draws red triangle for a neuron with output close to 1 and white for a neuron who's output is close to 0. My question is how do I draw with colors of values in between white and red without creating a gl buffer for each of the 255 values. I assume I will do something in the GPU program itself and just bind the value of the neuron output to the Array and then have the GPU program convert it into a vec4 color.

A link to my current FULL code is here: https://github.com/SlightlyCyborg/dart-neuralnet/blob/master/web/part1.dart

Also here is segment of my code:

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

Here is where I bind the buffer for the 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);

And here is where I draw using that color:

  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

I don't understand what you're really trying to do but....

If you change your fragment shader to

precision mediump float;

uniform vec4 uColor;

void main(void) {
    gl_FragColor = uColor;
}

Then you can set the color that WebGL will draw with with

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

or

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

You don't need any color buffers and you can remove all references to color from your vertex shader.