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);
@@ -397,10 +399,13 @@ export class Player extends EventEmitter<PlayerEvent<Player>> 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;
+    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/shader-compile.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Shader 编译测试 - demo</title>
+  <style>
+    html, body, div, canvas { margin: 0; padding: 0; }
+    .container {
+      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>
+<dl id="J-statistic"></dl>
+<div>
+  <button id="J-button" style="height: 32px; width: 100px;">播放</button>
+</div>
+<div class="container" id="J-container"></div>
+
+<script type="module" src="../src/shader-compile.ts"></script>
+</body>
+</html>

web-packages/demo/index.html

@@ -13,6 +13,7 @@
   <div class="am-list-body">
     <a class="am-list-item" href="html/single.html">单项目测试</a>
     <a class="am-list-item" href="html/post-processing.html">后处理测试</a>
+    <a class="am-list-item" href="html/shader-compile.html">Shader 编译测试</a>
     <a class="am-list-item" href="html/dashboard.html">Dashboard</a>
     <a class="am-list-item" href="html/interactive.html">Interactive</a>
     <a class="am-list-item" href="html/compressed.html">压缩纹理</a>

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);
+    }
+  })();
+});

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'),