WEBGL изменить цвет на треугольник - PullRequest
Новая
       8

WEBGL изменить цвет на треугольник

1 голос
/ 21 марта 2019

Я застрял в этой части WEBGL. Извините за этот вопрос, но я очень любезен в этой теме, и я начинаю учебник на странице только вчера. Я строю треугольник, и после того, как пытаюсь с ним взаимодействовать, меняю цвет с помощью меню HTML.

Все, кажется, работает, но я определяю свой цвет с помощью vec4 с помощью этого кода: 

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

и в буферной части я сделал это: 

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

Проблема здесь, я вижу, что vertexAttribPointer для vec4 требует 2, а не 1, но для меня с 2 дают glDrawArrays: попытка доступа к вершинам диапазона вне атрибута 1

Кстати, если я использую 1, программа изменит только одну вершину в треугольнике, в этом случае с красным vec4 (1, 0, 0, 1) треугольник будет красным в первой точке, а другие вершины будут черный, так что я думаю, что последний 1 будет проигнорирован.

ObjectColor определяется таким образом. 

var objectColor = colors['red'];

и мой vec4 выйдет с 

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

        }

Как я могу это исправить? Где я не прав?

Я пытаюсь следовать этому Передача цвета фрагментному шейдеру из JavaScript но я не понимаю, как проверить подробно.

1 Ответ

1 голос
/ 23 марта 2019

Цветовой буфер должен содержать 1 цвет на координату вершины.Если вы хотите нарисовать треугольник с одним цветом, тогда цветной буфер должен содержать один и тот же цвет 3 раза.

Каждый цвет имеет 4 компонента (RGBA), поэтому буфер должен иметь 12 элементов:

например 

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

2-й параметр (размер кортежа) до gl.vertexAttribPointer должен быть равен 4, поскольку атрибут цвета имеет 4 компонента, 4 цветовых канала (RGBA): 

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