-1

i´m creating an editor to make printable shirts and I use three js with pixi js. My objects like shirt or cup is in three js and workplace like canvas, where I can edit everything is from PIXI. And that is a problem I think so. My container has dimensions like 4000x4000 ... I know, its huge, Buut there is no a lots of object, so where can be problem with performance? This is highly in Firefox, where in smallest texture (product stone15) is FPS about 2-7..... Its horrible low!

What I´m doing wrong and how I can fix it to make better performance mainly in Chrome and Firefox?

This product is little bit better http://localhost:8080/index.html?product=stone15

This is really horrible in both chrome and firefox: http://localhost:8080/?product=tricko_polyester_unisex

This is good in chrome but bad in firefox: http://localhost:8080/?product=cup&type=white

Here you can find my sources

https://github.com/kstroka/myeditor

Kristián Stroka
  • 698
  • 1
  • 8
  • 23
  • You have linked to your localhost, no way we are going to be able to see those links – 2pha Aug 18 '16 at 02:12
  • Have you used browser performance profiling yet. Like using the profiles and timeline-tabs in the dev tools? Those will give you the best starting point to track issues. 4000 x 4000 doesn't sound much really. For example I am making a scrollable map with dimensions around 14k x 14k, like so: http://plnkr.co/edit/X9XexHw65aB5Sa6xSroZ?p=preview And it works (or is possible to get working) ok even in mobile devices. Though a small note there. I use only webgl. – Hachi Aug 18 '16 at 09:46
  • I found that I dont have problem with pixi renderer but three.js renderer, but I dont know how to fix it – Kristián Stroka Aug 18 '16 at 12:08

1 Answers1

1

Just an idea: You may experience bad performance if you are using too much masks ....

Искрен Станиславов
  • 527
  • 5
  • 23