Простой шейдер мультяшной графики в OpenGL своими руками / forpes.ru

Главная
Простой шейдер мультяшной графики в OpenGL своими руками

Простой шейдер мультяшной графики в OpenGL своими руками +18

09.06.2020 18:23

asurkis 11 4600 Источник

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

Suzanne, неофициальный маскот Blender, отрендеренный с получившимся шейдером

В этом посте я расскажу, как написать отрисовку контуров с плавным переходом веса линий на OpenGL, хотя метод может использоваться в любом другом графическом API. Всем заинтересованным — добро пожаловать под кат.

Дополнительные библиотеки, которые я буду использовать:

glfw — для создания окна и обработки событий
glew — для загрузки функций OpenGL
glm — для векторной и матричной математики
assimp — для загрузки модели

Конфигурационный файл CMakeLists.txt у меня выглядит так:

cmake_minimum_required(VERSION 3.17)
project(OpenGL_posteffect_tutorial)

find_package(GLEW REQUIRED)
find_package(OpenGL REQUIRED)
find_package(glfw3 REQUIRED)
find_package(glm REQUIRED)
find_package(assimp REQUIRED)

add_executable(main main.cpp)
target_link_libraries(main GLEW::GLEW OpenGL glfw glm assimp)

В целом, все просто — ищем нужные библиотеки и подключаем.

Шаг 1. Создание окна

Создадим наше окно:

#include <GLFW/glfw3.h>
#include <cstdio>
#include <functional>

// Вспомогательный класс, чтобы описать
// освобождение ресурсов сразу после их выделения
class InvokeOnDestroy {
  std::function<void()> f;

public:
  InvokeOnDestroy(std::function<void()> &&fn) : f(fn) {}
  ~InvokeOnDestroy() { f(); }
};

// В целях отладки будем выводить сообщения glfw об ошибках
void myGlfwErrorCallback(int code, const char *description) {
  printf("[GLFW] %d: %s\n", code, description);
  fflush(stdout);
}

// Будем закрывать приложение по нажатию на Escape
void myGlfwKeyCallback(GLFWwindow *window, int key, int scancode, int action,
                       int mods) {
  if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
    glfwSetWindowShouldClose(window, GLFW_TRUE);
}

int main() {
  if (!glfwInit())
    return __LINE__;
  InvokeOnDestroy _glfwTerminate(glfwTerminate);
  glfwSetErrorCallback(myGlfwErrorCallback);

  GLFWwindow *window = glfwCreateWindow(640, 360, "OpenGL Tutorial", nullptr, nullptr);
  glfwSetKeyCallback(window, myGlfwKeyCallback);

  // Основной цикл
  while (!glfwWindowShouldClose(window)) {
    glfwPollEvents();
    glfwSwapBuffers(window);
  }

  return 0;
}

Результат

Черный экран. Ожидаемо, ведь мы пока ничего и не рисуем

Шаг 2. Загрузка OpenGL

Теперь загрузим сам OpenGL:

// GLEW обязательно включать до GLFW
#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <cstdio>
#include <functional>

class InvokeOnDestroy {
  std::function<void()> f;

public:
  InvokeOnDestroy(std::function<void()> &&fn) : f(fn) {}
  ~InvokeOnDestroy() { f(); }
};

void myGlfwErrorCallback(int code, const char *description) {
  printf("[GLFW][code=%d] %s\n", code, description);
  fflush(stdout);
}

void myGlfwKeyCallback(GLFWwindow *window, int key, int scancode, int action,
                       int mods) {
  if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
    glfwSetWindowShouldClose(window, GLFW_TRUE);
}

// Создадим обработчик для отладочного вывода самого OpenGL
void GLAPIENTRY myGlDebugCallback(GLenum source, GLenum type, GLuint id,
                                  GLenum severity, GLsizei length,
                                  const GLchar *message,
                                  const void *userParam) {
  printf("[GL][source=0x%X; type=0x%X; id=0x%X; severity=0x%X] %s\n", source,
         type, id, severity, message);
}

int main() {
  if (!glfwInit())
    return __LINE__;
  InvokeOnDestroy _glfwTerminate(glfwTerminate);
  glfwSetErrorCallback(myGlfwErrorCallback);

  GLFWwindow *window =
      glfwCreateWindow(800, 600, "OpenGL Tutorial", nullptr, nullptr);
  glfwSetKeyCallback(window, myGlfwKeyCallback);

  // Загрузка OpenGL
  glfwMakeContextCurrent(window);
  if (glewInit() != GLEW_OK)
    return __LINE__;

  // Привязка отладчика
  glEnable(GL_DEBUG_OUTPUT);
  glDebugMessageCallback(myGlDebugCallback, nullptr);

  // Будем закрашивать окно, например, синим цветом
  glClearColor(0.0f, 0.0f, 1.0f, 0.0f);
  while (!glfwWindowShouldClose(window)) {
    glfwPollEvents();
    glClear(GL_COLOR_BUFFER_BIT);
    glfwSwapBuffers(window);
  }

  return 0;
}

