在這裏列出Babylon.js官方性能優化文檔的中英文對照，並在CardSimulate項目裏對其中的一些優化方法進行實踐。

How To

如何

Optimize your scene

優化你的場景

Table of contents 內容列表

1. How To Optimize Your Scene 如何優化你的場景
1. Use TransformNode instead of AbstractMesh or empty meshes 使用變換節點代替抽象網格或者空網格
2. Changing per mesh culling strategy改變每個網格的剔除策略
3. Reducing Shaders Overhead降低著色器開銷
4. Reducing World Matrices Computation 減少世界矩陣計算
5. Freezing the active meshes 凍結活動的網格
6. Reducing draw calls 減少繪制調用
7. Reducing calls to gl.clear() 減少gl.clear()的調用
8. Using depth pre-pass 使用深度預加載
9. Using unindexed meshes 使用未索引的網格
10. Turning AdaptToDeviceRatio Off 關閉適應設備比例（ratio是比例，rate是速率）
11. Blocking the dirty mechanism 停止不好的機制
12. Using Animation Ratio 使用動畫比率
13. Handling WebGL context lost 處理WebGL上下文丟失
14. Scene with large number of meshes 處理包含大量網格的場景
15. Instrumentation 儀表
1. EngineInstrumentation 引擎儀表
2. SceneInstrumentation 場景儀表
2. Further Reading 進一步閱讀
1. More Advanced - L3 更進一步

How To Optimize Your Scene

如何優化你的場景

This tutorial will help you find some links and info on how you can improve your scene regarding rendering performance.

這篇教程將幫助你找到一些關於如何提升你的場景的渲染效果的鏈接和信息

Use TransformNode instead of AbstractMesh or empty meshes

使用變換節點代替抽象網格或者空網格

If you need node containers or transform nodes, do not use meshes but TransformNode instead. Use meshes only when associated with content to render.

如果你需要節點容器或者變換節點，不要使用網格，而是使用變換節點來替代。只在有關聯的內容需要繪制時使用網格。

The meshes need to go through an evaluation process where the camera checks if they are in the frustum. This is an expensive process so reducing the number of candidates by using TransformNode when possible is a good practice.

網格需要經過一個驗證流程，在這個流程中相機將檢查這些網格是否在視截椎體內部。這是一個性能消耗較大的流程，所以在可能時通過使用變換節點減少這種計算的數量是一個好的實踐。

（使用後1366*720分辨率fps似從20提升到22~24）

Changing per mesh culling strategy

改變每個網格的剔除策略

Starting with Babylon.js v3.3, you can now specify a strategy used to cull a specific mesh with mesh.cullingStrategy.

從Babylon.js v3.3開始，你可以設定一個策略來剔除一個特定的網格，通過設置mesh.cullingStrategy

You can set it to:

你可以將它設置為：

• BABYLON.AbstractMesh.CULLINGSTRATEGY_STANDARD: This is the default value and it will use a combination of bounding sphere culling, bounding box culling and then frustum culling

這是默認值，它將結合使用邊界球剔除和邊界盒剔除，然後是截錐體剔除。

• BABYLON.AbstractMesh.CULLINGSTRATEGY_BOUNDINGSPHERE_ONLY: This strategy will use a bounding sphere culling and then frustum culling. This is faster than the standard one but can imply having more meshes sent to the GPU. Really useful if you are CPU bound.

這個策略將使用邊界球剔除，然後是截錐體剔除。這種策略比基礎的版本更加快速，但是可能引起更多的網格被發送到GPU。如果你的CPU資源有限，這種方法會很有用。（把更多工作分給顯卡做，但是我的CPU和GPU都不富裕啊）

Reducing Shaders Overhead

降低著色器開銷

Babylon.js uses an advanced and automatic shaders engine. This system will keep shaders up to date regarding material options. If you are using a static material (ie. an immutable material) then you can let it know to Babylon.js by using the following code:

Babylon.js使用一種先進的並且自動的著色器引擎。這個系統將根據材質的選項保持著色器的更新。如果你使用的是靜態材質（比如一個不變的材質）那麽你可以通過以下的代碼讓Babylon.js知道這一點：

material.freeze();

Once frozen, the shader will remain unchanged even if you change material‘s properties. You will have to unfreeze it to update the inner shader:

一旦被凍結，這個著色器將保持不變，即使你改變這個材質的屬性（紋理是否屬於著色器？？更換其他材質會不會影響？？網格的isvisble會不會影響？？）。你必須解凍它才能更新內部的著色器：

material.unfreeze();

（建議在完成靜態材質的所有設定之後使用，不影響更換其他材質，提升到26~27）

Reducing World Matrices Computation

減少世界矩陣計算

Every mesh has a world matrix to specify its position / rotation / scaling. This matrix is evaluated on every frame. You can improve performances by freezing this matrix. Any subsequent changes to position / rotation / scaling will then be ignore:

每個網格都有一個世界矩陣用來確定它的位置、姿態、縮放。這個矩陣在每一幀中被計算。你可以通過凍結這個矩陣來改進性能。這樣任何傳遞（通過父元素繼承？）的位置、姿態、縮放改變都將被忽略：

mesh.freezeWorldMatrix();

You can unfreeze a mesh with:

你可以使用如下代碼解凍一個網格：

mesh.unfreezeWorldMatrix();

（適合用在父元素固定不變的情況下，或者提前預知哪一幀會發生改變，然後只在這一幀解凍！！！！天空盒如果設置了infiniteDistance不應凍結世界矩陣，因為天空盒需一直移動，凍結地面之後靜止幀數提升至29~30

）

Freezing the active meshes

凍結活動的網格

If you are CPU bound, you can decide to keep the list of active meshes unchanged and then free the time spent by the CPU to determine active meshes:

如果你的CPU有限，你可以考慮保持“活動網格列表”不變，這樣可以節省CPU用來判斷網格是否活動的時間：

scene.freezeActiveMeshes();

You can unfreeze the active meshes with:

你可以使用如下代碼解凍活動網格列表

scene.unfreezeActiveMeshes();

Note that you can force a mesh to be in the active meshes before freezing the list with mesh.alwaysSelectAsActiveMesh = true.

註意你可以在凍結活動網格列表前，強制一個網格進入活動網格列表，通過mesh.alwaysSelectAsActiveMesh = true.

（比如isVisible==false就是非活動網格？？

）

Reducing draw calls

減少繪制調用

As soon as you can please use instances as they are drawn with one single draw call.

請盡量快的用instances代替通過單獨繪制調用繪制

If sharing the same material is a problem, you can then think about using clones which share the same geometry with mesh.clone("newName")

如果實例對象必須共用同一個材質對象是一個問題，你可以考慮通過語句mesh.clone("newName")用克隆方法，克隆方法產生的mesh共用同一個多邊形對象

（instances可以以一個網格為基礎，復制出許多形狀和材質相同的實例，它們的材質和多邊形對象都是共用的）

Reducing calls to gl.clear()

減少gl.clear()的調用

By default, Babylon.js automatically clears the color, depth, and stencil buffers before rendering the scene. It also clears the depth and stencil buffers after switching to a new camera and before rendering a new RenderingGroup. On systems with poor fill rates, these can add up quickly and have a significant impact on performance.

默認情況下，Babylon.js會在渲染場景之前自動清空顏色、深度和模板緩存。它同樣會在切換到新相機之後以及渲染一個新的渲染組之前清空深度和模板緩存。對於填充率較低的系統，這些清空操作可以被快速的匯總並且對性能有巨大的影響。

If your scene is set up in such a way that the viewport is always 100% filled with opaque geometry (if you‘re always inside a skybox, for instance), you can disable the default scene clearing behavior with:

如果你的場景按這種方式設定：視點一直百分之百的被不透明多邊形填滿（比如你一直處在一個天空盒內部），你可以用以下方法禁用默認的場景清理：

scene.autoClear = false; // Color buffer顏色緩存

