Урок по использованию геометрических объектов, текстур и шейдеров в Processing

Как ясно из названия, в этом уроке будут рассмотрены самые основы. Цель статьи описать и наглядно продемонстрировать использование основных «строительных блоков» любого 2D или 3D проекта. Поэтому урок даёт общее понимание основ, а не является пошаговой инструкцией. Весь приведённый в статье код содержит комментарии, так что становится ясно, что делается в каждой конкретной строке. Поэтому понимание и переделка скетчей под ваши нужды не должны поставить труда.

Урок начнётся с самых основ – создания геометрических объектов в двух измерениях. Затем будет показано, как добавлять текстуры к этим фигурам. На примере 2D понять концепции текстурирования гораздо проще. Текстурирование используется для разных нужд, а не только как способ размещения статических изображений на геометрических объектах. Один из примеров в этой статье покажет, как можно использовать текстуры и спрайты для создания анимации!
После того, как будут получены основы работы с 2D, можно будет переходить и к 3D. Начнём с летающих разноцветных пирамид, а затем создадим Землю с вертексами, нормалями, текстурами и правильными координатами для текстур. Особенно важно последнее – получение правильных координат для текстур может быть достаточно сложной задачей.

И наконец, рассмотрим применение шейдеров к 3D объектам. С помощью шейдеров можно создавать удивительные вещи. Можно заняться освещением и мультитекстурами, но это только для начала. Шейдеры позволяют работать с очень специфичными параметрами, которые в OpenGL, например, обрабатываются автоматически. Например, Вы сможете менять позиции вертексов в вертексных шейдерах (этот пример приведён в уроке).
Чтобы всё описанное выше корректно работало, различные параметры скетча (сам основной скетч, 3D объекты и шейдеры) должны быть правильно настроены и согласованы друг с другом. Примеры кода из урока покажут, как это правильно сделать. Как только Вы изучите основы, у Вас появится база, пользуясь которой Вы сможете создать более продвинутые программы. Давайте начнём …

Примеры кода

Все примеры кода из этой статьи можно скачать с GitHub - https://github.com/AmnonOwed. Они написаны в Processing 1.5.1. с использованием библиотеки GLGraphics 1.0.0, написанной Андресом Колубри. Как Вам известно в  Processing 2.0 появилось много улучшений по сравнению с предыдущими версиями. Одно из наиболее интересных – улучшение OpenGL-рендеринга. Многие из тех вещей, которые раньше приходилось делать с помощью GLGraphics, теперь можно реализовать с помощью собственных методов и классов Processing без использования сторонних библиотек. Примеры кода портированы для Processing 2.0b8/2.0b9. Но так как это пока только бета-версия, то некоторая функциональность может быть плохо документирована. Добавьте к этому сложности в работе с GLSL-шейдерами, и Вы поймёте, что работа с бета-версией может стать настоящей проблемой. Несмотря на то, что все примеры кода работают в новой версии Processing, они не являются точной копией примеров для версии 1.5.1.

К счастью GitHub поддерживает совместную разработку, так что не стесняйтесь – создавайте дополнительные ветви и улучшайте код. Лучше будет, если Вы скачаете весь репозиторий целиком. Тогда все примеры кода точно будут работать, так как будут правильно располагаться в иерархии папок и будут правильно обращаться к папке с общим изображениями. Лучше использовать версию Processing 1.5.1 в сочетании с GLGraphics, но если желаете, можете выбрать другую версию или даже установить несколько версий Processing на Ваш компьютер. Тогда Вы сможете скачать и протестировать разные версии кода. Ниже приведены необходимые ссылки:

• Любую из версий Processing (1.5.1, 2.0b8 и 2.0b9) можно скачать здесь - http://processing.org/download/.
• Примеры кода для Processing 1.5.1.+ GLGraphics 1.0.0 находятся в репозитории - https://github.com/AmnonOwed/P5_CanTut_GeometryTexturesShaders.
• Примеры кода для Processing 2.0b8/2.0b9 доступны здесь - https://github.com/AmnonOwed/P5_CanTut_GeometryTexturesShaders2B8.

Создание геометрических объектов в 2D

Как уже было сказано во введении к уроку, мы начнём с основ, а затем будем расширять границы использования одних и тех же базовых техник. Первый шаг на этом пути – это создание двумерных геометрических фигур. Для этого Processing предоставляет встроенные методы, такие как rect(), ellipse() и triangle(). Каждый из них имеет широкие области применения и удобен для нас. Однако если Вам захочется большей гибкости, лучше использовать вертексы для создания произвольных фигур. Использование вертексов откроет доступ к таким вещам, как повертексное окрашивание, работа с нормалями и uv-координатами текстур для каждого вертекса. Для этих целей в Processing существует несколько полезных методов: beginShape, endShape, vertex и texture.

В методе beginShape можно использовать различные параметры (такие как TRIANGLES, QUADS и т.д.), чтобы указать какую фигуру Вы хотите создать (треугольник, квадрат и т.д.). Документация к методу beginShape содержит примеры кода и изображение фигуры, получаемое с помощью этого кода. С одним и тем же набором вертексов можно сформировать различные фигуры в зависимости от значения параметра.

В примере Custom2DGeometry на экран выводятся все возможные типы фигур. Кроме того пример демонстрирует, что OpenGL без труда создаёт переходы цветов между вертексами в пределах фигуры. Таким образом, можно создавать интересные многоцветные полигоны.

Текстурирование в 2D

Итак, Вы познакомились с базовыми методами Processing для создания геометрических фигур, пора переходить к текстурам. Текстурирование – это размещение изображения на поверхности геометрического объекта. Так же как для создания фигуры надо было задать позиции вертексов, так и для размещения текстуры надо задать её положение на объекте. Это положение называется uv-координатами или координатами текстуры. В Processing значения этих координат можно задать в размерах изображения или в нормализованном виде. Лучше работать с нормализованными значениями, так как этот подход является более гибким (например, если Вам понадобиться изменить размер изображения). OpenGL тоже работает с нормализованными значениями (например, при работе с шейдерами).

В примере FixedMovingTextures2D создаются те же фигуры, что и в предыдущем примере, но теперь они покрыты текстурами. Благодаря этому возникают различные визуальные эффекты. В большинстве случаев координаты текстур задаются статически. Фигура может перемещаться или поворачиваться, но выглядеть она всегда будет одинаково. Есть и другая возможность – использование динамических координат для текстур. В этом примере продемонстрированы оба варианта.

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

Пример Texture2Danimation использует рассмотренные выше методы применительно к анимации. Каждый кадр анимации хранится в отдельном изображении. Все вместе они образуют подобие сетки. Смена кадров происходит за счёт перемещения по ячейкам сетки. При этом используются координаты текстур. Как видите, даже с использованием такого неказистого набора спрайтов можно создать иллюзию анимации. Использование же этой простой техники в сочетании с красивыми спрайтами позволяет добиться очень привлекательных результатов.