pixi-basis-ktx2

This package contains the parser for _.basis & _.ktx2 files, and it also ships with the transcoder.

Installation

npm install pixi-basis-ktx2

Usage

Import loadKTX2 and/or loadBasis it into your class and add them as pixi loader parser (Typescript example):

import {loadKTX2, loadBasis, detectKTX2, detectBasis, resolveKTX2TextureUrl } from 'pixi-basis-ktx2';
import * as Pixi from 'pixi.js';

constructor() {
    // Adding needed parsers & detections
    // KTX2
    Pixi.Assets.loader.parsers.push(loadKTX2);
    Pixi.Assets.detections.push(detectKTX2);
    Pixi.Assets.resolver.parsers.push(resolveKTX2TextureUrl);
    // Basis
    Pixi.Assets.loader.parsers.push(loadBasis);
    Pixi.Assets.detections.push(detectBasis);
    //Pixi already added .basis in compressed textures resolver
}

Import KTX2Parser and/or BasisParser it into your class and load the transcoders (Typescript example):

import {KTX2Parser, BasisParser} from 'pixi-basis-ktx2';

private async init(): Promise<void> {
    // KTX2
    await KTX2Parser.loadTranscoder('YOUR_URL_TO/basis_transcoder.js', 'YOUR_URL_TO/basis_transcoder.wasm');
    // Basis
    await BasisParser.loadTranscoder('YOUR_URL_TO/basis_transcoder.js', 'YOUR_URL_TO/basis_transcoder.wasm');
}

Load your .ktx2 and/or .basis file as Pixi Texture with Asset.load (Typescript example):

import * as Pixi from 'pixi.js';

private async loadTexture(): Promise<void> {
    // KTX2
    const textureKTXTwo = (await Pixi.Assets.load<Pixi.Texture>('YOUR_PATH_TO/image.ktx2'));
    // Basis
    const textureBasis = (await Pixi.Assets.load<Pixi.Texture>('YOUR_PATH_TO/image.basis'));
}

Load your .ktx2 and/or .basis file as Pixi AnimationSprite with Asset.load (Typescript example):

import * as Pixi from 'pixi.js';

private async loadSpriteAnimation(): Promise<void> {
    // KTX2
    const spritePaths = ["path/image1.ktx2", "path/image2.ktx2"];
    const textureArray: Pixi.Texture[] = [];
    for (let i = 0; i < spritePaths.length; i++) {
        const textureKTXTwo = new Pixi.Texture((await Pixi.Assets.load<Pixi.BaseTexture>(spritePaths[i])));
        textureArray.push(textureKTXTwo);
    }
    const spriteAnim = new Pixi.AnimatedSprite(textureArray);

    // Basis
    const spritePaths = ["path/image1.basis", "path/image2.basis"];
    const textureArray: Pixi.Texture[] = [];
    for (let i = 0; i < spritePaths.length; i++) {
        const textureBasis = new Pixi.Texture((await Pixi.Assets.load<Pixi.BaseTexture>(spritePaths[i])));
        textureArray.push(textureBasis);
    }
    const spriteAnim = new Pixi.AnimatedSprite(textureArray);
}

Load your .ktx2 and/or .basis array buffer data as Pixi Texture (Typescript example):

import { loadKTX2BufferToTexture, loadKTX2BufferToArray, loadBasisBufferToTexture, loadKTX2BufferToArray } from 'pixi-basis-ktx2';
import * as Pixi from 'pixi.js';

private async loadTextureFromBuffer(byteArr: Uint8Array, fileName: string): Promise<void> {
    // KTX2
    const textureKTXTwo = loadKTX2BufferToTexture(byteArr, fileName, Pixi.Assets.loader); // Texture
    const textureKTXTwoArr = loadKTX2BufferToArray(byteArr, fileName, Pixi.Assets.loader); // Texture[]
    // Basis
    const textureBasis = loadBasisBufferToTexture(byteArr, fileName, Pixi.Assets.loader); // Texture
    const textureBasisArr = loadKTX2BufferToArray(byteArr, fileName, Pixi.Assets.loader); // Texture[]
}

CDN Install

Via jsDelivr:

<!-- This script tag should be placed after pixi.min.js -->
<script src="https://cdn.jsdelivr.net/npm/pixi-basis-ktx2@0.x/dist/pixi-basis-ktx2.min.js"></script>

Or via unpkg:

<!-- This script tag should be placed after pixi.min.js -->
<script src="https://unpkg.com/pixi-basis-ktx2@0.x/dist/pixi-basis-ktx2.min.js"></script>