How to use gl-transition in pixi

[evanyuanvip]

Ask for advice. How to use gl-transition in pixi.js for transition between images or videos?

[ivanpopelyshev]

You have to plug it inside pixi as filter or something else shader-related. Maybe with geometries. I'm sorry, but you have to learn low-level pixi stuff that we use instead of pure WebGL code for that.

[ivanpopelyshev]

Or at least look at renderer.reset() and renderer.renderTexture.bind() maybe those two are enough ;)

[evanyuanvip]

I have tried it as a filter, I haven't figured it out. I now think of a way, as an off-screen canvas, rendered as a texture in pixi, so will the efficiency be very low?

[ivanpopelyshev]

you can take the context, call renderer.clear() and then call for gl-transition stuff, if you can render it to renderTexture/framebuffer, then call renderer.clear() again.

Look up threejs example: #5411

If you are good enough with webgl and you know how gl-transition works, you can hack it - that way does not require pixijs knowledge.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[genie88]

I integrated gl-transition into pixi with the following code after I borrow code from https://github.com/gre/gl-transition-libs/blob/master/packages/gl-transition/src/index.js

const app = new PIXI.Application();
document.body.appendChild(app.view);

// Create background image
const background = PIXI.Sprite.from('examples/assets/road.jpg');
background.width = app.screen.width;
background.height = app.screen.height;
app.stage.addChild(background);
app.stop();
PIXI.Assets.load('examples/assets/barley.jpg').then(onAssetsLoaded);

const vertextShader = `
attribute vec2 aVertexPosition;
varying vec2 _uv;                          // gl-transition
uniform mat3 projectionMatrix;
uniform vec4 inputSize;
uniform vec4 outputFrame;
varying vec2 vTextureCoord;

vec4 filterVertexPosition( void )
{
vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;
return vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0);
}

vec2 filterTextureCoord( void )
{
return aVertexPosition * (outputFrame.zw * inputSize.zw);
}

void main(void)
{
gl_Position = filterVertexPosition();
vTextureCoord = filterTextureCoord();
_uv = vec2(0.5, 0.5) * (aVertexPosition +vec2(1.0, 1.0));    // gl-transition
}`

const fragmentShader = `
precision highp float;
varying vec2 vTextureCoord;
varying vec2 _uv;
uniform sampler2D uSampler, to;
uniform float progress, ratio, _fromR, _toR;


uniform float customUniform;


vec4 getFromColor(vec2 uv){
    return texture2D(uSampler, .5+(uv-.5)*vec2(min(ratio/_fromR,1.), min(_fromR/ratio,1.)));
}
vec4 getToColor(vec2 uv){
    return texture2D(to, .5+(uv-.5)*vec2(min(ratio/_toR,1.), min(_toR/ratio,1.)));
}

// gl-transition code here 
// pinwheel
uniform float speed; // = 2.0;
vec4 transition(vec2 uv) {
    vec2 p = uv.xy / vec2(1.0).xy;
    float circPos = atan(p.y - 0.5, p.x - 0.5) + progress * speed;
    float modPos = mod(circPos, 3.1415 / 4.);
    float signed = sign(progress - modPos);
    return mix(getToColor(p), getFromColor(p), step(signed, 0.5));
}
// gl-transition code end

void main(){
    vec2 uv = vTextureCoord.xy;
    gl_FragColor = transition(vTextureCoord);
}`
function onAssetsLoaded(to) {
    let filter = new PIXI.Filter(vertextShader, fragmentShader, {
        customUniform: 0,
        ratio: background.width / background.height,
        progress: 0,
        to: to,
        _fromR:  background.width / background.height,
        _toR:  background.width / background.height,
    });
    background.filters = [filter];
    app.ticker.add((delta) => {
        filter.uniforms.customUniform += 0.005 * delta;
        filter.uniforms.progress = filter.uniforms.customUniform % 1000
        filter.uniforms.progress = filter.uniforms.progress - Math.trunc(filter.uniforms.progress)
    });
    app.start();
}