import * as PIXI from 'pixi.js';
const app = new PIXI.Application({ resizeTo: window });
document.body.appendChild(app.view);
const geometry = new PIXI.Geometry()
.addAttribute('aVertexPosition',
[-100, -100,
100, -100,
100, 100,
-100, 100],
2)
.addAttribute('aUvs',
[0, 0,
1, 0,
1, 1,
0, 1],
2)
.addIndex([0, 1, 2, 0, 2, 3]);
const geometry2 = new PIXI.Geometry()
.addAttribute('aVertexPosition',
[-100 + 100, -100,
100 + 100, -100,
100 + 100, 100],
2)
.addAttribute('aUvs',
[0, 0,
1, 0,
1, 1],
2)
.addIndex([0, 1, 2]);
const geometry3 = PIXI.Geometry.merge([geometry, geometry2]);
const shader = PIXI.Shader.from(`
precision mediump float;
attribute vec2 aVertexPosition;
attribute vec2 aUvs;
uniform mat3 translationMatrix;
uniform mat3 projectionMatrix;
varying vec2 vUvs;
void main() {
vUvs = aUvs;
gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
}`,
`precision mediump float;
varying vec2 vUvs;
uniform sampler2D uSampler2;
void main() {
gl_FragColor = texture2D(uSampler2, vUvs );
}
`,
{
uSampler2: PIXI.Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg'),
});
const quad = new PIXI.Mesh(geometry3, shader);
quad.position.set(400, 300);
quad.scale.set(2);
app.stage.addChild(quad);
app.ticker.add((delta) =>
{
quad.rotation += 0.01;
});