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

時間 2019-12-11

標籤 babylon.js babylon 官方性能優化文檔中文翻譯欄目 JavaScript 简体版

原文原文鏈接

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

How To

如何

Optimize your scene

優化你的場景

Table of contents 內容列表web

How To Optimize Your Scene 如何優化你的場景

Use TransformNode instead of AbstractMesh or empty meshes 使用變換節點代替抽象網格或者空網格
Changing per mesh culling strategy改變每一個網格的剔除策略
Reducing Shaders Overhead下降着色器開銷
Reducing World Matrices Computation 減小世界矩陣計算
Freezing the active meshes 凍結活動的網格
Reducing draw calls 減小繪製調用
Reducing calls to gl.clear() 減小gl.clear()的調用
Using depth pre-pass 使用深度預加載
Using unindexed meshes 使用未索引的網格
Turning AdaptToDeviceRatio Off 關閉適應設備比例（ratio是比例，rate是速率）
Blocking the dirty mechanism 中止很差的機制
Using Animation Ratio 使用動畫比率
Handling WebGL context lost 處理WebGL上下文丟失
Scene with large number of meshes 處理包含大量網格的場景
Instrumentation 儀表

EngineInstrumentation 引擎儀表
SceneInstrumentation 場景儀表

Further Reading 進一步閱讀

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.數據庫

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

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.性能優化

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

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

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:

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

false//Colorscene.autoClear =;buffer顏色緩存

false//Depthandscene.autoClearDepthAndStencil =;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.setRenderingAutoClearDepthStencilrenderingGroupIdxautoCleardepthstencil(,,,);

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:

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

varnewnullfalseengine =BABYLON.Engine(canvas, antialiasing,,);

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:

要阻止這種自動的更新，你能夠執行：

truescene.blockMaterialDirtyMechanism =;

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，就像這樣：

truescene.blockfreeActiveMeshesAndRenderingGroups =;

/*

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

*/

falsescene.blockfreeActiveMeshesAndRenderingGroups =;

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的回調裏獲取它們是更容易的。