Результат

Теперь фон синий

Шаг 3. Отрисовка треугольника

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

Дополнительные включаемые файлы:

#include <exception>
#include <string>
#include <vector>

Вспомогательный класс шейдера:

class Shader {
  // Идентификатор объекта OpenGL
  GLuint id;

  // Загрузка исходного кода из файла
  void load(const char *filename) {
    FILE *f = fopen(filename, "r");
    // В случае неудачи выбросим исключение
    // Корректная обработка ошибок не входит в цели этого туториала
    // Поэтому здесь ей можно пренебречь
    if (!f)
      throw std::exception();
    InvokeOnDestroy _fclose([&]() { fclose(f); });

    // Читаем содержимое файла
    std::string src;
    int c;
    while ((c = getc(f)) != EOF)
      src.push_back(c);

    // Загружаем код шейдера
    const GLchar *string = src.data();
    const GLint length = src.length();
    glShaderSource(id, 1, &string, &length);
  }

  // Компиляция шейдера
  void compile() {
    glCompileShader(id);
    // Проверяем успешность компиляции
    GLint status;
    glGetShaderiv(id, GL_COMPILE_STATUS, &status);
    if (!status) {
      // В случае неудачи -- выведем сообщение компилятора
      // и выбросим исключение
      GLchar infoLog[2048];
      GLsizei length;
      glGetShaderInfoLog(id, sizeof(infoLog) / sizeof(infoLog[0]), &length,
                         infoLog);
      fputs(infoLog, stderr);
      fflush(stderr);
      throw std::exception();
    }
  }

public:
  Shader(GLenum type) : id(glCreateShader(type)) {}
  ~Shader() { glDeleteShader(id); }
  // Оператор преобразования к GLuint,
  // чтобы можно было вызывать функции OpenGL
  // прямо от нашего объекта
  operator GLuint() { return id; }

  // Вынесено в отдельную функцию,
  // т.к. в случае исключения в конструкторе
  // деструктор не вызывается
  void init(const char *filename) {
    load(filename);
    compile();
  }
};

Такой же для шейдерной программы:

class ShaderProgram {
  // Идентификатор объекта OpenGL
  GLuint id;

  // Компоновка программы
  void link() {
    glLinkProgram(id);
    // Проверяем успешность
    GLint status;
    glGetProgramiv(id, GL_LINK_STATUS, &status);
    if (!status) {
      // В случае неудачи -- выведем сообщение компоновщика
      // и выбросим исключение
      GLchar infoLog[2048];
      GLsizei length;
      glGetProgramInfoLog(id, sizeof(infoLog) / sizeof(infoLog[0]), &length,
                          infoLog);
      fputs(infoLog, stderr);
      fflush(stderr);
      throw std::exception();
    }
  }

  // Валидация программы
  void validate() {
    glValidateProgram(id);
    // Проверяем успешность
    GLint status;
    glGetProgramiv(id, GL_VALIDATE_STATUS, &status);
    if (!status) {
      // В случае неудачи -- выведем сообщение валидатора
      // и выбросим исключение
      GLchar infoLog[2048];
      GLsizei length;
      glGetProgramInfoLog(id, sizeof(infoLog) / sizeof(infoLog[0]), &length,
                          infoLog);
      fputs(infoLog, stderr);
      fflush(stderr);
      throw std::exception();
    }
  }

public:
  ShaderProgram() : id(glCreateProgram()) {}
  ~ShaderProgram() { glDeleteProgram(id); }
  operator GLuint() { return id; }

  // Вынесено в отдельную функцию,
  // т.к. в случае исключения в конструкторе
  // деструктор не вызывается
  void init(const char *vertSrc, const char *fragSrc) {
    // Создадим вершинный и фрагментный шейдеры
    Shader vert(GL_VERTEX_SHADER);
    Shader frag(GL_FRAGMENT_SHADER);
    vert.init(vertSrc);
    frag.init(fragSrc);
    // Присоединим их к программе
    glAttachShader(id, vert);
    glAttachShader(id, frag);
    // Скомпонуем и проверим программу
    link();
    validate();
  }
};

А также нам понадобятся вспомогательные классы для:

Буферов
Массивов вершин
Текстур
Фреймбуферов

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

#define DEFINE_GL_ARRAY_HELPER(name, gen, del)                                   struct name : public std::vector<GLuint> {                                       name(size_t n) : std::vector<GLuint>(n) { gen(n, data()); }                    ~name() { del(size(), data()); }                                             };
DEFINE_GL_ARRAY_HELPER(Buffers, glGenBuffers, glDeleteBuffers)
DEFINE_GL_ARRAY_HELPER(VertexArrays, glGenVertexArrays, glDeleteVertexArrays)
DEFINE_GL_ARRAY_HELPER(Textures, glGenTextures, glDeleteTextures)
DEFINE_GL_ARRAY_HELPER(Framebuffers, glGenFramebuffers, glDeleteFramebuffers)