scene.autoClearDepthAndStencil = false; // Depth and stencil, obviously顯然是深度和模板緩存

If you know that the geometry in a particular RenderingGroup will always be positioned in front of geometry from other groups, you can disable buffer clearing for that group with the following:

如果你確定在某個渲染組中的多邊形將一直位於其他組的多邊形之前，你可以禁用這個組的緩存清理，通過以下方法：

scene.setRenderingAutoClearDepthStencil(renderingGroupIdx, autoClear, depth, stencil);

autoClear: true to enable auto clearing. If false, overrides depth and stencil

為真則啟動自動清理。否則，覆蓋深度和模板

depth: Defaults to true to enable clearing of the depth buffer

默認為真啟動深度緩存清理

stencil: Defaults to true to enable clearing of the stencil buffer

默認為真啟動模板緩存清理

Go ahead and be aggressive with these settings. You‘ll know if it‘s not appropriate for your application if you see any smearing!

盡管大膽測試這些設置。如果你在你的應用中看到任何汙漬你將知道這個設置是否適合。

（在場景層面執行兩個方法禁用了三種緩存，暫時未發現渲染異常，靜止fps增加到37~38，但是在場景中漫遊一段時間後fps又降低了，但是如果要在場景中使用多重半透明材質，還需要更謹慎的測試）

Using depth pre-pass

使用深度預傳遞

When dealing with complex scenes, it could be useful to use depth pre-pass. This technique will render designated meshes only in the depth buffer to leverage early depth test rejection. This could be used for instance when a scene contains meshes with advanced shaders. To enable a depth pre-pass for a mesh, just call mesh.material.needDepthPrePass = true.

在處理復雜的場景時，使用深度預傳遞是很有用的。這項技術將只在深度緩存中（意思是一個不顯示的網格，但能影響其他網格的顯示？）渲染指定的網格，來影響早期的深度測試剔除。在有網格應用了高級著色器的場景中這會很有用。要啟用一個網格的深度預傳遞，只需要調用：mesh.material.needDepthPrePass = true.

Using unindexed meshes

使用非索引的網格

By default Babylon.js uses indexed meshes where vertices can be reuse by faces. When vertex reuse is low and when vertex structure is fairly simple (like just a position and a normal) then you may want to unfold your vertices and stop using indices:

默認情況下Babylon.js使用索引的網格，這時頂點可以通過面來引用。當頂點引用較少或者頂點結構相當簡單時（比如只有一個位置和一個法線），那麽你可能想要展開你的頂點並且停止使用索引：

mesh.convertToUnIndexedMesh();

For example this works very well for a cube where it is more efficient to send 32 positions instead of 24 positions and 32 indices.

例如這種設定對於立方體非常好用，這時發送32個位置以代替24個位置和32個索引是更有效率的。

（其實是換成了OpenGL更基礎的一種頂點繪制方式，給沒有精確點擊的網格設置這種繪制方式？也許能加快場景加載速度？但是fps反而降低了，改回索引方式後fps恢復，估計可能是非索引方式在檢測pick時消耗更大）

Turning AdaptToDeviceRatio Off

關閉適應設備比例

By default, Babylon.js will adapt to device ratio in order to produce the best possible quality even on high-DPI devices.

默認情況下，Babylon.js會適應設備的比例來產生盡可能高的圖像質量，即使是在高分辨率設備上。

The drawback is that this could cost a lot on low-end devices. You can turn it off with the fourth parameter of the Engine constructor:

後果是在低端設備上這將造成很大的消耗。你可以通過引擎的構造方法的第四個參數關閉它：

var engine = new BABYLON.Engine(canvas, antialiasing, null, false);

In the same constructor, you may also want to turn off antialiasing support with the second parameter.

同樣是在這個構造函數中，你也可能想通過第二個參數關閉抗鋸齒支持。

Blocking the dirty mechanism

停止不好的機制

By default the scene will keep all materials up to date when you change a property that could potentially impact them (alpha, texture update, etc...). To do so the scene needs to go through all materials and flag them as dirty. This could be a potential bottleneck if you have a lot of material.

