Sign in to follow this  
Alex4co

Canvas renderer - masks problems

Recommended Posts

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();

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 ???

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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();
 
Дырка так же не рисуется. Соответсвенно на вебЖл - все окей. 

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
12 minutes ago, ivan.popelyshev said:

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

31 minutes ago, ivan.popelyshev said:

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
1 hour ago, ivan.popelyshev said:

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.