cacheAsBitmap not works on large Graphics

[livig]

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>

 

[ivan.popelyshev]

webgl has limits. try CanvasRenderer. Oh god, why do you need so big canvas? its hundreds of megabytes

[livig]

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.

 

[FlorianLudwig]

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.