Указатели на функции OpenGL динамические, поэтому воспользоваться шаблонами не получится.

Создадим шейдерную программу, пока что просто выводящую вершины без пространственных преобразований белым цветом:

ShaderProgram mainProgram;
mainProgram.init("s1.vert", "s1.frag");

s1.vert

#version 330 core

in vec3 vertexPosition;

void main() {
  gl_Position = vec4(vertexPosition, 1);
}

s1.frag

#version 330 core

out vec4 pixelColor;

void main() {
  pixelColor = vec4(1);
}

Зададим координаты треугольника:

Buffers buffers(1);
VertexArrays vertexArrays(1);
GLint attribLocation;

glBindVertexArray(vertexArrays[0]);
glBindBuffer(GL_ARRAY_BUFFER, buffers[0]);
// Заполним буфер координатами точек треугольника
GLfloat vertices[] = {
    -0.5f, -0.5f, 0.0f,
    -0.5f, 0.5f,  0.0f,
    0.5f,  0.0f,  0.0f,
};
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// Подключим буфер как вход вершинного шейдера
attribLocation = glGetAttribLocation(mainProgram, "vertexPosition");
glEnableVertexAttribArray(attribLocation);
// Зададим использование трех координат на вершину с плотной упаковкой
glVertexAttribPointer(attribLocation, 3, GL_FLOAT, GL_FALSE, 0, 0);
glBindVertexArray(0);
glBindBuffer(GL_ARRAY_BUFFER, 0);

И начнем отрисовывать треугольник в главном цикле:

while (!glfwWindowShouldClose(window)) {
  glfwPollEvents();

  int framebufferWidth, framebufferHeight;
  glfwGetFramebufferSize(window, &framebufferWidth, &framebufferHeight);
  glViewport(0, 0, framebufferWidth, framebufferHeight);

  glClear(GL_COLOR_BUFFER_BIT);
  glBindVertexArray(vertexArrays[0]);
  glUseProgram(mainProgram);
  // Отрисовываем треугольник из начала буфера и трех вершин
  glDrawArrays(GL_TRIANGLES, 0, 3);
  glUseProgram(0);
  glBindVertexArray(0);

  glfwSwapBuffers(window);
}

Результат

Шаг 4. Перемещение камеры

Добавим вращение камеры вокруг треугольника.

Заголовочный файл glm для векторной математики:

#include <glm/glm.hpp>

Немного поменяем наш треугольник:

GLfloat vertices[] = {
    0.0f, 0.0f, 1.0f,
    0.0f, 1.0f, 0.0f,
    1.0f, 0.0f, 0.0f,
};

Новый вершинный шейдер будет применять стандартную последовательность преобразований смещение объекта — преобразование координат в пространство камеры — проекция:

#version 330 core

uniform mat4 matModel;
uniform mat4 matView;
uniform mat4 matProjection;
in vec3 vertexPosition;

void main() {
  gl_Position = matProjection * matView * matModel * vec4(vertexPosition, 1);
}

Получим ссылки на uniform-переменные шейдера, чтобы заполнять их в программе:

GLint ulMatModel = glGetUniformLocation(mainProgram, "matModel");
GLint ulMatView = glGetUniformLocation(mainProgram, "matView");
GLint ulMatProjection = glGetUniformLocation(mainProgram, "matProjection");

Пусть камера вращается со скоростью 1/8 радиана в секунду, направлена в

$\vec{0}$ и ось «вверх» это Z:

float angle = 0.5f * glfwGetTime();
float sin = glm::sin(angle);
float cos = glm::cos(angle);
glm::vec3 pos(2.5f * sin, 2.5f * cos, 1.5f);
glm::vec3 forward = glm::normalize(-pos);
glm::vec3 up(0.0f, 0.0f, 1.0f);
glm::vec3 right = glm::normalize(glm::cross(forward, up));
up = glm::cross(right, forward);

Здесь pos — это положение камеры, а forward, right и up — это левая тройка ортогональных единичных векторов, задающих в пространстве камеры оси Z (от камеры), X (вправо) и Y (вверх) соответственно.

Камера смотрит в

$\vec{0}$ , поэтому вектора pos и forward противонаправлены.
Вектора forward, up и

$inline$ лежат в одной плоскости, поэтому вектор right можно получить нормированием векторного произведения forward и

$inline$ (мировая система координат — правая).

Ну и наконец вектор up можно получить как векторное произведение right и forward (эти векторы уже единичные и ортогональные, поэтому их векторное произведение также будет единичным).

Создадим матрицы преобразований:

glm::mat4 matModel(1.0f, 0.0f, 0.0f, 0.0f,
                    0.0f, 1.0f, 0.0f, 0.0f,
                    0.0f, 0.0f, 1.0f, 0.0f,
                    0.0f, 0.0f, 0.0f, 1.0f);

Никакого смещения в глобальной системе координат не делаем, поэтому матрица модели — единичная.

glm::mat4 matView(right.x, up.x, forward.x, 0.0f,
                  right.y, up.y, forward.y, 0.0f,
                  right.z, up.z, forward.z, 0.0f,
                  0.0f, 0.0f, 0.0f, 1.0f);
matView *= glm::mat4(1.0f, 0.0f, 0.0f, 0.0f,
                      0.0f, 1.0f, 0.0f, 0.0f,
                      0.0f, 0.0f, 1.0f, 0.0f,
                      -pos.x, -pos.y, -pos.z, 1.0f);

Матрица вида — это смещение на положение камеры и проекция на оси координат в пространстве камеры, т.е.

$M=\left[\begin{array}{cccc} R_x & R_y & R_z & 0 \\ U_x & U_y & U_z & 0 \\ F_x & F_y & F_z & 0 \\ 0 & 0 & 0 & 1 \\ \end{array}\right]\cdot\left[\begin{array}{cccc} 1 & 0 & 0 & -P_x \\ 0 & 1 & 0 & -P_y \\ 0 & 0 & 1 & -P_z \\ 0 & 0 & 0 & 1 \\ \end{array}\right]$

Где

$\vec{F}$ — forward,

$\vec{R}$ — right,

$\vec{U}$ — up,

$\vec{P}$ — pos.

Стоит учесть, что в glm матрицы задаются по столбцам, т.е. элементы идут в следующем порядке:

$A=\left[\begin{array}{cccc} a_1 & a_5 & a_9 & a_{13} \\ a_2 & a_6 & a_{10} & a_{14} \\ a_3 & a_7 & a_{11} & a_{15} \\ a_4 & a_8 & a_{12} & a_{16} \\ \end{array}\right]$

float zNear = 0.0625f;
float zFar = 32.0f;
glm::mat4 matProjection(1.0f, 0.0f, 0.0f, 0.0f,
                        0.0f, 1.0f, 0.0f, 0.0f,
                        0.0f, 0.0f, (zFar + zNear) / (zFar - zNear), 1.0f,
                        0.0f, 0.0f, -2.0f * zFar * zNear / (zFar - zNear), 0.0f);

На данном этапе матрица проекции преобразовывает Z из отрезка

$inline$ (

$inline$ — zNear,

$inline$ — zFar) в отрезок

$inline$ , а также делит X и Y на Z.

Как это работает: вывод gl_Position вершинного шейдера до растеризации делится на свою координату W, поэтому для того, чтобы поделить координаты X и Y на Z мы присваиваем W значение нашей координаты Z. При этом отображаемые координаты XYZ ограничены кубом

$inline$ , таким образом новая координата Z должна попасть в этот куб. Зададим минимальное —

$inline$ и максимальное —

$inline$ значения этой координаты до преобразования, и представим новую Z как линейную комбинацию Z до преобразования и 1 (т.е. W до преобразования):

$\hat{z}=\frac{az+b}{z}=a+\frac{b}{z}; z_1\leq z\leq z_2; -1\leq\hat{z}\leq 1$

При этом

$inline$ должна остаться возрастающей, т.к.

$inline$ — ближняя граница, а

$inline$ — дальняя. Отсюда можно составить простую систему уравнений:

$\left\{\begin{array}{ccc} a+\frac{b}{z_1}&=&-1 \\ a+\frac{b}{z_2}&=&1 \\ \end{array}\right.$

$\left\{\begin{array}{l} a\left(z_2-z_1\right)=z_2+z_1 \\ b\left(\frac{1}{z_2}-\frac{1}{z_1}\right)=2 \\ \end{array}\right.$

$a=\frac{z_2+z_1}{z_2-z_1}$

$b=\frac{2z_1z_2}{z_1-z_2}=-2\frac{z_2z_1}{z_2-z_1}$

И полученная матрица проекции:

$M=\left[\begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & \frac{z_2+z_1}{z_2-z_1} & -2\frac{z_2z_1}{z_2-z_1} \\ 0 & 0 & 1 & 0 \\ \end{array}\right]$

Наконец, загрузим наши матрицы в шейдер:

glUseProgram(mainProgram);
glUniformMatrix4fv(ulMatModel,      1, GL_FALSE, &matModel[0][0]);
glUniformMatrix4fv(ulMatView,       1, GL_FALSE, &matView[0][0]);
glUniformMatrix4fv(ulMatProjection, 1, GL_FALSE, &matProjection[0][0]);
glDrawArrays(GL_TRIANGLES, 0, 3);

Результат

Как и ожидалось, просто вращающийся белый треугольник. Пока ничего интересного.

Шаг 5. Загрузка произвольной модели

Заменим треугольник на произвольную фигуру. Подключим заголовочные файлы assimp:

#include <assimp/Importer.hpp>
#include <assimp/postprocess.h>
#include <assimp/scene.h>

Пока будем загружать простой куб. Его OBJ-файл выглядит так:

Здесь просто 8 вершин куба и 6 его граней, по 4 вершины на каждую

Заменим код загрузки вершин в буфер:

// Нам потребуется 2 буфера: для вершин и для индексов вершин
Buffers buffers(2);
VertexArrays vertexArrays(1);
GLint attribLocation;

glBindVertexArray(vertexArrays[0]);
glBindBuffer(GL_ARRAY_BUFFER, buffers[0]);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, buffers[1]);
// В объекте произвольное количество вершин, поэтому запишем его в переменную
GLuint indexCount;
{
  Assimp::Importer importer;
  // Грани могут быть записаны не в виде треугольников,
  // поэтому произведем триангуляцию при загрузке
  const aiScene *scene =
      importer.ReadFile("scene.obj", aiProcess_Triangulate);
  // Пока считаем, что у нас только один объект в сцене
  const aiMesh *mesh = scene->mMeshes[0];
  glBufferData(GL_ARRAY_BUFFER, mesh->mNumVertices * 3 * sizeof(GLfloat),
                mesh->mVertices, GL_STATIC_DRAW);
  // Проходим по всем граням и запоминаем индексы вершин треугольников
  std::vector<GLuint> indices;
  for (int i = 0; i < mesh->mNumFaces; ++i)
    for (int j = 0; j < mesh->mFaces[i].mNumIndices; ++j)
      indices.push_back(mesh->mFaces[i].mIndices[j]);
  // Запоминаем количество индексов
  indexCount = indices.size();
  // Загружаем индексы в буфер
  glBufferData(GL_ELEMENT_ARRAY_BUFFER, indexCount * sizeof(GLuint),
                indices.data(), GL_STATIC_DRAW);
}
// Здесь ничего не меняется, на вход вершинного шейдера по-прежнему подаются
// трехмерные вектора вещественных чисел одинарной точности
attribLocation = glGetAttribLocation(mainProgram, "vertexPosition");
glEnableVertexAttribArray(attribLocation);
glVertexAttribPointer(attribLocation, 3, GL_FLOAT, GL_FALSE, 0, 0);
glBindVertexArray(0);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);

И код отрисовки:

// Заменяем glDrawArrays(GL_TRIANGLES, 0, 3) на
glDrawElements(GL_TRIANGLES, indexCount, GL_UNSIGNED_INT, 0);

А также пока заменим наш фрагментный шейдер, чтобы цвет точки зависил от ее глубины:

#version 330 core

out vec4 pixelColor;

void main() {
  pixelColor = vec4(vec3(exp(-gl_FragCoord.w)), 1);
}

Результат

Что-то тут не так. Ведь глубина на поверхности куба должна быть непрерывной.

Добавим проверку глубины, чтобы было видно не отрисованный позже пиксель, а ближайший к камере:

glEnable(GL_DEPTH_TEST);

Также нужно очищать буфер глубины:

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

Результат

Вот теперь порядок

Шаг 6. Постобработка

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

Схема треугольника, на который отображается текстура:

Здесь черным обозначены экранные координаты, а синим — текстурные.

Как можно заметить, в черный квадрат экрана (координаты от -1 до 1) попадают точки текстуры с координатами от 0 до 1.

Создадим еще один буфер и массив вершин — для треугольника; две текстуры — для отрисовки цвета и глубины; фреймбуфер — для обозначения, куда мы хотим отрисовывать.

Buffers buffers(3);
VertexArrays vertexArrays(2);
Textures textures(2);
Framebuffers framebuffers(1);

Загружаем координаты треугольника:

glBindVertexArray(vertexArrays[1]);
glBindBuffer(GL_ARRAY_BUFFER, buffers[2]);
GLfloat fillTriangle[] = {
    -1.0f, -1.0f, 0.0f, 0.0f, //
    3.0f,  -1.0f, 2.0f, 0.0f, //
    -1.0f, 3.0f,  0.0f, 2.0f, //
};
glBufferData(GL_ARRAY_BUFFER, sizeof(fillTriangle), fillTriangle,
              GL_STATIC_DRAW);
attribLocation = glGetAttribLocation(postProgram, "vertexPosition");
glEnableVertexAttribArray(attribLocation);
glVertexAttribPointer(attribLocation, 2, GL_FLOAT, GL_FALSE,
                      4 * sizeof(GLfloat), 0);
attribLocation = glGetAttribLocation(postProgram, "vertexTextureCoords");
glEnableVertexAttribArray(attribLocation);
glVertexAttribPointer(attribLocation, 2, GL_FLOAT, GL_FALSE,
                      4 * sizeof(GLfloat), (GLvoid *)(2 * sizeof(GLfloat)));

Создадим текстуры:

