@divinevoxel/vlox 0.0.72 → 0.0.74

package/Textures/Classes/CompiledTexture.js

@@ -0,0 +1,50 @@
+import { TextureAnimationTexture } from "./TextureAnimationTexture";
+export class CompiledTexture {
+    id;
+    static GetAtlasIndex = (x, y, boundsX) => x + y * boundsX;
+    static GetAtlasPosition = (index, boundsX, position = [0, 0]) => {
+        position[1] = Math.floor(index / boundsX);
+        position[0] = Math.floor(index % boundsX);
+        return position;
+    };
+    images = [];
+    atlasSizeMap = {};
+    textureMap = {};
+    animations = [];
+    shaderTexture;
+    animatedTexture;
+    constructor(id) {
+        this.id = id;
+        this.animatedTexture = new TextureAnimationTexture(this);
+    }
+    getTextureIndex(id) {
+        let finalId = "";
+        let frameIndex = 0;
+        if (!Array.isArray(id)) {
+            finalId = id;
+        }
+        if (Array.isArray(id)) {
+            finalId = id[0];
+            if (typeof id[1] == "number")
+                frameIndex = id[1];
+            if (Array.isArray(id[1]))
+                frameIndex = CompiledTexture.GetAtlasIndex(id[1][0], id[1][1], this.atlasSizeMap[finalId][0]);
+            if (typeof id[1] == "string") {
+                finalId = `${id[0]}:${id[1]}`;
+                if (typeof id[2] == "number")
+                    frameIndex = id[2];
+                if (Array.isArray(id[2]))
+                    frameIndex = CompiledTexture.GetAtlasIndex(id[2][0], id[2][1], this.atlasSizeMap[finalId][0]);
+            }
+        }
+        const index = this.textureMap[finalId];
+        if (index === undefined) {
+            console.warn(`Texture with id [passed in: ${id.toString()}] [final: ${finalId}] does not exist on compiled texture [${this.id}]`);
+            return 0;
+        }
+        return index + frameIndex;
+    }
+    getTexturePath(id) {
+        return this.images[this.getTextureIndex(id)].src;
+    }
+}

package/Textures/Classes/CompiledTextureAnimation.d.ts

@@ -0,0 +1,12 @@
+export declare class CompiledTextureAnimation {
+    textureIndex: number;
+    _frames: number[];
+    _times: number[];
+    _currentTime: number;
+    _frameIndex: number;
+    _current: number;
+    _animatedTextureIndex: number;
+    constructor(textureIndex: number);
+    tick(delta: number): boolean;
+    getIndex(): number;
+}

package/Textures/Classes/CompiledTextureAnimation.js

@@ -0,0 +1,27 @@
+export class CompiledTextureAnimation {
+    textureIndex;
+    _frames = [];
+    _times = [];
+    _currentTime = 0;
+    _frameIndex = 0;
+    _current = Infinity;
+    _animatedTextureIndex = -1;
+    constructor(textureIndex) {
+        this.textureIndex = textureIndex;
+    }
+    tick(delta) {
+        if (this._current == Infinity)
+            this._current = this._times[0];
+        this._current -= delta;
+        if (this._current <= 0) {
+            this._frameIndex++;
+            this._frameIndex %= this._frames.length;
+            this._current = this._times[this._frameIndex];
+            return true;
+        }
+        return false;
+    }
+    getIndex() {
+        return this._frames[this._frameIndex] + this.textureIndex;
+    }
+}

package/Textures/Classes/TextureAnimationTexture.d.ts

@@ -0,0 +1,10 @@
+import { CompiledTexture } from "./CompiledTexture";
+export declare class TextureAnimationTexture {
+    _texture: CompiledTexture;
+    _buffer: Uint16Array;
+    _size: number;
+    shaderTexture: any;
+    constructor(_texture: CompiledTexture);
+    build(): Uint16Array;
+    tick(delta: number): boolean;
+}

