Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Updating Graphics extremely slow


sanojian
 Share

Recommended Posts

Am I doing something wrong?  I am trying to draw "pixels" onto a small graphics object every frame.  Even with a very small number of pixels (169), it is slowing down to a crawl after a few seconds and leaking memory like crazy.  Here is a JSFiddle

 

Here is the code:

function init(){    var width = 100;    var height = 100;    var canvas = document.getElementById("view");    var stage = new PIXI.Stage(0x000000);    var renderer = new PIXI.autoDetectRenderer(width, height, canvas, null, true);        var colors = [0x00FFFF, 0xFF0000, 0x00FF00, 0x0000FF];    var colorIndex = 0;        var graphics = new PIXI.Graphics();        stage.addChild(graphics);    renderer.render(stage);        var PIXEL_SIZE = 8;        function update()    {        for (var y=0; y<height/PIXEL_SIZE; y++) {            for (var x=0; x<width/PIXEL_SIZE; x++) {                colorIndex += 1;                if (colorIndex >= colors.length) colorIndex = 0;                graphics.beginFill(colors[colorIndex]);                graphics.drawRect(x*PIXEL_SIZE, y*PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);            }        }                renderer.render(stage);        stats.end();        requestAnimationFrame(update);    }        requestAnimationFrame(update);}
Link to comment
Share on other sites

I sort of hacked it by doing the following:

 

I draw the graphic like you see in the original update() function and then I just update the graphicsData array on every frame.

function update() {	for (var y=0; y<height/PIXEL_SIZE; y++) {		for (var x=0; x<width/PIXEL_SIZE; x++) {			colorIndex += 1;			if (colorIndex >= colors.length) colorIndex = 0;			graphics.graphicsData[x + y*width/PIXEL_SIZE].fillColor = colors[colorIndex];			graphics.dirty = true;			graphics.clearDirty = true;		}	}		renderer.render(stage);	requestAnimationFrame(update);}

Those two dirty flags were what was tripping me up.  They are necessary or the graphic will not re-render.

 

Now it is much faster, but not the magic bullet I was hoping for.  I still can't get better than about 20 fps when rendering about 55000 rectangles.  I think I have much more to learn about WebGL to get this optimized.  Or is this the best I could realistically hope for?

Link to comment
Share on other sites

If you are doing pixel manipulation, and you want to use webgl, then just write a shader for it.

 

Now it is much faster, but not the magic bullet I was hoping for. I still can't get better than about 20 fps when rendering about 55000 rectangles. I think I have much more to learn about WebGL to get this optimized. Or is this the best I could realistically hope for?

I'd say 55k different geometries all dynamically updating on the CPU each frame, drawing at 20fps, in a browser, is pretty baller. If you are drawing pixels with graphics that just seems wrong. Pixel manipulation should be done in a fragment shader.

If you can't use a shader and only webgl, then you can generate a texture for each array of colors you have and then just swap between them. Even better would be to draw each of those textures to a single canvas object, use the canvas in a base texture, then define textures with frames for each of the color arrays (all sharing that base texture), then just swap textures each frame (or whenever). I don't think drawing graphics and live updating it is the best way to do this.

Link to comment
Share on other sites

just write a shader for it.

 

define textures with frames for each of the color arrays (all sharing that base texture)

 

Nice suggestions, I will have to learn how to do these things first and then compare them.

 

If any are interested, here is a jsFiddle  with the solution I described above.  It starts to drop below 60fps once you get up to about 10,000 rectangles.

Link to comment
Share on other sites

If you can't use a shader and only webgl, then you can generate a texture for each array of colors you have and then just swap between them. Even better would be to draw each of those textures to a single canvas object, use the canvas in a base texture, then define textures with frames for each of the color arrays (all sharing that base texture), then just swap textures each frame (or whenever). I don't think drawing graphics and live updating it is the best way to do this.

 

I tried the first part of this approach and it was much slower.  Here is a jsFiddle.  Maybe I am doing it wrong?   I really don't know how to ensure everything is done in the GPU.  I am a total newbie to WebGL.

Link to comment
Share on other sites

You might also want to investigate TIlingSprite since it seems like you generate so many because you are tiling it. TilingSprite supports texture atlases as well so your code would be basically the same but instead of many sprites you would just use one TilingSprite.

 

I need to change textures on individual tiles, though.  It is my understanding that TilingSprite does not allow this.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...