const int MAX_WIDTH = 2048;
const int MAX_HEIGHT = 2048;
glBindTexture(GL_TEXTURE_2D, textures[0]);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, MAX_WIDTH, MAX_HEIGHT, 0, GL_RGB,
              GL_UNSIGNED_BYTE, nullptr);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

glBindTexture(GL_TEXTURE_2D, textures[1]);
glTexImage2D(GL_TEXTURE_2D, 0, GL_DEPTH_COMPONENT, MAX_WIDTH, MAX_HEIGHT, 0,
              GL_DEPTH_COMPONENT, GL_FLOAT, nullptr);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glBindTexture(GL_TEXTURE_2D, 0);

Чтобы не пересоздавать текстуры каждый раз при изменении размеров окна, создадим их с запасом по размеру (у меня монитор 1920 на 1080, поэтому 2048 на 2048 — достаточный запас), и будем домножать текстурные координаты на коэффициент

$\frac{\text{ширина или высота окна}}{\text{ширина или высота текстуры}}$

Создаем фреймбуфер:

glBindFramebuffer(GL_FRAMEBUFFER, framebuffers[0]);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D,
                        textures[0], 0);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D,
                        textures[1], 0);
GLenum drawBuffers[] = {GL_COLOR_ATTACHMENT0};
glDrawBuffers(sizeof(drawBuffers) / sizeof(drawBuffers[0]), drawBuffers);
glBindFramebuffer(GL_FRAMEBUFFER, 0);

И создаем программу постобработки:

ShaderProgram postProgram;
postProgram.init("s2.vert", "s2.frag");

s2.vert

#version 330 core

uniform vec2 textureScale;
in vec2 vertexPosition;
in vec2 vertexTextureCoords;
out vec2 textureCoords;

void main() {
  gl_Position = vec4(vertexPosition, 0, 1);
  textureCoords = textureScale * vertexTextureCoords;
}

s2.frag

#version 330 core

uniform sampler2D renderTexture;
uniform sampler2D depthTexture;
in vec2 textureCoords;
out vec4 pixelColor;

void main() {
  vec4 baseColor = texture2D(renderTexture, textureCoords);
  pixelColor = vec4(baseColor.x, 1 - baseColor.y, baseColor.z, 1);
}

Как можно заметить, пока суть такой постобработки просто в инвертировании зеленого канала.

Прицепим текстуру цвета в слот 0, а текстуру глубины — в слот 1.

glBindVertexArray(vertexArrays[1]);
glUseProgram(postProgram);
glUniform1i(glGetUniformLocation(postProgram, "renderTexture"), 0);
glUniform1i(glGetUniformLocation(postProgram, "depthTexture"), 1);
glUseProgram(0);
glBindVertexArray(0);

Запомним положение переменной, отвечающей за масштаб текстуры:

GLint ulTextureScale = glGetUniformLocation(postProgram, "textureScale");

Новый главный цикл:

while (!glfwWindowShouldClose(window)) {
  glfwPollEvents();

  int framebufferWidth, framebufferHeight;
  glfwGetFramebufferSize(window, &framebufferWidth, &framebufferHeight);
  glViewport(0, 0, framebufferWidth, framebufferHeight);

  // Сначала отрисовываем фреймбуфер
  glBindFramebuffer(GL_FRAMEBUFFER, framebuffers[0]);
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  glBindVertexArray(vertexArrays[0]);
  glUseProgram(mainProgram);

  // Здесь ничего не поменялось
  float angle = 0.5f * glfwGetTime();
  float sin = glm::sin(angle);
  float cos = glm::cos(angle);
  glm::vec3 pos(2.5f * sin, 2.5f * cos, 1.5f);
  glm::vec3 forward = glm::normalize(-pos);
  glm::vec3 up(0.0f, 0.0f, 1.0f);
  glm::vec3 right = glm::normalize(glm::cross(forward, up));
  up = glm::normalize(glm::cross(right, forward));
  float zNear = 0.0625f;
  float zFar = 32.0f;

  glm::mat4 matModel(1.0f, 0.0f, 0.0f, 0.0f,
                      0.0f, 1.0f, 0.0f, 0.0f,
                      0.0f, 0.0f, 1.0f, 0.0f,
                      0.0f, 0.0f, 0.0f, 1.0f);
  glm::mat4 matView(right.x, up.x, forward.x, 0.0f,
                    right.y, up.y, forward.y, 0.0f,
                    right.z, up.z, forward.z, 0.0f,
                    0.0f, 0.0f, 0.0f, 1.0f);
  matView *= glm::mat4(1.0f, 0.0f, 0.0f, 0.0f,
                        0.0f, 1.0f, 0.0f, 0.0f,
                        0.0f, 0.0f, 1.0f, 0.0f,
                        -pos.x, -pos.y, -pos.z, 1.0f);
  glm::mat4 matProjection(
      (float)framebufferHeight / framebufferWidth, 0.0f, 0.0f, 0.0f,
      0.0f, 1.0f, 0.0f, 0.0f,
      0.0f, 0.0f, (zFar + zNear) / (zFar - zNear), 1.0f,
      0.0f, 0.0f, -2.0f * zFar * zNear / (zFar - zNear), 0.0f);

  glUniformMatrix4fv(ulMatModel, 1, GL_FALSE, &matModel[0][0]);
  glUniformMatrix4fv(ulMatView, 1, GL_FALSE, &matView[0][0]);
  glUniformMatrix4fv(ulMatProjection, 1, GL_FALSE, &matProjection[0][0]);

  glDrawElements(GL_TRIANGLES, indexCount, GL_UNSIGNED_INT, 0);

  // Теперь отрисуем получившуюся текстуру
  glBindFramebuffer(GL_FRAMEBUFFER, 0);
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  // В слоте 0 -- текстура цвета
  glBindTexture(GL_TEXTURE_2D, textures[0]);
  // В слоте 1 -- текстура глубины
  glActiveTexture(GL_TEXTURE1);
  glBindTexture(GL_TEXTURE_2D, textures[1]);
  glBindVertexArray(vertexArrays[1]);
  glUseProgram(postProgram);
  // Масштаб текстуры
  glUniform2f(ulTextureScale,
              (GLfloat)framebufferWidth / MAX_WIDTH,
              (GLfloat)framebufferHeight / MAX_HEIGHT);
  glDrawArrays(GL_TRIANGLES, 0, 3);
  glBindTexture(GL_TEXTURE_2D, 0);
  glActiveTexture(GL_TEXTURE0);
  glBindTexture(GL_TEXTURE_2D, 0);

  glfwSwapBuffers(window);
}

