Canvas renderer - masks problems

[Alex4co]

Hello everyone. I make a application, the first on Webgl renderer. All works fine, but on mobile devices less perfomance. So i try - a canvas renderer ( forceCanvas mode) - perfomance very very good on mobile now. But a many new problems appeared :

In webgl - shape with rect hole,  in canvas - no hole.  Please help me, how i can add hole in canvas mode.  

const shape = new Graphics();

shape.clear();

shape.beginFill(0xff0000);

shape.moveTo(0, 0);

shape.lineTo(500, 0);

shape.lineTo(500, 500);

shape.lineTo(0, 500);
 

shape.moveTo(100, 100);

shape.lineTo(200, 100);

shape.lineTo(200, 200);

shape.lineTo(100, 200);

shape.addHole();

[ivan.popelyshev]

Holes aren't supported in masks on canvas renderer  You have to patch our CanvasRenderer, I suppose: just add moveto-lineTo sequence of holes. https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/canvas/CanvasGraphicsRenderer.js#L38 

Another way: wait like all other people who reported that issue in pixijs issues, maybe someone will make it. Not me, I'm busy enough.

[Alex4co]

Ok, do you have another way create holes? maybe blend, or other ways? 

[ivan.popelyshev]

Just add another cycle that goes through holes of that particular graphics data. Its not that difficult, and you'll make first contribution to pixijs!

[Alex4co]

4 hours ago, ivan.popelyshev said:

Just add another cycle that goes through holes of that particular graphics data. Its not that difficult, and you'll make first contribution to pixijs!

Иван привет! Совершенно непонятно, каким образом можно модифицировать чужой движок, без понятия, как там все работает - ну открыл я код, и? Какой цикл, для каких hole, где это вообще размещать, какие MOVETo добавлять, это первое. Второе, каким образом потом это все заливать и куда. Ну и наконец - даже если это все прокатит, это видимо пройдет только в след релиз, ну или сидеть с кастомным движком, не из коробки. А нужно прямо здесь и сейчас. Неужто других , готовых, нативных способов нет? Движку уже сто лет, а дырку в графике нарисовать нереально, really ???

[ivan.popelyshev]

OK, so i was wrong about place, its here: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/canvas/utils/CanvasMaskManager.js#L76

https://www.pixiplayground.com/#/edit/wJM_TMiQGVGBuLCdXmKQ4

I made a patch in the end of that fiddle. That patch works only if you specify holes in different direction than the shape.

Pixi is not an engine, its open-source lib that can be a part of your engine, and whoever uses it also patches whatever he needs and submits PR. There's no guarantee that certain bug will be fixed, it all depends on the mood of core team and contributors.

Holes were added only a year ago, because they weren't available in WebGL version and we cant add canvas-only features. They are passed to "earcut" triangulator lib. When it was done, those changes didnt affect CanvasMaskMakager.

[ivan.popelyshev]

Ну раз очень надо, то вот, я сделал  Вообще там любой метод так пропатчить можно, надо только научиться до них дотягиваться.

[ivan.popelyshev]

PR: https://github.com/pixijs/pixi.js/pull/5202
Build: http://pixijs.download/dev-canvas-mask-holes/pixi.js

[ivan.popelyshev]

Не стоит рассматривать пикси как что-то коробочное, в продакшне все равно на костылях держится  

Проблема, кстати, старая: https://github.com/pixijs/pixi.js/issues/4177 

[Alex4co]

1 hour ago, ivan.popelyshev said:

Не стоит рассматривать пикси как что-то коробочное, в продакшне все равно на костылях держится  

Проблема, кстати, старая: https://github.com/pixijs/pixi.js/issues/4177 

Иван, сделал твой патч, записался, спасибо. Проверил твой код - рабочий. Однако, то ли лыжи не едут, в моей ситуации :  если маскируемый объект это контейнер в котором лежат graphics элементы (линии, по типу lineStyle(), lineTo - без beginFill, ну вообщем просто линии) - маска с дыркой не применяется, при этом если маску отключить и проверить сам объект, дырки в нем есть.  На вебЖл соответственно бага не присутсвует. 
Так же заметил еще один баг,  ты четко в примере указал рисовку как 

graphics.moveTo(100, 100);

graphics.lineTo(100, 150);

graphics.lineTo(150, 150);

graphics.lineTo(150, 100);

graphics.addHole();

однако, если поменять местами на

 

graphics.moveTo(100, 100);

graphics.lineTo(150, 100);

graphics.lineTo(150, 150);

graphics.lineTo(100, 150);
graphics.addHole();

 

Дырка так же не рисуется. Соответсвенно на вебЖл - все окей. 

[ivan.popelyshev]

Прикол в ориентации обхода, canvas2d работает так: если делал фигуру по часовой, то дыру надо против. Я улучшил патч, он теперь меняет порядок сам, перед тем как отдать в context-2d.

Впихнул его в билд: http://pixijs.download/dev-canvas-mask-holes/pixi.js Нужно снести ту функцию и использовать кастомную пиксю, и судя по тому что GBD её зааппрувил, фикс уже попадёт в 4.8.3

[Alex4co]

12 minutes ago, ivan.popelyshev said:

Прикол в ориентации обхода, canvas2d работает так: если делал фигуру по часовой, то дыру надо против. Я улучшил патч, он теперь меняет порядок сам, перед тем как отдать в context-2d.

Впихнул его в билд: http://pixijs.download/dev-canvas-mask-holes/pixi.js Нужно снести ту функцию и использовать кастомную пиксю, и судя по тому что GBD её зааппрувил, фикс уже попадёт в 4.8.3

Иван, а по поводу первого бага насчет, что не маскирует graphics линии ? Тоже будет работать? 

[ivan.popelyshev]

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

[Alex4co]

 

31 minutes ago, ivan.popelyshev said:

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

Флеш все умел, он даже дырки рисовал как drawRect.drawRect без всяких манипуляций. А уж про линии это тем более.  На данный момент haxe (openfl)  все это тоже делает нормально, насколько я тестировал. 

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

Иван, если конечно, у тебя есть силы - будем очень благодарны.  Но на данный момент я думаю можно же обойтись следующим образом :  нарисовать в ФШ  дырявую маску с Н дырок,  в приложении же, те дырки какие не нужны прикрывать каким нить graphics.drawRect  - и весь этот контейнер с текстурой + графикой - сделать маской для линий. Не прокатит?      

[ivan.popelyshev]

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip - clip не учитывает stroke в canvas2d. Так что там по-любому придётся свою математику добавлять, или делать дырки чисто на fill-ах. Да, ФШ всему голова, может прокатить. Флэш мог всё, да никто повторить нормально не может, убили технологию и мозги

[Alex4co]

1 hour ago, ivan.popelyshev said:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip - clip не учитывает stroke в canvas2d. Так что там по-любому придётся свою математику добавлять, или делать дырки чисто на fill-ах. Да, ФШ всему голова, может прокатить. Флэш мог всё, да никто повторить нормально не может, убили технологию и мозги

Печально. В любом случае спасибо! И спасибо за Ваш вклад.