Nuxt3 + Apollo Starter

WebGL Filter

move your mouse over the image to see the effect

    
      
  <AsImage
    class="banner"
    :width="1080"
    :height="722"
    :src="'//d3skwsdk169y0b.cloudfront.net/image/fake3d/ball.jpg'"
  >
    <template #loading>
      <div class="placeholder" />
    </template>

    <template
      #webglfilter="{
        image
      }"
    >
      <AsFilterFake3d :image="image" depth="//d3skwsdk169y0b.cloudfront.net/image/fake3d/ball-map.jpg" />
    </template>
  </AsImage>

Expand

Buildin webGL filter

@vue-awesome-image/filter-fake3d

move your mouse over the image to see the effect

@vue-awesome-image/filter-glitch

Custom webGL filter

Consult @vue-awesome-image/filter-glitch，you can use @gl-widget/gl-widget （webGL framework, 14kb and easy to extend） to render or upload uniform

@vue-awesome-image/filter-glitch

@gl-widget/gl-widget

Custom filter example: