feat: 增加编译耗时的统计

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<string, number> = {};
     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) {

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<CompositionEvent<Composition>> 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;

packages/effects/src/player.ts

@@ -384,6 +384,8 @@ export class Player extends EventEmitter<PlayerEvent<Player>> implements Disposa
       }
     }
 
+    const compileStart = performance.now();
+
     await new Promise(resolve => {
       this.renderer.getShaderLibrary()?.compileAllShaders(() => {
         resolve(null);
@@ -398,9 +400,12 @@ export class Player extends EventEmitter<PlayerEvent<Player>> 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.`);
 
     return composition;
   }

web-packages/demo/html/single.html

@@ -7,13 +7,34 @@
   <style>
     html, body, div, canvas { margin: 0; padding: 0; }
     .container {
-      width: 375px;
-      height: 812px;
+      visibility: hidden;
+      opacity: 0;
+      width: 188px;
+      height: 334px;
+      position: fixed;
+      bottom: 0%;
+      left: 50%;
+      transform: translate(-50%, 0) scale(0);
+      transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,255);
     }
+    .container.active {
+      visibility: visible;
+      z-index: -1;
+      opacity: 1;
+      transform: translate(-50%, 0) scale(1);
+    }
+    ul {
+      background-color: rgba(255,255,255,0.5);
+    }
   </style>
 </head>
 <body>
+<h3>main</h3>
+<ul id="J-statistic"></ul>
+<div>
+  <button id="J-button" style="height: 32px; width: 100px;">播放</button>
+</div>
 <div class="container" id="J-container"></div>
 
 <script type="module" src="../src/single.ts"></script>

web-packages/demo/src/single.ts

@@ -1,17 +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*CquWQrVCGyUAAAAAAAAAAAAADlB4AQ';
+// 大量粒子
+// 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');
 
-(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 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);
+    }
+  })();
+});