Результат

Зеленый канал инвертирован

Шаг 7. Отрисовка контуров

Вернем отображение всех треугольников белым цветом, т.к. больше их цвет нам не понадобится

s1.frag

#version 330 core

out vec4 pixelColor;

void main() {
  pixelColor = vec4(1);
}

Наконец, все приготовления закончены, и можно заниматься самим шейдером постобработки.
s2.frag

#version 330 core

uniform vec2 reverseMaxSize;
uniform sampler2D renderTexture;
uniform sampler2D depthTexture;
in vec2 textureCoords;
out vec4 pixelColor;

void main() {
  vec4 baseColor = texture2D(renderTexture, textureCoords);
  float sum = 0.0f;
  float my = texture2D(depthTexture, textureCoords).x;
  sum += texture2D(depthTexture, textureCoords + vec2(+1, 0) * reverseMaxSize).x;
  sum += texture2D(depthTexture, textureCoords + vec2(-1, 0) * reverseMaxSize).x;
  sum += texture2D(depthTexture, textureCoords + vec2(0, +1) * reverseMaxSize).x;
  sum += texture2D(depthTexture, textureCoords + vec2(0, -1) * reverseMaxSize).x;
  float d = sum / my - 4.0f;
  pixelColor = baseColor - vec4(1000.0f * d, 100.0f * d, 10.0f * d, 0);
}

Здесь мы сравниваем глубину обрабатываемого пикселя и 4 соседних, и в зависимости от нее устанавливаем цвет пикселя на мониторе. Причем если пиксель находится внутри треугольника, то значение d будет равно 0: глубина линейно зависит от координат X и Y, поэтому сумма значений на концах отрезка равна удвоенной сумме в середине отрезка, и разность этих значений, соответственно, выдаст 0. Отрезков у нас 2:

$-1<\Delta x<1$ и

$-1<\Delta y<1$ , и не на границах треугольника влияние каждого из них на d будет нулевым.

Результат

Как можно заметить, границ мы на самом деле обнаруживаем 2: внутреннюю (цвет темнее белого, d > 0) и внешнюю (белую, d < 0). Двойная граница это конечно классно, и, может быть, кто-то хочет воспользоваться именно таким стилем, но я хотел бы пойти дальше.

Самое простое решение — взять модуль от d. Тогда мы увидим двойную темную границу:

float d = abs(sum / my - 4.0f);

Заодно установим светло-серый фон, т.к. темные контуры на синем фоне уже не особо видны:

glClearColor(0.875f, 0.875f, 0.875f, 0.0f);

Результат

Заменим модельку куба на что-нибудь поинтереснее, например Suzanne из Blender, а заодно поменяем ракурс:

float angle = 0.125f * glfwGetTime();
float sin = glm::sin(angle);
float cos = glm::cos(angle);
glm::vec3 pos(2.0f * sin, 2.0f * cos, 0.125f);

Результат

Теперь хотелось бы сделать линии толщиной не 2, а 1 пиксель. Самое простое, что приходит в голову — отрендерить текстуру до постобработки в 2 раза большего размера:

const int MAX_WIDTH = 4096;
const int MAX_HEIGHT = 4096;

