PIXI Boilerplate

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-projection.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix.js"></script>

CSS

input#slider {
  width: 50%;
}

canvas{
   width: 100%;
   height: 600px;
}

TypeScript

import { mat4, vec3 } from 'gl-matrix';

const domHeight = 720;
const domWidth = 1280;

const vertex = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
uniform mat4 uMatrix;

varying vec2 vTextureCoord;
void main(void)
{
    vec4 pos = uMatrix * vec4(aVertexPosition, 0.0, 1.0);
	  vec3 pos3 = pos.xyz ;
    vec3 screenPos = projectionMatrix * vec3(pos3.xyz);
    gl_Position = vec4(screenPos, pos.w);
    vTextureCoord = aTextureCoord;
}
`;

const fragment = `
varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void)
{
   gl_FragColor = texture2D(uSampler, vTextureCoord);
}
`;
function v(x: number, y: number, z: number) {
  var v = vec3.create();
  vec3.set(v, x, y, z);
  return v;
}
function getRotation(sprite: PIXI.DisplayObject) {
  const { a, b, c, d } = sprite.worldTransform;

  const skewX = -Math.atan2(-c, d);
  const skewY = Math.atan2(b, a);
  const delta = Math.abs(skewX + skewY);

  if (delta < 0.00001 || Math.abs(2 * Math.PI - delta) < 0.00001) {
    return skewY;
  }
  return 0;
}
function matrix(
  container: PIXI.Container,
  domWidth: number,
  domHeight: number,
  flipX: number,
  flipY: number
) {
  const transform = mat4.create();

  const point = new PIXI.Point();
  container.getGlobalPosition(point);

  mat4.rotateX(transform, transform, (flipX * 2 * Math.PI) / 360);
  mat4.rotateY(transform, transform, (flipY * 2 * Math.PI) / 360);

  //TODO: This should be set by the perspective
  const cameraPosition = 2000;
  const camera = mat4.create();
  mat4.lookAt(camera, v(0, 0, cameraPosition), v(0, 0, 0), v(0, 1, 0));

  var projection = mat4.create();
  mat4.perspective(projection, 2 * Math.atan(1 / cameraPosition), 1, 0.001, 4000);

  const rotation = getRotation(container);

  const matrix = mat4.create();
  mat4.translate(matrix, matrix, [point.x, point.y, 0]); // move to (x, y)
  mat4.rotateZ(matrix, matrix, rotation); // set container rotation
  mat4.multiply(matrix, matrix,...