默認情況下，場景將在你改變任何潛在的可能影響材質的屬性時更新所有的材質（透明度、紋理更新等等）。要做到這一點場景需要遍歷所有的材質然後將它們標誌為臟的。在你有許多材質時這可能成為一個潛在的瓶頸。

To prevent this automatic update, you can execute:

要阻止這種自動的更新，你可以執行：

scene.blockMaterialDirtyMechanism = true;

Do not forget to restore it to false when you are done with your batch changes.

不要忘了將它恢復為false，在你需要批量更改材質時。

（使用後幀數似乎略有提高，可能和前面的材質凍結存在部分功能重合）

Using Animation Ratio

使用動畫比率

Babylon.js processes speed depending on the current frame rate.

Babylon.js根據當前幀率計算速度。

On low-end devices animations or camera movement may differ from high-end devices. To compensate this you can use:

在低端設備上動畫或者相機移動可能和高端設備不同。要補償這一點你可以使用：

scene.getAnimationRatio();

The return value is higher on low frame rates.

在低幀率的情況下返回值更高

Handling WebGL context lost

處理WebGL上下文丟失

Starting with version 3.1, Babylon.js can handle WebGL context lost event. This event is raised by the browser when the GPU needs to be taken away from your code. This can happen for instance when using WebVR in hybrid scenario (with multiple GPU). In this case, Babylon.js has to recreate ALL low level resources (including textures, shaders, program, buffers, etc.). The process is entirely transparent and done under the hood by Babylon.js.

從3.1版本開始Babylon.js可以處理WebGL上下文丟失事件。這個事件由瀏覽器在CPU需要從你的代碼上移開時觸發。例如這種情況會在再混合場景中使用WebVR時發生（具有多個CPU）。在這種情況下，Babylon.js不得不重新建立所有的底層資源（包括紋理、著色器、程序、緩存等等）。這個流程是完全透明的並且由Babylon.js的底層進行。

As a developer you should not be concerned by this mechanism. However, to support this scenario, Babylon.js may need an additional amount of memory to keep track of resources creation. If you do not need to support WebGL context lost event, you can turn off the tracking by instantiating your engine with doNotHandleContextLost option set to true.

作為一個開發者你不需要了解這個機制。但是，要支持這個機制，Babylon.js可能需要一些額外的內存來追蹤資源的建立。如果你不需要支持WebGL上下文丟失事件，你可以通過將引擎的doNotHandleContextLost選項設為true來關閉這個追蹤。

If you created resources that need to be rebuilt (like vertex buffers or index buffers), you can use the engine.onContextLostObservable and engine.onContextRestoredObservable observables to keep track of the context lost and context restored events.

如果你的已經被建立的資源需要被重建（比如頂點緩存或者索引緩存），你可以使用engine.onContextLostObservable和engine.onContextRestoredObservable兩個標誌來追蹤上下文丟失和上下文重建事件

（也就是說顯卡要去做別的用，或者換成另一塊顯卡？）

Scene with large number of meshes

具有大量網格的場景

If you have a large number of meshes in a scene, and need to reduce the time spent in adding/removing thoses meshes to/from the scene, There are several options of the Scene constructor that can help :

如果你的場景中有大量的網格，並且需要降低向這個場景中添加或者移除網格的時間消耗，場景工作函數的一些選項可能有幫助

• Setting the option useGeometryIdsMap to true will speed-up the addition and removal of Geometry in the scene.

將useGeometryIdsMap選項設為true將加速場景中幾何體的添加和移除

• Setting the option useMaterialMeshMap to true will speed-up the disposing of Material by reducing the time spent to look for bound meshes.

將useMaterialMeshMap選項設為true將加速材質的回收，通過減少尋找綁定的網格所需的時間做到這一點。

• Setting the option useClonedMeshMap to true will speed-up the disposing of Mesh by reducing the time spent to look for associated cloned meshes.

將useClonedMeshMap選項設為true將加速網格的回收，通過減少相關的被克隆網格查找時間來實現這一點。

For each of this options turned on, Babylon.js will need an additional amount of memory.

對於開啟的每一個選項，Babylon.js都會需要額外的內存。（上面三種的原理和數據庫通過建索引加快查詢速度的原理是一樣的）

Also, If you are disposing a large number of meshes in a row, you can save unecessary computation by turnning the scene property blockfreeActiveMeshesAndRenderingGroups to true just before disposing the meshes, and set it back to false just after, like this :

同樣，如果你要在一行中回收大量的網格，你可以節省一些不必要的計算，通過在回收這些網格前將場景的blockfreeActiveMeshesAndRenderingGroups屬性（成塊釋放活動網格和渲染組？）設為true，然後在回收完畢後將它恢復為false，就像這樣：

scene.blockfreeActiveMeshesAndRenderingGroups = true;

/*

 * Dispose all the meshes in a row here在這裏一次性回收所有的網格

 */

scene.blockfreeActiveMeshesAndRenderingGroups = false;

Instrumentation

指示器

Instrumentation is a key tool when you want to optimize a scene. It will help you figure out where are the bottlenecks so you will be able to optmize what needs to be optimized.

在你想要優化一個場景時，指示器是一種關鍵的工具。它將幫助你指出哪裏是性能瓶頸，於是你可以優化需要被優化的地方。

EngineInstrumentation

引擎指示器

The EngineInstrumentation class allows you to get the following counters:

引擎指示器類允許你獲取如下計數器：

• gpuFrameTimeCounter: Time (in nanoseconds) spent by the GPU to render a single frame. Must be turned on with instrumentation.captureGPUFrameTime = true.

GPU幀時間計數器：GPU渲染一幀所花費的時間（以納秒表示）。需要把instrumentation.captureGPUFrameTime屬性設為true。

• shaderCompilationTimeCounter: Time (in milliseconds) spent by the CPU to compile all shaders. Must be turned on with instrumentation.captureShaderCompilationTime = true.

著色器計算時間計數器：CPU計算所有著色器的時間（以毫秒表示）。必須把instrumentation.captureShaderCompilationTime屬性設為true。

Here is an example of how to use engine instrumentation: https://www.babylonjs-playground.com/#HH8T00#1 -

