PixiJS Float Texture

by flek

HTML

<script src="https://unpkg.com/[email protected]/dist/pixi.min.js"></script>
<div id="root"></div>

CSS

#root {
  width: 250px;
  height: 250px;
}

JavaScript

const root = document.getElementById('root');
const bBox = root.getBoundingClientRect();
const app = new PIXI.Application({
  width: bBox.width,
  height: bBox.height,
  backgroundColor: 0x1099bb
});
root.appendChild(app.view);

const array = [
  [1.0, 0.1, 0.1, 1.0], [0.1, 0.1, 0.1, 1.0], [0.1, 0.1, 0.1, 1.0],
  [0.1, 0.1, 0.1, 1.0], [0.1, 1.0, 0.1, 1.0], [0.1, 0.1, 0.1, 1.0],
  [0.1, 0.1, 0.1, 1.0], [0.1, 0.1, 0.1, 1.0], [0.1, 0.1, 1.0, 1.0],
]
const floatarray = new Float32Array(array.flatMap(x => x));

// create a new Sprite from an image path
const texture = new PIXI.Texture.fromBuffer(floatarray, 3, 3);
const sprite = new PIXI.Sprite(texture);
sprite.scale.x = 10
sprite.scale.y = 10

// center the sprite's anchor point
sprite.anchor.set(0.5);

// move the sprite to the center of the screen
sprite.x = bBox.width / 2;
sprite.y = bBox.height / 2;

app.stage.addChild(sprite);