package/Textures/Classes/TextureAnimationTexture.js

@@ -0,0 +1,32 @@
+import { CompiledTexture } from "./CompiledTexture";
+export class TextureAnimationTexture {
+    _texture;
+    _buffer;
+    _size = 0;
+    shaderTexture;
+    constructor(_texture) {
+        this._texture = _texture;
+    }
+    build() {
+        const totalTexture = this._texture.images.length;
+        const size = Math.pow(2, Math.ceil(Math.log2(Math.ceil(Math.sqrt(totalTexture)))));
+        this._size = size;
+        this._buffer = new Uint16Array(size * size);
+        for (let i = 0; i < this._texture.animations.length; i++) {
+            const anim = this._texture.animations[i];
+            anim._animatedTextureIndex = CompiledTexture.GetAtlasIndex(...CompiledTexture.GetAtlasPosition(anim.textureIndex, this._size), this._size);
+        }
+        return this._buffer;
+    }
+    tick(delta) {
+        let update = false;
+        for (let i = 0; i < this._texture.animations.length; i++) {
+            const anim = this._texture.animations[i];
+            if (anim.tick(delta)) {
+                update = true;
+                this._buffer[anim._animatedTextureIndex] = anim.getIndex();
+            }
+        }
+        return update;
+    }
+}

package/Textures/Functions/BuildTextureData.d.ts

@@ -0,0 +1,10 @@
+import { CompiledTexture } from "../Classes/CompiledTexture";
+import { TextureData } from "../../Textures/Texture.types";
+export type BuildTextureDataProps = {
+    type: string;
+    baseURL?: string;
+    createCache?: boolean;
+    textures: TextureData[];
+    finalSize?: [width: number, height: number];
+};
+export declare function BuildTextureData({ type, baseURL: currentBaseURL, textures, finalSize: currentFinalSize, createCache, }: BuildTextureDataProps): Promise<CompiledTexture>;

package/Textures/Functions/BuildTextureData.js

