Sign in to follow this  
NielsOtto

Filter on entire website

Recommended Posts

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);

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

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.