import * as PIXI from 'pixi.js';
// v8 语法：从 pixi-filters 子模块导入
import { BackdropBlurFilter } from 'pixi-filters';

(async function () {

    const app = new PIXI.Application();
  await app.init({ 
    resizeTo: window, 
    preference: 'webgl', 
    useBackBuffer: true  // 这个属性很关键，如果没这个属性为true就没有效果
  });
  document.getElementById("pixi-container")!.appendChild(app.canvas);
  
  const texture = await PIXI.Assets.load('images/displacement_BG.jpg');
  const bg = PIXI.Sprite.from(texture);
  bg.width = app.screen.width;
  bg.height = app.screen.height;
  
  const overlay = PIXI.Sprite.from(PIXI.Texture.WHITE);
  overlay.width = app.screen.width / 2;
  overlay.height = app.screen.height / 2;
  overlay.anchor.set(0.5);
  overlay.x = app.screen.width / 2;
  overlay.y = app.screen.height / 2;
  overlay.alpha = 0.2;
  overlay.filterArea = new PIXI.Rectangle(
      -overlay.width/2,
    -overlay.height/2,
    overlay.width,
    overlay.height,
  );
  
const backdropBlurFilter=new BackdropBlurFilter();
backdropBlurFilter.strength=160;
backdropBlurFilter.quality=4;

  overlay.filters = backdropBlurFilter;
  
  app.stage.addChild(bg, overlay);

})();