CODEWITHSUNDEEP
javascriptcolorswebgl
theantomc
theantomc

Reputation: 649

WEBGL change color to triangle

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.

Upvotes: 1

Views: 2433

Answers (1)

Rabbid76
Rabbid76

Reputation: 211230

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

Upvotes: 2

Related Questions