Как сделать перспективу в крите
Krita: четырехточечные перспективные трансформации
Примерно месяц назад проект Крита успешно завершил кампанию по сбору средств на Кикстартере (см. прошлый пост), теперь разработчики полностью погружены в процесс написания обещанных плюшек. Первой реализованной целью стали четырехточечные перспективные трансформации. В этой статье я расскажу об их реализации и применении.
Вообще, «выглядящие трехмерными» преобразования существовали в Крите довольно давно, однако пользоваться ими было неудобно. Дело в том, что стандартный инструмент трансформаций позволял лишь вращать объект вокруг трех осей. Что весьма плохо подходит для самого востребованного пользовательского сценария: добавить текстуру на объект нарисованный с учетом перспективы. Самый простой пример — поместить окна на стены здания.
Наиболее простым решением этой задачи является задание перспективы по четырем точкам: выделяем окно, перетаскиваем его углы в нужную позицию и готово! Этот метод и был реализован.
Математика преобразования
Как известно, перспективная трансформация на плоскости задается матрицей преобразования однородных координат.
Эта матрица состоит из восьми значащих элементов (масштабы-повороты (), смещения (), перспектива ()) и одного масштабного коэффициента. Таким образом, чтобы однозначно задать преобразование, нам нужно иметь 8 уравнений, связывающих эти значения. Четыре точки, каждая с двумя координатами, как раз и зададут эти уравнения, при условии, что любые три из них не лежат на одной прямой.
Пусть имеются четыре точки (x1,y1)… (x4,y4) в координатах исходного изображения. Выразим четвертую точку через линейную комбинацию первых трех:
Решим систему и запишем матрицу преобразования, которая будет переводить (1,0,0) в кратное (x1,y1,1), (0,1,0) в кратное (x2,y2,1), (0,0,1) в (x3,y3,1) и (1,1,1) в (x4,y4,1)
Теперь повторим эти шаги для координат точек в конечном пространстве и получим матрицу B в штрихованных координатах.
Тогда искомая матрица преобразования будет иметь вид
Матрица будет преобразовывать исходные координаты точек в промежуточные фиктивные точки (1,0,0), (0,1,0), (0,0,1) и (1,1,1), а матрица , в свою очередь, преобразует их к желаемым значениям.
Искомая матрица получена!
Преобразование точек схода
Точкой схода называется точка, в которой сходятся на перспективном изображении параллельные линии предмета. Одним из требований художников была возможность перетаскивать эти точки напрямую. Сначала было не совсем понятно, как реализовать такой функционал, однако вскоре выяснилось, что в однородных координатах точки схода выражаются элементарно:
Дальнейшие преобразования никак не изменяются.
Вместо заключения
Описанный функционал доступен в последний сборках Криты под Windows и в репозитариях Krita Lime для Ubuntu. Можно обновляться и рисовать!
Напоследок видео от Павла Гераськина, демонстрирующее возможности нового инструмента:
Perspective Projection¶
So, up till now we’ve done only parallel projection. This is called like that because all the projection lines we drew were parallel ones.
However, in real life we don’t have parallel projection. This is due to the lens in our eyes.
Convex lenses, as this lovely image from wikipedia shows us, have the ability to turn parallel lightrays into converging ones.
The point where all the rays come together is called the focal point, and the vanishing point in a 2d drawing is related to it as it’s the expression of the maximum distortion that can be given to two parallel lines as they’re skewed toward the focal point.
As you can see from the image, the focal point is not an end-point of the rays. Rather, it is where the rays cross before diverging again… The only difference is that the resulting image will be inverted. Even in our eyes this inversion happens, but our brains are used to this awkwardness since childhood and turn it around automatically.
Let’s see if we can perspectively project our box now.
That went pretty well. As you can see we sort of merged the two sides into one (resulting into the purple side square) so we had an easier time projecting. The projection is limited to one or two vanishing point type projection, so only the horizontal lines get distorted. We can also distort the vertical lines
… to get three-point projection, but this is a bit much. (And I totally made a mistake in there…)
Let’s setup our perspective projection again…
We’ll be using a single vanishing point for our focal point. A guide line will be there for the projection plane, and we’re setting up horizontal and vertical parallel rules to easily draw the straight lines from the view plane to where they intersect.
And now the workflow in GIF format… (don’t forget you can rotate the canvas with the 4 and 6 keys)
Looks pretty haughty, doesn’t he?
And again, there’s technically a simpler setup here…
Did you know you can use Krita to rotate in 3d? No?
The ortho graphics are being set to 45 and 135 degrees respectively.
We draw horizontal lines on the originals, so that we can align vanishing point rulers to them.
And from this, like with the shearing method, we start drawing. (Don’t forget the top-views!)
Which should get you something like this:
But again, the regular method is actually a bit easier…
But now you might be thinking: gee, this is a lot of work… Can’t we make it easier with the computer somehow?
Uhm, yes, that’s more or less why people spent time on developing 3d graphics technology:
(The image above is sculpted in blender using our orthographic reference)
So let us look at what this technique can be practically used for in the next part…
© Copyright licensed under the GNU Free Documentation License 1.3+ unless stated otherwise. Build 1465.
Painting with Assistants¶
The assistant system allows you to have a little help while drawing straight lines or circles.
They can function as a preview shape, or you can snap onto them with the freehand brush tool. In the tool options of free hand brush, you can toggle Snap to Assistants to turn on snapping.
Krita’s vanishing point assistants in action. ¶
The following assistants are available in Krita:
Types¶
There are several types in Krita. You can select a type of assistant via the tool options docker.
Ellipse¶
An assistant for drawing ellipses and circles.
This assistant consists of three points: the first two are the axis of the ellipse, and the last one is to determine its width.
The same an ellipse, but allows for making ellipses that are concentric to each other.
If you press the Shift key while holding the first two handles, they will snap to perfectly horizontal or vertical lines. Press the Shift key while holding the third handle, and it’ll snap to a perfect circle.
Perspective¶
This ruler allows you to draw and manipulate grids on the canvas that can serve as perspective guides for your painting. A grid can be added to your canvas by first clicking the tool in the toolbar and then clicking four points on the canvas which will serve as the four corners of your grid.
This grid can be used with the ‘perspective’ sensor, which can influence brushes.
The grid can be manipulated by pulling on any of its four corners. The grid can be extended by clicking and dragging a midpoint of one of its edges. This will allow you to expand the grid at other angles. This process can be repeated on any subsequent grid or grid section.
If you press the Shift key while holding any of the corner handles, they’ll snap to one of the other corner handles, in sets. You can delete any grid by clicking on the cancel button at its center. This tool can be used to build reference for complex scenes.
Ruler¶
There are three assistants in this group:
Helps create a straight line between two points.
Extrapolates a straight line beyond the two visible points on the canvas.
This ruler allows you to draw a line parallel to the line between the two points anywhere on the canvas.
If you press the Shift key while holding the first two handles, they will snap to perfectly horizontal or vertical lines.
Spline¶
This assistant allows you to position and adjust four points to create a cubic bézier curve. You can then draw along the curve, snapping your brush stroke directly to the curve line. Perfect curves every time!
If you press the Shift key while holding the first two handles, they will snap to perfectly horizontal or vertical lines. Press the Shift key while holding the third or fourth handle, they will snap relative to the handle they are attached to.
Vanishing Point¶
This assistant allows you to create a vanishing point, typically used for a horizon line. A preview line is drawn and all your snapped lines are drawn to this line.
It is one point, with four helper points to align it to previously created perspective lines.
If you press the Shift key while holding the center handle, they will snap to perfectly horizontal or vertical lines depending on the position of where it previously was.
Changed in version 4.1: The vanishing point assistant also shows several general lines.
Fish Eye Point¶
Like the vanishing point assistant, this assistant is per a set of parallel lines in a 3d space. So to use it effectively, use two, where the second is at a 90 degrees angle of the first, and add a vanishing point to the center of both. Or combine one with a parallel ruler and a vanishing point, or even one with two vanishing points. The possibilities are quite large.
This assistant will not just give feedback/snapping between the vanishing points, but also give feedback to the relative left and right of the assistant. This is so you can use it in edge-cases like panoramas with relative ease.
If you press the Shift key while holding the first two handles, they will snap to perfectly horizontal or vertical lines. Press the Shift key while holding the third handle, and it’ll snap to a perfect circle.
2 Point Perspective¶
This assistant simplifies the setup of a two point perspective by putting the two vanishing points and the parallel vertical ruler into one single assistant. This allows it to draw a grid of squares. It requires 3 points at minimum: 2 for perspective, and the final for the mid-point of the vanishing points, which controls how the grid is drawn.
An extra option in the tool options, this controls how dense the grid is.
Enable Vertical Ruler
This allows you to disable the vertical ruler, so that the assistant is only two vanishing points and a grid.
In the above image, a two point perspective with an area limiter is enough to draw an indoor area. The assistant is colored blue here. ¶
Tutorials¶
Check out this in depth discussion and tutorial on https://www.youtube.com/watch?v=OhEv2pw3EuI
Setting up Krita for technical drawing-like perspectives¶
So now that you’ve seen the wide range of drawing assistants that Krita offers, here is an example of how using these assistants you can set up Krita for technical drawing.
This tutorial below should give you an idea of how to set up the assistants for specific types of technical views.
Orthographic¶
Orthographic is a mode where you try to look at something from the left or the front. Typically, you try to keep everything in exact scale with each other, unlike perspective deformation.
The key assistant you want to use here is the Parallel Ruler. You can set these up horizontally or vertically, so you always have access to a Grid.
Axonometric¶
All of these are set up using three Parallel Rulers.
Oblique
For oblique, set two parallel rulers to horizontal and vertical, and one to an angle, representing depth.
Dimetric & Isometric
Isometric perspective has technically all three rulers set up at 120° from each other. Except when it’s game isometric, then it’s a type of dimetric projection where the diagonal values are a 116.565° from the main. The latter can be easily set up by snapping the assistants to a grid.
Trimetric
Is when all the angles are slightly different. Often looks like a slightly angled isometric.
Linear Perspective¶
A 1 point perspective is set up using 1 vanishing point, and two crossing perpendicular parallel rulers.
2 Point Perspective
A 2 point perspective is set up using 2 vanishing point and 1 vertical parallel ruler. Often, putting the vanishing points outside the frame a little can decrease the strength of it. You can also use a 2 Point Perspective Ruler to set this one up very quickly.
3 Point Perspective
A 3 point perspective is set up using 3 vanishing point rulers.
Logic of the vanishing point¶
There’s a little secret that perspective tutorials don’t always tell you, and that’s that a vanishing point is the point where any two parallel lines meet. This means that a 1 point perspective and 2 point perspective are virtually the same.
We can prove this via a little experiment. That good old problem: drawing a rail-road.
You are probably familiar with the problem: How to determine where the next beam is going to be, as perspective projection will make them look closer together.
Typically, the solution is to draw a line in the middle and then draw lines diagonally across. After all, those lines are parallel, meaning that the exact same distance is used.
But because they are parallel, we can use a vanishing point assistant instead, and we use the alignment handles to align it to the diagonal of the beam, and to the horizontal (here marked with red).
That diagonal can then in turn be used to determine the position of the beams:
Because any given set of lines has a vanishing point (outside the ones flat on the view-plane), there can be an infinite amount of vanishing points in a linear perspective. Therefore, Krita allows you to set vanishing points yourself instead of forcing you to only use a few.
Fish Eye perspective¶
Fish eye perspective works much the same as the linear perspective, the big difference being that in a fish-eye perspective, any parallel set of lines has two vanishing points, each for one side.
So, to set them up, the easiest way is one horizontal, one vertical, on the same spot, and one vanishing point assistant in the middle.
But, you can also make one horizontal one that is just as big as the other horizontal one, and put it halfway:
© Copyright licensed under the GNU Free Documentation License 1.3+ unless stated otherwise. Build 1465.
Krita: уровни детализации или как рисовать кистью диаметром 1k на холсте в 10k пикселов
До конца кампании на Kickstarter осталось чуть меньше недели, но графический редактор Krita уже собрал средства на две главные задачи этого года: анимацию и рисование огромных изображений. И если с анимацией все более менее понятно, то вот с большими изображениями возникают вопросы. Как просчитать и отобразить на экране изображение в 100 млн. пикселов? Как обеспечить, чтобы кисть размером в 1 млн. пикселов отрисовывалась без задержек 500 раз в секунду? На эти вопросы я постараюсь ответить в этой статье.
Откуда берутся задержки при рисовании?
Пример
Итак, каждый «мазок» претерпевает минимум 7 преобразований. Много это или мало? Давайте рассмотрим простой пример. Представим, что мы рисуем кистью 300х300 пикселов (300 * 300 * 4 = 312 КБ) на холсте формата A4 300dpi (3508×2480 пикселов).
Скорость, с которой художник может комфортно двигать стилус планшета (с учетом зума) составляет около 18 пикселов в миллисекунду. Тогда (при шаге кисти 10%) средняя скорость, с которой мы должны успевать отрисовывать кисть на холсте составит 600 «мазков» в секунду.
График скорости просчета «мазков» в зависимости от скорости мыши.
Кисть: 300 пикс.
Изображение: A4 300dpi (3508×2480 пикс.), зум 25%
CPU: Core i7 4700MQ
С учетом размера кисти получается, что на каждой стадии конвейера редактору нужно обрабатывать порядка 187 МБ в секунду, что составляет более 1,2 ГБ/с (!) на весь конвейер. И это даже не учитывая того факта, что почти на всех стадиях конвейер не просто преобразовывает одну область размером 300х300, а берет два изображения, просчитывает их композицию (минимум одна операция деления на пиксел) и записывает результат обратно в память. Получается, что даже на таких относительно небольших размерах кисти и изображения мы достаточно близко приближаемся к теоретическим пределам скорости работы оперативной памяти (10-20ГБ/с).
«WTF?!» — спросит внимательный читатель. «Как ж это тогда вообще работает?!» Конечно, на каждом этапе конвейера применяется множество оптимизаций. Вся область разбивается на несколько потоков, которые, мало того выполняются параллельно, так еще используют векторные инструкции SSE/AVX, позволяющие обрабатывать до 8 пикселов одновременно. Кроме того, в некоторых частных случаях (например, один из пикселов целиком прозрачен или непрозрачен), композиция вырождается в простое копирование байтов.
Однако все эти меры помогут очень слабо, если мы начнем говорить о кистях размером в 1000 пикселов и более. Ведь при увеличении размера кисти в 3 раза объем обрабатываемых данных увеличится уже не в 3, а в 9 раз! Обрабатывать по 12 ГБ в секунду? Ну уж нет! Так как же быть?
MIP-текстурирование и уровни детализации
В трехмерной графике есть известный прием, который позволяет повышать скорость и качество текстурирования объектов, находящихся далеко от камеры. Дело в том, что когда объект удаляется от наблюдателя, он становится меньше в размерах и, соответственно, его текстура должна так же масштабироваться. Чтобы ускорить этот процесс была придумана технология MIP-текстурирования. Её смысл заключается в том, что вместе с самой текстурой хранится множество ее уменьшенных копий: в 2, 4, 8, 16 и т.д. раз. И когда графическому процессору требуется нарисовать уменьшенную версию текстуры, он уже не занимается масштабированием оригинала, а просто берет заранее подготовленную копию и работает с ней. Это увеличивает не только скорость прорисовки объектов, но и сильно повышает их качество, так как при предварительной генерации можно использовать более точные «медленные» алгоритмы.
Уровни детализации в Крите
Здесь стоит учесть одно наблюдение, что если пользователь решит рисовать на изображении шириной в 10k пикселов, то большую часть времени он будет использовать масштаб в 20-15%. Иначе это изображение чисто технически не уместится на экране его Full HD монитора, шириной едва дотягивающего до 2k. Этим фактом мы и воспользуемся!
В начале этого года мы сделали прототип системы отложенного просчета изображения для Krita. Когда пользователь рисует кистью по холсту, Крита не спешит просчитывать все его действия. Вместо этого она берет уменьшенную копию изображения и отрисовывает все штрихи на ней. Так как уменьшенная копия имеет размер в 2-4 раза меньше оригинала, то и рисование на ней происходит в 4-16 раз быстрее, и поэтому отсутствуют какие-либо задержки, отвлекающие художника от его творческого процесса. А так как художник не может рисовать все 100% времени, то у Криты будет еще множество времени, когда можно в фоновом режиме, не торопясь, просчитать штрихи на оригинальном изображении.
Видео, демонстрирующее рисование 1k кистью на 8k изображении. Обратите внимание, как через несколько секунд после завершения штриха приходит вторая волна обновлений.
В итоге мы решили главную задачу. Теперь мы не пытаемся обработать гигабайты данных в реальном времени. В реальном времени нам нужно просчитать лишь превью, который позволит пользователю комфортно работать. А оригиналом можно заняться и потом.
Предварительные выводы
На данный момент у нас есть готовый прототип системы работы с уровнями детализации. В нем работает лишь один движок кистей, и то не со всеми параметрами. Однако он уже позволяет сделать нам некоторые выводы:
Наш проект на Kickstarter уже достиг минимальной цели, поэтому следующие несколько месяцев мы потратим на реализацию полноценной системы работы с уровнями детализации. И уже совсем скоро любой желающий сможет протестировать рисование огромными кистями в Крите!
Krita: координаты Грина или как сделать из дракона кенгуру
На днях была выпущена уже вторая бета-версия Криты 2.9. Этой статьей я хотел бы начать рассказ о том новом функционале, который ждет пользователей в предстоящем релизе.
Одной из самых интересных функций этого релиза является преобразование клеткой. Оно позволяет изменять форму объектов без внесения искажений в изображение. О нем и пойдет сегодня речь…
Координаты Грина
Изначально интерес к инструментам преобразования клеткой возник как к средствам трансформации трехмерных объектов. Обычно такая «клетка» представляла собой многогранник с небольшим количеством полигонов, в который заключался интересующий объект. Передвигая вершины многогранника, пользователь мог деформировать выбранный объект, получая требуемые изгиб и форму. В нашем случае мы работаем не с трехмерными моделями, а с плоскими изображениями, поэтому задача сильно упрощается: клетка становится обычным многоугольником, а деформируемый объект — набором пикселей внутри его. Манипулируя вершинами этого многоугольника, можно получать требуемые деформации изображения.
Существует множество способов задания такой клетки, но большинство из них сводятся к выражению координат каждого пиксела внутри клетки через взвешенную сумму координат вершин этой самой клетки. Полученные веса впоследствии используются для расчета нового положения пикселов после перемещения пользователем узлов клетки. Этот метод прост и понятен, однако у него есть один существенный недостаток: при его использовании сильно страдает форма объекта из-за наличия сдвиговых деформаций (преобразование не обладает свойством конформности).
Чтобы обойти этот недостаток, разработчики из университета Тель-Авива придумали другой способ. Дабы избавиться от сдвиговых деформаций и сохранить форму объекта, они предложили использовать для расчета координат пикселов не только координаты вершин клетки, но и ориентацию нормалей ее ребер. Полученные координаты получили название координат Грина в честь теории функций Грина, используемых при выводе.
Ниже приведено сравнение разных методов преобразования клеткой: a) исходное изображение; b) преобразование с использованием координат Грина; c) классический метод гармонических координат. Источник: [1]
Реализация в Крите и проблемы
При реализации алгоритма в Крите разработчики столкнулись с некоторыми интересными особенностями алгоритма. Как уже было сказано выше, по изначальной задумке авторов преобразование разделялось на две стадии, первая из которых, медленная, должна была считаться лишь один раз при инициализации инструмента, а вторая, быстрая, при каждой модификации клетки пользователем. Проблема в том, что «быстрая» стадия алгоритма оказалась не такой уж и быстрой. Преобразование объектов реальных размеров (> 2k пикселов по длинной стороне) занимало несколько секунд, поэтому в результате, поверх оригинального алгоритма была добавлена интерполяция. Изображение разбивается сеткой с шагом 8 пикселов, значения координат Грина считаются для ее узлов, а остальные пикселы интерполируются. Как выяснилось, для реальных изображений, разница практически незаметна.
Pepper and Carrot by David Revoy
Выводы и планы на будущее
Трансформация клеткой уже доступна в последних сборках Криты 2.9 Beta2. Вместе с переписанным инструментом Деформация (Warp Transform) она позволяет изменять позу и мимику двумерного персонажа без дополнительного создания и привязывания скелета.
Однако кроме базового алгоритма, у трансформации клеткой есть еще интересное расширение. Сейчас изменение всего одной вершины способно привести к изменениям всей выделенной области, причем даже в тех частях, которые находятся на другой стороне картинки. Это не всегда удобно, т.к., чтобы изменить, например, руку персонажа потребуется занести его в клетку целиком (см. видео). Для исправления этой ситуации существует метод, позволяющий закреплять выделенные ребра клетки и редактировать части персонажа отдельно. Это как раз и будет темой для будущей работы разработчиков!
Бета-версию Криты 2.9 под Windows и Linux можно скачать на официальном сайте проекта.
В заключение видео о том, как создавалась заглавная иллюстрация: