在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();