Generative art (animating alot of graphics)

[hobiewetzels]

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!

[ivan.popelyshev]

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.

[ivan.popelyshev]

Oh ,here's 

1) uint32 index hack

2) antialias to false (huge performance boost)

3) settings max_textures to 1.

https://jsfiddle.net/823kbugn/

Btw if you know how to do GLSL shaders, im sure you can make one that reproduces that thing, it'll be very fast.

[hobiewetzels]

Thank you very much. It already works a lot better! Any resources on GLSL shaders you recommend, so I can learn how to do this? 

[ivan.popelyshev]

Its very big topic, I cant ask you to understand it in a few evenings.

Inigo Quilez website: https://www.iquilezles.org/ , and his shadertoy: https://www.shadertoy.com/

how to use shaders in pixi: https://pixijs.io/examples/#/mesh/triangle-textured.js

[hobiewetzels]

Well i have some free time  i'll check it out. Thanks! 

[hobiewetzels]

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. 

[ivan.popelyshev]

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.

[hobiewetzels]

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 :)!

[ivan.popelyshev]

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.

[ivan.popelyshev]

Ok, here I made PR to finally fix that issue: https://github.com/pixijs/pixi.js/pull/5875

[ivan.popelyshev]

> 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. 

It should work.