@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/controller/texture-controller.js

@@ -0,0 +1,875 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* eslint-disable no-continue */
+/* eslint-disable no-await-in-loop */
+import { Externals } from '../stage/externals';
+import { Controller } from '..';
+import { getTextPixel, TEXT_SEGMENT, TileUtil, TEXT_MAX, USE_CANVAS, USE_TEXTURE_BLACK, CubeFaceConfig, } from '../utils/tile-util';
+class TextureEventEnum {
+}
+TextureEventEnum.TEXTURE_UPDATE = 'texture.update';
+// const SHOW_CANVAS = false;
+const DELETE_TIME = 30 * 60;
+class TextureController extends Controller {
+    // public initMap: Map<string, TileTextureInfo>;
+    // public isTest: boolean;
+    constructor() {
+        super();
+        // console.log('texture-contorller', 'constructor');
+        this.textures = [];
+        this.textureInfoIds = [];
+        this.addingMap = new Map();
+        this.deletingMap = new Map();
+        // this.initMap = new Map<string, TileTextureInfo>();
+        this.loadingMap = new Map();
+        this.loadedMap = new Map();
+        this.loadedImageDataMap = new Map();
+        this.textureMap = new Map();
+        this.loadedImageDataMap2 = new Map();
+        this.context2ds = [];
+    }
+    /**
+     * 获取2d context
+     */
+    get ctx() {
+        if (!this._ctx) {
+            const ctx = this.getNewContext2d(getTextPixel());
+            if (ctx) {
+                this._ctx = ctx;
+            }
+        }
+        return this._ctx;
+    }
+    /**
+     * 获取固定大小的context2d
+     * @param size
+     * @returns
+     */
+    getNewContext2d(size) {
+        // console.log('texture-contorller', 'getNewContext2d');
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        // if (SHOW_CANVAS) {
+        //   const cantainer = document.getElementById('container');
+        //   if (cantainer) {
+        //     cantainer.appendChild(canvas);
+        //   }
+        // }
+        const ctx = canvas.getContext('2d');
+        return ctx;
+    }
+    /**
+     * 获取context2d
+     * @param index
+     * @returns
+     */
+    getContext2d(index) {
+        // console.log('texture-contorller', 'getContext2d');
+        let ctx = this.context2ds[index];
+        if (!ctx) {
+            const newCtx = this.getNewContext2d(getTextPixel() * TEXT_SEGMENT);
+            if (newCtx) {
+                ctx = this.context2ds[index] = newCtx;
+            }
+        }
+        return ctx;
+    }
+    /**
+     * 绑定视图
+     * @param view 视图
+     */
+    bindView(view) {
+        this.view = view;
+    }
+    /**
+     * 添加纹理信息
+     * @param info 纹理信息
+     */
+    addTexture(info) {
+        const id = info.id;
+        // console.log('addTexture', id);
+        if (this.textureMap.has(id)) {
+            if (this.deletingMap.has(id)) {
+                this.deletingMap.delete(id);
+            }
+        }
+        else if (this.loadingMap.has(id)) {
+            this.loadingMap.set(id, info);
+        }
+        else if (this.loadedMap.has(id)) {
+            this.loadedMap.set(id, info);
+        }
+        else {
+            this.addingMap.set(id, info);
+        }
+    }
+    /**
+     * 根据pid获取已加载纹理的一个立方体纹理
+     * @ignore
+     * @param pid
+     * @returns
+     */
+    getCubeTextureByPid(pid) {
+        const ref = [];
+        const { loadedImageDataMap, loadedImageDataMap2 } = this;
+        CubeFaceConfig.forEach((config) => {
+            const id = TileUtil.getTileInfoId(pid + (config.face + 1) / 10, 0, 0);
+            if (USE_CANVAS) {
+                const img = loadedImageDataMap2.get(id);
+                if (img) {
+                    ref.push(img);
+                }
+            }
+            else {
+                const imgData = loadedImageDataMap.get(id);
+                if (imgData) {
+                    ref.push(imgData);
+                }
+            }
+        });
+        const { THREE } = Externals.getInstance();
+        if (ref.length === 6) {
+            const cubeText = new THREE.CubeTexture(ref);
+            cubeText.needsUpdate = true;
+            return cubeText;
+        }
+        return null;
+    }
+    /**
+     * 初始化纹理信息
+     * @ignore
+     * @param infos
+     * @returns 0为初始化失败，1为初始化成功
+     */
+    initTextures(infos) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // console.log('texture-contorller', 'initTexture');
+            const initMap = new Map();
+            for (let i = 0; i < infos.length; i++) {
+                const info = infos[i];
+                const id = info.id;
+                if (!this.addingMap.has(id)) {
+                    if (this.deletingMap.has(id)) {
+                        initMap.set(id, info);
+                        this.deletingMap.delete(id);
+                    }
+                    else if (!this.textureMap.has(id)) {
+                        // this.addingMap.set(id, info);
+                        initMap.set(id, info);
+                    }
+                }
+                else {
+                    initMap.set(id, info);
+                    this.addingMap.delete(id);
+                }
+            }
+            let res = 1;
+            if (initMap.size) {
+                res = yield this.initTexturesAsync(initMap);
+            }
+            if (res) {
+                // console.log('texture-contorller', 'initTexture', 1);
+                while (initMap.size) {
+                    const updates = [];
+                    const deletes = [];
+                    // console.log('texture-contorller', 'initTexture', 2);
+                    const isUpdate = this.updateTextures(updates, deletes, initMap);
+                    // console.log('texture-contorller', 'initTexture', updates, deletes, isUpdate, 3);
+                    if (isUpdate) {
+                        this.emit(TextureEventEnum.TEXTURE_UPDATE, updates, deletes);
+                    }
+                    // console.log('texture-contorller', 'initTexture', 4);
+                }
+            }
+            return res;
+        });
+    }
+    /**
+     * 删除纹理map
+     * @param map 要删除的信息图
+     * @param deleteFrize 是否删除冻结信息
+     */
+    deteteTextureMap(map, deleteFrize) {
+        // console.log('texture-contorller', 'deleteTexture');
+        map.forEach((info) => {
+            this.deleteTexture(info, deleteFrize);
+        });
+    }
+    /**
+     * 删除纹理
+     * @param info 纹理信息
+     * @param deleteFrize 是否删除冻结信息
+     */
+    deleteTexture(info, deleteFrize) {
+        // console.log('texture-contorller', 'deleteTexture');
+        const id = info.id;
+        if (!this.deletingMap.has(id)) {
+            if (this.addingMap.has(id)) {
+                this.addingMap.delete(id);
+            }
+            else if (this.loadingMap.has(id)) {
+                this.loadingMap.delete(id);
+            }
+            else if (this.loadedMap.has(id)) {
+                this.loadedMap.delete(id);
+                this.loadedImageDataMap.delete(id);
+            }
+            else if (this.textureMap.has(id)) {
+                info.time = 0;
+                if (deleteFrize || !info.frize) {
+                    this.deletingMap.set(id, info);
+                }
+            }
+        }
+    }
+    /**
+     * 获取纹理信息列表
+     * @returns
+     */
+    getTextureInfos() {
+        // console.log('texture-contorller', 'getTextureInfos');
+        const ts = [];
+        for (let i = 0; i < this.textures.length; i++) {
+            const infoIds = this.textureInfoIds[i];
+            for (let j = 0; j < infoIds.length; j++) {
+                if (infoIds[j]) {
+                    const info = this.textureMap.get(infoIds[j]);
+                    if (info) {
+                        ts.push(info);
+                    }
+                }
+            }
+        }
+        return ts;
+    }
+    /**
+     * 异步加载纹理
+     */
+    loadTexturesAsync() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // console.log('texture-contorller', 'loadTexturesAsync');
+            if (!this.loading) {
+                const { addingMap, loadingMap, loadedMap, loadedImageDataMap, loadedImageDataMap2, } = this;
+                const addings = Array.from(addingMap);
+                addings.sort((adding1, adding2) => adding1[1].centerDis - adding2[1].centerDis);
+                while (addings[0]) {
+                    const adding = addings.shift();
+                    if (!adding)
+                        continue;
+                    const infoKey = adding[0];
+                    if (!infoKey)
+                        continue;
+                    if (adding) {
+                        const info = addingMap.get(infoKey);
+                        if (info) {
+                            addingMap.delete(infoKey);
+                            loadingMap.set(infoKey, info);
+                            const imgInfo = TileUtil.getImageInfo(info);
+                            if (USE_CANVAS) {
+                                // eslint-disable-next-line no-await-in-loop
+                                const image = yield this.loadImgAsync2(imgInfo.url);
+                                if (loadingMap.has(infoKey)) {
+                                    loadingMap.delete(infoKey);
+                                    loadedMap.set(infoKey, info);
+                                    loadedImageDataMap2.set(infoKey, image);
+                                }
+                            }
+                            else {
+                                // eslint-disable-next-line no-await-in-loop
+                                const imgData = yield this.loadImgAsync(imgInfo.url);
+                                if (imgData) {
+                                    if (loadingMap.has(infoKey)) {
+                                        loadingMap.delete(infoKey);
+                                        loadedMap.set(infoKey, info);
+                                        loadedImageDataMap.set(infoKey, imgData);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                this.loading = false;
+            }
+        });
+    }
+    /**
+     * 异步初始化纹理
+     * @param infoMap 纹理信息图
+     * @returns 0为初始化失败，1为初始化成功
+     */
+    initTexturesAsync(infoMap) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => {
+                const { loadedImageDataMap, loadedImageDataMap2 } = this;
+                const keys = Array.from(infoMap.keys());
+                const count = keys.length;
+                if (count < 1) {
+                    resolve();
+                }
+                let index = 0;
+                const success = () => {
+                    index++;
+                    if (index >= count) {
+                        resolve(1);
+                    }
+                };
+                const error = () => {
+                    // eslint-disable-next-line prefer-promise-reject-errors
+                    resolve(0);
+                };
+                for (let i = 0; i < count; i++) {
+                    const infoKey = keys[i];
+                    const info = infoMap.get(infoKey);
+                    if (info) {
+                        const imgInfo = TileUtil.getImageInfo(info);
+                        const url = imgInfo.url;
+                        if (USE_CANVAS) {
+                            this.loadImgAsync2(url).then((img) => {
+                                loadedImageDataMap2.set(infoKey, img);
+                                success();
+                            }).catch(error);
+                        }
+                        else {
+                            this.loadImgAsync(url).then((imgData) => {
+                                loadedImageDataMap.set(infoKey, imgData);
+                                success();
+                            }).catch(error);
+                        }
+                    }
+                }
+            });
+        });
+    }
+    /**
+     * 根据pid删除纹理
+     * @param pid
+     * @param deleteFrize
+     */
+    deleteTexturesByPid(pid, deleteFrize) {
+        const idStart = `${pid}.`;
+        const { textureInfoIds, textureMap, addingMap, deletingMap, loadedImageDataMap, loadedMap, loadingMap, } = this;
+        // console.log('delete pid', pid);
+        // console.log('delete before', Array.from(textureMap.keys()));
+        textureMap.forEach((info, id) => {
+            if (id.startsWith(idStart)) {
+                if (deleteFrize || !info.frize) {
+                    const { x, y } = TileUtil.getXY(info.textureIndex, 100);
+                    delete textureInfoIds[y][x];
+                    textureMap.delete(id);
+                    if (loadedImageDataMap.has(id)) {
+                        this.loadedImageDataMap.delete(id);
+                    }
+                }
+            }
+        });
+        // console.log('delete after', Array.from(textureMap.keys()));
+        addingMap.forEach((info, id) => {
+            if (id.startsWith(idStart)) {
+                if (deleteFrize || !info.frize) {
+                    addingMap.delete(id);
+                }
+            }
+        });
+        // console.log('addingmap', Array.from(addingMap.keys()));
+        deletingMap.forEach((info, id) => {
+            if (id.startsWith(idStart)) {
+                if (deleteFrize || !info.frize) {
+                    deletingMap.delete(id);
+                }
+            }
+        });
+        // console.log('deletingMap', Array.from(deletingMap.keys()));
+        loadedMap.forEach((info, id) => {
+            if (id.startsWith(idStart)) {
+                if (deleteFrize || !info.frize) {
+                    loadedMap.delete(id);
+                    loadedImageDataMap.delete(id);
+                }
+            }
+        });
+        // console.log('loadedMap', Array.from(loadedMap.keys()));
+        loadingMap.forEach((info, id) => {
+            if (id.startsWith(idStart)) {
+                if (deleteFrize || !info.frize) {
+                    loadingMap.delete(id);
+                }
+            }
+        });
+        // console.log('loadingMap', Array.from(loadingMap.keys()));
+    }
+    /**
+     * 更新纹理信息
+     * @param updates 更新列表，外部传入
+     * @param deletes 删除列表，外部传入
+     * @param initMap 初始化加载图
+     * @returns
+     */
+    updateTextures(updates, deletes, initMap) {
+        // console.log('texture-contorller', 'updateTextures');
+        // 判定是否有更新的texture，更新到一张纹理并通知当前纹理对象内容。
+        const { loadedMap, deletingMap, textureInfoIds, textures, loadedImageDataMap, loadedImageDataMap2, } = this;
+        const loadMap = initMap || loadedMap;
+        const { maxIndex, create } = this.testEmptyMaxCount(textureInfoIds, deletingMap, loadMap);
+        if (maxIndex === -1) {
+            return false;
+        }
+        // console.log('updateTextures', Array.from(loadedMap.keys()));
+        if (create) {
+            if (USE_CANVAS) {
+                textures[maxIndex] = this.createCanvasTexture(maxIndex);
+            }
+            else {
+                textures[maxIndex] = this.createMergeTexture();
+            }
+        }
+        deletingMap.forEach((info, id) => {
+            const { x, y } = TileUtil.getXY(info.textureIndex, 100);
+            if (y === maxIndex) {
+                this.textureMap.delete(id);
+                delete textureInfoIds[y][x];
+                deletes.push(info);
+                if (USE_CANVAS) {
+                    loadedImageDataMap2.delete(id);
+                }
+            }
+        });
+        deletes.forEach((info) => {
+            deletingMap.delete(info.id);
+        });
+        let tList = textureInfoIds[maxIndex];
+        if (!tList) {
+            tList = textureInfoIds[maxIndex] = [];
+        }
+        const count = TEXT_SEGMENT * TEXT_SEGMENT;
+        const loadedList = Array.from(loadMap);
+        loadedList.sort((a, b) => a[1].centerDis - b[1].centerDis);
+        let textureChangeCount = 0;
+        for (let i = 0; i < count; i++) {
+            if (!loadedList[0]) {
+                break;
+            }
+            const t = tList[i];
+            if (!t) {
+                if (textureChangeCount >= TileUtil.updateTextureMax && !initMap) {
+                    break;
+                }
+                const [tId, tInfo] = loadedList.shift();
+                loadMap.delete(tId);
+                tInfo.textureIndex = maxIndex * 100 + i;
+                tList[i] = tId;
+                this.textureMap.set(tId, tInfo);
+                updates.push(tInfo);
+                if (USE_CANVAS) {
+                    const image = loadedImageDataMap2.get(tId);
+                    const ctx = this.getContext2d(maxIndex);
+                    this.updateCanvasTexture(textures[maxIndex], ctx, image, i);
+                }
+                else {
+                    const imageData = loadedImageDataMap.get(tId);
+                    this.updateMergeTexture(textures[maxIndex], imageData, i);
+                    if (!tInfo.frize) {
+                        loadedImageDataMap.delete(tId);
+                    }
+                }
+                // if (maxIndex === 0) {
+                //   this.drawingImage(textures[maxIndex]);
+                // }
+                textureChangeCount++;
+            }
+        }
+        return updates.length > 0 || deletes.length > 0;
+    }
+    // public drawingImage(texture: NS_THREE.DataTexture): void {
+    //   const context2d = (window as any).context2d;
+    //   if (context2d) {
+    //     const image = new ImageData(2048, 2048);
+    //     image.data.set(texture.image.data);
+    //     context2d.putImageData(image, 0, 0);
+    //     // context2d.createPattern(texture, 'no-repeat');
+    //   }
+    // }
+    /**
+     * 测试空节点最大数量
+     * @param infos
+     * @param deletings
+     * @param loadedMap
+     * @returns
+     */
+    testEmptyMaxCount(infos, deletings, loadedMap) {
+        // console.log('texture-contorller', 'testEmptyMaxCount');
+        if (!deletings.size && !loadedMap.size) {
+            return {
+                maxIndex: -1, maxCount: 0, create: false,
+            };
+        }
+        const index = [];
+        const infosCount = infos.length;
+        for (let i = 0; i < infosCount; i++) {
+            index[i] = 0;
+        }
+        // const willDelete = [] as TileTextureInfo[][];
+        const deleteIndex = Array.from(index);
+        if (deletings) {
+            deletings.forEach((info) => {
+                if (info.time > DELETE_TIME) { // 到达删除时间的info加入删除计数
+                    const { y } = TileUtil.getXY(info.textureIndex, 100);
+                    deleteIndex[y]++;
+                }
+            });
+        }
+        const count = TEXT_SEGMENT * TEXT_SEGMENT;
+        for (let i = 0; i < infosCount; i++) {
+            const info = infos[i];
+            for (let j = 0; j < count; j++) {
+                if (info[j]) {
+                    index[i]++;
+                }
+            }
+        }
+        const t = index.map((value, i) => count - value + (deleteIndex[i] || 0));
+        const loadedSize = loadedMap.size;
+        let maxCount = 0;
+        let maxIndex = 0;
+        for (let i = 0; i < t.length; i++) {
+            const tc = t[i];
+            const dc = deleteIndex[i];
+            if (loadedSize) {
+                if (maxCount >= TileUtil.updateTextureMax || maxCount >= loadedSize) {
+                    break;
+                }
+                if (tc > maxCount) {
+                    maxCount = tc;
+                    maxIndex = i;
+                }
+            }
+            else if (dc > maxCount) {
+                maxCount = dc;
+                maxIndex = i;
+            }
+        }
+        let create = false;
+        if (maxCount === 0) {
+            maxIndex = infos.length;
+            if (maxIndex >= TEXT_MAX) {
+                // 如果超过纹理上限, 则按时间删除时间大小排序
+                let willDeleteInfo;
+                deletings.forEach((info) => {
+                    if (!willDeleteInfo || willDeleteInfo.time > info.time) {
+                        willDeleteInfo = info;
+                    }
+                });
+                if (willDeleteInfo) {
+                    maxIndex = TileUtil.getXY(willDeleteInfo.textureIndex, 100).y;
+                    maxCount = 1;
+                }
+                else {
+                    // 没有适合删除的
+                    maxIndex = -1;
+                    maxCount = 0;
+                }
+            }
+            else if (loadedSize === 0) {
+                maxIndex = -1;
+                maxCount = 0;
+                create = false;
+            }
+            else {
+                maxCount = count;
+                create = true;
+            }
+        }
+        return { maxIndex, maxCount, create };
+    }
+    /**
+     * 创建合并纹理
+     * @returns
+     */
+    createMergeTexture() {
+        // console.log('texture-contorller', 'createMergeTexture');
+        const { THREE } = Externals.getInstance();
+        const TEXT_PIXEL = getTextPixel();
+        const buffer = new Uint8Array(TEXT_PIXEL * TEXT_PIXEL * TEXT_SEGMENT * TEXT_SEGMENT * 4);
+        const texture = new THREE.DataTexture(buffer, TEXT_PIXEL * TEXT_SEGMENT, TEXT_PIXEL * TEXT_SEGMENT);
+        if (USE_TEXTURE_BLACK) {
+            const count = buffer.length;
+            for (let i = 0; i < count; i += 4) {
+                buffer[i + 3] = 1;
+            }
+        }
+        return texture;
+    }
+    /**
+     * 创建canvas纹理
+     * @param index 下标
+     * @returns
+     */
+    createCanvasTexture(index) {
+        // console.log('texture-contorller', 'createCanvasTexture');
+        const { THREE } = Externals.getInstance();
+        const ctx = this.getContext2d(index);
+        if (USE_TEXTURE_BLACK) {
+            ctx.canvas.style.backgroundColor = '#000';
+        }
+        const texture = new THREE.Texture(ctx.canvas);
+        return texture;
+    }
+    /**
+     * 更新canvas纹理
+     * @param mergeTexture
+     * @param ctx
+     * @param image
+     * @param index
+     */
+    updateCanvasTexture(mergeTexture, ctx, image, index) {
+        // console.log('texture-contorller', 'updateCanvasTexture');
+        const { x, y } = TileUtil.getXY(index, TEXT_SEGMENT);
+        const TEXT_PIXEL = getTextPixel();
+        ctx.drawImage(image, x * TEXT_PIXEL, (TEXT_SEGMENT - 1 - y) * TEXT_PIXEL);
+        mergeTexture.needsUpdate = true;
+    }
+    /**
+     * 更新合并纹理
+     * @param mergeTexture 合并纹理
+     * @param imaData 图片数据
+     * @param index 下标
+     */
+    updateMergeTexture(mergeTexture, imaData, index) {
+        // console.log('texture-contorller', 'updateMergeTexture');
+        const buffer = mergeTexture.image.data;
+        const tBuffer = imaData.data;
+        const { x, y } = TileUtil.getXY(index, TEXT_SEGMENT);
+        const TEXT_PIXEL = getTextPixel();
+        const length = TEXT_SEGMENT * TEXT_PIXEL * 4;
+        const tLength = TEXT_PIXEL * 4;
+        const base = y * length * TEXT_PIXEL + x * tLength;
+        for (let i = 0; i < TEXT_PIXEL; i++) {
+            for (let j = 0; j < TEXT_PIXEL; j++) {
+                const bi = base + i * length + j * 4;
+                const tbi = i * tLength + j * 4;
+                buffer[bi] = tBuffer[tbi];
+                buffer[bi + 1] = tBuffer[tbi + 1];
+                buffer[bi + 2] = tBuffer[tbi + 2];
+                buffer[bi + 3] = tBuffer[tbi + 3];
+            }
+        }
+        mergeTexture.needsUpdate = true;
+    }
+    /**
+     * 将texture2 index2位置的纹理合并到textur1 index1的位置上
+     * @param mergeTexture1 纹理1
+     * @param index1 下标1
+     * @param mergeTexture2 纹理2
+     * @param index2 下标2
+     */
+    updateMergeTexture2(mergeTexture1, index1, mergeTexture2, index2) {
+        // console.log('texture-contorller', 'updateMergeTexture2');
+        const buffer1 = mergeTexture1.image.data;
+        const buffer2 = mergeTexture2.image.data;
+        const { x: x1, y: y1 } = TileUtil.getXY(index1, TEXT_SEGMENT);
+        const { x: x2, y: y2 } = TileUtil.getXY(index2, TEXT_SEGMENT);
+        const TEXT_PIXEL = getTextPixel();
+        const length = TEXT_SEGMENT * TEXT_PIXEL * 4;
+        const tLength = TEXT_PIXEL * 4;
+        const base1 = y1 * length * TEXT_PIXEL + x1 * tLength;
+        const base2 = y2 * length * TEXT_PIXEL + x2 * tLength;
+        for (let i = 0; i < TEXT_PIXEL; i++) {
+            for (let j = 0; j < TEXT_PIXEL; j++) {
+                const b1 = base1 + i * length + j * 4;
+                const b2 = base2 + i * length + j * 4;
+                buffer1[b1] = buffer2[b2];
+                buffer1[b1 + 1] = buffer2[b2 + 1];
+                buffer1[b1 + 2] = buffer2[b2 + 2];
+                buffer1[b1 + 3] = buffer2[b2 + 3];
+            }
+        }
+        mergeTexture1.needsUpdate = true;
+    }
+    /**
+     * 异步加载图片
+     * @param url 图片url
+     * @returns 图片纹理信息
+     */
+    loadImgAsync(url) {
+        // console.log('texture-contorller', 'loadImgAsync2');
+        const img = new Image();
+        img.setAttribute('crossOrigin', 'anonymous');
+        const { ctx } = this;
+        return new Promise(((resolve, reject) => {
+            img.onload = () => {
+                ctx.drawImage(img, 0, 0);
+                const TEXT_PIXEL = getTextPixel();
+                // console.time(`${url}get`);
+                const imgData = ctx.getImageData(0, 0, TEXT_PIXEL, TEXT_PIXEL);
+                // console.timeEnd(`${url}get`);
+                resolve(imgData);
+            };
+            img.onerror = () => {
+                reject();
+            };
+            img.src = url;
+        }));
+    }
+    /**
+     * 异步加载图片2
+     * @param url 图片url
+     * @returns 图片元素
+     */
+    loadImgAsync2(url) {
+        // console.log('texture-contorller', 'loadImgAsync2');
+        const img = new Image();
+        img.setAttribute('crossOrigin', 'anonymous');
+        return new Promise((resolve, reject) => {
+            img.onload = () => {
+                resolve(img);
+            };
+            img.onerror = () => {
+                reject();
+            };
+            img.src = url;
+        });
+    }
+    /**
+     * 更新删除的纹理
+     */
+    updateDeletingTextures() {
+        // console.log('texture-contorller', 'updateDeletingTextures');
+        const { deletingMap } = this;
+        deletingMap.forEach((info) => {
+            info.time++;
+        });
+    }
+    /**
+     * 格式化纹理
+     * @param updates
+     * @returns
+     */
+    formatTextures(updates) {
+        // console.log('texture-contorller', 'formatTextures');
+        const { textureInfoIds, textureMap, textures, loadedImageDataMap2, } = this;
+        const count = TEXT_SEGMENT * TEXT_SEGMENT;
+        const infoCount = textureInfoIds.length;
+        let i = 0;
+        let j = infoCount - 1;
+        let ii = 0;
+        let jj = count;
+        let tId;
+        let changeTextureIndex = -1;
+        let willBreak = false;
+        while (i < j) {
+            if (tId) {
+                if (willBreak) {
+                    break;
+                }
+                const iId = textureInfoIds[i][ii];
+                if (!iId) {
+                    textureInfoIds[i][ii] = tId;
+                    delete textureInfoIds[j][jj];
+                    const info = textureMap.get(tId);
+                    if (info) {
+                        updates.push(info);
+                        info.textureIndex = i * 100 + ii;
+                        if (USE_CANVAS) {
+                            const img = loadedImageDataMap2.get(info.id);
+                            if (img) {
+                                this.updateCanvasTexture(textures[i], this.getContext2d(i), img, ii);
+                            }
+                        }
+                        else {
+                            this.updateMergeTexture2(textures[i], ii, textures[j], jj);
+                        }
+                        if (changeTextureIndex === -1) {
+                            changeTextureIndex = i;
+                        }
+                        else if (changeTextureIndex !== i) {
+                            // 一次更新一个纹理
+                            willBreak = true;
+                        }
+                    }
+                    tId = undefined;
+                }
+                ii++;
+                if (ii >= count) {
+                    i++;
+                    ii = 0;
+                }
+            }
+            else {
+                jj--;
+                if (jj < 0) {
+                    j--;
+                    jj = count;
+                }
+                tId = textureInfoIds[j][jj];
+            }
+        }
+        if (j < infoCount - 1) {
+            // 删除多余纹理
+            textureInfoIds.splice(j + 1, infoCount - 1 - j);
+            const deleteTextures = textures.splice(j + 1, infoCount - 1 - j);
+            if (USE_CANVAS) {
+                // const ctxs = this.context2ds.splice(j + 1, infoCount - 1 - j);
+                // ctxs.forEach((ctx) => {
+                //   const canvas = ctx.canvas;
+                //   // if (SHOW_CANVAS) {
+                //   //   if (canvas.parentElement) {
+                //   //     canvas.parentElement.removeChild(canvas);
+                //   //   }
+                //   // }
+                // });
+                deleteTextures.forEach((texture) => {
+                    texture.dispose();
+                });
+            }
+            // TODO(rpeng) 手动dispose
+            // const deleteTextures = textures.splice(j + 1, infoCount - 1 - j);
+            // deleteTextures.forEach((texture) => {
+            //   texture.dispose();
+            //   });
+        }
+        return updates.length !== 0;
+    }
+    /**
+     * 更新
+     * @ignore
+     * @returns
+     */
+    update() {
+        // console.log('texture-contorller', 'update');
+        this.loadTexturesAsync();
+        this.updateDeletingTextures();
+        const updates = [];
+        const deletes = [];
+        let isUpdate = this.updateTextures(updates, deletes);
+        if (!isUpdate) {
+            // 如果没有纹理更新，进行纹理重组计算
+            isUpdate = this.formatTextures(updates);
+        }
+        // if (updates.length || deletes.length) {
+        //   // //console.log('texture', 'updates.length', updates.length, 'deletes.length', deletes.length);
+        // }
+        if (isUpdate) {
+            // console.log('updates', updates.map((info) => info.id));
+            // console.log('deletes', deletes.map((info) => info.id));
+            this.emit(TextureEventEnum.TEXTURE_UPDATE, updates, deletes);
+        }
+        return isUpdate;
+    }
+    /**
+     * 单例获取
+     */
+    static get instance() {
+        if (!this.__instance) {
+            this.__instance = new TextureController();
+        }
+        return this.__instance;
+    }
+}
+export { TextureController, TextureEventEnum };