From 57146a6840ec819b3dbefc7dd468aca5e4d7304d Mon Sep 17 00:00:00 2001 From: yiiqii Date: Tue, 24 Sep 2024 12:06:52 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=BC=96?= =?UTF-8?q?=E8=AF=91=E8=80=97=E6=97=B6=E7=9A=84=E7=BB=9F=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/effects-core/src/asset-manager.ts | 13 ++------ packages/effects-core/src/composition.ts | 17 ++++++++-- packages/effects/src/player.ts | 6 ++++ web-packages/demo/html/single.html | 20 +++++++++-- web-packages/demo/src/single.ts | 39 +++++++++++++++------- 5 files changed, 67 insertions(+), 28 deletions(-) diff --git a/packages/effects-core/src/asset-manager.ts b/packages/effects-core/src/asset-manager.ts index 7bb8c37ef..b201ea589 100644 --- a/packages/effects-core/src/asset-manager.ts +++ b/packages/effects-core/src/asset-manager.ts @@ -89,7 +89,6 @@ export class AssetManager implements Disposable { const startTime = performance.now(); const timeInfoMessages: string[] = []; const gpuInstance = renderer?.engine.gpuCapability; - const asyncShaderCompile = gpuInstance?.detail?.asyncShaderCompile ?? false; const compressedTexture = gpuInstance?.detail.compressedTexture ?? COMPRESSED_TEXTURE.NONE; const timeInfos: Record = {}; let loadTimer: number; @@ -173,7 +172,8 @@ export class AssetManager implements Disposable { const [loadedBins, loadedImages] = await Promise.all([ hookTimeInfo('processBins', () => this.processBins(bins)), hookTimeInfo('processImages', () => this.processImages(images, compressedTexture)), - hookTimeInfo(`${asyncShaderCompile ? 'async' : 'sync'}Compile`, () => this.precompile(compositions, pluginSystem, renderer, options)), + hookTimeInfo('precompile', () => this.precompile(compositions, pluginSystem, renderer, options)), + hookTimeInfo('processFontURL', () => this.processFontURL(fonts as spec.FontDefine[])), ]); if (renderer) { @@ -186,7 +186,6 @@ export class AssetManager implements Disposable { } } - await hookTimeInfo('processFontURL', () => this.processFontURL(fonts as spec.FontDefine[])); const loadedTextures = await hookTimeInfo('processTextures', () => this.processTextures(loadedImages, loadedBins, jsonScene, renderer!.engine)); scene = { @@ -231,15 +230,7 @@ export class AssetManager implements Disposable { if (!renderer || !renderer.getShaderLibrary()) { return; } - const shaderLibrary = renderer?.getShaderLibrary(); - await pluginSystem?.precompile(compositions, renderer, options); - - await new Promise(resolve => { - shaderLibrary?.compileAllShaders(() => { - resolve(null); - }); - }); } private async processJSON (json: JSONValue) { diff --git a/packages/effects-core/src/composition.ts b/packages/effects-core/src/composition.ts index 28bd537d1..c7672bab3 100644 --- a/packages/effects-core/src/composition.ts +++ b/packages/effects-core/src/composition.ts @@ -23,10 +23,16 @@ import { EventEmitter } from './events'; import type { PostProcessVolume } from './components/post-process-volume'; export interface CompositionStatistic { - loadTime: number, loadStart: number, + loadTime: number, + /** + * Shader 编译耗时 + */ + compileTime: number, + /** + * 从加载到渲染第一帧的时间（含 Shader 编译） + */ firstFrameTime: number, - precompileTime: number, } export interface MessageItem { @@ -247,7 +253,12 @@ export class Composition extends EventEmitter> imp this.renderer = renderer; this.texInfo = imageUsage ?? {}; this.event = event; - this.statistic = { loadTime: totalTime ?? 0, loadStart: scene.startTime ?? 0, firstFrameTime: 0, precompileTime: scene.timeInfos['asyncCompile'] ?? scene.timeInfos['syncCompile'] }; + this.statistic = { + loadStart: scene.startTime ?? 0, + loadTime: totalTime ?? 0, + compileTime: 0, + firstFrameTime: 0, + }; this.reusable = reusable; this.speed = speed; this.autoRefTex = !this.keepResource && imageUsage && this.rootItem.endBehavior !== spec.EndBehavior.restart; diff --git a/packages/effects/src/player.ts b/packages/effects/src/player.ts index 16c9b5a9b..13d4b3b31 100644 --- a/packages/effects/src/player.ts +++ b/packages/effects/src/player.ts @@ -384,6 +384,8 @@ export class Player extends EventEmitter> implements Disposa } } + const compileStart = performance.now(); + await new Promise(resolve => { this.renderer.getShaderLibrary()?.compileAllShaders(() => { resolve(null); @@ -398,9 +400,13 @@ export class Player extends EventEmitter> implements Disposa } const firstFrameTime = performance.now() - last + composition.statistic.loadTime; + const compileTime = performance.now() - compileStart; composition.statistic.firstFrameTime = firstFrameTime; + composition.statistic.compileTime = compileTime; logger.info(`First frame: [${composition.name}]${firstFrameTime.toFixed(4)}ms.`); + logger.info(`Shader compile: [${composition.name}]${compileTime.toFixed(4)}ms.`); + this.compositions.push(composition); return composition; } diff --git a/web-packages/demo/html/single.html b/web-packages/demo/html/single.html index 8125f3eb2..c55252106 100644 --- a/web-packages/demo/html/single.html +++ b/web-packages/demo/html/single.html @@ -7,13 +7,29 @@ +
    +
    + +
    diff --git a/web-packages/demo/src/single.ts b/web-packages/demo/src/single.ts index a17707430..14dd6b9a4 100644 --- a/web-packages/demo/src/single.ts +++ b/web-packages/demo/src/single.ts @@ -1,17 +1,32 @@ import { Player } from '@galacean/effects'; -import '@galacean/effects-plugin-spine'; -const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*CquWQrVCGyUAAAAAAAAAAAAADlB4AQ'; +// 大量粒子 +// const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*aCeuQ5RQZj4AAAAAAAAAAAAADlB4AQ'; +// 塔奇 +const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*uU2JRIjcLIcAAAAAAAAAAAAADlB4AQ'; +// const json = 'https://gw.alipayobjects.com/os/gltf-asset/mars-cli/TAJIINQOUUKP/-799304223-0ee5d.json'; const container = document.getElementById('J-container'); -(async () => { - try { - const player = new Player({ - container, - }); +document.getElementById('J-button')!.addEventListener('click', () => { + (async () => { + try { + container?.classList.add('active'); - await player.loadScene(json); - } catch (e) { - console.error('biz', e); - } -})(); + const player = new Player({ + container, + // renderFramework: 'webgl2', + }); + const composition = await player.loadScene(json); + + for (const key in composition.statistic) { + const p = document.createElement('li'); + + // @ts-expect-error + p.innerHTML = `${key}: ${composition.statistic[key]}`; + document.getElementById('J-statistic')?.appendChild(p); + } + } catch (e) { + console.error('biz', e); + } + })(); +}); From 42ec5976e408abbf2de04404f7ef5d545e235c3e Mon Sep 17 00:00:00 2001 From: yiiqii Date: Tue, 24 Sep 2024 12:24:58 +0800 Subject: [PATCH 2/6] fix: compsition push twice --- packages/effects/src/player.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/effects/src/player.ts b/packages/effects/src/player.ts index 13d4b3b31..b29799ffd 100644 --- a/packages/effects/src/player.ts +++ b/packages/effects/src/player.ts @@ -406,7 +406,6 @@ export class Player extends EventEmitter> implements Disposa composition.statistic.compileTime = compileTime; logger.info(`First frame: [${composition.name}]${firstFrameTime.toFixed(4)}ms.`); logger.info(`Shader compile: [${composition.name}]${compileTime.toFixed(4)}ms.`); - this.compositions.push(composition); return composition; } From d7f721d77ba7cfdc08eba054bc7feeac58cc6fbe Mon Sep 17 00:00:00 2001 From: yiiqii Date: Tue, 24 Sep 2024 16:24:43 +0800 Subject: [PATCH 3/6] =?UTF-8?q?chore(demo):=20=E8=A1=A5=E5=85=85=E6=80=A7?= =?UTF-8?q?=E8=83=BD=E6=B5=8B=E8=AF=95=E6=A1=88=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-packages/demo/html/single.html | 9 ++++++-- web-packages/demo/src/single.ts | 36 +++++++++++++++++++++++------- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/web-packages/demo/html/single.html b/web-packages/demo/html/single.html index c55252106..081cb9ded 100644 --- a/web-packages/demo/html/single.html +++ b/web-packages/demo/html/single.html @@ -9,8 +9,8 @@ .container { visibility: hidden; opacity: 0; - width: 100px; - height: 200px; + width: 188px; + height: 334px; position: fixed; bottom: 0%; left: 50%; @@ -20,12 +20,17 @@ } .container.active { visibility: visible; + z-index: -1; opacity: 1; transform: translate(-50%, 0) scale(1); } + ul { + background-color: rgba(255,255,255,0.5); + } +

    main

      diff --git a/web-packages/demo/src/single.ts b/web-packages/demo/src/single.ts index 14dd6b9a4..a3202a206 100644 --- a/web-packages/demo/src/single.ts +++ b/web-packages/demo/src/single.ts @@ -1,9 +1,22 @@ +import type { Composition } from '@galacean/effects'; import { Player } from '@galacean/effects'; +import '@galacean/effects-plugin-spine'; // 大量粒子 // const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*aCeuQ5RQZj4AAAAAAAAAAAAADlB4AQ'; +// 新年烟花 +const json = [ + 'https://gw.alipayobjects.com/os/gltf-asset/mars-cli/ILDKKFUFMVJA/1705406034-80896.json', + 'https://mdn.alipayobjects.com/graph_jupiter/afts/file/A*qTquTKYbk6EAAAAAAAAAAAAADsF2AQ', +]; +// 混合测试 +// const json = [ +// 'https://mdn.alipayobjects.com/mars/afts/file/A*QyX8Rp-4fmUAAAAAAAAAAAAADlB4AQ', +// 'https://mdn.alipayobjects.com/mars/afts/file/A*bi3HRobVsk8AAAAAAAAAAAAADlB4AQ', +// 'https://mdn.alipayobjects.com/graph_jupiter/afts/file/A*sEdkT5cdXGEAAAAAAAAAAAAADsF2AQ', +// ]; // 塔奇 -const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*uU2JRIjcLIcAAAAAAAAAAAAADlB4AQ'; +// const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*uU2JRIjcLIcAAAAAAAAAAAAADlB4AQ'; // const json = 'https://gw.alipayobjects.com/os/gltf-asset/mars-cli/TAJIINQOUUKP/-799304223-0ee5d.json'; const container = document.getElementById('J-container'); @@ -16,15 +29,22 @@ document.getElementById('J-button')!.addEventListener('click', () => { container, // renderFramework: 'webgl2', }); - const composition = await player.loadScene(json); + const compositions = await player.loadScene(Array.isArray(json) ? json : [json]) as unknown as Composition[]; - for (const key in composition.statistic) { - const p = document.createElement('li'); + compositions.forEach(composition => { + const div = document.createElement('div'); - // @ts-expect-error - p.innerHTML = `${key}: ${composition.statistic[key]}`; - document.getElementById('J-statistic')?.appendChild(p); - } + div.innerHTML = `>>>>> composition: ${composition.name}`; + document.getElementById('J-statistic')?.appendChild(div); + + for (const key in composition.statistic) { + const p = document.createElement('li'); + + // @ts-expect-error + p.innerHTML = `${key}: ${composition.statistic[key]}`; + document.getElementById('J-statistic')?.appendChild(p); + } + }); } catch (e) { console.error('biz', e); } From 8a68afd7b774e23467364b4faded48b030f3c140 Mon Sep 17 00:00:00 2001 From: yiiqii Date: Tue, 24 Sep 2024 16:47:45 +0800 Subject: [PATCH 4/6] =?UTF-8?q?chore(demo):=20=E7=8B=AC=E7=AB=8B=20shader?= =?UTF-8?q?=20=E7=BC=96=E8=AF=91=E6=B5=8B=E8=AF=95=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-packages/demo/html/shader-compile.html | 42 ++++++++++++++++ web-packages/demo/html/single.html | 25 +--------- web-packages/demo/index.html | 1 + web-packages/demo/src/shader-compile.ts | 52 ++++++++++++++++++++ web-packages/demo/src/single.ts | 57 +++++----------------- web-packages/demo/vite.config.js | 1 + 6 files changed, 109 insertions(+), 69 deletions(-) create mode 100644 web-packages/demo/html/shader-compile.html create mode 100644 web-packages/demo/src/shader-compile.ts diff --git a/web-packages/demo/html/shader-compile.html b/web-packages/demo/html/shader-compile.html new file mode 100644 index 000000000..64da0dd02 --- /dev/null +++ b/web-packages/demo/html/shader-compile.html @@ -0,0 +1,42 @@ + + + + + + Shader 编译测试 - demo + + + +

      优化后

      +
      +
      + +
      +
      + + + + diff --git a/web-packages/demo/html/single.html b/web-packages/demo/html/single.html index 081cb9ded..8125f3eb2 100644 --- a/web-packages/demo/html/single.html +++ b/web-packages/demo/html/single.html @@ -7,34 +7,13 @@ -

      main

      -
        -
        - -
        diff --git a/web-packages/demo/index.html b/web-packages/demo/index.html index 6fcef3b31..3a3648eb5 100644 --- a/web-packages/demo/index.html +++ b/web-packages/demo/index.html @@ -13,6 +13,7 @@
        单项目测试 后处理测试 + Shader 编译测试 Dashboard Interactive 压缩纹理 diff --git a/web-packages/demo/src/shader-compile.ts b/web-packages/demo/src/shader-compile.ts new file mode 100644 index 000000000..0cafb59d8 --- /dev/null +++ b/web-packages/demo/src/shader-compile.ts @@ -0,0 +1,52 @@ +import type { Composition } from '@galacean/effects'; +import { Player } from '@galacean/effects'; +import '@galacean/effects-plugin-spine'; + +// 大量粒子 +// const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*aCeuQ5RQZj4AAAAAAAAAAAAADlB4AQ'; +// 新年烟花 +const json = [ + 'https://gw.alipayobjects.com/os/gltf-asset/mars-cli/ILDKKFUFMVJA/1705406034-80896.json', + 'https://mdn.alipayobjects.com/graph_jupiter/afts/file/A*qTquTKYbk6EAAAAAAAAAAAAADsF2AQ', +]; +// 混合测试 +// const json = [ +// 'https://mdn.alipayobjects.com/mars/afts/file/A*QyX8Rp-4fmUAAAAAAAAAAAAADlB4AQ', +// 'https://mdn.alipayobjects.com/mars/afts/file/A*bi3HRobVsk8AAAAAAAAAAAAADlB4AQ', +// 'https://mdn.alipayobjects.com/graph_jupiter/afts/file/A*sEdkT5cdXGEAAAAAAAAAAAAADsF2AQ', +// ]; +// 塔奇 +// const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*uU2JRIjcLIcAAAAAAAAAAAAADlB4AQ'; +// const json = 'https://gw.alipayobjects.com/os/gltf-asset/mars-cli/TAJIINQOUUKP/-799304223-0ee5d.json'; +const container = document.getElementById('J-container'); + +document.getElementById('J-button')!.addEventListener('click', () => { + (async () => { + try { + container?.classList.add('active'); + + const player = new Player({ + container, + // renderFramework: 'webgl2', + }); + const compositions = await player.loadScene(Array.isArray(json) ? json : [json]) as unknown as Composition[]; + + compositions.forEach(composition => { + const dt = document.createElement('dt'); + + dt.innerHTML = `>>> composition: ${composition.name}`; + document.getElementById('J-statistic')?.appendChild(dt); + + for (const key in composition.statistic) { + const p = document.createElement('dd'); + + // @ts-expect-error + p.innerHTML = `${key}: ${composition.statistic[key]}`; + document.getElementById('J-statistic')?.appendChild(p); + } + }); + } catch (e) { + console.error('biz', e); + } + })(); +}); diff --git a/web-packages/demo/src/single.ts b/web-packages/demo/src/single.ts index a3202a206..a17707430 100644 --- a/web-packages/demo/src/single.ts +++ b/web-packages/demo/src/single.ts @@ -1,52 +1,17 @@ -import type { Composition } from '@galacean/effects'; import { Player } from '@galacean/effects'; import '@galacean/effects-plugin-spine'; -// 大量粒子 -// const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*aCeuQ5RQZj4AAAAAAAAAAAAADlB4AQ'; -// 新年烟花 -const json = [ - 'https://gw.alipayobjects.com/os/gltf-asset/mars-cli/ILDKKFUFMVJA/1705406034-80896.json', - 'https://mdn.alipayobjects.com/graph_jupiter/afts/file/A*qTquTKYbk6EAAAAAAAAAAAAADsF2AQ', -]; -// 混合测试 -// const json = [ -// 'https://mdn.alipayobjects.com/mars/afts/file/A*QyX8Rp-4fmUAAAAAAAAAAAAADlB4AQ', -// 'https://mdn.alipayobjects.com/mars/afts/file/A*bi3HRobVsk8AAAAAAAAAAAAADlB4AQ', -// 'https://mdn.alipayobjects.com/graph_jupiter/afts/file/A*sEdkT5cdXGEAAAAAAAAAAAAADsF2AQ', -// ]; -// 塔奇 -// const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*uU2JRIjcLIcAAAAAAAAAAAAADlB4AQ'; -// const json = 'https://gw.alipayobjects.com/os/gltf-asset/mars-cli/TAJIINQOUUKP/-799304223-0ee5d.json'; +const json = 'https://mdn.alipayobjects.com/mars/afts/file/A*CquWQrVCGyUAAAAAAAAAAAAADlB4AQ'; const container = document.getElementById('J-container'); -document.getElementById('J-button')!.addEventListener('click', () => { - (async () => { - try { - container?.classList.add('active'); +(async () => { + try { + const player = new Player({ + container, + }); - const player = new Player({ - container, - // renderFramework: 'webgl2', - }); - const compositions = await player.loadScene(Array.isArray(json) ? json : [json]) as unknown as Composition[]; - - compositions.forEach(composition => { - const div = document.createElement('div'); - - div.innerHTML = `>>>>> composition: ${composition.name}`; - document.getElementById('J-statistic')?.appendChild(div); - - for (const key in composition.statistic) { - const p = document.createElement('li'); - - // @ts-expect-error - p.innerHTML = `${key}: ${composition.statistic[key]}`; - document.getElementById('J-statistic')?.appendChild(p); - } - }); - } catch (e) { - console.error('biz', e); - } - })(); -}); + await player.loadScene(json); + } catch (e) { + console.error('biz', e); + } +})(); diff --git a/web-packages/demo/vite.config.js b/web-packages/demo/vite.config.js index da45816a0..9b16cbe60 100644 --- a/web-packages/demo/vite.config.js +++ b/web-packages/demo/vite.config.js @@ -24,6 +24,7 @@ export default defineConfig(({ mode }) => { 'dynamic-image': resolve(__dirname, 'html/dynamic-image.html'), 'dynamic-video': resolve(__dirname, 'html/dynamic-video.html'), 'render-level': resolve(__dirname, 'html/render-level.html'), + 'shader-compile': resolve(__dirname, 'html/shader-compile.html'), 'local-file': resolve(__dirname, 'html/local-file.html'), 'post-processing': resolve(__dirname, 'html/post-processing.html'), 'single': resolve(__dirname, 'html/single.html'), From 553573a85357a5005d58b6bf21f020b94c55a242 Mon Sep 17 00:00:00 2001 From: yiiqii Date: Tue, 24 Sep 2024 16:49:20 +0800 Subject: [PATCH 5/6] fix: demo update --- web-packages/demo/html/shader-compile.html | 1 - 1 file changed, 1 deletion(-) diff --git a/web-packages/demo/html/shader-compile.html b/web-packages/demo/html/shader-compile.html index 64da0dd02..f0f510ec4 100644 --- a/web-packages/demo/html/shader-compile.html +++ b/web-packages/demo/html/shader-compile.html @@ -30,7 +30,6 @@ -

        优化后

        From 93dd1e162d54a1a428267b421cdb1c683232f005 Mon Sep 17 00:00:00 2001 From: yiiqii Date: Tue, 24 Sep 2024 18:40:23 +0800 Subject: [PATCH 6/6] fix: first frame time --- packages/effects/src/player.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/effects/src/player.ts b/packages/effects/src/player.ts index b29799ffd..0a215a28a 100644 --- a/packages/effects/src/player.ts +++ b/packages/effects/src/player.ts @@ -399,7 +399,7 @@ export class Player extends EventEmitter> implements Disposa composition.pause(); } - const firstFrameTime = performance.now() - last + composition.statistic.loadTime; + const firstFrameTime = performance.now() - last; const compileTime = performance.now() - compileStart; composition.statistic.firstFrameTime = firstFrameTime;