Как создать инструмент вектор bru sh в WebGL? (например, Clip Studio или Concepts)

Question

Я работаю над созданием инструмента рисования в браузере с использованием WebGL. Я хотел бы иметь возможность редактировать и изменять штрихи. Так что это что-то вроде Clip Studio или Concepts. Я думаю, что они используют какие-то векторные кисти, но трудно сказать, потому что это очень похоже на «штамп».

Сейчас я использую метод «штамп» classi c с использованием алгоритма DeCasteljau для разрезать Безье на линии, а затем я использую алгоритм линий Брезенхэма, чтобы получить координаты точек, которые будут строить мою линию. Эти точки затем визуализируются как вершины, передаются в буфер и визуализируются как gl_POINTS, с пользовательским шейдером для применения текстур и требуемых эффектов.

Это работает хорошо, но не очень эффективно, так как 2 предыдущих алгоритма выполняются процессором. Также у меня проблемы с непрозрачностью, но это другой вопрос. Так что, если я сохраню все эти штрихи в редактируемом виде, то получаю миллионы точек для обновления, что убивает время рендеринга. Так что определенно не правильный подход.

Спасибо!

Answer 1

Я предполагаю, что эти приложения кешируют результаты всех штрихов, кроме штриха, редактируемого в настоящее время, так что при редактировании определенного штриха они просто (1) рисуют текстуру, которая имеет все видимое после редактируемого штриха (2) рисовать редактируемый штрих (3) рисует текстуру всего перед редактируемым штрихом (4) рисует виджеты штрихов. Большинство из этих приложений также со временем становятся слишком медленными и имеют опции, позволяющие не отображать обводки, когда сцена становится слишком сложной (режим контура)

Что касается того, как вы рисуете, трудно понять, не видя примеров точной функции Вы пытаетесь реализовать. Существуют различные виды штрихов bru sh. Вот некоторые из них, которые приходят на ум:

(1) Поглаживание выглядит как каллиграфия (1 цвет, резкий или размытый, овальный bru sh)

Я думаю, они строят многоугольник me sh который представляет контур обводки. При заданных вершинах вдоль линии обводки с дополнительным параметром 1,0 и ребер с дополнительным параметром 0,0 (или что-то подобное) кажется, что было бы относительно легко написать шейдер, который затеняет многоугольник с различными параметрами для размытия.

Тяжелая часть - это работа с углами. Большинство программ структурированного рисования имеют опции для обработки углов.

(2) Поглаживание штамповкой изображения (например, нанесение листьев вдоль обводки)

Это похоже на выбранный вами метод, но обычно у этих типов штрихов есть опции для того, как часто ставить штампы (например, количество штампов на единицу) и опции для случайности в таких вещах, как ориентация, смещение от сплайна или даже несколько разных штампов.

(3) повторение bru sh (как узорной ленты или звеньев цепи в цепочке)

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

В любом случае, несколько ссылок, которые могут быть связаны

• Рисование линий - это трудно
• Приблизительная общая граница развертки двумерного изогнутого объекта
• Имитация Artisti c Brushst rokes Использование интервальных сплайнов
• Bru sh Алгоритмы рисования
• Имитация высокой детализации Bru sh Рисование на мобильных устройствах
• Рендеринг Vector Art на графическом процессоре
• Графический рендеринг с ускорением на GPU
• Эффективный рендеринг на GPU с использованием растровой развертки Scanline
• A Realisti c Система 2D-рисования

Не имеет отношения, но gl.POINTS может окончательно потерпеть неудачу, поскольку требуется только поддержка точек размером 1.0 и поведение вне области просмотра не согласовано