@divinevoxel/vlox 0.0.1 → 0.0.3

package/Textures/TextureArray.js

@@ -0,0 +1,202 @@
+import { TextureManager } from "./TextureManager.js";
+import { TextureAnimationCreator } from "./TextureAnimations.js";
+import { TextureBuilder } from "./TextureBuilder.js";
+export class TextureArray {
+    id;
+    extension = "png";
+    totalTextures = 0;
+    textureMap = new Map();
+    textures = [];
+    textureIndex = {};
+    animationsMap = [];
+    animationTimes = [];
+    animations = [];
+    varyingID = "";
+    animationUniforID = "";
+    animationUniform = new Float32Array();
+    paths = new Map();
+    images = [];
+    /* actual renderer resource */
+    shaderTexture = null;
+    textureID = "";
+    attributeID = "textureIndex";
+    constructor(id) {
+        this.id = id;
+        this.textureID = id.replace("#", "");
+    }
+    /**# clearData
+     * ---
+     * Clear all un-needed data.
+     */
+    clearData() {
+        this.paths.clear();
+        this.textures = [];
+        this.textureMap.clear();
+        this.textureIndex = {};
+        this.images = [];
+        this.animationsMap = [];
+        this.animationTimes = [];
+    }
+    /**# flush
+     * ---
+     * Clear all data.
+     */
+    flush() {
+        this.clearData();
+        this.images = [];
+        this.animations = [];
+        this.animationTimes = [];
+        this.animationsMap = [];
+        this.textureIndex = {};
+        this.totalTextures = 0;
+    }
+    flushAll() {
+        //  this.materials.clear();
+    }
+    async build() {
+        this.buildTextureIndex();
+        if (this.paths.size) {
+            this.images = await TextureBuilder.createMaterialTexture(this.id, this.paths);
+        }
+        TextureAnimationCreator.createAnimations(this);
+    }
+    getTextureIndex(textureId, varation = "") {
+        let id = textureId;
+        if (varation) {
+            id = `${textureId}:${varation}`;
+        }
+        let uv = -1;
+        uv = this.textureIndex[id];
+        if (uv == -1) {
+            throw new Error(`Texture with id: ${id} does not exists.typeId : ${this.id} `);
+        }
+        return uv;
+    }
+    addTexture(data) {
+        this.textures.push(data);
+        this.textureMap.set(data.id, data);
+    }
+    runAnimations() {
+        for (let i = 0; i < this.animations.length; i++) {
+            const anim = this.animations[i];
+            if (anim.currentCount <= anim.keyCounts[anim.currentFrame]) {
+                anim.currentCount++;
+                continue;
+            }
+            anim.currentCount = 0;
+            if (anim.currentFrame < anim.keys.length - 1) {
+                anim.currentFrame++;
+            }
+            else {
+                anim.currentFrame = 0;
+            }
+            this.animationUniform[anim.uniformIndex] = anim.keys[anim.currentFrame];
+            /*       for (const [key, material] of this.materials) {
+                    material!.setNumberArray(
+                      this.animationUniforID,
+                      this.animationUniform as any
+                    );
+                  } */
+        }
+    }
+    getTextureIndexMap() {
+        return this.textureIndex;
+    }
+    _processVariations(textureData, paths, map, animations, textureAnimatioTimes, extension, count) {
+        if (!textureData.variations)
+            return count;
+        for (const varation of Object.keys(textureData.variations)) {
+            const data = textureData.variations[varation];
+            if (data.frames == 0) {
+                map[`${textureData.id}:${varation}`] = count;
+                const assetPath = this._getPath(textureData, varation, extension);
+                let raw = false;
+                if (data.base64 && !Array.isArray(data.base64)) {
+                    raw = data.base64;
+                }
+                paths.set(assetPath, raw);
+                count++;
+            }
+            else {
+                if (!data.animKeys)
+                    throw new Error("Texture Varation must have supplied animKeys if frames are greater than 0.");
+                for (let i = 1; i <= data.frames; i++) {
+                    map[`${textureData.id}:${varation}-${i}`] = count;
+                    const assetPath = this._getPath(textureData, `${varation}-${i}`, extension);
+                    let raw = false;
+                    if (data.base64) {
+                        raw = data.base64[i - 1];
+                    }
+                    paths.set(assetPath, raw);
+                    count++;
+                }
+                const trueKeys = [];
+                for (let i = 0; i < data.animKeys.length; i++) {
+                    trueKeys.push(map[`${textureData.id}:${varation}-${data.animKeys[i]}`]);
+                }
+                if (data.animKeyFrameTimes) {
+                    textureAnimatioTimes.push(data.animKeyFrameTimes);
+                }
+                if (data.globalFrameTime) {
+                    textureAnimatioTimes.push([data.globalFrameTime]);
+                }
+                animations.push(trueKeys);
+            }
+        }
+        return count;
+    }
+    _getPath(textureData, varation = "default", extension) {
+        return `${textureData.path ? textureData.path : TextureManager.defaultTexturePath}/${textureData.id}/${varation}.${extension}`;
+    }
+    buildTextureIndex() {
+        const texture = this;
+        if (!texture)
+            return false;
+        const extension = texture.extension;
+        let count = 0;
+        const map = this.textureIndex;
+        const paths = this.paths;
+        const animationTimes = this.animationTimes;
+        const animations = this.animationsMap;
+        for (const textureData of this.textures) {
+            if (textureData.frames == 0) {
+                this.textureIndex[`${textureData.id}`] = count;
+                const assetPath = this._getPath(textureData, "default", extension);
+                let raw = false;
+                if (textureData.base64 && !Array.isArray(textureData.base64)) {
+                    raw = textureData.base64;
+                }
+                paths.set(assetPath, raw);
+                count++;
+                count = this._processVariations(textureData, paths, map, animations, animationTimes, extension, count);
+            }
+            else {
+                if (!textureData.animKeys)
+                    throw new Error("Texture must have supplied animKeys if frames are greater than 0.");
+                const rawData = textureData.rawData;
+                for (let i = 1; i <= textureData.frames; i++) {
+                    const assetPath = this._getPath(textureData, `default-${i}`, extension);
+                    let raw = false;
+                    if (textureData.base64) {
+                        raw = textureData.base64[i - 1];
+                    }
+                    paths.set(assetPath, raw);
+                    count++;
+                }
+                const trueKeys = [];
+                for (let i = 0; i < textureData.animKeys.length; i++) {
+                    trueKeys.push(map[`${textureData.id}:default-${textureData.animKeys[i]}`]);
+                }
+                if (textureData.animKeyFrameTimes) {
+                    animationTimes.push(textureData.animKeyFrameTimes);
+                }
+                if (textureData.globalFrameTime) {
+                    animationTimes.push([textureData.globalFrameTime]);
+                }
+                animations.push(trueKeys);
+                count = this._processVariations(textureData, paths, map, animations, animationTimes, extension, count);
+            }
+        }
+        this.totalTextures = count;
+    }
+}

package/Textures/TextureBuilder.d.ts

@@ -1,4 +1,3 @@
-import { URITexture } from "@amodx/uri/Textures/URITexture";
 export declare class TextureBuilder {
     static context: CanvasRenderingContext2D | null;
     static _textureSize: number;
@@ -7,10 +6,8 @@ export declare class TextureBuilder {
     static _canvas: HTMLCanvasElement;
     static defineTextureDimensions(textureSize: number, mipMapSizes: number[]): void;
     static setUpImageCreation(): void;
-    static createMaterialTexture(name: string, images: Map<string, Uint8ClampedArray | string | false>, width?: number, height?: number): Promise<URITexture>;
-    static _create(name: string, images: Map<string, Uint8ClampedArray | string | false>, width: number, height: number): Promise<URITexture<import("@amodx/uri/Scenes/URIScene").URIScene<any>, any>>;
-    static _createMipMap(level: number, images: Map<string, Uint8ClampedArray | string | false>, width: number, height: number): Promise<Uint8ClampedArray>;
+    static createMaterialTexture(name: string, images: Map<string, HTMLImageElement | string | false>, width?: number, height?: number): Promise<HTMLImageElement[]>;
     static getRawData(imageSrc: string): Promise<Uint8ClampedArray>;
-    static loadImage(imgSrcData: string | Uint8ClampedArray, width?: number, height?: number, lod?: number, flip?: boolean): Promise<Uint8ClampedArray>;
-    static _combineImageData(totalLength: number, arrays: Uint8ClampedArray[]): Uint8ClampedArray;
+    static getBase64(imageSrc: string): Promise<string>;
+    static loadImage(imgSrcData: string | HTMLImageElement, width?: number, height?: number): Promise<HTMLImageElement>;
 }

package/Textures/TextureBuilder.js

@@ -1,5 +1,3 @@
-import { URITextureFormat, URITextureSamplingMode, URITextureTypes, } from "@amodx/uri/Constants/URITexturesConstants";
-import { DivineVoxelEngineRender } from "../Contexts/Render/DivineVoxelEngineRender";
 export class TextureBuilder {
     static context = null;
     static _textureSize = 16;
@@ -18,8 +16,19 @@ export class TextureBuilder {
         if (!context) {
             throw new Error("Context did not load for texture creation.");
         }
-        context.imageSmoothingEnabled = false;
-        context.imageSmoothingQuality = "high";
+        document.body.append(this._canvas);
+        /*   this._canvas.setAttribute(
+          "style",
+          `
+        image-rendering: pixelated;
+        position: absolute;
+        border: 1px solid red;
+        z-index: 1000;
+        top: 0;
+    `
+        );
+    
+       */
         this.context = context;
     }
     static async createMaterialTexture(name, images, width = -1, height = -1) {
@@ -29,108 +38,12 @@ export class TextureBuilder {
             height = this.finalImageHeight;
         this._canvas.width = this.finalImagWidth;
         this._canvas.height = this.finalImageHeight;
-        return (await this._create(name, images, width, height));
-        /*    for (const size of this._mipMapSizes) {
-          const texture = await this._createOld(name, images, size, size);
-          textures.push(texture);
-        }
-        return textures; */
-    }
-    static async _create(name, images, width, height) {
-        // const scene = RenderManager.scene!;
-        const data = (await this._createMipMap(0, images, width, height));
-        const texture = DivineVoxelEngineRender.instance.renderer.engine.createTexture({
-            type: URITextureTypes.Texture2DArray,
-            data,
-            width,
-            height,
-            scene: DivineVoxelEngineRender.instance.renderer.scene,
-            layers: images.size + 2,
-            format: URITextureFormat.Rgba,
-            samplingMode: URITextureSamplingMode.TrilinearSamplingMode,
-            //@ts-ignore
-            images,
-        });
-        await texture._create();
-        // texture.anisotropicFilteringLevel = 16;
-        /*     texture._noMipmap = false;
-        const iTexture = texture._texture!;
-        iTexture.generateMipMaps = true;
-        iTexture.useMipMaps = true;
-        engine._bindTextureDirectly(engine._gl.TEXTURE_2D_ARRAY, iTexture);
-    
-        let w = width,
-          h = height,
-          mipMapLevel = 0;
-        while (w >= 1 && h >= 1) {
-          if (mipMapLevel < 3) {
-            this.context!.imageSmoothingEnabled = false;
-          } else {
-            this.context!.imageSmoothingEnabled = true;
-          }
-          const mip = await this._createMipMap(mipMapLevel, images, w, h);
-    
-          const gl = engine._gl;
-          const textureType = engine._getWebGLTextureType(iTexture.type);
-          const format = engine._getInternalFormat(iTexture.format);
-          const internalFormat = engine._getRGBABufferInternalSizedFormat(
-            iTexture.type,
-            iTexture.format,
-            iTexture._useSRGBBuffer
-          );
-    
-          engine._unpackFlipY(texture.invertY);
-    
-          console.log(w, h);
-          let target = gl.TEXTURE_2D_ARRAY;
-    
-          gl.texImage3D(
-            target,
-            mipMapLevel,
-            internalFormat,
-            w,
-            h,
-            images.size + 2,
-            0,
-            format,
-            textureType,
-            mip
-          );
-          w /= 2;
-          h /= 2;
-          mipMapLevel++;
-        }
-    
-        iTexture.width = width;
-        iTexture.height = height;
-        iTexture.isReady = true;
-        //  iTexture.samplingMode = Texture.NEAREST_NEAREST_MIPLINEAR;
-        engine._bindTextureDirectly(engine._gl.TEXTURE_2D_ARRAY, null);
-        texture._texture = iTexture;
-     */
-        return texture;
-    }
-    static async _createMipMap(level, images, width, height) {
-        //   const scene = RenderManager.scene!;
         const resolvedImages = [];
-        //create blank fill to pad image array buffer
-        const data = [];
-        for (let i = 0; i < width; i++) {
-            for (let j = 0; j < height; j++) {
-                data.push(0, 0, 0, 1);
-            }
-        }
-        resolvedImages.push(new Uint8ClampedArray(data));
         for (const [path, rawData] of images) {
-            const data = await this.loadImage(rawData ? rawData : path, width, height, level);
+            const data = await this.loadImage(rawData ? rawData : path, width, height);
             resolvedImages.push(data);
         }
-        resolvedImages.push(new Uint8ClampedArray(data));
-        let totalLength = 0;
-        for (const image of resolvedImages) {
-            totalLength += image.byteLength;
-        }
-        return this._combineImageData(totalLength, resolvedImages);
+        return resolvedImages;
     }
     static async getRawData(imageSrc) {
         return new Promise((resolve, reject) => {
@@ -153,8 +66,27 @@ export class TextureBuilder {
             image.onerror = (err) => reject(err);
         });
     }
-    static async loadImage(imgSrcData, width = 0, height = 0, lod = 0, flip = true) {
-        let testing = false;
+    static async getBase64(imageSrc) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.crossOrigin = "Anonymous";
+            image.src = imageSrc;
+            image.onload = () => {
+                if (!this.context) {
+                    return reject(new Error("Context is not set for texture creation."));
+                }
+                this._canvas.width = image.width;
+                this._canvas.height = image.height;
+                this.context.clearRect(0, 0, image.width, image.height);
+                this.context.drawImage(image, 0, 0, image.width, image.height);
+                resolve(this._canvas.toDataURL("image/png"));
+                this._canvas.width = this.finalImagWidth;
+                this._canvas.height = this.finalImageHeight;
+            };
+            image.onerror = (err) => reject(err);
+        });
+    }
+    static async loadImage(imgSrcData, width = 0, height = 0) {
         if (!width)
             width = this.finalImagWidth;
         if (!height)
@@ -163,83 +95,26 @@ export class TextureBuilder {
         if (!ctx) {
             throw new Error("Context is not set for texture creation.");
         }
-        const turnRed = (data) => {
-            for (let i = 0; i < data.length; i += 4) {
-                data[i] = 255; // Red
-                data[i + 1] = 0; // Green
-                data[i + 2] = 0; // Blue
-            }
-        };
-        if (typeof imgSrcData == "string") {
-            const prom = new Promise((resolve) => {
-                const image = new Image();
+        const prom = new Promise((resolve) => {
+            const image = typeof imgSrcData == "string" ? new Image() : imgSrcData;
+            if (typeof imgSrcData == "string")
                 image.src = imgSrcData;
-                image.onload = async () => {
-                    ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
-                    ctx.save();
-                    if (flip) {
-                        ctx.scale(1, -1);
-                        ctx.drawImage(image, 0, -image.height, image.width, image.height);
-                    }
-                    else {
-                        ctx.drawImage(image, 0, 0, image.width, image.height);
-                    }
-                    ctx.restore();
-                    const imgData = ctx.getImageData(0, 0, image.width, image.height);
-                    const bitmap = await createImageBitmap(new ImageData(imgData.data, image.width, image.height), {
-                        resizeWidth: width,
-                        resizeHeight: height,
-                        resizeQuality: "pixelated",
-                        premultiplyAlpha: lod != 0 ? "premultiply" : undefined,
-                    });
-                    ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
-                    ctx.drawImage(bitmap, 0, 0, width, height);
-                    const bitmapData = ctx.getImageData(0, 0, width, height);
-                    if (testing && lod > 0) {
-                        turnRed(bitmapData.data);
-                    }
-                    resolve(bitmapData.data);
-                };
-            });
-            return prom;
-        }
-        if (imgSrcData instanceof Uint8ClampedArray) {
-            const prom = new Promise(async (resolve) => {
-                ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
+            image.onload = () => {
                 ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
-                const bitmap = await createImageBitmap(new ImageData(imgSrcData, Math.sqrt(imgSrcData.length / 4), Math.sqrt(imgSrcData.length / 4)), {
-                    resizeWidth: width,
-                    resizeHeight: height,
-                    resizeQuality: "pixelated",
-                    premultiplyAlpha: lod != 0 ? "premultiply" : undefined,
-                });
+                ctx.imageSmoothingEnabled = false;
                 ctx.save();
-                if (flip) {
-                    ctx.scale(1, -1);
-                    ctx.drawImage(bitmap, 0, -height, width, height);
-                }
-                else {
-                    ctx.drawImage(bitmap, 0, 0, width, height);
-                }
+                ctx.translate(0, this._canvas.height);
+                ctx.scale(1, -1);
+                ctx.drawImage(image, 0, 0, this._canvas.width, this._canvas.height);
                 ctx.restore();
-                const imgData = ctx.getImageData(0, 0, width, height);
-                if (testing && lod > 0) {
-                    turnRed(imgData.data);
-                }
-                resolve(imgData.data);
-            });
-            return prom;
-        }
-        throw new Error("Context is not set for texture creation.");
-    }
-    static _combineImageData(totalLength, arrays) {
-        const combinedImagedata = new Uint8ClampedArray(totalLength);
-        const length = arrays[0].length;
-        for (let i = 0; i < arrays.length; i++) {
-            const array = arrays[i];
-            const previousArrayIndex = length * i;
-            combinedImagedata.set(array, previousArrayIndex);
-        }
-        return combinedImagedata;
+                const dataUrl = this._canvas.toDataURL("image/png");
+                const returnImage = new Image(this._canvas.width, this._canvas.height);
+                returnImage.src = dataUrl;
+                returnImage.onload = () => {
+                    resolve(returnImage);
+                };
+            };
+        });
+        return prom;
     }
 }

package/Textures/TextureManager.d.ts

@@ -1,22 +1,22 @@
 import type { TextureData, TextureTypeUVMap } from "./Texture.types";
-import { TextureType } from "./TextureType.js";
+import { TextureArray } from "./TextureArray.js";
 import { ConstructorTextureData } from "./Constructor.types";
 export declare class TextureManager {
     static defaultTexturePath: string;
-    static textureTypes: Map<string, TextureType>;
-    static getTextureIndex(data: ConstructorTextureData, overlay?: boolean): number;
+    static textureTypes: Map<string, TextureArray>;
+    static getTextureIndex(data: ConstructorTextureData): number;
     static _ready: boolean;
     static isReady(): boolean;
     static $INIT(): Promise<void>;
-    static $START_ANIMATIONS(): void;
     static generateTextureUVMap(): TextureTypeUVMap;
     static defineDefaultTexturePath(path: string): void;
     static getTextureData([type, id, segment]: ConstructorTextureData): TextureData | undefined;
-    static getTextureType(id: string): false | TextureType;
-    static getOrAddTextureType(id: string): TextureType;
-    static addTextureType(id: string): TextureType;
+    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>>;
 }