Shader screenshot

Hello,

I render an image with a fragment shader:

    var app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, antialiasing: false });
    app.resizeTo = window;

    let fragmentShader = document.getElementById('fragmentShader').textContent;
    let filter = new PIXI.Filter(null, fragmentShader);
    filter.uniforms.iResolution = {x: app.screen.width, y: app.screen.height};
    filter.uniforms.xmin = xmin;
    filter.uniforms.xmax = xmax;
    filter.uniforms.ymin = ymin;
    filter.uniforms.ymax = ymax;
    filter.uniforms.phase = 0;

    let container = new PIXI.Container();
    container.filterArea = app.screen;
    container.filters = [filter];
    app.stage.addChild(container);    
    document.getElementById('container').appendChild(app.view);

I tried this technique (the takeScreenshot function) to take a screenshot. But I only get a black 1x1 image. Should I use something else to take a screenshot?

[ivanpopelyshev]

extract.canvas(app.stage) caculates bounds of stage and takes that part of screen. It doesnt see filterArea, that field does not affect bounds, it swaps bounds only for FilterSystem.

You have to create renderTexture of appropriate size, use renderer.render(app.stage, renderTexture); and then extract.canvas(renderTexture); - that will ensure that size of output is correct

Why do you need a Filter in first place when you dont use container contents (uSampler uniforms) ? Use mesh shader, its easier: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js

There are two ways of evading those kind of problems:

1. Help PixiJS team produces articles and examples for all user cases like this one, maybe make one example yourself and ask to publish it in wiki

2. Using pixijs cloned repo instead of just docs. Open it in separate IDE window and search for classes you use when you work with pixijs. If you read Extract class sources and try to debug it a bit - you will see the problem. Extract itself isnt magic it is just a wrapper around other pixi operations and WebGL readPixels.

Thank you for noticing that filter example + screenshot example = a problem. I will remember that and I’m going to make a link at https://github.com/pixijs/pixi.js/wiki/v5-Hacks .

[bigtimebuddy]

Seems answered. Closing. @stla let me know if it’s not and we can reopen.