Sign in to follow this  
hobiewetzels

Generative art (animating alot of graphics)

Recommended Posts

Hey,

Maybe a different question than usual. 

I made the following project with P5.js: https://hobiewetzels.nl/wallpaper/

About 1000 circles are animated independently. This results in performance issues.

I am now trying to realize the same project with pixi.js, but the performance issues only seem bigger (also unwanted lines are being rendered).

fiddle: https://jsfiddle.net/zjsnytvf/

Do you have tips? Do I have to use sprites instead of graphics, i have read that it is advised to not use more then 300 graphics, so how can I work around this? It is important that I can animate the graphics independently to create the desired effects (color, radius, x, y) ... Im new to pixi.js, thanks for your time!

Thanks in advance!

Share this post


Link to post
Share on other sites

Vertices: vertex number is too high , you can either ask for lesser quality (GraphicsUtils stuff, search it in docs/code) , either enable uint32 indices, either make several graphics instead of one (preferable) . That's why you have those strange segments - its index vertex numbers overflow.

Just in case, fast uint32 indices fix, i've added two lines: https://jsfiddle.net/L2phgk9y/


Another idea is to use textures instead , quality will go down a bit, may position,scale and tint of Sprite help you.

Fragments: Its GIANT overdraw, the total number of pixels in those circles is too big, that's why its slow on older videocards. Its possible to fix either through BIG HACKS WITH Z-BUFFER (so far only I used that), either through reducing resolution, or using faster shader (https://pixijs.download/dev/docs/PIXI.settings.html#.SPRITE_MAX_TEXTURES set to 1 before you create the application/renderer).

Congratulations with first post! Unfortunately I cant describe everything in one post, i need hours of lecturing on ways to improve performance in such cases. We dont have enough docs/articles to describe that, but there's general advices in https://github.com/pixijs/pixi.js/wiki , v5 section . v4-gotchas are not that actual, because we changed  shaders/batcher and balance of performance between elements is different know, Graphics are as fast as Sprites, usually.

Share this post


Link to post
Share on other sites

Hello again,,

I'm having difficulties extracting the canvas to a PNG. 

Check out this fiddle:  https://jsfiddle.net/7k6dLjr0/

For some reason it does not work in the fiddle, to recreate the issue go to: https://hobiewetzels.nl/projects/genart-pixi/

 

  if (capture) {
    capture = false;
    const image = app.renderer.plugins.extract.image(graphics, "image/png", 1);
    document.body.appendChild(image);
  }

This saves the graphics object (working as intended) as a png. However I want to render the canvas and clip graphics that are out of the view. I have tried a few different approaches, but what I like about the extract function is that the background is transparent. Is there a way to save the Canvas to a transparent .png and cut the graphics that are not in the view? So basicly just take a screenshot of the canvas, not download the whole graphics object.. if that makes sense. 

Also this sometimes throws the error when the graphics are outside the view/stage: TextureSystem.js:264 WebGL: INVALID_VALUE: texImage2D: width or height out of range

Thanks in advance :)

 

Also how would I append this PIXI.Application to an existing canvas element. I tried setting the view option but that dit not seem to work. 

Share this post


Link to post
Share on other sites

yeah, render into renderTexture that has the same size as screen, and use extract on it. That's basically what extract does, you just do one of steps on your own. I usually recommend people to just move extract functions in their own code and adjust them: https://github.com/pixijs/pixi.js/blob/dev/packages/extract/src/Extract.js

In case if half-transparent pixels, please search for "postDivide" in pixijs issues (closed too!) , it wasnt merged into main pixijs repo, so you have to add extra function to ensure that transparent stuff is preserved correctly.

Share this post


Link to post
Share on other sites

Could you maybe provide an example? I'm kinda confused (sorry new to this library!). 

I have tried the following but it does not seem to work:

 

  if (capture) {
    capture = false;
    let renderTexture = PIXI.RenderTexture.create(1920, 1920);
    const image = app.renderer.plugins.extract.image(graphics, "image/png", 1);
    let sprite = PIXI.Sprite.from(image);
    let object = renderer.render(sprite, renderTexture);
    document.body.appendChild(object);
  }

Have left the extract code unchanged btw.. Could you explain what step I should do on my own?

 

Thanks in advance :)!

Share this post


Link to post
Share on other sites
function arrayPostDivide(pixels)
{
    for (let i = 0; i < pixels.length; i += 4)
    {
        const alpha = pixels[i + 3];
        if (alpha)
        {
            pixels[i] = Math.round(Math.min(pixels[i] * 255.0 / alpha, 255.0));
            pixels[i + 1] = Math.round(Math.min(pixels[i + 1] * 255.0 / alpha, 255.0));
            pixels[i + 2] = Math.round(Math.min(pixels[i + 2] * 255.0 / alpha, 255.0));
        }
    }
}

let renderTexture = PIXI.RenderTexture.create(1920, 1920);
renderer.render(graphics, renderTexture);

let webglPixels = app.renderer.plugins.extract.pixels(renderTexture);
let webglPixels = arrayPostDivide(webglPixels);

let canvas = document.createElement('canvas');
canvas.width = renderTexture.width;
canvas.height = renderTexture.height;
let context = canvas.getContext('2d');
const canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
canvasData.data.set(webglPixels);
context.putImageData(canvasData, 0, 0);

canvas.toDataURL(WHATEVER_OPTIONS_YOU_WANT_FOR_DATA_URL);

Here , I took https://github.com/pixijs/pixi.js/blob/dev/packages/extract/src/Extract.js#L74 code and changed it a bit. I didnt check if it works.

/Producing that thing took only 5 minutes but A LOT OF NERVE CELLS from me, because I spent many hours on it before. I promise i will put it all in future Bitmap class that will be much more powerful than extract. For now, I'm just going to put that code in pixijs wiki.

I'm doing it only for community , I have to relax and drink tea after that.

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.