Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(
У Вас число превысит максимальное число int. Можно использовать в Вашем случае uint, но лучше все переписать на double.
Добавление к программе строки glutReshapeFunc(changeSize); приводит к тому, что треугольник перестаёт совсем отрисовываться.
Выдаёт ошибку glut32.dll не найден! При том, что он лежит в System32! Всё решил) Нужно отправить не в System32, а в System.

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

Задание цвета вершинам
Как правило, в GL объекты строятся с использованием наборов каких-то вершин, для которых задаётся не только положение в пространстве, но и цвет. Цвета же всех остальных пикселей, по умолчанию, вычисляются с помощью линейной интерполяции, автоматически делая плавный градиент.
Допустим, мы не хотим, чтобы фрагментный шейдер назначал нашему рисунку (в качестве примера будем использовать квадрат) фиксированный белый цвет для каждого пикселя. Мы хотим сделать плавный градиент с использованием разных цветов: синий, зелёный, красный и белый.
Поэтому, первое, что необходимо будет сделать – это назначить перечисленные цвета четырём вершинам. Чтобы сделать это, необходимо для начала создать нужный массив цветов вершин и сохранить его в WebGl буфер, добавив код в функцию initBuffers():

 var colors = [
    1.0,  1.0,  1.0,  1.0,    // белый
    1.0,  0.0,  0.0,  1.0,    // красный
    0.0,  1.0,  0.0,  1.0,    // зелёный
    0.0,  0.0,  1.0,  1.0     // синий
  ];
 
  squareVerticesColorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
}

Начало кода –JavaScript массив, содержащий в себе четыре вектора с четырьмя значениями каждый – по одному вектору для задания цвета каждой вершине.
Затем – новый WebGl буфер выделяет место в памяти хранения этих цветов и массив приводится к вещественному формату WebGl и сохраняется в буфер.
Далее, для использования этих цветов, вершинному шейдеру необходимо будет произвести обновление, помещая соответствующий цвет из буфера цвета:
<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec4 aVertexColor;
 
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
 
    varying lowp vec4 vColor;
 
    void main(void) {
      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
      vColor = aVertexColor;
      }
    </script>

Ключевым отличием будет является то, что для каждой вершины, мы задаём цвет на соответствующее значение из массива цвета.
Окраска фрагментов
Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведён его код:
< script id="shader-fs" type="x-shader/x-fragment">
    void main(void) {
      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
</script>

Чтобы подобрать интерполируемый цвет каждому пикселю,необходимо просто изменить его, получив значение из переменной vColor:
<script id="shader-fs" type="x-shader/x-fragment">
    varying lowp vec4 vColor;
 
    void main(void) {
       gl_FragColor = vColor;
    }
</script>

Такое простое изменение, однако, с его помощью каждый фрагмент вместо фиксированного значения получает значение интерполируемого цвета на основе его расположения относительно вершин.
Отрисовка с использованием цветов
Далее добавляем код в initShaders() для задания значений атрибута цвета для шейдерной программы:
vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(vertexColorAttribute);

Следом, drawScene() можно исправить на фактическое использование этих цветов при отрисовке квадрата:
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);

Полученное изображение (в качестве примера) можно увидеть ниже, а с исходным кодом ознакомиться в прикреплённом файле.
2022-02-03-12-40-20

Прикрепленный файлРазмер
WebGl_color_Griniova.rar2.72 кб