bg2e-js 2.1.1 → 2.2.0

package/src/tools/MaterialModifier.ts

@@ -0,0 +1,276 @@
+import {
+    textureTypeLoader,
+    colorTypeLoader,
+    vectorTypeLoader,
+    primitiveTypeLoader
+} from "../base/Material";
+import Material from "../base/Material";
+import Texture from "../base/Texture";
+import Vec from "../math/Vec";
+import Color from "../base/Color";
+
+const checkImageData = (texture: Texture | Color | number | null): Promise<void> => {
+    return texture instanceof Texture ? texture.loadImageData() : Promise.resolve();
+}
+
+interface MaterialModifierData {
+    class?: string;
+    alphaCutoff?: number;
+    castShadows?: boolean;
+    diffuse?: any;
+    diffuseScale?: any;
+    fresnel?: any;
+    isTransparent?: boolean;
+    lightEmission?: any;
+    lightEmissionChannel?: number;
+    lightEmissionScale?: any;
+    metallic?: any;
+    metallicChannel?: number;
+    metallicScale?: any;
+    normal?: any;
+    normalScale?: any;
+    roughness?: any;
+    roughnessChannel?: number;
+    roughnessScale?: any;
+    unlit?: boolean;
+}
+
+// TODO: Update all material properties (difuse -> albedo, etc)
+export default class MaterialModifier {
+    private _alphaCutoff?: number;
+    private _castShadows?: boolean;
+    private _diffuse?: any;
+    private _diffuseScale?: any;
+    private _fresnel?: any;
+    private _isTransparent?: boolean;
+    private _lightEmission?: any;
+    private _lightEmissionChannel?: number;
+    private _lightEmissionScale?: any;
+    private _metallic?: any;
+    private _metallicChannel?: number;
+    private _metallicScale?: any;
+    private _normal?: any;
+    private _normalScale?: any;
+    private _roughness?: any;
+    private _roughnessChannel?: number;
+    private _roughnessScale?: any;
+    private _unlit?: boolean;
+
+    constructor(jsonData: MaterialModifierData | null = null) {
+        if (jsonData) {
+            if (jsonData['class'] && jsonData['class'] !== "PBRMaterial") {
+                console.warn(`Could not apply material modifier because of class "${jsonData['class']}". Check the valid material types in bg2 engine v2`);
+                return;
+            }
+            if (jsonData.alphaCutoff !== undefined) {
+                this.alphaCutoff = jsonData.alphaCutoff;
+            }
+
+            if (jsonData.castShadows !== undefined) {
+                this.castShadows = jsonData.castShadows;
+            }
+
+            if (jsonData.diffuse !== undefined) {
+                this.diffuse = jsonData.diffuse;
+            }
+
+            if (jsonData.diffuseScale !== undefined) {
+                this.diffuseScale = jsonData.diffuseScale;
+            }
+
+            if (jsonData.fresnel !== undefined) {
+                this.fresnel = jsonData.fresnel;
+            }
+
+            if (jsonData.isTransparent !== undefined) {
+                this.isTransparent = jsonData.isTransparent;
+            }
+
+            if (jsonData.lightEmission !== undefined) {
+                this.lightEmission = jsonData.lightEmission;
+            }
+
+            if (jsonData.lightEmissionChannel !== undefined) {
+                this.lightEmissionChannel = jsonData.lightEmissionChannel;
+            }
+
+            if (jsonData.lightEmissionScale !== undefined) {
+                this.lightEmissionScale = jsonData.lightEmissionScale;
+            }
+
+            if (jsonData.metallic !== undefined) {
+                this.metallic = jsonData.metallic;
+            }
+
+            if (jsonData.metallicChannel !== undefined) {
+                this.metallicChannel = jsonData.metallicChannel;
+            }
+
+            if (jsonData.metallicScale !== undefined) {
+                this.metallicScale = jsonData.metallicScale;
+            }
+
+            if (jsonData.normal !== undefined) {
+                this.normal = jsonData.normal;
+            }
+
+            if (jsonData.normalScale !== undefined) {
+                this.normalScale = jsonData.normalScale;
+            }
+
+            if (jsonData.roughness !== undefined) {
+                this.roughness = jsonData.roughness;
+            }
+
+            if (jsonData.roughnessChannel !== undefined) {
+                this.roughnessChannel = jsonData.roughnessChannel;
+            }
+
+            if (jsonData.roughnessScale !== undefined) {
+                this.roughnessScale = jsonData.roughnessScale;
+            }
+
+            if (jsonData.unlit !== undefined) {
+                this.unlit = jsonData.unlit;
+            }
+
+        }
+    }
+
+    get alphaCutoff(): number | undefined { return this._alphaCutoff; }
+    set alphaCutoff(v: number | undefined) { this._alphaCutoff = v; }
+
+    get castShadows(): boolean | undefined { return this._castShadows; }
+    set castShadows(v: boolean | undefined) { this._castShadows = v; }
+
+    get diffuse(): any { return this._diffuse; }
+    set diffuse(v: any) { this._diffuse = v; }
+
+    get diffuseScale(): any { return this._diffuseScale; }
+    set diffuseScale(v: any) { this._diffuseScale = v; }
+
+    get fresnel(): any { return this._fresnel; }
+    set fresnel(v: any) { this._fresnel = v; }
+
+    get isTransparent(): boolean | undefined { return this._isTransparent; }
+    set isTransparent(v: boolean | undefined) { this._isTransparent = v; }
+
+    get lightEmission(): any { return this._lightEmission; }
+    set lightEmission(v: any) { this._lightEmission = v; }
+
+    get lightEmissionChannel(): number | undefined { return this._lightEmissionChannel; }
+    set lightEmissionChannel(v: number | undefined) { this._lightEmissionChannel = v; }
+
+    get lightEmissionScale(): any { return this._lightEmissionScale; }
+    set lightEmissionScale(v: any) { this._lightEmissionScale = v; }
+
+    get metallic(): any { return this._metallic; }
+    set metallic(v: any) { this._metallic = v; }
+
+    get metallicChannel(): number | undefined { return this._metallicChannel; }
+    set metallicChannel(v: number | undefined) { this._metallicChannel = v; }
+
+    get metallicScale(): any { return this._metallicScale; }
+    set metallicScale(v: any) { this._metallicScale = v; }
+
+    get normal(): any { return this._normal; }
+    set normal(v: any) { this._normal = v; }
+
+    get normalScale(): any { return this._normalScale; }
+    set normalScale(v: any) { this._normalScale = v; }
+
+    get roughness(): any { return this._roughness; }
+    set roughness(v: any) { this._roughness = v; }
+
+    get roughnessChannel(): number | undefined { return this._roughnessChannel; }
+    set roughnessChannel(v: number | undefined) { this._roughnessChannel = v; }
+
+    get roughnessScale(): any { return this._roughnessScale; }
+    set roughnessScale(v: any) { this._roughnessScale = v; }
+
+    get unlit(): boolean | undefined { return this._unlit; }
+    set unlit(v: boolean | undefined) { this._unlit = v; }
+
+    async applyModifier(material: Material, relativePath: string = ""): Promise<void> {
+        const promises: Promise<void>[] = [];
+        if (this.alphaCutoff !== undefined) {
+            material.alphaCutoff = this.alphaCutoff;
+        }
+
+        if (this.castShadows !== undefined) {
+            material.castShadows = this.castShadows;
+        }
+
+        // TODO: diffuse -> albedo or albedoTexture
+        if (this.diffuse !== undefined) {
+            //(material as any).diffuse =  deserializeColorTexture(this.diffuse, relativePath);
+            //promises.push(checkImageData((material as any).diffuse));
+        }
+
+        // TODO: diffuseScale -> albedoScale
+        if (this.diffuseScale !== undefined) {
+            //(material as any).diffuseScale = deserializeVector(this.diffuseScale);
+        }
+
+        if (this.fresnel !== undefined) {
+            //(material as any).fresnel = deserializeVector(this.fresnel);
+        }
+
+        if (this.isTransparent !== undefined) {
+            material.isTransparent = this.isTransparent;
+        }
+
+        if (this.lightEmission !== undefined) {
+
+        }
+
+        if (this.lightEmissionChannel !== undefined) {
+
+        }
+
+        if (this.lightEmissionScale !== undefined) {
+
+        }
+
+        if (this.metallic !== undefined) {
+            //(material as any).metallic = deserializeValueTexture(this.metallic, relativePath);
+            //promises.push(checkImageData((material as any).metallic));
+        }
+
+        if (this.metallicChannel !== undefined) {
+            (material as any).metallicChannel = this.metallicChannel;
+        }
+
+        if (this.metallicScale !== undefined) {
+            //(material as any).metallicScale = deserializeVector(this.metallicScale);
+        }
+
+        if (this.normal !== undefined) {
+            //(material as any).normal = deserializeColorTexture(this.normal, relativePath);
+            //promises.push(checkImageData((material as any).normal));
+        }
+
+        if (this.normalScale !== undefined) {
+            //material.normalScale = deserializeVector(this.normalScale);
+        }
+
+        if (this.roughness !== undefined) {
+            //(material as any).roughness = deserializeValueTexture(this.roughness, relativePath);
+            //promises.push(checkImageData((material as any).roughness));
+        }
+
+        if (this.roughnessChannel !== undefined) {
+            material.roughnessChannel = this.roughnessChannel;
+        }
+
+        if (this.roughnessScale !== undefined) {
+            //material.roughnessScale = deserializeVector(this.roughnessScale);
+        }
+
+        if (this.unlit !== undefined) {
+            material.unlit = this.unlit;
+        }
+        await Promise.allSettled(promises);
+    }
+
+}

package/src/tools/Resource.ts

@@ -0,0 +1,203 @@
+
+import ImageResourceProvider from "./ImageResourceProvider.js";
+import VideoResourceProvider from "./VideoResourceProvider.js";
+import BinaryResourceProvider from "./BinaryResourceProvider.js";
+import TextResourceProvider from "./TextResourceProvider.js";
+import ResourceProvider from "./ResourceProvider.js";
+
+interface WriteStrategy {
+    writeBytes(url: string, data: Uint8Array): Promise<void>;
+    writeImage(url: string, data: HTMLImageElement): Promise<void>;
+    writeText(url: string, data: string): Promise<void>;
+    writeJson(url: string, data: any): Promise<void>;
+}
+
+interface ResourceConstructorOptions {
+    imageProvider?: ImageResourceProvider | null;
+    videoProvider?: VideoResourceProvider | null;
+    binaryProvider?: BinaryResourceProvider | null;
+    textProvider?: TextResourceProvider | null;
+    writeStrategy?: WriteStrategy | null;
+}
+
+export enum ResourceType {
+    PolyList = 'PolyList',   // Array of meshes
+    Drawable = 'Drawable',
+    Node = 'Node',
+    Texture = 'Texture',
+    Material = 'Material'
+}
+
+export const getExtension = (url: string): string => {
+    const reResult = /\.([a-z0-9]+)$/i.exec(url);
+    if (reResult) {
+        return reResult[1];
+    }
+    else {
+        return "";
+    }
+}
+
+export const getFileName = (url: string): string => {
+    const reResult = /(.+)\/(.+)$/.exec(url);
+    if (reResult) {
+        return reResult[2];
+    }
+    else {
+        return url;
+    }
+}
+
+export const removeExtension = (url: string): string => {
+    const reResult = /(.+)\.(.+)$/.exec(url);
+    if (reResult) {
+        return reResult[1];
+    }
+    else {
+        return url;
+    }
+}
+
+export const removeFileName = (url: string): string => {
+    const i = url.lastIndexOf('/');
+    if (i != -1) {
+        return url.substring(0,i + 1);
+    }
+    return url;
+}
+
+export const isAbsolute = (url: string): boolean => {
+    return /^http|^\//i.test(url);
+}
+
+export const jointUrl = (base: string, append: string): string => {
+    if (base[base.length - 1] !== '/' && append[0] !== '/') {
+        return `${base}/${append}`;
+    }
+    else if ((base[base.length - 1] === '/' && append[0] !== '/') ||
+             (base[base.length - 1] !== '/' && append[0] === '/')) {
+        return `${base}${append}`;
+    }
+    else {
+        return `${base}${append.slice(1)}`;
+    }
+}
+
+export const isFormat = (url: string, formats: string[]): boolean => formats.some(fmt => (new RegExp(`\.${fmt}`,'i')).test(url));
+
+export const addFormats = (fmts: string | string[], dst: string[]): void => {
+    if (!Array.isArray(fmts)) {
+        fmts = [fmts]
+    }
+    fmts.forEach(fmt => {
+        if (dst.indexOf(fmt) === -1) {
+            dst.push(fmt);
+        }
+    });
+}
+
+
+const g_validImageFormats = [
+    "jpg",
+    "jpeg",
+    "gif",
+    "png"
+];
+
+export const isValidImage = (url: string): boolean => isFormat(url,g_validImageFormats);
+
+export const addImageFormats = (fmts: string | string[]): void => {
+    addFormats(fmts, g_validImageFormats);
+}
+
+export const getValidImageFormats = (): string[] => g_validImageFormats;
+
+const g_validVideoFormats = [
+    "mp4",
+    "m4v"
+];
+
+export const isValidVideo = (url: string): boolean => isFormat(url,g_validVideoFormats);
+
+export const addVideoFormats = (fmts: string | string[]): void => {
+    addFormats(fmts, g_validVideoFormats);
+}
+
+export const getValidVideoFormats = (): string[] => g_validVideoFormats;
+
+const g_validBinaryFormats = [
+    "vwglb",
+    "bg2"
+];
+
+export const isValidBinary = (url: string): boolean => isFormat(url, g_validBinaryFormats);
+
+export const addBinaryFormats = (fmts: string | string[]): void => {
+    addFormats(fmts, g_validBinaryFormats);
+}
+
+export const getValidBinaryFormats = (): string[] => g_validBinaryFormats;
+
+export default class Resource {
+    private _imageProvider: ImageResourceProvider;
+    private _videoProvider: VideoResourceProvider;
+    private _binaryProvider: BinaryResourceProvider;
+    private _textProvider: TextResourceProvider;
+    private _writeStrategy?: WriteStrategy;
+
+    constructor({
+        imageProvider = null,
+        videoProvider = null,
+        binaryProvider = null,
+        textProvider = null,
+        writeStrategy = undefined
+    }: ResourceConstructorOptions = {}) {
+        this._imageProvider = imageProvider || new ImageResourceProvider();
+        this._videoProvider = videoProvider || new VideoResourceProvider();
+        this._binaryProvider = binaryProvider || new BinaryResourceProvider();
+        this._textProvider = textProvider || new TextResourceProvider();
+
+        if (writeStrategy) {
+            this.writeStrategy = writeStrategy;
+        }
+    }
+
+    set writeStrategy(ws: WriteStrategy | undefined) {
+        this._writeStrategy = ws;
+
+        if (ws) {
+            this._imageProvider.writeStrategy = ws;
+            this._videoProvider.writeStrategy = ws;
+            this._binaryProvider.writeStrategy = ws;
+            this._textProvider.writeStrategy = ws;
+        }
+    }
+
+    get writeStrategy(): WriteStrategy | undefined {
+        return this._writeStrategy;
+    }
+
+    getProvider(url: string): ResourceProvider {
+        switch (true) {
+        case isValidImage(url):
+            return this._imageProvider;
+        case isValidVideo(url):
+            return this._videoProvider;
+        case isValidBinary(url):
+            return this._binaryProvider;
+        default:
+            return this._textProvider;
+        }
+    }
+
+    async load(url: string): Promise<any> {
+        const provider = this.getProvider(url);
+        const data = await provider.load(url);
+        return data;
+    }
+
+    async write(url: string, data: any): Promise<void> {
+        const provider = this.getProvider(url);
+        return await provider.write(url,data);
+    }
+}

package/src/tools/ResourceProvider.ts

@@ -0,0 +1,69 @@
+import { isBrowser } from './processType';
+import { base64ToArrayBuffer } from './base64';
+
+export enum DataFormat {
+    BYTES = 0,          // Uint8Array
+    IMAGE = 1,          // DOM img
+    BASE64 = 2,         // Base64 string. It can include or not the Base64 image prefix
+    TEXT = 3,           // Text string
+    JSON_STRING = 4,    // JSON text
+    JSON_OBJECT = 5,    // JSON serializable object
+    FILE_PATH = 6       // File path (used to implement file copy)
+}
+
+interface WriteStrategy {
+    writeBytes(url: string, data: Uint8Array): Promise<void>;
+    writeImage(url: string, data: HTMLImageElement): Promise<void>;
+    writeText(url: string, data: string): Promise<void>;
+    writeJson(url: string, data: any): Promise<void>;
+}
+
+export default class ResourceProvider {
+    private _writeStrategy?: WriteStrategy;
+
+    set writeStrategy(ws: WriteStrategy) {
+        this._writeStrategy = ws;
+    }
+
+    get writeStrategy(): WriteStrategy {
+        if (!this._writeStrategy) {
+            throw new Error("ResourceProvider.write(): no write strategy configured.");
+        }
+        return this._writeStrategy;
+    }
+
+    async load(url: string): Promise<any> {
+
+    }
+
+    async write(url: string, data: any, format: DataFormat = DataFormat.TEXT): Promise<void> {
+        switch (format) {
+        case DataFormat.BYTES:
+            return this.writeStrategy.writeBytes(url,data);
+        case DataFormat.IMAGE:
+            if (isBrowser()) {
+                return this.writeStrategy.writeImage(url, data);
+            }
+            else {
+                throw new Error("ResourceProvider.write() unsupported data format: Image data format is supported only on browsers or electron renderer process.");
+            }
+        case DataFormat.BASE64:
+            const bytes = await base64ToArrayBuffer(data);
+            return this.writeStrategy.writeBytes(url, bytes);
+        case DataFormat.TEXT:
+            return this.writeStrategy.writeText(url, data);
+        case DataFormat.JSON_STRING:
+            return this.writeStrategy.writeText(url, data);
+        case DataFormat.JSON_OBJECT:
+            return this.writeStrategy.writeJson(url, data);
+        case DataFormat.FILE_PATH:
+            return this.copyFile(url, data);
+        default:
+            throw new Error("ResourceProvider.write() invalid format");
+        }
+    }
+
+    async copyFile(destinationUrl: string, sourceFilePath: string): Promise<void> {
+        throw new Error("ResourceProvider.copyFile(): not implemented");
+    }
+}

package/src/tools/TextResourceProvider.ts

@@ -0,0 +1,24 @@
+import ResourceProvider from './ResourceProvider';
+
+export default class TextResourceProvider extends ResourceProvider {
+    async load(url: string): Promise<any> {
+        const response = await fetch(url);
+        if (response.ok) {
+            const textData = await response.text();
+            try {
+                const objectData = JSON.parse(textData);
+                return objectData;
+            }
+            catch (e) {
+                return textData;
+            }
+        }
+        else {
+            throw new Error(`Resource not found at '${ url }'`);
+        }
+    }
+
+    async write(url: string, data: any): Promise<void> {
+        throw new Error('TextResourceProvider.write not implemented.');
+    }
+}

package/src/tools/TextureCache.ts

@@ -0,0 +1,52 @@
+
+import Canvas from '../app/Canvas';
+import Texture from '../base/Texture';
+
+const g_canvasCache: { [key: string]: TextureCache } = {};
+
+export default class TextureCache {
+    static Get(canvas: Canvas | null = null): TextureCache {
+        canvas = canvas || Canvas.FirstCanvas();
+        if (!canvas && !g_canvasCache["__no_canvas__"]) {
+            console.warn("TextureCache.Get() No canvas available. If your application uses a canvas, ensure that it has been created before using TexturCache. If your application does not use a canvas, you may disregard this message.");
+        }
+
+        if (canvas && !g_canvasCache[canvas.id]) {
+            g_canvasCache[canvas.id] = new TextureCache(canvas);
+        }
+        else if (!canvas && !g_canvasCache["__no_canvas__"]) {
+            g_canvasCache["__no_canvas__"] = new TextureCache(null);
+        }
+
+        return g_canvasCache[canvas ? canvas.id : "__no_canvas__"];
+    }
+
+    private _canvas: Canvas | null;
+    private _cache: { [key: string]: Texture };
+
+    constructor(canvas: Canvas | null) {
+        this._canvas = canvas;
+        this._cache = {};
+    }
+
+    get canvas(): Canvas | null { return this._canvas; }
+
+    registerTexture(texture: Texture): void {
+        if (!texture.fileName) {
+            throw new Error("TextureCache.registerTexture() texture path is empty");
+        }
+        this._cache[texture.fileName] = texture;
+    }
+
+    getTexture(texturePath: string): Texture | undefined {
+        return this._cache[texturePath];
+    }
+
+    findTexture(texturePath: string): boolean {
+        return this._cache[texturePath] != null;
+    }
+
+    clear(): void {
+        this._cache = {};
+    }
+}