NielsOtto

Members
  • Content Count

    3
  • Joined

  • Last visited

  1. 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!
  2. Okay. That's what I feared. Thank you for answers. I'll try to figure something else out for the client.
  3. 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);