這是一個如何使用引擎指示器的例子：

  1 var createScene = function () {
  2     var scene = new BABYLON.Scene(engine);
  3     var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
  4     var material = new BABYLON.StandardMaterial("kosh", scene);
  5     var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 32, 5, scene);
  6     var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);
  7 
  8    camera.setPosition(new BABYLON.Vector3(-15, 3, 0));
  9     camera.attachControl(canvas, true);
 10 
 11    // Sphere1 material
 12     material.refractionTexture = new BABYLON.CubeTexture("/textures/TropicalSunnyDay", scene);
 13     material.reflectionTexture = new BABYLON.CubeTexture("/textures/TropicalSunnyDay", scene);
 14     material.diffuseColor = new BABYLON.Color3(0, 0, 0);
 15     material.invertRefractionY = false;
 16     material.indexOfRefraction = 0.98;
 17     material.specularPower = 128;
 18     sphere1.material = material;
 19 
 20    material.refractionFresnelParameters = new BABYLON.FresnelParameters();
 21     material.refractionFresnelParameters.power = 2;
 22     material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
 23     material.reflectionFresnelParameters.power = 2;
 24     material.reflectionFresnelParameters.leftColor = BABYLON.Color3.Black();
 25     material.reflectionFresnelParameters.rightColor = BABYLON.Color3.White();
 26 
 27    // Skybox
 28     var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
 29     var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
 30     skyboxMaterial.backFaceCulling = false;
 31     skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/textures/TropicalSunnyDay", scene);
 32     skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
 33     skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
 34     skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
 35     skyboxMaterial.disableLighting = true;
 36     skybox.material = skyboxMaterial;
 37     
 38     var colorGrading = new BABYLON.ColorGradingTexture("/textures/LateSunset.3dl", scene);
 39     skyboxMaterial.cameraColorGradingTexture = colorGrading;
 40     material.cameraColorGradingTexture = colorGrading;
 41     skyboxMaterial.cameraColorGradingEnabled = true;
 42     material.cameraColorGradingEnabled = true;
 43 
 44     // Instrumentation初始化指示器
 45     var instrumentation = new BABYLON.EngineInstrumentation(engine);
 46     instrumentation.captureGPUFrameTime = true;
 47     instrumentation.captureShaderCompilationTime = true;
 48     
 49     // GUI
 50     var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
 51     var stackPanel = new BABYLON.GUI.StackPanel();
 52     stackPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;   
 53     stackPanel.isVertical = true;
 54     advancedTexture.addControl(stackPanel);     
 55 
 56     var text1 = new BABYLON.GUI.TextBlock();
 57     text1.text = "";
 58     text1.color = "white";
 59     text1.fontSize = 16;
 60     text1.height = "30px";
 61     stackPanel.addControl(text1);       
 62 
 63     var text2 = new BABYLON.GUI.TextBlock();
 64     text2.text = "";
 65     text2.color = "white";
 66     text2.fontSize = 16;
 67     text2.height = "30px";
 68     stackPanel.addControl(text2);       
 69 
 70     var text3 = new BABYLON.GUI.TextBlock();
 71     text3.text = "";
 72     text3.color = "white";
 73     text3.fontSize = 16;
 74     text3.height = "30px";
 75     stackPanel.addControl(text3);       
 76 
 77     var text4 = new BABYLON.GUI.TextBlock();
 78     text4.text = "";
 79     text4.color = "white";
 80     text4.fontSize = 16;
 81     text4.height = "30px";
 82     stackPanel.addControl(text4);        
 83 
 84     var text5 = new BABYLON.GUI.TextBlock();
 85     text5.text = "";
 86     text5.color = "white";
 87     text5.fontSize = 16;
 88     text5.height = "30px";
 89     stackPanel.addControl(text5);       
 90 
 91     var i = 0;
 92     scene.registerBeforeRender(function () {
 93         colorGrading.level = Math.sin(i++ / 120) * 0.5 + 0.5; 
 94 　　　　　　//讀取指示器
 95         text1.text = "current frame time (GPU): " + (instrumentation.gpuFrameTimeCounter.current * 0.000001).toFixed(2) + "ms";
 96         text2.text = "average frame time (GPU): " + (instrumentation.gpuFrameTimeCounter.average * 0.000001).toFixed(2) + "ms";
 97         text3.text = "total shader compilation time: " + (instrumentation.shaderCompilationTimeCounter.total).toFixed(2) + "ms";
 98         text4.text = "average shader compilation time: " + (instrumentation.shaderCompilationTimeCounter.average).toFixed(2) + "ms";
 99         text5.text = "compiler shaders count: " + instrumentation.shaderCompilationTimeCounter.count;
100     });
101 
102     return scene;
103 }

Please note that each counter is PerfCounter object which can provide multiple properties like average, total, min, max, count, etc.

請註意每個計數器都是一個性能計數器對象，這個對象可以提供多種屬性，比如平均值、合計值、最小值、最大值、計數等等。

GPU timer require a special extension (EXT_DISJOINT_TIMER_QUERY) in order to work. This extension has been disabled due to Spectre and Meltdown on all major browsers. This is still possible to use by enabling the flag gfx.webrender.debug.gpu-time-queries on firefox at the moment. This should be re-enabled soon in the browsers.

GPU計數器要起作用需要一個特殊的擴展（EXT_DISJOINT_TIMER_QUERY）。這個擴展因為幽靈與熔毀被所有的主要瀏覽器禁用了。但這時仍然可能通過在火狐瀏覽器上設置gfx.webrender.debug.gpu-time-queries標誌來啟用它。這一功能應該會很快在瀏覽器中被重新啟用。

SceneInstrumentation

場景計數器

The SceneInstrumentation class allows you to get the following counters (per scene):