@@ -0,0 +1,205 @@
+import { CompiledTexture } from "../Classes/CompiledTexture";
+import { CompiledTextureAnimation } from "../../Textures/Classes/CompiledTextureAnimation";
+let baseURL = "assets/textures";
+let canvas;
+let context;
+let atlasCanvas;
+let atlasContext;
+const finalSize = [256, 256];
+async function getImageBase64(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = reject;
+    });
+}
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = src;
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+    });
+}
+async function sliceImageIntoTiles(src, tilesX, tilesY) {
+    const image = await loadImage(src);
+    const tileWidth = image.width / tilesX;
+    const tileHeight = image.height / tilesY;
+    atlasCanvas.width = tileWidth;
+    atlasCanvas.height = tileHeight;
+    const tiles = [];
+    for (let x = 0; x < tilesX; x++) {
+        for (let y = 0; y < tilesY; y++) {
+            atlasContext.clearRect(0, 0, tileWidth, tileHeight);
+            atlasContext.drawImage(image, x * tileWidth, y * tileHeight, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight);
+            tiles[CompiledTexture.GetAtlasIndex(x, y, tilesX)] =
+                atlasCanvas.toDataURL("image/png");
+        }
+    }
+    return tiles;
+}
+async function loadImageForShader(imgSrcData) {
+    if (!context)
+        throw new Error("");
+    canvas.width = finalSize[0];
+    canvas.height = finalSize[1];
+    const prom = new Promise((resolve, reject) => {
+        const image = typeof imgSrcData == "string" ? new Image() : imgSrcData;
+        image.onerror = (error) => reject(error);
+        if (typeof imgSrcData == "string")
+            image.src = imgSrcData;
+        image.onload = () => {
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            context.imageSmoothingEnabled = false;
+            context.save();
+            context.translate(0, canvas.height);
+            context.scale(1, -1);
+            context.drawImage(image, 0, 0, canvas.width, canvas.height);
+            context.restore();
+            const dataUrl = canvas.toDataURL("image/png");
+            const returnImage = new Image(canvas.width, canvas.height);
+            returnImage.src = dataUrl;
+            returnImage.onload = () => {
+                resolve(returnImage);
+            };
+        };
+    });
+    return prom;
+}
+function getImagePath(data, parentId = null) {
+    if (data.base64)
+        return data.base64;
+    if (data.path)
+        return data.path;
+    if (!parentId)
+        return `${baseURL}/${data.id}.png`;
+    return `${baseURL}/${parentId}/${data.id}.png`;
+}
+function getTextureId(data, parentId = null) {
+    return `${parentId ? parentId : data.id}${!parentId ? "" : ":" + data.id}`;
+}
+function createAnimationData(atlas, data, startIndex) {
+    const compiled = new CompiledTextureAnimation(startIndex);
+    if (!data?.frames) {
+        const maxFrames = atlas.tiles[0] * atlas.tiles[1];
+        for (let i = 0; i < maxFrames; i++) {
+            compiled._frames[i] = i;
+            compiled._times[i] = data.frameTime;
+        }
+    }
+    else {
+        for (let i = 0; i < data.frames.length; i++) {
+            const frameData = data.frames[i];
+            if (typeof frameData == "number") {
+                compiled._frames[i] = frameData;
+                compiled._times[i] = data.frameTime;
+                continue;
+            }
+            compiled._frames[i] = frameData.index;
+            compiled._times[i] = frameData.time;
+        }
+    }
+    if (data?.pingPong) {
+        compiled._frames = [
+            ...compiled._frames,
+            ...compiled._frames.toReversed().slice(1, compiled._frames.length - 1),
+        ];
+        compiled._times = [
+            ...compiled._times,
+            ...compiled._times.toReversed().slice(1, compiled._times.length - 1),
+        ];
+    }
+    return compiled;
+}
+async function process(compiled, data, textureIndex, parent, cache = false) {
+    const textureId = getTextureId(data, parent);
+    compiled.textureMap[textureId] = textureIndex;
+    const imagePath = getImagePath(data, parent);
+    if (cache) {
+        data.base64 = await getImageBase64(imagePath);
+    }
+    if (!data.atlas) {
+        compiled.images[textureIndex] = await loadImageForShader(imagePath);
+        return textureIndex + 1;
+    }
+    const tiles = await sliceImageIntoTiles(imagePath, ...data.atlas.tiles);
+    for (let i = 0; i < tiles.length; i++) {
+        compiled.images[textureIndex + i] = await loadImageForShader(tiles[i]);
+    }
+    compiled.atlasSizeMap[textureId] = data.atlas.tiles;
+    if (data.animated) {
+        compiled.animations.push(createAnimationData(data.atlas, data.animated, textureIndex));
+    }
+    if (data.atlas.namedTiles) {
+        for (const named of data.atlas.namedTiles) {
+            let tIndex = Array.isArray(named.index)
+                ? CompiledTexture.GetAtlasIndex(...named.index, data.atlas.tiles[0])
+                : named.index;
+            compiled.textureMap[`${textureId}:${named.id}`] = textureIndex + tIndex;
+        }
+    }
+    return textureIndex + tiles.length;
+}
+export async function BuildTextureData({ type, baseURL: currentBaseURL, textures, finalSize: currentFinalSize, createCache, }) {
+    baseURL = currentBaseURL || "assets/textures";
+    finalSize[0] = currentFinalSize ? currentFinalSize[0] : 256;
+    finalSize[1] = currentFinalSize ? currentFinalSize[1] : 256;
+    if (!canvas) {
+        canvas = document.createElement("canvas");
+        canvas.width = finalSize[0];
+        canvas.height = finalSize[1];
+        context = canvas.getContext("2d", { willReadFrequently: true });
+        context.imageSmoothingEnabled = false;
+        atlasCanvas = document.createElement("canvas");
+        atlasContext = atlasCanvas.getContext("2d", { willReadFrequently: true });
+        // atlasContext.imageSmoothingEnabled = false;
+        if (!context)
+            throw new Error(`Error could not create CanvasRenderingContext2D`);
+    }
+    const compiled = new CompiledTexture(type);
+    let count = 0;
+    for (const texture of textures) {
+        if (!texture.variations?.length) {
+            try {
+                count = await process(compiled, texture, count, null, createCache);
+                continue;
+            }
+            catch (error) {
+                console.warn(`Could not load texture ${texture.id}`);
+                console.error(error);
+                continue;
+            }
+        }
+        if (texture.variations) {
+            for (let i = 0; i < texture.variations.length; i++) {
+                const vara = texture.variations[i];
+                if (typeof vara == "string") {
+                    const newData = { type: texture.type, id: vara };
+                    try {
+                        count = await process(compiled, newData, count, texture.id, createCache);
+                        if (createCache)
+                            texture.variations[i] = newData;
+                        continue;
+                    }
+                    catch (error) {
+                        console.warn(`Could not load texture ${texture.id}`);
+                        console.error(error);
+                        continue;
+                    }
+                }
+                try {
+                    count = await process(compiled, vara, count, texture.id, createCache);
+                }
+                catch (error) {
+                    console.warn(`Could not load texture ${texture.id}`);
+                    console.error(error);
+                    continue;
+                }
+            }
+        }
+    }
+    return compiled;
+}

package/Textures/Texture.types.d.ts

@@ -1,76 +1,62 @@
-export type TextureId = [type: string, id: string, varation?: string];
-export type TextureTypes = string;
+export type TextureId = [id: string, frame: [x: number, y: number]] | [id: string, index: number] | [id: string, varation: string] | [id: string, varation: string, frame: [x: number, y: number]] | [id: string, varation: string, index: number] | string;
 export type TextureTypeUVMap = Record<string, Record<string, number>>;
-export type TextureAnimationData = {
-    /**# Frames
-     * If the texture has animation frames the number of frames must be set to the number
-     * texture animatoin images. This number must be greater than 1.
-     *
-     * The number will be used to locate all the associated frames.
-     *
-     * Example: If you specify 3 frames for a texture with the ID **dreamstone** the folder would look like this:
-     * - dreamstone/default-1.png
-     * - dreamstone/default-2.png
-     * - dreamstone/default-3.png
-     */
-    frames: number;
-    /**# Anim Keys
-     * If the texture is animated you must supply the anim key frames which
-     * is just the order of the frames.
-     */
-    animKeys?: number[];
-    /**# Global Frame Time
-     * ---
-     * Specifies how many frames every anim key should be display.
-     */
-    globalFrameTime?: number;
-    /**# Anim Key Frame Time
-     * ---
-     * If set globalFrameTime will be ignored.
-     * Specifies how many frames every anim should be displayed.
-     * You must supply a number for every animKey.
-     */
-    animKeyFrameTimes?: number[];
-};
 export type TextureDataBase = {
-    /**# rawData
-     * Provide a Uint8ClampedArray or an array of Uint8ClampedArray's instead of downloading
-     */
-    rawData?: Uint8ClampedArray | Uint8ClampedArray[];
-    /**# base64
-     * Provide a base64 encoded string to use instead of downloading
-     */
-    base64?: string | string[];
-    /**# includeInRawDataMap
-     * Will keep a Uint8ClampedArray of the loaded texture if set to true.
-     */
-    includeInRawDataMap?: boolean;
-};
-export type TextureData = {
-    type: TextureTypes;
-    /**# ID
+    /**
      * The id of the texture.
-     * This will be used to locate the file.
+     * This will be used to locate the file if no direct path is given.
      */
     id: string;
-    /**# Path
+    /**
      * If the texture is not in the default path specify it here.
      */
     path?: string;
-    /**# normalMap
-     * If the texture is an overlay specify it here.
+    /**
+     * Provide a base64 encoded string to use instead of downloading
      */
-    normalMap?: boolean;
-    /**# Varations
-     * The name of the texture must be default with the folder being its ID.
-     * Variations allow you to add variations to the same texture.
+    base64?: string;
+    /**
+     * If the texture is an atlas specify it here.
+     */
+    atlas?: {
+        tiles: [tilesX: number, tilesY: number];
+        /**To make it eaiser to use specifc tiles from an atlas you can name tiles.
+         *
+         *  To use the name just at it to the end of the id with a colon ":".
+         *
+         * dve_dream_stone:grassy-top
+         */
+        namedTiles?: {
+            id: string;
+            index: [tileX: number, tileY: number] | number;
+        }[];
+    };
+    /**
+     * If the texture is an animated speicfy it here.
+     * Only atlas texture can be animated.
+     */
+    animated?: {
+        frameTime: number;
+        pingPong?: boolean;
+        interpolate?: boolean;
+        frames?: (number | {
+            index: number;
+            time: number;
+        })[];
+    };
+};
+export type TextureData = {
+    /**
+     * The type of texture. Used to combined all textures into one final one.
      *
-     * If you add a variation of "grassy-up" you must you include in the
-     * folder of the texture one with the name 'grassy-up'.
+     * Defaults to dve_voxel
+     */
+    type?: string;
+    /**
+     * Add textures to the same texture that can be refernced with a TextureId.
      *
-     * So the files in that folder would be for a texture with the ID **dreamstone**
-     * - dreamstone/default.png
-     * - dreamstone/grassy-up.png
+     * If not directly giving paths the main texture must be named default
+     * and all varations must be in the same folder and be the name of the key they
+     * are stored in the variations object.
      */
-    variations?: Record<string, TextureAnimationData & TextureDataBase>;
-} & TextureAnimationData & TextureDataBase;
+    variations?: (string | TextureDataBase)[];
+} & TextureDataBase;

package/Textures/TextureManager.d.ts

@@ -1,21 +1,10 @@
-import type { TextureData, TextureTypeUVMap, TextureId } from "./Texture.types";
-import { TextureArray } from "./TextureArray.js";
+import { CompiledTexture } from "./Classes/CompiledTexture.js";
+import { BuildTextureDataProps } from "./Functions/BuildTextureData.js";
+import type { TextureData } from "./Texture.types";
 export declare class TextureManager {
-    static defaultTexturePath: string;
-    static textureTypes: Map<string, TextureArray>;
-    static getTextureIndex(data: TextureId): number;
-    static _ready: boolean;
-    static isReady(): boolean;
-    static init(): Promise<void>;
-    static generateTextureUVMap(): TextureTypeUVMap;
-    static defineDefaultTexturePath(path: string): void;
-    static getTextureData([type, id, segment]: TextureId): TextureData | undefined;
-    static getTextureType(id: string): false | TextureArray;
-    static getOrAddTextureType(id: string): TextureArray;
-    static addTextureType(id: string): TextureArray;
-    static clearTextureData(): void;
-    static registerTexture(textureData: TextureData | TextureData[]): void;
-    static getTexturePath(textureType: string, id: string, varation: string, segment?: string, frames?: number): string;
-    static createCached(): Promise<TextureData[]>;
-    static createRawDataMap(): Promise<Map<string, Uint8ClampedArray>>;
+    static _textureTypes: Map<string, TextureData[]>;
+    static _compiledTextures: Map<string, CompiledTexture>;
+    static registerTexture(textureData: TextureData[]): void;
+    static getTexture(id: string): CompiledTexture;
+    static compiledTextures(props?: Omit<BuildTextureDataProps, "textures" | "type">): Promise<void>;
 }