Oslo, Norway
59° / 60° N
Follow us

En av kompetansene Naug & Venner hadde med seg var 3D, og Good Morning hadde lang erfaring med teknologi. Og nå skal jeg vise et eksempel på kreativtet som oppstår på tvers av fagdisiplinene når man har alle mennesker sittende i samme etasje - det vi liker å kalle magi.

På nyere mobiltelefoner med to eller flere kameralinser har man det som ofte kalles portrettmodus. I praksis betyr det at mobilen tar ulike bilder med hver linse, og i portrett blir det tatt et av bakgrunnen og et av forgrunnen. Når mobilen setter sammen disse bildene, så får man følelsen av dybde i bildet fra bakgrunnen som blir uklar, og det gir bildet en fin effekt.

I 2019 kom også muligheten til å få denne effekten med bevegelse på Facebook. Du kan enten lage dybden selv eller så kan man laste opp et portrettbilde og Facebook oppdager det automatisk slik at man får muligheten til å publisere bildet med 3D-effekt.

3D-effekt på Facebook

I arbeid med 3D og motion bruker man denne teknikken, og spørsmålet fra 3D og motion-avdelingen kom om dette også er mulig å få til på web. En utvikler ble spurt og fortalte hva man trengte å få det til på bilder som ikke inneholdt dybdeinformasjon. Dybdekartet ble laget i et 3D-program, og en utvikler laget koden for å lage effekten på web.

Vi kombinerer det vanlig bildet med dybdekart og noen linjer kode

const pixiApp = new PIXI.Application({ width: 800, height: 800 });
const imageSprite = PIXI.Sprite.from('profile-image.jpg');
const depthMapSprite = PIXI.Sprite.from('depth-map.jpg');
const displacementFilter = new PIXI.filters.DisplacementFilter(depthMapSprite);
const mouseMove = function(e) {
	displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) / 30;
	displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) / 30;
};

document.body.appendChild(pixiApp.view);
pixiApp.stage.addChild(imageSprite, depthMapSprite);
pixiApp.stage.filters = [displacementFilter];
window.addEventListener('mousemove', mouseMove);

Resultatet er en interessant effekt som er relativt enkel å få til på alle bilder. Vi ser nå på å lage denne effekten på vår oversikt over ansatte her på nettsiden.

Når man har ulike fagdisipliner sittende i samme etasje eller Teams-møte, så er dette et eksempel på noe av hverdagsmagien som oppstår med et byrå som har så stor bredde som Good Morning Naug.

Scroll ned og se video av resultatet eller klikk her for å se det i aksjon (beveg musen over bildet).

Denne artikkelen er også publisert på kode24.no for en teknisk gjennomgang av teknikken.

Nyheter/Artikler