場景計數器類允許你獲取如下的計數器（每個場景都有）：

• activeMeshesEvaluationTimeCounter: Time (in milliseconds) spent to evaluable active meshes (based on active camra frustum). Must be turned on with instrumentation.captureActiveMeshesEvaluationTime = true.

活動網格評價時間計數器：評價活動網格（根據活動相機的截錐體）所花費的時間（用毫秒表示）。必須設置instrumentation.captureActiveMeshesEvaluationTime= true.

• renderTargetsRenderTimeCounter: Time (in milliseconds) spent to render all render target textures. Must be turned on with instrumentation.captureRenderTargetsRenderTime = true.

渲染目標渲染時間計數器：渲染所有渲染目標紋理所花費的時間（毫秒）必須設置instrumentation.captureRenderTargetsRenderTime = true.

• drawCallsCounter: Number of draw calls (actual calls to engine.draw) per frame. A good advice is to keep this number as small as possible.

繪制調用計數器：每一幀裏調用繪制的次數（其實是調用engine.draw的次數）。一個忠告是保持這個數字越小越好。

• textureCollisionsCounter: Number of time a texture has to be removed to free a texture slot. Generally, there are 16 texture slots on most recent hardwares. Babylon.js will try to use all of them as the process of binding a texture is expensive. It is a good idea to try to keep this number as low as possible.

紋理沖突計數器：紋理不得不被移除來釋放紋理槽位的次數。一般的，最新的硬件都有16個紋理槽位。Babylon.js會嘗試使用所有的槽位，因為綁定一個紋理的過程是昂貴的。保持這個數字盡量低是一個好主意。

• frameTimeCounter: Time (in milliseconds) spent to process an entire frame (including animations, physics, render targets, special fx, etc.). Must be turned on with instrumentation.captureFrameTime = true.

幀時間計數器：計算一整個幀（包括動畫、物理效果、渲染目標、特殊效果等等）所花費的時間（毫秒）。必須設置instrumentation.captureFrameTime = true.

• renderTimeCounter: Time (in milliseconds) spent to render a frame. Must be turned on with instrumentation.captureRenderTime = true.

渲染時間計數器：渲染一幀花費的時間

• interFrameTimeCounter: Time (in milliseconds) spent between two frames. Must be turned on with instrumentation.captureInterFrameTime = true.

跨幀時間：兩幀之間的時間

• particlesRenderTimeCounter: Time (in milliseconds) spent rendering particles (including animations). Must be turned on with instrumentation.captureParticlesRenderTime = true.

粒子渲染時間：渲染粒子所花費的時間（包括粒子的動畫）

• spritesRenderTimeCounter: Time (in milliseconds) spent rendering sprites. Must be turned on with instrumentation.captureSpritesRenderTime = true.

精靈渲染時間：渲染精靈所花費的時間

• physicsTimeCounter: Time (in milliseconds) spent simulating physics. Must be turned on with instrumentation.capturePhysicsTime = true.

物理效果時間：進行物理模擬所花費的時間

• cameraRenderTimeCounter: Time (in milliseconds) spent to render a camera. Must be turned on with instrumentation.captureCameraRenderTime = true.

相機渲染時間：渲染一個相機所花費的時間

Those counters are all resetted to 0 at the beginning of each frame. Therefore it is easier to access them in the onAfterRender callback or observable.

在每一幀的開始所有這些計數器都會被重置為0.因此在onAfterRender的回調裏獲取它們是更容易的。

Further Reading

進一步閱讀

More Advanced - L3

How to Use Scene Optimizer How To Optimize Your Scene With Octrees

如何使用場景優化器（是Babylon.js提供的一款自動優化工具，能夠根據設置的策略自動將場景優化為設置的幀數）、如何使用八叉樹（用來快速判斷物體所在的區域，內置的物理引擎就使用了這種技術）優化你的場景

時間有限，並沒有經過充分的校對與測試，如果發現錯誤請在評論區指出。

Babylon.js官方性能優化文檔中文翻譯