Filter on entire website

[NielsOtto]

Hello

I'm making a project for client using the displacement filter to make it look like there's a glass bubble on their website. The client wants the glass bubble to effect all objects and all text on the entire website, but I can only make it put effect on objects added through PixiJS, like images and text through code.

Is there a way to make it on the entire site? Making the body html-tag into an object in Pixi or something similar? The client needs to be able to change images and text through a backend CMS, so editing the JS code all the time is not a possibility.

Thanks.

Here is the code
 

var renderer = new PIXI.autoDetectRenderer({
    width: window.innerWidth,
    height: window.innerHeight,
    transparent: false,
    autoResize: true,
    backgroundColor: 0xffffff
});

document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
var container = new PIXI.Container();
stage.addChild(container);

var padding = 100;
var bounds = new PIXI.Rectangle(-padding, -padding, renderer.width + padding * 2, renderer.height + padding * 2);
var speed = {
    x: 2,
    y: 1
};
var glassSize = 250;

var displacementSprite = PIXI.Sprite.from('_assets/displace1.png');
displacementSprite.anchor.set(0.5);
displacementSprite.width = glassSize;
displacementSprite.height = glassSize;
displacementSprite.x = 500;
displacementSprite.y = 500;
var displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
//var rgbSplit = new PIXI.filters.RGBSplitFilter();

stage.addChild(displacementSprite);

container.filters = [displacementFilter];

displacementFilter.scale.x = 150;
displacementFilter.scale.y = 150;

var glass = PIXI.Sprite.from('_assets/glass.png');
glass.anchor.set(0.5);
glass.width = glassSize;
glass.height = glassSize;
glass.alpha = 0.3;

stage.addChild(glass);

var bg = PIXI.Sprite.from('_assets/river.jpg');
bg.scale.set(0.2);
bg.anchor.set(0.5);
bg.position.set(renderer.width/2, renderer.height/2);
bg.alpha = 1;

container.addChild(bg);

var text = new PIXI.Text('Glass Test', {
    fontFamily : 'system', 
    fontSize: 72, 
    fill : 0xffffff, 
    align : 'center'
});

text.anchor.set(0.5);
text.position.x = renderer.width/2;
text.position.y = renderer.height/2;

container.addChild(text);

animate();

function animate(){
    displacementSprite.x += speed.x;
    displacementSprite.y += speed.y;

    if(displacementSprite.x + glassSize/2> renderer.width) {
        speed.x = -speed.x;
    }
    if(displacementSprite.y  + glassSize/2 > renderer.height) {
        speed.y = -speed.y;
    }
    if(displacementSprite.x - glassSize/2 <= 0) {
        speed.x = -speed.x;
    }
    if(displacementSprite.y - glassSize/2 <= 0) {
        speed.y = -speed.y;
    }
    
    glass.x = displacementSprite.x;
    glass.y = displacementSprite.y;

    renderer.render(stage);
    requestAnimationFrame(animate);
}

function resize() {
    renderer.resize(window.innerWidth, window.innerHeight);

    text.position.x = renderer.width/2;
    text.position.y = renderer.height/2;
} 
resize();
window.addEventListener('resize', resize);

 

[Exca]

You would have to be able to render the web page into a canvas and then render that canvas to screen instead of the web page. That would block much of user interaction though and would be really hard to do in realtime if website has scrolling or user interaction. Also if there's stuff loaded from other domains / without permissions then you would run into crossdomain errors.

You could maybe use svg filters to achieve the effect, dont know how though.

[ivan.popelyshev]

Nope, not possible with PixiJS or any other WebGL/canvas2d library.

You can apply SVG filter for displacement, but it'll be very slow.

[NielsOtto]

Okay. That's what I feared.
Thank you for answers. I'll try to figure something else out for the client.

[ivan.popelyshev]

We know that DisplacementFilter is a selling point of PixiJS for web developers, but it actually takes time to understand how it works.

its 50/50 chance whether the idea imagined by web developer, who doesn't know what WebGL is, will work.

In 50% of a bad chance, and then I have to consult them that "WebGL" is not just a rich <HTML> component but a huge thing with its own rules based on low-level OpenGL ES. You can't read/write pixels outside of canvas, you can't draw any html elements inside except <image> which has to be uploaded as a texture.

If you're lucky, you start using WebGL, but its nothing to be ashamed of if you're not.

Welcome to the forums!

P. S. you'll find something good in WebGL for next client then

Edited December 10, 2019 by ivan.popelyshev

[NielsOtto]

Alternativly I'd use the effect on just some part of the website, but them seem very eager to have the entire site affected like this gucci site https://zumi.gucci.com/ but they apply images using Pixi as well.

Yeah, webGL is fun. Definitely working more with it!

And thanks! 

[ivan.popelyshev]

Yep, I see giant <canvas> on gucci website, and pixi 4.8.6.