threepipe/examples/ktx2-load/script.js

A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.

import { _testFinish, KTX2LoadPlugin, LoadingScreenPlugin, Mesh, PlaneGeometry, SRGBColorSpace, ThreeViewer, UnlitMaterial, } from 'threepipe';
async function init() {
    const viewer = new ThreeViewer({
        canvas: document.getElementById('mcanvas'),
        msaa: true,
        dropzone: {
            allowedExtensions: ['ktx2'],
        },
        plugins: [KTX2LoadPlugin, LoadingScreenPlugin],
    });
    viewer.scene.setBackgroundColor('#555555');
    const urls = [
        'https://threejs.org/examples/textures/compressed/sample_etc1s.ktx2',
        'https://threejs.org/examples/textures/compressed/sample_uastc.ktx2',
        'https://threejs.org/examples/textures/compressed/sample_uastc_zstd.ktx2',
    ];
    // PlaneGeometry UVs assume flipY=true, which compressed textures don't support.
    const geometry = flipY(new PlaneGeometry(1, 1));
    let i = 0;
    for (const url of urls) {
        // Load the url as a Texture
        const texture = await viewer.load(url);
        if (!texture)
            continue;
        texture.colorSpace = SRGBColorSpace;
        const material = new UnlitMaterial({
            map: texture,
            transparent: true,
        });
        const plane = new Mesh(geometry, material);
        plane.position.set(i % 3 - 1, -Math.floor(i / 3) + 1, 0);
        viewer.scene.addObject(plane);
        i++;
    }
    // Listen to when a file is dropped
    viewer.assetManager.addEventListener('loadAsset', (e) => {
        if (!e.data?.isTexture)
            return;
        const texture = e.data;
        texture.colorSpace = SRGBColorSpace;
        const material = new UnlitMaterial({
            map: texture,
            transparent: true,
        });
        const plane = new Mesh(geometry, material);
        plane.position.set(i % 3 - 1, -Math.floor(i / 3) + 1, 0);
        viewer.scene.addObject(plane);
        i++;
    });
}
init().finally(_testFinish);
/** Correct UVs to be compatible with `flipY=false` textures. */
function flipY(geometry) {
    const uv = geometry.attributes.uv;
    for (let i = 0; i < uv.count; i++) {
        uv.setY(i, 1 - uv.getY(i));
    }
    return geometry;
}