LookApp.ru - обзоры программ и игр для iPhone

В этом уроке мы по-быстрому освоим оставшиеся последними примитивы — точки и линии. Ничего сложного, но мне уже пришлось ответить на несколько вопросов по данным объектам, поэтому я решил остановиться на них подробнее.

Итак, наша цель — оперативное знакомство с точками и линиями, которое позволит нам двигаться дальше в нужном направлении.

Главное, не взять слишком высокий темп. При вызове “glVertexPointer()” я буду работать с таинственным параметром “stride” (шаг индекса) Рассмотрим эту тему сейчас, поскольку один из следующих уроков будет посвящен объектам Blender в программировании на iPhone, позволяющим без особого труда обзаводится на экране объектами в неприлично больших количествах

Шаг индекса — интересный параметр, которым многие просто пренебрегают (как, собственно, до этого момента и я) или описывают как “слишком сложную тему, к которой вы еще не готовы” (возможно, потому, что сами ее еще не проработали….). Главное — разобраться в основах — и все станет понятно.

Точки

В OpenGL ES объект “point” представляет собой точку в трехмерном пространстве. При активированном режиме “GL_POINT_SMOOTH” он визуализируется как круг. В противном случае — как квадрат.

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

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

В качестве довода приводилась аппаратная реализация точки, при которой квадрат формируется двумя треугольниками (во многих случаях это действительно так). Поэтому, объясняли мне, передавая GL данные по точке, мы увеличиваем аппаратную нагрузку. Однако при этом не берется в расчет элементарный вопрос: “Какой метод аппаратно эффективнее — “GL_TRIANGLE_STRIP” или “GL_TRIANGLE_FAN“?

В общем, не ломайте голову. При работе на iPhone можно было бы оптимизировать код для получения максимальной отдачи от чипа OpenGL ES, но, полагаю, нам это просто не нужно.

Предлагаю переходить к рисованию точки. Визуализируем на экране четыре точки разных цветов. Для описания точки понадобятся координаты X, Y и Z и размер.

Первым делом загружаем базовый проект здесь.

Координаты точки нужно указать в массиве вершин, а цвета — в массиве цветов. Итак, в метод “drawView[]” добавляем следующую структуру:

Надеюсь, все заметили, что я объединил в один массив вершины (т.е. координаты) и цвета (значения RGBA). Ничего страшного?

Код рисования останется практически тем же — подробно рассмотрим только одну строку. Рисование точек будет идти в несколько этапов, но все они знакомы за исключением указания размера.

Код рисования четырех точек:

Несложно догадаться, что “glPointSize()” задает размер точек. В принципе, в этой функции необходимости нет, поскольку в OpenGL ES предусмотрен размер точек по умолчанию, с которым они визуализируются в отсутствие других параметров. Наши же точки я сделал большими и красивыми.

Следующие две строки не похожи на то, что мы делаем обычно:

Ранее я уже останавливался на этом моменте, но третий параметр “stride” всегда был равен нулю, а ссылка на данные указывала на элемент “arrayName[0]” Теперь, поскольку в массиве вершин оказались еще и данные по цвету, нужно сообщить OpenGL о необходимости игнорировать цвета при поиске координат объекта и пропускать координаты при обращении к цветам.

Вот здесь нам придет на помощь шаг по индексу (третий параметр “stride“). В руководстве его определение звучит так:

Задает байтовое смещение между последовательными вершинами. При параметре “stride”, равном нулю, вершины в массиве расположены вплотную. По умолчанию равен нулю.

Здесь и кроется единственная и главная сложность, о которой я предупреждал. Прочтите внимательно.

Шаг индекса — это смещение между последовательными вершинами, а не заполнение места между ними!

Для “sizeof(GLfloat)” результат составляет 4 байта. Следовательно, при наличии трех “GLfloat” для каждой вершины и четырех “GLfloat” для каждого цвета определение точки займет 28 байт. Это и есть значение шага по индексу!

