WebGL и SVG


два часа теории перед
практическими занятиями


Клиначев Николай Васильевич

[Home] [←] [PgUp]  [Esc] [Space]  [PgDn] [→] [End]

Графические интерфейсы
веб-платформы

  1. Растровая графика: HTML Canvas 2D Context
  2. Растровая графика: HTML Canvas 3D Context
  3. Векторная графика: Scalable Vector Graphics
  4. Текст: Аффинные преобразования в CSS

WebGL: Примитивы 3D-сцены

  1. Точка (1 пиксель)
  2. Линия в 1 пиксель
  3. Треугольник

Сколь сложной бы ни была 3D-сцена, она всегда рисуется из простых графических примитивов (из треугольников)

Модули программы для видеокарты


  1. Шейдер вершин
  2. Шейдер фрагментов

Видеокарта – это специализированный компьютер. Ему нужна программа из двух простых модулей

Координаты вершин буквы F

F  0,  0,
 0, 50,
30, 50,
30, 40,
10, 40,
   ...

Аффинное преобразование координат

F newX     a  c  e     X
newY  =  b  d  f  *  Y
new1     0  0  1     1

Технология: HTML / CSS-трансформации

Что случилось с буквой F ?

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

Постановка задачи для шейдера вершин

Изображение на мониторе обновляется 60 раз в секунду. Шейдеру вершин нужно передать:

  1. Массив вершин
  2. Аффинную матрицу

Если аффинную матрицу обновлять каждый раз, то 2D- или 3D-сцена "оживет".

Обновление аффинной матрицы

Технология: Scalable Vector Graphics

Работа шейдера вершин

WebGL_vertex-shader-anim.gif, 122kB

gif-анимация, (c) Gregg Tavares

Размерность аффинных матриц

3×3 – размер матрицы для 2D-графики

4×4 – размер матрицы для 3D-графики

Примечание. Координаты вершин (x, y, z, 1) дополняют единицей для поддержки операции смещения изображения.

Аффинные матрицы для 3D-сцен

  1. Матрица сцены (мировая матрица)
  2. Матрица камеры (видовая матрица)
  3. Матрица оптики (проекционная матрица)

Примечание. В браузере и в Word-e, для вывода текста и 2D-графики используется только матрица сцены.

Матрица сцены

Все геометрические фигуры для 3D-сцены (шар, куб, цилиндр, ...) описываются в относительных единицах в начале координат. Матрица сцены отвечает за размещение фигуры в сцене и за её масштаб.

Матрица камеры

На 3D-сцену можно смотреть с разных позиций в пространстве и под разными углами. За это отвечает матрица камеры.

Примечание. Библиотеки расчета коэффициентов аффинных матриц могут предполагать перемещение камеры в сцене или вращение сцены перед неподвижной камерой.

Матрица оптики

Параметры матрицы оптики задают угол обзора и области отсечения (камера не видит объекты расположенные близко и размещенные на большом удалении). Может определять нелинейные искажения (объектив рыбий глаз).

Зачем же нужны три матрицы ?

  1. Если что-то движется в сцене – меняется матрица сцены.
  2. Если видим сцену с беспилотного ЛА – меняется матрица камеры.
  3. Если оператор показывает что-либо крупным планом – меняется матрица оптики.
  4. Шейдеру вершин передаем произведение 3-х матриц для отрисовки каждой детали в сцене.

Вычисление аффинных матриц

Стандартный набор функций для вычисления аффинных матриц: lookAt, translate, scale, rotate, invert, fromQuat, multiply, ..., – предоставляет простая и эффективная библиотека с высоким качеством
кода glMatrix [50 КБ]

Сколько аффинных матриц
и какие меняются ?

HTML Canvas 3D Context (WebGL)

Как видеокарта рисует лентами треугольников ?


  1. Свернули ленту в цилиндр
  2. Определили массив вершин
  3. Определили массив цветов
    (каждой вершине). И ...

Работа шейдера фрагментов. Интерполяция цвета

2D-сцена, (c) Gregg Tavares.
Технология: HTML Canvas 2D Context

В массиве цветов цвет вершины кодируют четыре числа (R, G, B, A)


Пиксель под увеличительным стеклом.
Альфа-канал отвечает за прозрачность

Видим двигатели сквозь корпус КА

Массивы: вершин, цветов, нормалей

WebGL, 3D-сцена, (c) Gregg Tavares.
Нормали – это перпендикуляры к поверхности. Необходимы для расчёта освещения

Косинус угла между нормалью и светом. dot-оператор

Интерактивная, 3D-сцена, (c) Gregg Tavares.
Скалярное произведение векторов

Ламинарное освещение. Какого цвета красный треугольник ночью?

Интерактивная 2D-сцена, (c) Gregg Tavares

Ламинарное освещение буквы F

Интерактивная 2D-сцена, (c) Gregg Tavares

Точечное освещение для красного треугольника

Интерактивная 2D-сцена, (c) Gregg Tavares

Точечное освещение буквы F

Интерактивная 2D-сцена, (c) Gregg Tavares

Как бликует красный треугольник?

Интерактивная 2D-сцена, (c) Gregg Tavares

Как шейдер фрагментов вычисляет цвет пикселя ?

  1. Интерполирует цвет, нормаль и вектор на свет для пикселя между вершинами
  2. Вычисляет косинус угла между нормалью и нормализованным вектором света
  3. Красит пиксель в цвет умноженный на косинус (на освещенность)

Возможны варианты с бликами

Пример. scale, translate, rotate. Повтор элементов в чертеже

Технология: Scalable Vector Graphics

Пример. Фрактал - аффинные преобразования пикселя.
Папоротник Барнсли

Технология: HTML Canvas 2D Context

Пример. Сервер визуализации.
ГПСЧ на LFSR

Технология: Scalable Vector Graphics

Пример. Поиск звёзд. ГПСЧ "случайно" не повторил ни один пиксель

Технология: HTML Canvas 2D Context

Пример. Сервер визуализации.
Лабораторный блок питания

Технология: Scalable Vector Graphics

Инструменты

Литература

Что делать, как жить?

  1. Знакомимся с презентацией по языку JavaScript.
  2. Выполняем базовый комплект л.р. по языку JavaScript. Знакомимся с SVG и HTML Canvas 2D API.
  3. Вспоминаем, что Юрий Гагарин – герой нашей страны. Выполняем комплект л.р. аэрокосмического факультета. Осваиваем WebGL.

27.09.2018