source.tex

% (c) Nikita Lisitsa, lisyarus@gmail.com, 2025

\documentclass[10pt]{beamer}

\usepackage[T2A]{fontenc}
\usepackage[russian]{babel}
\usepackage{minted}

\usepackage{graphicx}
\graphicspath{ {./images/} }

\usepackage{adjustbox}

\usepackage{color}
\usepackage{soul}

\usepackage{hyperref}

\usetheme{metropolis}

\definecolor{red}{rgb}{1,0,0}
\definecolor{green}{rgb}{0,0.5,0}
\definecolor{blue}{rgb}{0,0,1}
\definecolor{codebg}{RGB}{29,35,49}
\definecolor{lightbg}{RGB}{253,246,227}
\setminted{fontsize=\footnotesize}

\makeatletter
\newcommand{\slideimage}[1]{
  \begin{figure}
    \begin{adjustbox}{width=\textwidth, totalheight=\textheight-2\baselineskip-2\baselineskip,keepaspectratio}
      \includegraphics{#1}
    \end{adjustbox}
  \end{figure}
}
\makeatother

\title{Введение в WebGL}
\author{Никита Лисица}
\date{2025}

\setbeamertemplate{footline}[frame number]

\begin{document}

\frame{\titlepage}

\begin{frame}
\frametitle{План лекции}
\begin{itemize}
\item Что такое WebGL?
\pause
\item Как начать работать с WebGL?
\pause
\item Что можно сделать с помощью WebGL?
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Что такое WebGL?}
\begin{itemize}
\item WebGL -- это \textit{графический API}, доступный в браузере
\pause
\item Что такое \textit{графический API}? \pause Это API для рисования чего-либо на экран, как правило, с использованием \textit{GPU}
\pause
\item Что такое \textit{GPU}? \pause \textit{Graphics Processing Unit} -- специальная железка в компьютере, заточенная на быстрое рисование
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Зоопарк графических API}
\begin{itemize}
\item \textbf{OpenGL} и разновидности (1992 -- 2017)
\pause
\item \textbf{DirectX} (точнее, \textbf{Direct3D}) -- Windows-only (1995)
\pause
\item \textbf{Metal} -- Apple-only (2014)
\pause
\item \textbf{Vulkan} (2018)
\pause
\item \textbf{WebGPU} (мой любимый API; всё ещё не выпущен)
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Зоопарк графических API}
\begin{itemize}
\item \textbf{OpenGL}, \textbf{DirectX} (до \textbf{DirectX 12}) -- старые, странные, но лёгкие в освоении
\pause
\item \textbf{Metal}, \textbf{Vulkan}, \textbf{DirectX 12} -- новые, лучше ложатся на архитектуру современных GPU, \textit{очень} низкоуровневые
\pause
\item \textbf{WebGPU} -- тоже новый, но не такой низкоуровневый
\pause
\item \textbf{OpenGL}: 50 строк, чтобы всё проинициализировать и нарисовать треугольник на экране
\pause
\item \textbf{Vulkan}: 1000 строк для того же результата
\pause
\item \textbf{WebGPU}: 200 строк
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Зоопарк графических API: OpenGL}
\begin{itemize}
\item \textbf{OpenGL} -- для десктопа
\pause
\item \textbf{OpenGL ES} (Embedded Systems) -- для телефонов/планшетов
\begin{itemize}
\item \textbf{OpenGL ES 1.0} $\approx$ \textbf{OpenGL 1.3}
\item \textbf{OpenGL ES 2.0} $\approx$ \textbf{OpenGL 2.0}
\item \textbf{OpenGL ES 3.0} $\approx$ \textbf{OpenGL 3.0}
\end{itemize}
\pause
\item \textbf{WebGL} -- для веба
\begin{itemize}
\item \textbf{WebGL 1.0} $\approx$ \textbf{OpenGL ES 2.0}
\item \textbf{WebGL 2.0} $\approx$ \textbf{OpenGL ES 3.0}
\end{itemize}
\pause
\item \textbf{OpenGL SC} (Safety Critical) -- для подлодок
\begin{itemize}
\item Убраны любые способы отстрелить себе ногу, \textit{в ущерб производительности}
\end{itemize}
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Графические API}
\begin{itemize}
\item Обычно ориентированы на язык C, легко портируются под другие языки
\pause
\item Исключение -- WebGL и WebGPU, они ориентированы на JavaScript
\pause
\begin{itemize}
\item Отсюда особенности -- приходится использовать \mintinline{js}|Uint8Array| или \mintinline{js}|Float32Array| для передачи данных
\end{itemize}
\pause
\item \textit{Асинхронные} -- все команды для GPU отправляются в очередь, которая \textit{когда-нибудь} исполнится
\pause
\item \textit{Параллельные} -- все команды исполняются по возможности параллельно (в GPU от сотен до десятков тысяч отдельных вычислительных ядер)
\pause
\item \textit{Настраиваемые} -- часть команд могут исполнять (прямо на GPU!) код, который мы сами напишем (т.н. шейдеры)
\pause
\item Основная задача: рисовать треугольники максимально настраиваемым образом
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Треугольники?}
\begin{itemize}
\item В современности почти всё рисуется треугольниками
\pause
\item 3D модель -- разбита на треугольники
\pause
\item Ломаная линия дороги на карте -- разбита на треугольники
\pause
\item Просто картинка на экране -- прямоугольник = два треугольника
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Треугольники?}
\begin{itemize}
\item Треугольники очень просто рисовать (алгоритм растеризации -- об этом позже)
\pause
\item Остаются треугольниками после перспективной проекции (подробнее см. ссылки)
\pause
\item Их удобно описывать (просто три вершины)
\pause
\item Внутри них удобно интерполировать значения, заданные в вершинах -- цвет, прозрачность, и т.п. (см. барицентрическая интерполяция)
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Интерполяция}
\slideimage{interpolation.png}
\end{frame}

