Merge pull request #3 from gz65555/feat/benchmark

Add animation benchmark

src/babylon/animation-benchmark.ts

@@ -0,0 +1,102 @@
+/**
+ * @title Animation
+ * @category Benchmark
+ */
+
+import {
+  DirectionalLight,
+  Engine,
+  Scene,
+  SceneLoader,
+  UniversalCamera,
+  Vector3
+} from "@babylonjs/core";
+import "@babylonjs/loaders";
+
+// ... YOUR SCENE CREATION
+
+// 创建画布元素
+const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+document.body.appendChild(canvas);
+
+// 初始化引擎
+const engine = new Engine(canvas, true);
+
+canvas.width = canvas.clientWidth * window.devicePixelRatio;
+canvas.height = canvas.clientHeight * window.devicePixelRatio;
+
+// 创建场景函数
+const createScene = (): Scene => {
+  const scene = new Scene(engine);
+  const camera = new UniversalCamera(
+    "UniversalCamera",
+    new Vector3(-6.5 * 1.5, 6.58 * 1.5, 8.5 * 1.5),
+    scene
+  );
+
+  // Targets the camera to a particular position. In this case the scene origin
+  camera.setTarget(Vector3.Zero());
+
+  const light2 = new DirectionalLight(
+    "dir01",
+    new Vector3(0, -0.5, -1.0),
+    scene
+  );
+  light2.position = new Vector3(0, 5, 5);
+
+  console.time("load");
+
+  SceneLoader.LoadAssetContainer(
+    "https://mdn.alipayobjects.com/rms/afts/file/A*DVfMRKjm6bMAAAAAAAAAAAAAARQnAQ/",
+    "HVGirl.glb",
+    scene,
+    function (container) {
+      container.meshes[0].scaling.scaleInPlace(0.05);
+      container.addAllToScene();
+
+      container.animationGroups[1].start();
+      container.animationGroups[1].loopAnimation = true;
+
+      for (let i = 0; i < 15; i++) {
+        for (let j = 0; j < 15; j++) {
+          const plane2Entries = <any>container.instantiateModelsToScene(
+            undefined,
+            false,
+            {
+              doNotInstantiate: true,
+            }
+          );
+
+          plane2Entries.rootNodes[0].position.x = -2.4 * 1.8 + i * 0.6;
+          plane2Entries.rootNodes[0].position.z = -2.4 * 2 + j * 0.6;
+          const animationGroup = plane2Entries.animationGroups[1];
+          animationGroup.start(
+            true,
+            1.0,
+            animationGroup.from + Math.random() * 1000,
+            animationGroup.to,
+            false
+          );
+          animationGroup.loopAnimation = true;
+        }
+      }
+
+      console.timeEnd("load");
+    }
+  );
+
+  return scene;
+};
+
+// 调用创建场景函数
+const scene = createScene();
+
+// 渲染循环
+engine.runRenderLoop(() => {
+  scene.render();
+});
+
+// 响应窗口大小变化
+window.addEventListener("resize", () => {
+  engine.resize();
+});

src/galacean/animation-benchmark.ts

@@ -7,64 +7,63 @@ import {
   Animator,
   AssetType,
   Camera,
+  DirectLight,
   GLTFResource,
-  PBRMaterial,
-  Texture2D,
+  Vector3,
   WebGLEngine,
 } from "@galacean/engine";
-import { Stats } from "@galacean/engine-toolkit";
 
 // Create engine object
-WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
+WebGLEngine.create({
+  canvas: "canvas",
+  graphicDeviceOptions: { powerPreference: "high-performance" },
+}).then((engine) => {
   engine.canvas.resizeByClientSize();
 
   // Create root entity and get scene
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
   scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1);
+  scene.ambientLight.diffuseIntensity = 0;
 
   // Create camera.
   const cameraEntity = rootEntity.createChild("Camera");
-  cameraEntity.transform.setPosition(0, 5, 20);
-  cameraEntity.addComponent(Camera);
-  cameraEntity.addComponent(Stats);
+  // cameraEntity.addComponent(OrbitControl);
+  cameraEntity.transform.setPosition(6.5 * 1.5, 6.58 * 1.5, 8.5 * 1.5);
+  const camera = cameraEntity.addComponent(Camera);
+  cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
+  camera.farClipPlane = 1000;
 
+  const lightEntity = scene.createRootEntity("light");
+  const directLight = lightEntity.addComponent(DirectLight);
+  directLight.intensity = 0.6;
+  directLight.direction.set(0, -0.5, -1.0);
+
+  console.time("load");
   // Load resources and add models.
   engine.resourceManager
-    .load([
-      {
-        url: "https://gw.alipayobjects.com/os/loanprod/bf055064-3eec-4d40-bce0-ddf11dfbb88a/5d78db60f211d21a43834e23/4f5e6bb277dd2fab8e2097d7a418c5bc.gltf",
-        // url: "https://gw.alipayobjects.com/os/bmw-prod/5e3c1e4e-496e-45f8-8e05-f89f2bd5e4a4.glb",
-        type: AssetType.GLTF,
-      },
-      {
-        url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*OStMT63k5o8AAAAAAAAAAAAAARQnAQ",
-        type: AssetType.Texture2D,
-      },
-    ])
-    .then((resources: Object[]) => {
-      const glTF = <GLTFResource>resources[0];
-      const baseTexture = <Texture2D>resources[1];
-      const model = glTF.defaultSceneRoot;
-
-      glTF.materials.forEach((material: PBRMaterial) => {
-        material.baseTexture = baseTexture;
-        material.baseColor.set(1, 1, 1, 1);
-      });
+    .load<GLTFResource>({
+      url: "https://mdn.alipayobjects.com/rms/afts/file/A*DVfMRKjm6bMAAAAAAAAAAAAAARQnAQ/HVGirl.glb",
+      type: AssetType.GLTF,
+    })
+    .then((glTF) => {
+      const model = glTF.instantiateSceneRoot();
+      model.transform.setScale(0.0005, 0.0005, 0.0005);
 
-      for (let i = 0; i < 30; i++) {
-        for (let j = 0; j < 18; j++) {
+      for (let i = 0; i < 15; i++) {
+        for (let j = 0; j < 15; j++) {
           const modelClone = model.clone();
           rootEntity.addChild(modelClone);
 
           const { transform } = modelClone;
-          transform.setRotation(0, -90, 0);
-          transform.setScale(0.5, 0.5, 0.5);
-          transform.setPosition(i * 1.0 - 15.0, j * 1.2, -j * 3.5);
+          transform.position.x = -2.4 * 1.8 + i * 0.6;
+          transform.position.z = -2.4 * 2 + j * 0.6;
 
-          modelClone.getComponent(Animator).play(glTF.animations[3].name);
+          modelClone.getComponent(Animator).play(glTF.animations[1].name,undefined,Math.random());
         }
       }
+
+      console.timeEnd("load");
     });
 
   // Run engine