Additional performance markers & small code cleanup (#4251)

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

examples/src/examples/graphics/render-to-texture.tsx

@@ -67,6 +67,7 @@ class RenderToTextureExample {
                 addressV: pc.ADDRESS_CLAMP_TO_EDGE
             });
             const renderTarget = new pc.RenderTarget({
+                name: `RT`,
                 colorBuffer: texture,
                 depth: true,
                 flipY: true,

src/graphics/webgl/webgl-graphics-device.js

@@ -1242,6 +1242,8 @@ class WebglGraphicsDevice extends GraphicsDevice {
      * {@link GraphicsDevice#updateEnd} must not be nested.
      */
     updateBegin() {
+        DebugGraphics.pushGpuMarker(this, `UPDATE-BEGIN`);
+
         this.boundVao = null;
 
         // clear texture units once a frame on desktop safari
@@ -1266,6 +1268,8 @@ class WebglGraphicsDevice extends GraphicsDevice {
         } else {
             this.setFramebuffer(this.defaultFramebuffer);
         }
+
+        DebugGraphics.popGpuMarker(this);
     }
 
     /**
@@ -1274,6 +1278,9 @@ class WebglGraphicsDevice extends GraphicsDevice {
      * {@link GraphicsDevice#updateEnd} must not be nested.
      */
     updateEnd() {
+
+        DebugGraphics.pushGpuMarker(this, `UPDATE-END`);
+
         const gl = this.gl;
 
         // unbind VAO from device to protect it from being changed
@@ -1300,6 +1307,8 @@ class WebglGraphicsDevice extends GraphicsDevice {
                 target.resolve();
             }
         }
+
+        DebugGraphics.popGpuMarker(this);
     }
 
     /**

src/index.js

@@ -26,6 +26,7 @@ export { SortedLoopArray } from './core/sorted-loop-array.js';
 export { Tags } from './core/tags.js';
 export { Timer, now } from './core/time.js';
 export { URI, createURI } from './core/uri.js';
+export { Debug } from './core/debug.js';
 
 // NET
 export { http, Http } from './net/http.js';

src/scene/layer.js

@@ -13,7 +13,6 @@ import { Material } from './materials/material.js';
 
 /** @typedef {import('../framework/components/camera/component.js').CameraComponent} CameraComponent */
 /** @typedef {import('../framework/components/light/component.js').LightComponent} LightComponent */
-/** @typedef {import('../graphics/render-target.js').RenderTarget} RenderTarget */
 /** @typedef {import('./graph-node.js').GraphNode} GraphNode */
 /** @typedef {import('./light.js').Light} Light */
 /** @typedef {import('./mesh-instance.js').MeshInstance} MeshInstance */
@@ -175,7 +174,9 @@ class Layer {
          */
         this.transparentSortMode = options.transparentSortMode === undefined ? SORTMODE_BACK2FRONT : options.transparentSortMode;
 
-        this.renderTarget = options.renderTarget;
+        if (options.renderTarget) {
+            this.renderTarget = options.renderTarget;
+        }
 
         /**
          * A type of shader to use during rendering. Possible values are:
@@ -269,8 +270,7 @@ class Layer {
         this.onPostCull = options.onPostCull;
         /**
          * Custom function that is called after this layer is rendered. Useful to revert changes
-         * made in {@link Layer#onPreRender} or performing some processing on
-         * {@link Layer#renderTarget}. This function is called after the last occurrence of this
+         * made in {@link Layer#onPreRender}. This function is called after the last occurrence of this
          * layer in {@link LayerComposition}. It will receive camera index as the only argument.
          * You can get the actual camera being used by looking up {@link LayerComposition#cameras}
          * with this index.

src/scene/picker.js

@@ -4,6 +4,7 @@ import { ADDRESS_CLAMP_TO_EDGE, CLEARFLAG_DEPTH, FILTER_NEAREST, PIXELFORMAT_R8_
 import { GraphicsDevice } from '../graphics/graphics-device.js';
 import { RenderTarget } from '../graphics/render-target.js';
 import { Texture } from '../graphics/texture.js';
+import { DebugGraphics } from '../graphics/debug-graphics.js';
 
 import { SHADER_PICK, SORTMODE_NONE } from './constants.js';
 import { Camera } from './camera.js';
@@ -119,6 +120,8 @@ class Picker {
         // backup active render target
         const origRenderTarget = device.renderTarget;
 
+        DebugGraphics.pushGpuMarker(device, 'PICKER');
+
         // Ready the device for rendering to the pick buffer
         device.setRenderTarget(this.renderTarget);
         device.updateBegin();
@@ -131,6 +134,8 @@ class Picker {
         // Restore render target
         device.setRenderTarget(origRenderTarget);
 
+        DebugGraphics.popGpuMarker(device);
+
         const mapping = this.mapping;
         for (let i = 0; i < width * height; i++) {
             const r = pixels[4 * i + 0];

src/scene/renderer/forward-renderer.js

@@ -381,7 +381,10 @@ class ForwardRenderer {
     }
 
     clearView(camera, target, clear, forceWrite, options) {
+
         const device = this.device;
+        DebugGraphics.pushGpuMarker(device, 'CLEAR-VIEW');
+
         device.setRenderTarget(target);
         device.updateBegin();
 
@@ -424,6 +427,8 @@ class ForwardRenderer {
                 stencil: camera._clearStencil
             });
         }
+
+        DebugGraphics.popGpuMarker(device);
     }
 
     dispatchGlobalLights(scene) {