\begin{frame}
\frametitle{Растеризация?}
\begin{itemize}
\item \textit{Растеризация} -- превращение векторных данных в растровые, напр. закрашивание пикселей внутри заданного треугольника
\pause
\item В общем случае -- нетривиальная задача, но для треугольника -- простой и очень параллельный алгоритм (см. мою \href{https://lisyarus.github.io/blog/posts/implementing-a-tiny-cpu-rasterizer-part-2.html}{\textbf{\alert{\underline{статью}}}})
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Растеризация}
\slideimage{raster-triangle.png}
\end{frame}

\begin{frame}
\frametitle{Растеризация}
\slideimage{pixel-covered.png}
\end{frame}

\begin{frame}
\frametitle{Растеризация?}
\begin{itemize}
\item \textit{Растеризация} -- превращение векторных данных в растровые, напр. закрашивание пикселей внутри заданного треугольника
\pause
\item В общем случае -- нетривиальная задача, но для треугольника -- простой и очень параллельный алгоритм (см. мою \href{https://lisyarus.github.io/blog/posts/implementing-a-tiny-cpu-rasterizer-part-2.html}{\textbf{\alert{\underline{статью}}}})
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Буферы с вершинами}
\begin{itemize}
\item Допустим, я загрузил (или сгенерировал сам!) 3D модель, многоугольник, или просто пачку треугольников
\pause
\item Как мне передать их на GPU и нарисовать?
\pause
\item Для этого есть \textit{буферы} -- что-то в духе массивов, но в памяти GPU
\pause
\item В них можно загрузить данные (см. VBO), можно настроить чтение вершин их них (см. VAO и атрибуты вершин)
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Шейдеры}
\begin{itemize}
\item В некоторые участки процесса рисования можно встроить свой код -- \textit{шейдеры}
\pause
\begin{itemize}
\item Начиная с OpenGL 3.0 (= WebGL 2.0), и во всех более современных API, не \textit{можно}, а \textit{нужно}, иначе ничего не будет работать
\end{itemize}
\pause
\item Два основных шейдера: вершинный (vertex) и фрагментный (fragment, он же пиксельный)
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Шейдеры}
\begin{itemize}
\item Вершинный шейдер обрабатывает по одной входные вершины (например, из загруженного буфера) и говорит, где они будут лежать на экране
\pause
\begin{itemize}
\item Если хотите повернуть объект, отмасштабировать, сдвинуть, посмотреть на него из определённой точки под нужным углом -- это всё делается здесь
\end{itemize}
\pause
\item Каждый входной треугольник превращается в набор пикселей
\pause
\item Фрагментный шейдер обрабатывает каждый пиксель треугольника и говорит, какого цвета он будет
\pause
\begin{itemize}
\item Если хотите наложить на объект картинку (текстуру) или какой-то визуальный эффект -- это делается здесь
\end{itemize}
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Как начать работать с WebGL?}
\begin{itemize}
\item Создаём HTML-элемент \mintinline{html}|<canvas>|
\pause
\item В коде делаем \mintinline{js}|var gl = canvas.getContext("webgl2")|
\pause
\item Нам вернут объект, через который можно вызывать функции WebGL
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Очистить экран}
\begin{itemize}
\item Настроить цвет очистки: \mintinline{js}|gl.clearColor(r, g, b, a)|
\item Очистить: \mintinline{js}|gl.clear(gl.COLOR_BUFFER_BIT)|
\pause
\item \textbf{N.B.:} браузеры, возможно, сами очищают содержимое перед каждым новым кадром
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Создать шейдерную программу}
\begin{itemize}
\item \mintinline{js}|gl.createShader, gl.shaderSource, gl.compileShader|
\item \mintinline{js}|gl.createProgram, gl.attachShader, gl.linkProgram|
\pause
\item Шейдеры пишутся на особом языке GLSL, у него есть различия между WebGL1 и WebGL2
\item Шейдеры принимают данные вершин (напр. позицию, цвет) и глобальные настройки рисования (uniform-перемнные)
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Создать буфер и настроить атрибуты вершин}
\begin{itemize}
\item \mintinline{js}|gl.createBuffer, gl.bindBuffer, gl.bufferData|
\item \mintinline{js}|gl.createVertexArray, gl.bindVertexArray|
\item \mintinline{js}|gl.enableVertexAttribArray, gl.vertexAttribPointer|
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Нарисовать что-то}
\begin{itemize}
\item \mintinline{js}|gl.drawArrays, gl.drawElements|
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{TL;DR}
\begin{itemize}
\item 3D модели или любые другие наборы вершин хранятся в буферах (они не всегда нужны!)
\pause
\item Vertex array objects (VAO) запоминают, где и в каком формате лежат вершины
\pause
\item Шейдеры говорят, как обрабатывать вершины и какого цвета выдать пиксели
\pause
\item Инициализация: создали буферы (если надо), загрузили вершины, создали шейдерные программы
\pause
\item Рисование: выбрали шейдерную программу, выставили значения uniform-переменных, выбрали VAO, вызвали \mintinline{js}|drawArrays/drawElements|
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Частый случай: полноэкранный шейдер}
\begin{itemize}
\item Хотим всю логику спрятать в фрагментный шейдер (т.е. сделать функцию: координаты пикселя \begin{math}\longrightarrow\end{math} цвет пикселя)
\pause
\item Хотим покрыть этим шейдером весь canvas
\pause
\item Буферы с вершиными нам не нужны, можно захардкодить в шейдере один треугольник, покрывающий весь экран (и немного вылезающий за него)
\pause
\item Тогда достаточно просто создать шейдерную программу и вызвать \mintinline{js}|gl.drawArrays(gl.TRIANGLES, 0, 3)|
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Что можно сделать на WebGL?}
\begin{itemize}
\item Любое сложное рисование: карты, Google Earth, визуализации, игры, etc
\pause
\item Сложный, интерактивный, анимированный интерфейс: летающие/ездящие картинки, 3D кнопки, etc
\pause
\item Эффекты: размытие, искажение, фракталы, SDF raymarching
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Типичные ошибки в OpenGL/WebGL}
\begin{itemize}
\item Огромное неявное глобальное состояние OpenGL (текущая выбранная текстура/шейдер/vertex array, настройки в духе depth test / stencil test / back-face culling, и т.п.): легко заложиться на конкретное состояние в одном месте, и случайно поменять его в совершенно другом месте
\pause
\item Чёрные текстуры: неправильные MIN/MAG фильтры, не загрузили / не выключили mipmaps
\pause
\item Ничего не рисуется: выключили все настройки, все преобразования, пробуем нарисовать хотя бы один треугольник, от этого дальше можно идти :)
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Как дебажить WebGL}
\begin{itemize}
\item Для дебага ошибочного состояния/нстройки OpenGL есть Renderdoc, -- к сожалению, почти не работает под вебом :(
\pause
\item Можно использовать встроенный механизм \mintinline{js}|gl.getError()| для поиска ошибки
\pause
\item Для ошибок в шейдерах лучше всего \textit{визуальный дебаг}: выводим какую-нибудь переменную в качестве цвета, фактически можем взглядом дебажить миллионы параллельных исполнений шейдера :)
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Как оптимизировать WebGL}
\begin{itemize}
\item Стараться уменьшить количество обновлений данных (с CPU на GPU) на каждый кадр
\pause
\item Уменьшить количество данных требуемых для рисования кадра (буферы, текстуры)
\pause
\item Уменьшить количество затрагиваемых пикселей (рисовать 1000 треугольников в 1 пиксель очень дёшево, рисовать 1000 треугольников во весь экран очень дорого)
\pause
\item Уменьшить количество вычислений в шейдерах
\pause
\item Уменьшить количество переключений состояния и вызовов команд рисования (см. \textit{batching})
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{Ссылки}
\begin{itemize}
\item Мой \href{https://github.com/lisyarus/graphics-course-slides}{\textbf{\alert{\underline{курс}}}} по OpenGL
\item Лучшие уроки по OpenGL: \href{https://learnopengl.com}{\textbf{\alert{\underline{learnopengl.com}}}}
\item Сайт с онлайн-шейдерами: \href{https://www.shadertoy.com}{\textbf{\alert{\underline{shadertoy.com}}}}
\item Книжка с примерами шейдеров: \href{https://thebookofshaders.com}{\textbf{\alert{\underline{thebookofshaders.com}}}}
\end{itemize}
\end{frame}

\end{document}