From 1087de639d710388a9ace2874c36201e561b59bf Mon Sep 17 00:00:00 2001 From: unanmed <1319491857@qq.com> Date: Sat, 25 Oct 2025 11:57:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E5=90=88=E5=99=A8=E8=BE=93?= =?UTF-8?q?=E5=87=BA=E6=B7=BB=E5=8A=A0=E5=9B=BE=E9=9B=86=E7=B4=A2=E5=BC=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/render-assets/src/composer.ts | 19 +++++--- packages/render-assets/src/streamComposer.ts | 49 +++++++++++++------- packages/render-assets/src/types.ts | 2 + 3 files changed, 48 insertions(+), 22 deletions(-) diff --git a/packages/render-assets/src/composer.ts b/packages/render-assets/src/composer.ts index 93ead53..c002015 100644 --- a/packages/render-assets/src/composer.ts +++ b/packages/render-assets/src/composer.ts @@ -51,7 +51,8 @@ export class TextureGridComposer start: number, data: IGridComposerData, rows: number, - cols: number + cols: number, + index: number ): IndexMarkedComposedData { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d')!; @@ -80,6 +81,7 @@ export class TextureGridComposer const texture = new Texture(canvas); const composed: ITextureComposedData = { + index, texture, assetMap: map }; @@ -96,12 +98,14 @@ export class TextureGridComposer const rows = Math.floor(this.maxWidth / data.width); const cols = Math.floor(this.maxHeight / data.height); + let arrindex = 0; let i = 0; - while (i < arr.length) { - const { asset, index } = this.nextAsset(arr, i, data, rows, cols); - i = index + 1; - yield asset; + while (arrindex < arr.length) { + const res = this.nextAsset(arr, arrindex, data, rows, cols, i); + arrindex = res.index + 1; + i++; + yield res.asset; } } } @@ -149,6 +153,7 @@ export class TextureMaxRectsComposer }); packer.addArray(rects); + let index = 0; for (const bin of packer.bins) { const map = new Map(); const canvas = document.createElement('canvas'); @@ -166,6 +171,7 @@ export class TextureMaxRectsComposer }); const texture = new Texture(canvas); const data: ITextureComposedData = { + index: index++, texture, assetMap: map }; @@ -426,15 +432,16 @@ export class TextureMaxRectsWebGL2Composer const indexMap = this.mapTextures(arr); this.setTexture(indexMap); + let index = 0; for (const bin of packer.bins) { const { texMap, attrib } = this.processRects(bin.rects, indexMap); this.renderAtlas(attrib); const texture = new Texture(this.canvas); const data: ITextureComposedData = { + index: index++, texture, assetMap: texMap }; - yield data; } diff --git a/packages/render-assets/src/streamComposer.ts b/packages/render-assets/src/streamComposer.ts index 222c5b5..fad3797 100644 --- a/packages/render-assets/src/streamComposer.ts +++ b/packages/render-assets/src/streamComposer.ts @@ -18,7 +18,9 @@ export class TextureGridStreamComposer implements ITextureStreamComposer { readonly cols: number; private nowIndex: number = 0; + private outputIndex: number = 0; + private nowTexture: ITexture; private nowCanvas: HTMLCanvasElement; private nowCtx: CanvasRenderingContext2D; private nowMap: Map>; @@ -43,12 +45,16 @@ export class TextureGridStreamComposer implements ITextureStreamComposer { this.nowCanvas = document.createElement('canvas'); this.nowCtx = this.nowCanvas.getContext('2d')!; this.nowMap = new Map(); + this.nowTexture = new Texture(this.nowCanvas); } private nextCanvas() { this.nowCanvas = document.createElement('canvas'); this.nowCtx = this.nowCanvas.getContext('2d')!; this.nowMap = new Map(); + this.nowIndex = 0; + this.nowTexture = new Texture(this.nowCanvas); + this.outputIndex++; } *add(textures: Iterable): Generator { @@ -66,13 +72,14 @@ export class TextureGridStreamComposer implements ITextureStreamComposer { this.nowCtx.drawImage(source, cx, cy, cw, ch, x, y, cw, ch); this.nowMap.set(tex, { x, y, w: cw, h: ch }); - index++; - if (index === max) { - const data: ITextureComposedData = { - texture: new Texture(this.nowCanvas), - assetMap: this.nowMap - }; - yield data; + const data: ITextureComposedData = { + index: this.outputIndex, + texture: this.nowTexture, + assetMap: this.nowMap + }; + yield data; + + if (++index === max) { this.nextCanvas(); } } @@ -94,10 +101,13 @@ export class TextureMaxRectsStreamComposer /** Max Rects 打包器 */ readonly packer: MaxRectsPacker; + private outputIndex: number = 0; + private nowTexture: ITexture; + private nowCanvas: HTMLCanvasElement; private nowCtx: CanvasRenderingContext2D; private nowMap: Map>; - private nowBins: number; + private nowBin: number; /** * 使用 Max Rects 算法执行贴图整合。输出的纹理的图像源将会是不同的画布。 @@ -122,13 +132,16 @@ export class TextureMaxRectsStreamComposer this.nowCanvas = document.createElement('canvas'); this.nowCtx = this.nowCanvas.getContext('2d')!; this.nowMap = new Map(); - this.nowBins = 0; + this.nowBin = 0; + this.nowTexture = new Texture(this.nowCanvas); } private nextCanvas() { this.nowCanvas = document.createElement('canvas'); this.nowCtx = this.nowCanvas.getContext('2d')!; this.nowMap = new Map(); + this.outputIndex++; + this.nowTexture = new Texture(this.nowCanvas); } *add(textures: Iterable): Generator { @@ -144,12 +157,13 @@ export class TextureMaxRectsStreamComposer const bins = this.packer.bins; if (bins.length === 0) return; const toYield: Bin[] = [bins[bins.length - 1]]; - if (bins.length > this.nowBins) { - toYield.push(...bins.slice(this.nowBins)); + if (bins.length > this.nowBin) { + toYield.push(...bins.slice(this.nowBin)); } - for (const bin of toYield) { - bin.rects.forEach(v => { + for (let i = this.nowBin; i < bins.length; i++) { + const rects = bins[i].rects; + rects.forEach(v => { if (this.nowMap.has(v.data)) return; const target: IRect = { x: v.x, @@ -163,14 +177,17 @@ export class TextureMaxRectsStreamComposer this.nowCtx.drawImage(source, cx, cy, cw, ch, v.x, v.y, cw, ch); }); const data: ITextureComposedData = { - texture: new Texture(this.nowCanvas), + index: this.outputIndex, + texture: this.nowTexture, assetMap: this.nowMap }; yield data; - this.nextCanvas(); + if (i < bins.length - 1) { + this.nextCanvas(); + } } - this.nowBins = bins.length; + this.nowBin = bins.length; } close(): void { diff --git a/packages/render-assets/src/types.ts b/packages/render-assets/src/types.ts index e076608..375460e 100644 --- a/packages/render-assets/src/types.ts +++ b/packages/render-assets/src/types.ts @@ -22,6 +22,8 @@ export interface ITextureRenderable { export interface ITextureComposedData { /** 这个纹理图集的贴图对象 */ readonly texture: ITexture; + /** 这个纹理图集的索引 */ + readonly index: number; /** 每个参与组合的贴图对应到图集对象的矩形范围 */ readonly assetMap: Map>; }