Заняло минут 5, проще не придумаешь. К счастью для нас, все линии и заливки являются удобной частью API 2D-контекста. Прекрасный! Теперь, что дальше…

Создание примитивов webGL

Оказывается, для такого непритязательного набора функций создание примитивов — это не прогулка в парке, на которую можно было бы надеяться. Если только в вашем парке нет крокодилов, акул, медведей и бесчисленного множества других препятствий для преодоления препятствий ;)

Причина этого в том, что в WebGL нет реальной концепции «примитивов», конечно, он может рисовать треугольники и даже имеет встроенные линии, но, как оказалось, мне пришлось откопать несколько старых школьных учебников по геометрии, чтобы все выглядело так, как должно.

Чтобы линии выглядели красиво…

Основная проблема с собственными линиями webGL заключается в том, что они вообще не очень хорошо соединяются. Вот пример фигуры, нарисованной с помощью линий webGL, по сравнению с фигурой, нарисованной с помощью холста:

Видите, как красиво рассчитаны суставы? Вот как должен выглядеть webGL. Итак, вернемся к чертежной доске, чтобы создать хороший алгоритм ломаной линии. Полилиния — это, по сути, линия, нарисованная с использованием треугольной полосы. Он выдавливает линию в 2D-форму. Вот как они устроены в Pixi.js:

Этот метод означает, что я могу заставить линии в средстве визуализации webGL выглядеть точно так же, как линии в средстве визуализации холста (ура!). Я думаю, я мог бы более подробно рассказать о том, как это достигается, но уже есть множество статей, таких как эта, которые я нашел очень полезными. Конечно, вы всегда можете посмотреть код Pixi.js :)

Чтобы заполнить форму…

Следующей задачей было выяснить, как «заполнить» фигуру. Опять же, в холсте это довольно просто. НО! WebGL не имеет такой функции заливки (о-о-о!) Все, что он может делать, это рисовать треугольники. Итак, следующей задачей было найти способ триангуляции фигуры, то есть разбить фигуру на треугольники. Как только это будет сделано, его можно будет передать на видеокарту.

Существует множество алгоритмов, и после небольшого исследования я нашел эту удивительную библиотеку, созданную Иваном Кукиром, под названием PolyK. Это замечательная библиотека для манипулирования полигонами, которая содержит множество замечательных функций, таких как возможность запуска теста / среза / raycasting. Что наиболее важно для pixi, у него есть отличный метод триангуляции полигонов. Иван, безусловно, очень умный парень — вы должны проверить его сайт, когда у вас будет мес, на нем полно вкусностей!

Любое ху. Функция triangulate в основном смотрит на фигуру и разбивает ее следующим образом:

Довольно круто, верно? Теперь это означает, что графическая карта теперь может обрабатывать данные заливки. Существует проблема с заливкой формы с помощью webGL, на которую стоит обратить внимание, заливка работает только с «простыми полигонами», это означает, что форма не может пересекать саму себя. Лучше всего проиллюстрировано картинкой:

Это то, что я планирую исправить в будущем, хотя это займет у меня немного времени, чтобы взломать! Но пока, если вы хотите нарисовать фигуры справа, просто сделайте их из нескольких простых многоугольников, не так ли! ;П

Скорость также является одним из важных качеств pixi.js, которое мы всегда пытаемся сохранить, и с этой целью стоит упомянуть, что примитивы webGL высоко оптимизированы, так что объект PIXI.Graphics будет складывать все свои формы вместе, чтобы он визуализироваться только одним вызовом видеокарты. Быстрая скорость!

Как мне это использовать?

Любой, кто использовал объект флэш-графики, сразу же почувствует себя как дома с объектом PIXI.Graphics. API-интерфейсы невероятно похожи, хотя pixi не предлагает полный набор функций, который использует API-интерфейс flash (пока!). Вот как нарисовать зеленый треугольник:

// create a new graphics object
var graphics = new PIXI.Graphics();
// begin a green fill..
graphics.beginFill(0x00FF00);
// draw a triangle using lines
graphics.moveTo(0,0);
graphics.lineTo(-50, 100);
graphics.lineTo(50, 100);
// end the fill
graphics.endFill();
// add it the stage so we see it on our screens..
stage.addChild(graphics);
Easy peasy! Want to draw a yellow rectangle with a red outline?
// set the fill
graphics.beginFill(0xFFFF00);
// set the line style to have a width of 5 and set the color to red
graphics.lineStyle(5, 0xFF0000);
// draw a rectangle
graphics.drawRect(0, 0, 300, 200);
PIXI.Graphics extends PIXI.DisplayObjectContainer so you can do all the usual shebaz like positioning and scaling too. It also has a drawCircle and drawElipse function, although I will leave it to your imagination to figure out what they do :)
The graphics object is now available in the dev branch of pixi.js over on github so go get stuck in! As usual the example at the top of this page can be found in the pixi repository. Alternatively the src flies can be fount here too. The docs are also updated so you can take a gander at those to get a little more aquatinted with the API.
We do have plans to extend the functionality of the PIXI.Graphics as things progress and as with all things Pixi.js we are keen to hear your feedback and take on any suggestions you may have.
Right! Back into the Goodboy code mines I go... Until next time, happy coding!
Follow @Doormat23