4. Сохранение ссылки на буферный объект в переменной-атрибуте

5. Разрешение присваивания переменной-атрибуту

501.00K

Категория:

Программирование

Похожие презентации:

Мультимедиа технология

Анимация в JavaScript

Canvas. Занятие №24. Рисование в JavaScript

Язык Javascript

Компьютерные языки разметки (ПОиБМС)

Характеристика JavaScript

WebGL. Основные положения

Основы JavaScript

Введение в язык шейдеров OpenGL

Тема №4. WebGL (1)

1. Компьютерная графика

Москин Николай Дмитриевич
Институт математики и информационных
технологий
Петрозаводский государственный университет
1

2. § 4 Введение в WebGL

WebGL (Web-based Graphics Library) – это
технология, позволяющая рисовать, отображать и
взаимодействовать со сложной, интерактивной
трехмерной компьютерной графикой в веббраузерах.
WebGL, в сочетании с HTML5 и JavaScript, делает
трехмерную графику доступной для вебразработчиков и открывает возможность создания
веб-приложений следующего поколения, с простыми
и понятными пользовательскими интерфейсами и
веб-контентом.
2

3. История WebGL

Из технологий отображения трехмерной графики
на персональных компьютерах наибольшее
распространение получили Direct3D и OpenGL.
Direct3D – составная часть пакета технологий
Microsoft DirectX – это технология отображения
трехмерной графики, предназначенная для
использования на платформе Windows. Она
является лицензионным программным
интерфейсом (API) и контролируется корпорацией
Microsoft. Альтернативная ей технология OpenGL
получила широкое распространение, благодаря
ее открытости.
3

4. История WebGL

Несмотря на то, что технология
WebGL корнями уходит в OpenGL,
в действительности она является
дальнейшим развитием версии
OpenGL для встраиваемых систем,
таких как смартфоны и игровые консоли.
Эта версия, известная как OpenGL ES (for
Embedded Systems), создана в 2003-2004 годах, а
затем обновлена в 2007 году (ES 2.0) и в 2012 (ES
3.0). WebGL основана на версии ES 2.0. Версия
WebGL 2.0 вышла в 2017 году.
4

5. История WebGL

Шейдеры - это компьютерные программы,
позволяющие создавать сложные визуальные
эффекты с использованием специализированного
языка программирования, похожего на язык С.
5

6. Элемент <canvas>

Элемент <canvas>
Система WebGL использует для рисования
элемент <canvas>, появившийся в HTML5 и
определяющий область веб-страницы,
предназначенную для рисования. Без
использования технологии WebGL, элемент
<canvas> позволяет рисовать только 2-мерную
графику с применением функций JavaScript.
6

7. Система координат элемента <canvas>

Система координат элемента <canvas>
Начало системы
координат элемента
<canvas> находится
в левом верхнем
углу, ось X
определяет
координату по
горизонтали (слева
направо), ось Y – по
вертикали (сверху
вниз).
7

8. DrawRectangle.htm

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw a blue rectangle (canvas version)</title>
</head>
<body onload="main()">
<canvas id="example" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="DrawRectangle.js"></script>
</body>
</html>
8

9. DrawRectangle.js

function main() {
// получить ссылку на элемент <canvas>
var canvas = document.getElementById('example');
if(!canvas) {
console.log('Failed to retrieve the <canvas> element');
return; }
// получить двухмерный контекст отображения
var ctx = canvas.getContext('2d');
// нарисовать синий квадрат
ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; // выбрать синий цвет
ctx.fillRect(120, 10, 150, 150); // заполнить заливку квадрата
}
9

10. Пример (1)

11. Шейдеры

WebGL опирается на
механизм рисования,
который называется
шейдером (shader),
обладающий большей
гибкостью и широтой
возможностей при
рисовании двух- и
трехмерных объектов, и
который должен
использоваться всеми
WebGL-приложениями.
На рисунке показана
последовательность
операций, выполняемых
WebGL-программой.
11

12. Вершинные и фрагментные шейдеры

Вершинный шейдер (vertex shader) – это
программа, описывающая характеристики вершин
(координаты, цвет и др.), а вершина – это точка в
двух- или трехмерном пространстве, например,
угол или вершина двух- или трехмерной фигуры;
Фрагментный шейдер (fragment shader) – это
программа, реализующая обработку фрагментов
изображений, например, определение
освещенности, где под фрагментом
подразумевается простейший элемент
изображения.
12

13. Простые фигуры WebGL

Точка (gl.Points) – группа точек. Точки рисуются в
координатах вершин v0, v1, v2…
Отрезок (gl.LINES) – группа отдельных отрезков,
которые рисуются между парами вершин. Если
число вершин нечетное, последняя вершина
игнорируется.
Ломаная (gl.LINE_STRIP) – группа связанных между
собой отрезков между парами вершин (v0, v1), (v1,
v2), (v2, v3),…
Замкнутая ломаная (gl.LINE_LOOP) – группа
связанных между собой отрезков. В отличие от
gl.LINE_STRIP рисует отрезок, соединяющий
последнюю и первую вершины.
13

14. Простые фигуры WebGL

15. Простые фигуры WebGL

Треугольник (gl.TRIANGLES) – группа отдельных
треугольников. Треугольники задаются триадами (v0, v1,
v2), (v3, v4, v5),… Если число вершин не кратно 3,
лишние вершины игнорируются.
Треугольники с общими сторонами (gl.TRIANGLE_STRIP).
Первые три вершины образуют первый треугольник, а
второй треугольник образуется из следующей вершины и
двух предшествующих, входящих в состав первого
треугольника.
Треугольники с общей вершиной (gl.TRIANGLE_FAN).
Первые три вершины образуют первый треугольник, а
второй треугольник образуется из следующей вершины,
одной стороны предыдущего треугольника и первой
вершины.
15

16. HelloTriangle.htm

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" />
<title>Hello Triangle</title></head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"</canvas>
<script src="lib/webgl-utils.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/cuon-utils.js"></script>
<script src="HelloTriangle.js"></script>
</body>
</html>
16

17. HelloTriangle.js (начало)

// Вершинный шейдер
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
'}\n';
// Фрагментный шейдер
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
function main() {
// Получить ссылку на элемент <canvas>
var canvas = document.getElementById('webgl');
17

18. HelloTriangle.js (продолжение)

// Получить контекст отображения для WebGL
var gl = getWebGLContext(canvas);
if (!gl) { console.log('Failed to get the rendering context for WebGL');
return; }
// Инициализировать шейдеры
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.'); return; }
// Определить координаты вершин
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices'); return; }
// Указать цвет для очистки области рисования <canvas>
gl.clearColor(0, 0, 0, 1);
18

19. HelloTriangle.js (продолжение)

// Очистить <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Нарисовать треугольник
gl.drawArrays(gl.TRIANGLES, 0, n);
function initVertexBuffers(gl) {
var vertices = new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]);
var n = 3; // число вершин
// Создать буферный объект
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1; }
19

20. HelloTriangle.js (окончание)

// Определить тип буферного объекта
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Записать данные в буферный объект
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position'); return -1; }
// Сохранить ссылку на буферный объект в переменной a_Position
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// Разрешить присваивание переменной a_Position
gl.enableVertexAttribArray(a_Position);
return n; }
20

21. Пример (2)

22. Использование буферных объектов

Буферный объект, представляемый системой
WebGL, является областью памяти, где хранятся
вершины, которые требуется нарисовать.
Применение буферного объекта позволяет
передать в вершинный шейдер сразу несколько
вершин, используя при этом единственную
переменную-атрибут.
Данные (координаты вершин), что записываются в
буферный объект, в программе определяются как
специальный массив типа Float32Array.
22

23. Использование буферных объектов

Чтобы посредством буферного объекта передать
в вершинный шейдер массив данных, нужно
выполнить пять шагов.
23

