Ответ 1
Ша,
То, что я сделал, - это выстроить прямоугольную сетку точек в моих координатах OpenGL. (Я использовал сетку 50x50). Затем я определяю одну или несколько контрольных точек в том же координатном пространстве. У меня есть общий алгоритм пинч-растяжения, который я написал. Он принимает контрольную точку, радиус и целое число со знаком для суммы, чтобы привлечь/отпереть точки сетки и применить ее к координатам моей сетки. Для щепотки он тянет точки сетки ближе к контрольной точке, и для растяжения он отталкивает контрольные точки. Это изменение больше в контрольной точке и уменьшается, когда расстояние от контрольной точки увеличивается до значения радиуса.
Как только я изменил координаты моей сетки, я затем определяю набор треугольных полос, которые рисуют всю (искаженную) прямоугольную область моего изображения. Я могу отобразить всю текстуру на извращенной сетке с помощью одного вызова рисования OpenGL. OpenGL заботится о растяжении пикселей изображения, чтобы соответствовать искаженным треугольникам в моей сетке контрольных точек. Вот пример изображения до/после, который использует несколько контрольных точек для создания живого лица. Он показывает сетку сетки, чтобы вы могли видеть, что она делает. Это моя уродливая кружка, поэтому извиняюсь заранее:
И растянутое изображение:
В моем случае я хотел, чтобы контрольные точки по периметру изображения оставались на месте, и только внутренняя часть изображения искажалась, поэтому я добавил дополнительную логику кода для блокировки точек управления периметра. Вот почему рамка изображения не вдвигается, как на вашем изображении. Это потребовало дополнительного кода.
Код заканчивается с использованием формулы расстояния, чтобы выяснить, как далеко от каждой точки сетки находится контрольная точка, а затем триггер, чтобы определить угол, умножение для изменения расстояния, а затем больше триггера для вычисления нового местоположения для каждой точки сетки. Так как я только трансформирую сетку контрольных точек размером 50 х 50, тем не менее, это достаточно быстро, чтобы не отставать.
Наше приложение, Face Dancer, бесплатно в магазине приложений. (Загрузите его по этой ссылке: Face Dancer в магазине приложений Вы можете загрузить его и попробовать. (Он включает в себя ряд бесплатных морфов, а затем предлагает дополнительные морфы для покупок в приложении). Также есть платная версия "Плюс", в которую включены все морфы.
Когда вы запускаете Face Dancer, если вы два пальца дважды нажмите на изображение, он отображает сетку контрольных точек, которые она использует, чтобы создать морфинг, чтобы вы могли видеть, что он делает.
Существует пример приложения OpenGL под названием GLCameraRipple, который включен в Xcode и связан с документацией. Я бы предложил взглянуть на это как отправную точку. Он берет видео-канал из камеры и рисует его на экране. Если вы коснетесь экрана, это искажает изображение, как если бы экран был пулом воды, и ваш палец вызывал в нем рябь. Он использует технику сетчатого деформирования, как то, что я описал.
К сожалению, я не думаю, что приложение использует GLKit, что намного упрощает использование OpenGL ES 2.0. GLKit предлагает ряд функций, которые делают его намного проще в использовании, включая GLKViews и GLKViewControllers.