livig Posted January 29, 2016 Share Posted January 29, 2016 Hi everyone, I'm trying to draw a large PIXI.Graphics with some Polygons. Above a certain dimension the cacheAsBitmat function returns a black bitmap. Is a Pixi limit? Is there a way to solve this problem? thanks here is a sample code: <script type="text/javascript"> $(document).ready(function () { $('body').css('overflow', 'hidden'); }); var backgroundColor = '0xcccccc'; var renderer = PIXI.autoDetectRenderer(1920, 963); renderer.autoResize = true; document.body.appendChild(renderer.view); renderer.backgroundColor = backgroundColor; var stage = new PIXI.Container(); var Container1 = new PIXI.Container(); Container1.position.x = 400; Container1.position.y = 300; stage.interactive = true; stage.addChild(Container1); var grap = new PIXI.Graphics(); grap.interactive = true; grap.beginFill('0xac11aa', 1); grap.drawPolygon(14484, 2967, 2755, 6577, 2757, 5026, 2307, 5026, 2298, 2967, 14484, 2967) grap.endFill(); Container1.addChild(grap); var grap1 = new PIXI.Graphics(); grap1.interactive = true; grap1.beginFill('0xac11aa', 1); //KO 18700,5041 grap1.drawPolygon(16551,1989,18700,5041,15637,5041,15637,4514,15697,4514,15697,1989,16551,1989) //OK 18600,5041 // grap1.drawPolygon(16551,1989,18600,5041,15637,5041,15637,4514,15697,4514,15697,1989,16551,1989) grap1.endFill(); Container1.addChild(grap1); stage.skew.set(3.14159, 0); stage.scale.set(0.0607, 0.0607); stage.position.set(0, 1000); requestAnimationFrame(animate); function animate() { renderer.render(stage); requestAnimationFrame(animate); } $('#Button1').click(function () { Container1.cacheAsBitmap = !Container1.cacheAsBitmap; }); </script> Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 29, 2016 Share Posted January 29, 2016 webgl has limits. try CanvasRenderer. Oh god, why do you need so big canvas? its hundreds of megabytes Quote Link to comment Share on other sites More sharing options...
livig Posted January 30, 2016 Author Share Posted January 30, 2016 I'm rewriting a xaml/silverlight dwg viewer/editor with Pixi. Xaml use 'retained graphic', canvas dimensions don't impact performance, so I keep original drawing coordinates. The stange thing is that the rendering is ok, the problem is only with cacheAsBitmap. Quote Link to comment Share on other sites More sharing options...
FlorianLudwig Posted January 31, 2016 Share Posted January 31, 2016 cacheAsBitmap creates a new canvas that is not displayed, draws your Graphics onto it and uses it as texture on the rendering canvas. With something around 16k by 6k you hit the limits of your browser. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.