How to draw gradients of discrete integer values ​​from 0-255 in WebGL without creating a buffer for each color

Question

Hello, I use Dartlang and WebGl to record visualization of a neural network, and my output of neurons ranges from 0-1. I want to display the outputs of neurons depending on color, using a sample depth of 255 values ​​in the red spectrum. I recognized the base WegGL and I know that I need to bind a color to an array and then read it using the GPU program. My program draws a red triangle for a neuron with an output of about 1 and a white triangle for a neuron whose output is close to 0. My question is how to draw values ​​between white and red with colors, without creating a gl buffer for each of the 255 values. I assume that I will do something in the GPU program itself and just bind the output value of the neurons to an array, and then the GPU program will convert it to 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 my code segment:

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 I am linking the buffer for 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 this is where I draw using this 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 do not understand what you are really trying to do, but ...

If you change the 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 using

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

or

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

You do not need color buffers, and you can remove all color references from your vertex shader.