Мы рассчитали разницу между “points[0]” и “points[7]“. Понятно, что “points[7]” является началом координат следующей вершины? В массиве она хранится на 28 байт дальше предыдущей.

С шагом индекса разобрались. Теперь можете с видом знатока отвечать на бесконечные вопросы по этой теме.

Теперь нужно сообщить OpenGL, что массив цветов начинается в “points[3]” — это первое значение цвета RGBA (программа обработки цветов не будет анализировать структуру: не рассчитывайте, что укажете на “points[0]“, а она сама выяснит, откуда начинать). Шаг по индексу остается тем же самым.

После щелчка на кнопке “Build and Go” получаем в симуляторе следующий результат:

Четыре точки размером 50.0 без сглаживания, поэтому квадратной формы. Как сделать их круглыми? С помощью одной строки кода:

Добавьте эту строку прямо перед “glPointSize()“. Снова запустите симулятор и получите сглаженные (круглые) точки:

Поэкспериментируйте с размерами, цветами и прочими параметрами. Для начала добавьте приведенную ниже строку:

прямо перед только что внесенной “glEnable(GL_POINT_SMOOTH)“. Теперь с помощью “glTranslatef()” поменяйте для объектов координату Z. Продолжайте эксперименты, пока не почувствуете себя уверенно.

Линии

Линии ничем не сложнее остальных объектов: достаточно проанализировать один пример, чтобы все встало на свои места. Для начала добавим представленный ниже код:

После визуализации все станет понятно.

Чтобы нарисовать линии, обратимся к следующему коду (из “drawView[]“):

После настройки и отрисовки точек останется сообщить OpenGL о новом массиве вершин и цветов линий, а потом инициализировать рисование вызовом “glDrawArrays()“.

По щелчку на кнопке “Build and Go” получаем следующий результат:

Не правда ли, все очевидно? Из четырех точек в массиве получились две линии, у каждой из которых есть начало и конец. Но это еще не все. Обратите внимание на первый параметр “glDrawArrays()” — “GL_LINES“. Как и в случае с треугольниками, есть несколько способов рисования линий.

Рассмотрим их все.

GL_LINES: линия строится по паре вершин.

Вот как это выглядит для OpenGL:

GL_LINE_STRIP: первая вершина указывает начальную точку, а каждая последующая становится источником для линии, визуализируемой между ней и предыдущей вершиной.

Вот как выглядит проект для нас:

и для OpenGL:

GL_LINE_LOOP: первая вершина определяет начальную точку, а каждая последующая становится источником линии, визуализируемой между ней и предыдущей вершиной. Последняя вершина соединяется с первой.

Так выглядит код:

и экран симулятора:

Проект для OpenGL:

Линия 4: OpenGL соединяет последнюю вершину с первой (P4 > P1)

Заметьте, что останавливаться на четырех линиях (или начинать с них) необязательно: число линий может быть любым, но для каждой, само собой, необходимо минимум две координаты.

C линиями мы тоже закончили. Чтобы сделать их толще, поэкспериментируйте с вызовом “glLineWidth(GLfloat lineWidth)“. Обратите внимание: если линии станут толще, первую и последнюю координаты придется откорректировать, чтобы получить настоящий” квадрат.

Попробуйте применить к линиям базовое сглаживание, подключив “GL_LINE_SMOOTH“, как показано ниже:

Большой разницы не будет — по ряду причин (сглаживанию будет посвящена отдельная статья этой серии).

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

Вот и подошел к концу урок, получившийся достаточно длинным, но, я надеюсь, полезным. Помимо линий и точек мы рассмотрели значение шага индекса для “glVertexArray();“, а это обязательно пригодится в дальнейшей работе.

Исходный код скачать можно [здесь]

Текст оригинальной статьи на английском языке [здесь]

Уважаемые читатели, данный материал был переведен и подготовлен к публикации проектом LookApp.ru, при публикации на другом сайте ссылка на LookApp.ru обязательна.

(1 голосов, средний: 5.00 из 5)

 Загрузка ...