Урок по использованию геометрических объектов, текстур и шейдеров в 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 использует рассмотренные выше методы применительно к анимации. Каждый кадр анимации хранится в отдельном изображении. Все вместе они образуют подобие сетки. Смена кадров происходит за счёт перемещения по ячейкам сетки. При этом используются координаты текстур. Как видите, даже с использованием такого неказистого набора спрайтов можно создать иллюзию анимации. Использование же этой простой техники в сочетании с красивыми спрайтами позволяет добиться очень привлекательных результатов.






DVD Russian VJ's Vol 2

russian vj Человек не может жить без музыки. И в то же время музыка становится только началом некой цепочки, к которой тянутся люди в свободные часы и во время самых радостных праздников.

Музыка рождает танец, движение вслед за мелодией, вместе с ритмом, способное надолго придать отличное настроение эмоциональный подъем.

Есть и другое направление – к музыке добавляется изображение, уже чужое движение, за которым человек следит, сопереживая.

подробнее

DVD Russian VJ's vol 1

russian vj  Вы когда-нибудь задумывались о том, что за странные и, в то же время завораживающие, картинки двигаются на экранах в клубе на уютной вечеринке или на многотысячном фестивале, на краю земли?

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

Кто следит за тем, чтобы ваши глаза впитывали музыку с экранов?

подробнее

Яндекс.Метрика Copyright by www.Malbred.com 2005