glBindFramebuffer(GL_FRAMEBUFFER, framebuffers[0]);
glViewport(0, 0, 2 * framebufferWidth, 2 * framebufferHeight);

glBindFramebuffer(GL_FRAMEBUFFER, 0);
glViewport(0, 0, framebufferWidth, framebufferHeight);

glUniform2f(ulTextureScale,
            2.0f * framebufferWidth / MAX_WIDTH,
            2.0f * framebufferHeight / MAX_HEIGHT);

Результат

Но такой подход требует в 4 раза больше времени на растеризацию до постобработки. Вместо этого можно, например, рисовать только один из двух контуров (внешний и внутренний):

float d = max(0.0f, sum / my - 4.0f);

Результат

float d = max(0.0f, 4.0f - sum / my);

Результат

Основной недостаток этих методов в том, что они неодинаково обрабатывают выпуклые и вогнутые грани, что можно видеть на модели Suzanne. Но, тем не менее, они выдают линию толщиной 1 пиксель без отрисовки изображения удвоенного разрешения.

Заключение

В этом туториале мы прошлись по пути от создания окна до шейдера постобработки с уникальным стилем. Надеюсь, кому-нибудь такая постобработка покажется интересной, и найдет применение в уникальном стиле игры или анимации.

Весь код туториала доступен на GitHub

Комментарии (11)

GCU
10.06.2020 09:25
#21721846
Раньше похожий эффект делали с помощью прорисовки линиями поверх треугольников с помощью glPolygonOffset без дополнительного буфера и постобработки. Интересно было бы сравнить.
1. asurkis Автор
  10.06.2020 09:31
  #21721860
  Я вдохновлялся двумерными рисунками «от руки», и часть идеи была именно в том, чтобы вес линий менялся в зависимости от выпуклости объекта на сцене, и можно заметить, что тупые углы (в которых переход небольшой) отображаются светло-голубыми линиями, а сами границы модели (где как раз наибольшая разность «высот») — почти черными.
  Можно такое сделать прорисовкой поверх треугольников? Было бы интересно посмотреть на результат.
  1. GCU
    10.06.2020 19:03
    #21724086
    Я думаю что поскольку ребро получается в результате пересечения двух плоскостей, то две нормали к поверхностям как дополнительные атрибуты вершины позволят вычислить нужный цвет линии. Но это уже вершинный шейдер — раньше его не было.

Kyushu
10.06.2020 09:33
#21721864
Интересно, просьба продолжать обучение!
1. asurkis Автор
  10.06.2020 09:42
  #21721896
  Если интересен OpenGL, то вот хорошая серия уроков: Learn OpenGL. На первой странице есть оглавление со ссылками на все остальные, и тем довольно много.
  1. samrrr
    10.06.2020 10:12
    #21722014
    +1
    Только это оглавление не полное.
    
    jmdorian
    10.06.2020 11:17
    #21722346
    +1
    Оно будет полным дальше, переведен весь цикл статей, просто разными людьми и с переводчиком первых связаться не удалось, чтобы обновить оглавление.
  1. Kyushu
    10.06.2020 10:26
    #21722080
    Очень интересно. Спасибо. В Visual Studio работает?
    
    asurkis Автор
    10.06.2020 10:45
    #21722198
    Должно. Оригинальные туториалы Learn OpenGL уже портированы на Visual Studio 2019. Возможно, придется повозиться с настройкой проектных файлов, так, например, glfw для Visual Studio придется собирать самостоятельно.
    В целом я рекомендую использовать vcpkg для установки библиотек и cmake для организации проектных файлов, благо Visual Studio 2019 спокойно жует и то, и другое, и на подобных небольших проектах они довольно просты в использовании.
    
    samrrr
    10.06.2020 16:35
    #21723586
    +1
    glfw для Visual Studio придется собирать самостоятельно.
    
    Не знал, что надо что-то в glfw собирать, я просто скачал и пользуюсь.
    cmake вообще не люблю, обычно проект с cmake на винде без mingw какого-нибудь в Visual и не скомпилить.
    
    asurkis Автор
    10.06.2020 16:43
    #21723622
    А, моя ошибка. Не учел, что в архиве для одной разрядности бинарные файлы для нескольких компиляторов. С CMake у меня таких проблем не было, но не отрицаю, что могут возникнуть.

Простой шейдер мультяшной графики в OpenGL своими руками +18

Шаг 1. Создание окна

Шаг 2. Загрузка OpenGL

Шаг 3. Отрисовка треугольника

Шаг 4. Перемещение камеры

Шаг 5. Загрузка произвольной модели

Шаг 6. Постобработка

Шаг 7. Отрисовка контуров

Заключение

Комментарии (11)

GCU

asurkis Автор

GCU

Kyushu

asurkis Автор

samrrr

jmdorian

Kyushu

asurkis Автор

samrrr

asurkis Автор