Apply DisplacementFilter

[alteregogi]

so i was try to create a fake 3D Effect using DisplacementFilter, and still not fully understand how to convert it to svelte-pixi because it need another sprite on DisplacementFilter argument.

<script>
  import * as PIXI from 'pixi.js';
  import { Application, Sprite, Container } from 'svelte-pixi';

  let spriteDepth;

  let fake3D = new PIXI.filters.DisplacementFilter(spriteDepth);
  let filters = [fake3D];
</script>

<Application>
  <Container {filters}>
      <Sprite texture={PIXI.Texture.from('/assets/cover.png')} />
      <Sprite bind:instance={spriteDepth} texture={PIXI.Texture.from('/assets/cover_depth.png')} />
  </Container>
</Application>

references for vanilla js here https://codepen.io/lightmyfire/pen/PoZrqbm

[mattjennings]

This approach is mostly correct but you just need to fake3D a reactive variable, as spriteDepth is initially undefined and gets set after the first render.

I took a quick minute to recreate the vanilla js example with svelte-pixi here: https://stackblitz.com/edit/vitejs-vite-nart7d?file=src/App.svelte

(the effect seems slightly more distorted - not too sure why, the vanilla example is using an older version of pixi though)

[alteregogi]

This approach is mostly correct but you just need to fake3D a reactive variable, as spriteDepth is initially undefined and gets set after the first render.

I took a quick minute to recreate the vanilla js example with svelte-pixi here: https://stackblitz.com/edit/vitejs-vite-nart7d?file=src/App.svelte

(the effect seems slightly more distorted - not too sure why, the vanilla example is using an older version of pixi though)

awesome, thank you!