Учебники

WebGL — рисование модели

Январь 19, 2019

После связывания буферов с шейдерами, последний шаг — нарисовать необходимые примитивы. WebGL предоставляет два метода, а именно drawArrays () и drawElements () для рисования моделей.

drawArrays ()

drawArrays () — это метод, который используется для рисования моделей с использованием вершин. Вот его синтаксис — 

void drawArrays(enum mode, int first, long count)

Этот метод принимает следующие три параметра —

  • mode — в WebGL модели отрисовываются с использованием примитивных типов. Используя режим, программисты должны выбрать один из примитивных типов, предоставляемых WebGL. Возможные значения для этого параметра — gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN и gl.TRIANGLES.

  • first — эта опция указывает начальный элемент во включенных массивах. Это не может быть отрицательным значением.

  • count — эта опция указывает количество элементов для визуализации.

mode — в WebGL модели отрисовываются с использованием примитивных типов. Используя режим, программисты должны выбрать один из примитивных типов, предоставляемых WebGL. Возможные значения для этого параметра — gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN и gl.TRIANGLES.

first — эта опция указывает начальный элемент во включенных массивах. Это не может быть отрицательным значением.

count — эта опция указывает количество элементов для визуализации.

Если вы рисуете модель, используя метод drawArrays () , то WebGL, визуализируя фигуры, создает геометрию в порядке, в котором определены координаты вершины.

пример

Если вы хотите нарисовать один треугольник, используя метод drawArray () , то вам нужно передать три вершины и вызвать метод drawArrays () , как показано ниже. 

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);

Это создаст треугольник, как показано ниже.

Треугольник

Предположим, что вы хотите нарисовать смежные треугольники, тогда вы должны передать следующие три вершины по порядку в буфере вершин и указать количество элементов, которые должны быть визуализированы как 6. 

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 6);

Это создаст смежный треугольник, как показано ниже.

Треугольник 1

drawElements ()

drawElements () — это метод, который используется для рисования моделей с использованием вершин и индексов. Его синтаксис выглядит следующим образом — 

void drawElements (enum mode, long count, enum type, long offset)

Этот метод принимает следующие четыре параметра —

  • режим — модели WebGL отрисовываются с использованием примитивных типов. Используя режим, программисты должны выбрать один из примитивных типов, предоставляемых WebGL. Список возможных значений для этого параметра — gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN и gl.TRIANGLES.

  • count — эта опция указывает количество элементов для визуализации.

  • тип — эта опция указывает тип данных индексов, который должен быть UNSIGNED_BYTE или UNSIGNED_SHORT.

  • смещение — эта опция указывает начальную точку рендеринга. Обычно это первый элемент (0).

режим — модели WebGL отрисовываются с использованием примитивных типов. Используя режим, программисты должны выбрать один из примитивных типов, предоставляемых WebGL. Список возможных значений для этого параметра — gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN и gl.TRIANGLES.

count — эта опция указывает количество элементов для визуализации.

тип — эта опция указывает тип данных индексов, который должен быть UNSIGNED_BYTE или UNSIGNED_SHORT.

смещение — эта опция указывает начальную точку рендеринга. Обычно это первый элемент (0).

Если вы рисуете модель, используя метод drawElements () , тогда объект индексного буфера также должен быть создан вместе с объектом буфера вершин. Если вы используете этот метод, данные вершин будут обрабатываться один раз и использоваться столько раз, сколько указано в индексах.

пример

Если вы хотите нарисовать один треугольник, используя индексы, вам нужно передать индексы вместе с вершинами и вызвать метод drawElements (), как показано ниже. 

var vertices = [ -0.5,-0.5,0.0, -0.25,0.5,0.0, 0.0,-0.5,0.0 ];
var indices = [0,1,2];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

Это даст следующий результат —

Треугольник

Если вы хотите нарисовать контагиозные треугольники, используя метод drawElements () , просто добавьте другие вершины и упомяните индексы для остальных вершин. 

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

var indices = [0,1,2,2,3,4];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

Это даст следующий результат —

Треугольник 1

Требуемые операции

Прежде чем рисовать примитив, вам необходимо выполнить несколько операций, которые описаны ниже.

Очистить холст

Прежде всего, вы должны очистить холст, используя метод clearColor () . Вы можете передать значения RGBA нужного цвета в качестве параметра этому методу. Затем WebGL очищает холст и заполняет его указанным цветом. Поэтому вы можете использовать этот метод для установки цвета фона.

Посмотрите на следующий пример. Здесь мы передаем значение RGBA серого цвета. 

gl.clearColor(0.5, 0.5, .5, 1);

Включить тест глубины

Включите проверку глубины, используя метод enable () , как показано ниже. 

gl.enable(gl.DEPTH_TEST);

Очистить бит буфера цвета

Очистите цвет, а также буфер глубины, используя метод clear () , как показано ниже. 

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

Установите порт просмотра

Порт представления представляет собой прямоугольную видимую область, которая содержит результаты рендеринга буфера чертежа. Вы можете установить размеры порта просмотра, используя метод viewport () . В следующем коде размеры порта вида устанавливаются на размеры холста.

48
Share: