@aibee/owlly 1.0.25

package/src/owlly/controller/texture-controller.ts

@@ -0,0 +1,949 @@
+/* eslint-disable no-continue */
+/* eslint-disable no-await-in-loop */
+import { Externals, NS_THREE } from '../stage/externals';
+import { Controller, View } from '..';
+import {
+  getTextPixel,
+  TEXT_SEGMENT,
+  TileUtil,
+  TileTextureInfo,
+  TEXT_MAX,
+  USE_CANVAS,
+  USE_TEXTURE_BLACK,
+  CubeFaceConfig,
+} from '../utils/tile-util';
+
+class TextureEventEnum {
+  static readonly TEXTURE_UPDATE: string = 'texture.update'
+}
+
+// const SHOW_CANVAS = false;
+const DELETE_TIME = 30 * 60;
+
+class TextureController extends Controller {
+  private static __instance: TextureController;
+
+  private view: View;
+
+  private _ctx: CanvasRenderingContext2D;
+
+  public textures: NS_THREE.Texture[];
+
+  private addingMap: Map<string, TileTextureInfo>;
+
+  private deletingMap: Map<string, TileTextureInfo>;
+
+  private loading: false;
+
+  private loadingMap: Map<string, TileTextureInfo>;
+
+  private loadedMap: Map<string, TileTextureInfo>;
+
+  private loadedImageDataMap: Map<string, ImageData>;
+
+  private loadedImageDataMap2: Map<string, HTMLImageElement>;
+
+  private textureInfoIds: string[][];
+
+  /** @ignore */
+  public textureMap: Map<string, TileTextureInfo>;
+
+  /** @ignore */
+  public context2ds: CanvasRenderingContext2D[];
+
+  // public initMap: Map<string, TileTextureInfo>;
+
+  // public isTest: boolean;
+
+  constructor() {
+    super();
+    // console.log('texture-contorller', 'constructor');
+    this.textures = [];
+    this.textureInfoIds = [];
+    this.addingMap = new Map<string, TileTextureInfo>();
+    this.deletingMap = new Map<string, TileTextureInfo>();
+    // this.initMap = new Map<string, TileTextureInfo>();
+    this.loadingMap = new Map<string, TileTextureInfo>();
+    this.loadedMap = new Map<string, TileTextureInfo>();
+    this.loadedImageDataMap = new Map<string, ImageData>();
+    this.textureMap = new Map<string, TileTextureInfo>();
+
+    this.loadedImageDataMap2 = new Map<string, HTMLImageElement>();
+    this.context2ds = [] as CanvasRenderingContext2D[];
+  }
+
+  /**
+   * 获取2d context
+   */
+  private get ctx(): CanvasRenderingContext2D {
+    if (!this._ctx) {
+      const ctx = this.getNewContext2d(getTextPixel());
+      if (ctx) { this._ctx = ctx; }
+    }
+    return this._ctx;
+  }
+
+  /**
+   * 获取固定大小的context2d
+   * @param size
+   * @returns
+   */
+  private getNewContext2d(size: number): CanvasRenderingContext2D | null {
+    // 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
+   */
+  private getContext2d(index: number): CanvasRenderingContext2D {
+    // 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 视图
+   */
+  public bindView(view: View): void {
+    this.view = view;
+  }
+
+  /**
+   * 添加纹理信息
+   * @param info 纹理信息
+   */
+  public addTexture(info: TileTextureInfo): void {
+    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
+   */
+  public getCubeTextureByPid(pid: number): NS_THREE.CubeTexture | null {
+    const ref = [] as (ImageData | HTMLImageElement)[];
+    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为初始化成功
+   */
+  public async initTextures(infos: TileTextureInfo[]): Promise<number> {
+    // console.log('texture-contorller', 'initTexture');
+
+    const initMap = new Map<string, TileTextureInfo>();
+    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 = await this.initTexturesAsync(initMap);
+    }
+    if (res) {
+      // console.log('texture-contorller', 'initTexture', 1);
+      while (initMap.size) {
+        const updates = [] as TileTextureInfo[];
+        const deletes = [] as TileTextureInfo[];
+        // 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 是否删除冻结信息
+   */
+  public deteteTextureMap(map: Map<string, TileTextureInfo>, deleteFrize?: boolean): void {
+    // console.log('texture-contorller', 'deleteTexture');
+    map.forEach((info) => {
+      this.deleteTexture(info, deleteFrize);
+    });
+  }
+
+  /**
+   * 删除纹理
+   * @param info 纹理信息
+   * @param deleteFrize 是否删除冻结信息
+   */
+  public deleteTexture(info: TileTextureInfo, deleteFrize?: boolean): void {
+    // 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
+   */
+  public getTextureInfos(): TileTextureInfo[] {
+    // console.log('texture-contorller', 'getTextureInfos');
+
+    const ts = [] as TileTextureInfo[];
+    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;
+  }
+
+  /**
+   * 异步加载纹理
+   */
+  public async loadTexturesAsync(): Promise<void> {
+    // 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 = await 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 = await 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为初始化成功
+   */
+  public async initTexturesAsync(infoMap: Map<string, TileTextureInfo>): Promise<number> {
+    return new Promise((resolve: Function) => {
+      const { loadedImageDataMap, loadedImageDataMap2 } = this;
+      const keys = Array.from(infoMap.keys());
+      const count = keys.length;
+      if (count < 1) {
+        resolve();
+      }
+      let index = 0;
+      const success = (): void => {
+        index++;
+        if (index >= count) {
+          resolve(1);
+        }
+      };
+      const error = (): void => {
+        // 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: HTMLImageElement) => {
+              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
+   */
+  public deleteTexturesByPid(pid: number, deleteFrize?: boolean): void {
+    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
+   */
+  private updateTextures(
+    updates: TileTextureInfo[],
+    deletes: TileTextureInfo[],
+    initMap?: Map<string, TileTextureInfo>,
+  ): boolean {
+    // 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] = [] as string[];
+    }
+    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() as [string, TileTextureInfo];
+        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) as HTMLImageElement;
+          const ctx = this.getContext2d(maxIndex);
+          this.updateCanvasTexture(textures[maxIndex], ctx, image, i);
+        } else {
+          const imageData = loadedImageDataMap.get(tId) as ImageData;
+          this.updateMergeTexture(textures[maxIndex] as NS_THREE.DataTexture, 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
+   */
+  private testEmptyMaxCount(
+    infos: string[][],
+    deletings: Map<string, TileTextureInfo>,
+    loadedMap: Map<string, TileTextureInfo>,
+  ): {
+    maxIndex: number; maxCount: number; create: boolean;
+  } {
+    // console.log('texture-contorller', 'testEmptyMaxCount');
+
+    if (!deletings.size && !loadedMap.size) {
+      return {
+        maxIndex: -1, maxCount: 0, create: false,
+      };
+    }
+    const index = [] as number[];
+    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: TileTextureInfo | undefined;
+        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
+   */
+  private createMergeTexture(): NS_THREE.DataTexture {
+    // 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
+   */
+  private createCanvasTexture(index: number): NS_THREE.Texture {
+    // 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
+   */
+  private updateCanvasTexture(
+    mergeTexture: NS_THREE.Texture, ctx: CanvasRenderingContext2D, image: HTMLImageElement, index: number,
+  ): void {
+    // 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 下标
+   */
+  private updateMergeTexture(mergeTexture: NS_THREE.DataTexture, imaData: ImageData, index: number): void {
+    // 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
+   */
+  private updateMergeTexture2(
+    mergeTexture1: NS_THREE.DataTexture,
+    index1: number,
+    mergeTexture2: NS_THREE.DataTexture,
+    index2: number,
+  ): void {
+    // 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 图片纹理信息
+   */
+  private loadImgAsync(url: string): Promise<ImageData> {
+    // console.log('texture-contorller', 'loadImgAsync2');
+    const img = new Image();
+    img.setAttribute('crossOrigin', 'anonymous');
+    const { ctx } = this;
+    return new Promise(((resolve, reject) => {
+      img.onload = (): void => {
+        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 = (): void => {
+        reject();
+      };
+      img.src = url;
+    }));
+  }
+
+  /**
+   * 异步加载图片2
+   * @param url 图片url
+   * @returns 图片元素
+   */
+  private loadImgAsync2(url: string): Promise<HTMLImageElement> {
+    // console.log('texture-contorller', 'loadImgAsync2');
+    const img = new Image();
+    img.setAttribute('crossOrigin', 'anonymous');
+    return new Promise((resolve, reject) => {
+      img.onload = (): void => {
+        resolve(img);
+      };
+      img.onerror = (): void => {
+        reject();
+      };
+      img.src = url;
+    });
+  }
+
+  /**
+   * 更新删除的纹理
+   */
+  private updateDeletingTextures(): void {
+    // console.log('texture-contorller', 'updateDeletingTextures');
+
+    const { deletingMap } = this;
+    deletingMap.forEach((info) => {
+      info.time++;
+    });
+  }
+
+  /**
+   * 格式化纹理
+   * @param updates
+   * @returns
+   */
+  private formatTextures(updates: TileTextureInfo[]): boolean {
+    // 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: string | undefined;
+    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] as NS_THREE.DataTexture, ii, textures[j] as NS_THREE.DataTexture, 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
+   */
+  public update(): boolean {
+    // console.log('texture-contorller', 'update');
+    this.loadTexturesAsync();
+    this.updateDeletingTextures();
+    const updates = [] as TileTextureInfo[];
+    const deletes = [] as TileTextureInfo[];
+    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;
+  }
+
+  /**
+   * 单例获取
+   */
+  public static get instance(): TextureController {
+    if (!this.__instance) {
+      this.__instance = new TextureController();
+    }
+    return this.__instance;
+  }
+}
+export { TextureController, TextureEventEnum };