Проблема в применении цветов к вершине в WebGL - PullRequest
Новая
       81

Проблема в применении цветов к вершине в WebGL

0 голосов
/ 21 ноября 2018

Я сделал квадрат, используя два треугольника, затем я назначил цвета вершине, но каждый раз он дает мне квадрат черного цвета, независимо от того, какой цвет я ему назначил.

Вот мой код сценария: 

    <script>

     var canvas = document.getElementById('my_Canvas');
     var gl = canvas.getContext('experimental-webgl');


     var vertices = [
        -0.5,0.5,0.0,
        -0.5,-0.5,0.0,
        0.5,-0.5,0.0,
        0.5,-0.5,0.0,
        0.5,0.5,0.0,
        -0.5,0.5,0.0
     ];

     var colors = [ 0,0,1, 1,0,0, 0,1,0, 1,0,1,];

     var vertex_buffer = gl.createBuffer();

     gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

     gl.bindBuffer(gl.ARRAY_BUFFER, null);


     var vertCode =
        'attribute vec3 coordinates;' +
        'attribute vec3 color;'+
        'varying vec3 vColor;'+

        'void main(void) {' +
           ' gl_Position = vec4(coordinates, 1.0);' +
           'vColor = color;'+
        '}';

     var vertShader = gl.createShader(gl.VERTEX_SHADER);

     gl.shaderSource(vertShader, vertCode);

     gl.compileShader(vertShader);

    var fragCode = 'precision mediump float;'+
        'varying vec3 vColor;'+
        'void main(void) {'+
            'gl_FragColor = vec4(vColor, 1.);'+
        '}';

     var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

     gl.shaderSource(fragShader, fragCode);

     gl.compileShader(fragShader);

     var shaderProgram = gl.createProgram();

     gl.attachShader(shaderProgram, vertShader); 

     gl.attachShader(shaderProgram, fragShader);

     gl.linkProgram(shaderProgram);

     gl.useProgram(shaderProgram);

     gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

     var coord = gl.getAttribLocation(shaderProgram, "coordinates");

     gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

     gl.enableVertexAttribArray(coord);

     gl.clearColor(0.5, 0.5, 0.5, 0.9);

     gl.enable(gl.DEPTH_TEST); 

     gl.clear(gl.COLOR_BUFFER_BIT);

     gl.viewport(0,0,canvas.width,canvas.height);

     gl.drawArrays(gl.TRIANGLES, 0, 6);
  </script>

Вы можете видеть, что четвертая переменная 'colors' - это то, что я назначил каждой вершине.

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

Может кто-нибудь указать, где код неправильный?Пожалуйста, помогите.

1 Ответ

0 голосов
/ 21 ноября 2018

Вы должны создать буфер для цветов, как вы делаете это для координат вершин.Количество цветовых атрибутов должно быть равно количеству вершинных атрибутов.Каждому цвету соответствуют координаты одной вершины: 

var colors = [ 0,0,1, 1,0,0, 0,1,0, 0,1,0, 1,0,0, 0,0,1 ];

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

И вы должны определить массив общих данных атрибутов вершины для цветов: 

gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var color_index = gl.getAttribLocation(shaderProgram, "color"); 
gl.vertexAttribPointer(color_index, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(color_index);

См. Пример на основе вашего кода: 

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

var vertices = [
-0.5,0.5,0.0,   -0.5,-0.5,0.0,  0.5,-0.5,0.0,
  0.5,-0.5,0.0,   0.5,0.5,0.0,  -0.5,0.5,0.0
];

var colors = [ 0,0,1, 1,0,0, 0,1,0, 0,1,0, 1,0,0, 0,0,1, ];

var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

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

gl.bindBuffer(gl.ARRAY_BUFFER, null);

var vertCode =
  'attribute vec3 coordinates;' +
  'attribute vec3 color;'+
  'varying vec3 vColor;'+

  'void main(void) {' +
    ' gl_Position = vec4(coordinates, 1.0);' +
    'vColor = color;'+
  '}';

var vertShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertShader, vertCode);

gl.compileShader(vertShader);

var fragCode = 'precision mediump float;'+
  'varying vec3 vColor;'+
  'void main(void) {'+
      'gl_FragColor = vec4(vColor, 1.);'+
  '}';

var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader); 
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coord);

gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var color_index = gl.getAttribLocation(shaderProgram, "color"); 
gl.vertexAttribPointer(color_index, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(color_index);

gl.clearColor(0.5, 0.5, 0.5, 0.9);
gl.enable(gl.DEPTH_TEST); 
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0,0,canvas.width,canvas.height);
gl.drawArrays(gl.TRIANGLES, 0, 6);
<canvas id="my_Canvas" style="border: none;" width="512" height="512"></canvas>
...