WEBGL change color to triangle

Question

I'm stuck in this part of WEBGL. Sorry for this question, but I'm very nubbie in this topic and I'm starting a tutorial on page just yesterday. I construct a triangle, and after i try to interact with him, changing color with HTML menu.

All seems work, but I define my color with vec4 with this code:

var colors = {
    'red': new vec4(1, 0, 0, 1),
    'blue': new vec4(0, 0, 1, 1),
    'green': new vec4(0, 1, 0, 1),
    'yellow': new vec4(1, 1, 0, 1),
    'cyan': new vec4(0, 1, 1, 1),
    'magenta': new vec4(1, 0, 1, 1)
  };

and in a buffer part i did this one :

gl.clear(gl.COLOR_BUFFER_BIT);


  var program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);
    // The colour array is copied into another
    var color_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(objectColor), gl.STATIC_DRAW);

    //Here we prepare the "vColor" shader attribute entry point to
    //receive RGB float colours from the colour buffer
    var vColor = gl.getAttribLocation(program, "vColor");
    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
    gl.vertexAttribPointer(vColor, 1, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vColor);

The problem is here, I see that vertexAttribPointer for vec4 require a 2, not 1, but for me with 2 give glDrawArrays: attempt to access out of range vertices in attribute 1

By the way, if I use 1 the program change just one vertices in the triangle, in this case with red vec4(1, 0, 0, 1) the triangle will be red on first point, and other vertices will be black, so i think last 1 will be ignored.

ObjectColor is define in this way.

var objectColor = colors['red'];

and my vec4 will came from

  <script id="vertex-shader" type="x-shader/x-vertex">

        attribute vec4 vPosition;
        attribute vec4 vColor;

        varying vec4 varColor;


        void main()
        {

            gl_Position = vPosition;
            varColor = vColor;

        }
    </script>

    <script id="fragment-shader" type="x-shader/x-fragment">


        precision mediump float;
        varying vec4 varColor;

        void main()
        {

            gl_FragColor = varColor;

        }

How I can fix this? Where I m wrong?

I m trying to following this Passing color to fragment shader from javascript but I don't understand how to check in detail.

You need to post more code. No idea what vec4 i, that comes from some library you haven't shown, objectColor is also not shown. You generally need a color per vertex. In other words if you have 3 vertices for a triangle you need 3 colors, one for each vertex, even if they are all the same value. I'd suggest these tutorials and maybe especially this one — gman
So I already seen the example, i m starting from webglfundamentals for study, but the color in that case change in base the position.. I m using a menu in html that passing color to the js and the color will be applied @gman — theantomc
There are 3 or 4 examples in that page. The bottom ones the colors do not change — gman

Rabbid76 Rabbid76 · Accepted Answer · 2019-03-23T10:26:56

The color buffer has to contain 1 color per vertex coordinate. If you want to draw a triangle with a single color, then the color buffer has to contain the same color 3 times.

Each color has 4 components (RGBA), so the buffer has to have 12 elements:

e.g.

color = [1, 0, 0, 1];
colorAttributes = [];
for(let i = 0; i < 3; ++i)
    colorAttributes.push(...color);

var color_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorAttributes), gl.STATIC_DRAW);

The 2nd parameter (tuple size) to gl.vertexAttribPointer has to be 4, because the color attribute has 4 components, the 4 color channels (RGBA):

gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);

WEBGL change color to triangle

1 Answers