24. Пять шагов

1. Создать буферный объект – gl.createBuffer();
2. Указать тип буферного объекта – gl.bindBuffer();
3. Записать данные в буферный объект –
gl.bufferData();
4. Сохранить ссылку на буферный объект в
переменной-атрибуте – gl.vertexAttribPointer();
5. Разрешить присваивание –
gl.enableVertexAttribArray().
24

25. 1. Создание буферного объекта

Прежде, чем задействовать буферный объект, его
нужно создать:
var vertexBuffer = gl.createBuffer();
Если возвращаемое значение null, то это признак
ошибки создания буферного объекта. Непустое
значение – ссылка на вновь созданный буферный
объект.
Соответствующий ему метод gl.deleteBuffer()
удаляет буферный объект, созданный вызовом
gl.createBuffer().
25

26. 2.Указание типа буферного объекта

Тип сообщает системе WebGL, какие данные
находятся в буферном объекте, что обеспечивает
правильную их обработку.
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
- gl.ARRAY_BUFFER указывает, что буферный
объект содержит информацию о вершинах.
- gl.ELEMENT_ARRAY_BUFFER указывает, что
буферный объект содержит значения индексов,
ссылающихся на информацию о вершинах.
26

27. 3.Запись данных в буферный объект

На третьем шаге выделяется память для
буферного объекта и в него записываются
данные.
gl.bufferData(gl.ARRAY_BUFFER, vertices,
gl.STATIC_DRAW);
Второй параметр (vertices) – это данные для
записи в буферный объект. Третий параметр
позволяет оптимизировать производительность.
27

28. 3.Запись данных в буферный объект

gl.STATIC_DRAW – данные в буферном объекте
будут определены один раз и использованы
многократно для рисования фигур.
gl.STREAM_DRAW – данные будут определены
один раз и использованы лишь несколько раз для
рисования фигур.
gl.DYNAMIC_DRAW – данные будут определены
многократно и использованы для рисования фигур
так же многократно.
28

29. 4. Сохранение ссылки на буферный объект в переменной-атрибуте

Присваивание буферного объекта переменнойатрибуту можно использовать:
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
где a_Position – переменная-атрибут, которой будет
выполнено присваивание (location). Второй параметр
(size) определяет число компонентов на вершину в
буферном объекте (допустимые значения от 1 до 4).
Третий параметр (type) – это формат данных.
29

30. 4. Сохранение ссылки на буферный объект в переменной-атрибуте

Четвертый параметр (normalized) указывает на
необходимость нормализации невещественных
данных в диапазон [0, 1] или [-1,1] (true или false).
Пятый параметр (stride) определяет число байтов
между разными элементами данных. Значение по
умолчанию 0.
Шестой параметр (offset) определяет смещение (в
байтах) от начала буферного объекта, где
хранятся данные для вершин.
30

31. 5. Разрешение присваивания переменной-атрибуту

Чтобы сделать буферный объект доступным для
вершинного шейдера, нужно разрешить его
присваивание переменной-атрибуту,
определяемом параметром (location), вызовом:
gl.enableVertexAttribArray(a_Position);
Запретить присваивание можно с помощью
метода gl.disableVertexAttribArray(location).
31

32. gl.drawArrays(mode, first, count)

Выполняет вершинный шейдер, чтобы нарисовать
фигуры, определяемые параметром (mode):
gl.drawArrays(gl.TRIANGLES, 0, n);
first – определяет номер вершины, с которой
должно начинаться рисование;
count – определяет количество вершин.
32

33. Литература

В презентации использовались примеры из книги:
Коичи Мацуда, Роджер Ли WebGL: программирование трехмерной графики (Kouichi Matsuda,
Rodger Lea WebGL Programming Guide: Interactive
3D Graphics Programming with WebGL) / пер. с
англ. Киселев А. Н. - М.: ДМК Пресс, 2015.
33

English Русский Правила