Отрегулируйте размер текстуры в pixi.js v5 - PullRequest
Новая
       28

Отрегулируйте размер текстуры в pixi.js v5

0 голосов
/ 24 мая 2019

Любой способ настроить текстуру под размер экрана в pixi.js v5.

Я хочу, чтобы вся текстура покрывала экран.

Я пытался сделать это изнутри pixi, и это не сработало для меня, я не знаю, если это что-то сВершинные шейдеры, возможно, они могли бы осветить меня этим.

https://codepen.io/AlainBarrios/pen/rgYNRN?editors=0010

const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.append(stats.dom);
stats.dom.id = "gui-fps";

const shaders = {
  vs: `
      attribute vec2 aVertexPosition;

      uniform mat3 projectionMatrix;

      varying vec2 vTextureCoord;

      uniform vec4 inputSize;
      uniform vec4 outputFrame;

      vec4 filterVertexPosition( void ){
          vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;

          return vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0);
      }

      vec2 filterTextureCoord( void ){
          return aVertexPosition * (outputFrame.zw * inputSize.zw);
      }

      void main(void)
      {
          gl_Position = filterVertexPosition();
          vTextureCoord = filterTextureCoord();
      }
  `,
  fs: `
    uniform float u_time;
    uniform vec2 u_mouse;
    uniform vec2 u_resolution;

    uniform sampler2D u_text0;
    uniform sampler2D u_text1;
    uniform sampler2D u_text2;

    varying vec2 vTextureCoord;

    void main(){
      vec2 st = gl_FragCoord.xy / u_resolution;
      vec2 uv = vTextureCoord;

      vec4 text0 = texture2D(u_text0, uv);

      gl_FragColor = text0;
    }   
  `
};

class PIXIApp {
  constructor() {
    this.app = new PIXI.Application({ width: innerWidth, height: innerHeight });
    this.container = new PIXI.Container();

    this.mouse = {
      x: 0,
      y: 0
    };

    this.onResize = this.onResize.bind(this);
    this.mouseMove = this.mouseMove.bind(this);

    this.init();
  }

  init() {
    const content = document.querySelector("#content-canvas");

    content.append(this.app.view);
    this.app.stage.addChild(this.container);
    this.loadImages();

    window.addEventListener("resize", this.onResize);
    content.addEventListener("mousemove", e => this.mouseMove(e));
  }

  loadImages() {
    const loader = new PIXI.Loader();
    loader.add(
      "img0",
      "https://i.ibb.co/pRT9xMn/photo-1555901113-a5a735a05ef4.jpg"
    );
    loader.add(
      "img1",
      "https://i.ibb.co/v1T4ydk/photo-1512064444180-54b51a475aa7.jpg"
    );
    loader.add(
      "img2",
      "https://i.ibb.co/bHxWp12/photo-1534430224470-f52e596ced9f.jpg"
    );

    loader.load((loader, resources) => {
      const { img0, img1, img2 } = resources;

      const uniforms = {
        u_time: 0,
        u_resolution: [innerWidth, innerHeight],
        u_mouse: [this.mouse.x, this.mouse.y],
        u_text0: img0.texture,
        u_text1: img1.texture,
        u_text2: img2.texture
      };

      const { vs, fs } = shaders;
      const filter = new PIXI.Filter(vs, fs, uniforms);
      this.text = new PIXI.Sprite(img0.texture);

      this.text.width = innerWidth;
      this.text.height = innerHeight;
      this.text.filters = [filter];

      this.onResize()
      this.render(this.text);
      this.update();
    });
  }

  mouseMove(e) {
    this.mouse = this.app.renderer.plugins.interaction.mouse.global;
  }

  onResize() {
  }

  update() {
    this.app.ticker.add(() => {
      stats.begin();
      stats.end();
    });
  }

  render(text) {
    this.container.addChild(text);
  }
}

new PIXIApp();
...