AppBase - additional refactor to improve minimal app size

src/deprecated/deprecated.js

@@ -115,6 +115,8 @@ import { basisInitialize } from '../resources/basis.js';
 import { EventHandler } from '../core/event-handler.js';
 import { Asset } from '../asset/asset.js';
 
+import { VrManager } from '../vr/vr-manager.js';
+
 // CORE
 
 export const log = {
@@ -1070,6 +1072,19 @@ Application.prototype.renderLines = function (position, color, options) {
     this._addLines(position, color, options);
 };
 
+Application.prototype.enableVr = function () {
+    if (!this.vr) {
+        this.vr = new VrManager(this);
+    }
+};
+
+Application.prototype.disableVr = function () {
+    if (this.vr) {
+        this.vr.destroy();
+        this.vr = null;
+    }
+};
+
 Object.defineProperty(CameraComponent.prototype, 'node', {
     get: function () {
         Debug.deprecated('pc.CameraComponent#node is deprecated. Use pc.CameraComponent#entity instead.');

src/framework/app-base.js

@@ -24,7 +24,6 @@ import {
     LAYERID_DEPTH, LAYERID_IMMEDIATE, LAYERID_SKYBOX, LAYERID_UI, LAYERID_WORLD,
     SORTMODE_NONE, SORTMODE_MANUAL, SPECULAR_BLINN
 } from '../scene/constants.js';
-import { BatchManager } from '../scene/batching/batch-manager.js';
 import { ForwardRenderer } from '../scene/renderer/forward-renderer.js';
 import { AreaLightLuts } from '../scene/area-light-luts.js';
 import { Layer } from '../scene/layer.js';
@@ -47,9 +46,6 @@ import { ScriptRegistry } from '../script/script-registry.js';
 
 import { I18n } from '../i18n/i18n.js';
 
-import { VrManager } from '../vr/vr-manager.js';
-import { XrManager } from '../xr/xr-manager.js';
-
 import { ComponentSystemRegistry } from './components/registry.js';
 import { script } from './script.js';
 import { ApplicationStats } from './stats.js';
@@ -76,8 +72,12 @@ import {
 /** @typedef {import('../scene/graph-node.js').GraphNode} GraphNode */
 /** @typedef {import('../scene/mesh.js').Mesh} Mesh */
 /** @typedef {import('../scene/mesh-instance.js').MeshInstance} MeshInstance */
-/** @typedef {import('../scene/lightmapper.js').Lightmapper} Lightmapper */
+/** @typedef {import('../scene/lightmapper/lightmapper.js').Lightmapper} Lightmapper */
+/** @typedef {import('../scene/batching/batch-manager.js').BatchManager} BatchManager */
 /** @typedef {import('../framework/app-create-options.js').AppCreateOptions} AppCreateOptions */
+/** @typedef {import('../xr/xr-manager.js').XrManager} XrManager */
+/** @typedef {import('../vr/vr-manager.js').VrManager} VrManager */
+/** @typedef {import('../sound/manager.js').SoundManager} SoundManager */
 
 // Mini-object used to measure progress of loading sets
 class Progress {
@@ -146,7 +146,7 @@ class AppBase extends EventHandler {
      * // Engine-only example: create the application manually
      * var createOptions = new AppCreateOptions();
      * var app = new pc.AppBase(canvas);
-     * app.init(options, createOptions);
+     * app.init(createOptions);
      *
      * // Start the application's main loop
      * app.start();
@@ -460,13 +460,15 @@ class AppBase extends EventHandler {
         }
 
         /**
-         * The application's batch manager. The batch manager is used to merge mesh instances in
-         * the scene, which reduces the overall number of draw calls, thereby boosting performance.
+         * The application's batch manager.
          *
          * @type {BatchManager}
          */
-        this.batcher = new BatchManager(this.graphicsDevice, this.root, this.scene);
-        this.once('prerender', this._firstBatch, this);
+        this._batcher = null;
+        if (createOptions.batchManager) {
+            this._batcher = new createOptions.batchManager(this.graphicsDevice, this.root, this.scene);
+            this.once('prerender', this._firstBatch, this);
+        }
 
         /**
          * The keyboard device.
@@ -522,7 +524,7 @@ class AppBase extends EventHandler {
          *     // VR is available
          * }
          */
-        this.xr = new XrManager(this);
+        this.xr = new createOptions.xr(this);
 
         if (this.elementInput)
             this.elementInput.attachSelectEvents();
@@ -663,6 +665,17 @@ class AppBase extends EventHandler {
         return this._soundManager;
     }
 
+    /**
+     * The application's batch manager. The batch manager is used to merge mesh instances in
+     * the scene, which reduces the overall number of draw calls, thereby boosting performance.
+     *
+     * @type {BatchManager}
+     */
+    get batcher() {
+        Debug.assert(this._batcher, "BatchManager has not been created and is required for correct functionality.");
+        return this._batcher;
+    }
+
     /**
      * The current fill mode of the canvas. Can be:
      *
@@ -899,9 +912,12 @@ class AppBase extends EventHandler {
 
         // add batch groups
         if (props.batchGroups) {
-            for (let i = 0, len = props.batchGroups.length; i < len; i++) {
-                const grp = props.batchGroups[i];
-                this.batcher.addGroup(grp.name, grp.dynamic, grp.maxAabbSize, grp.id, grp.layers);
+            const batcher = this.batcher;
+            if (batcher) {
+                for (let i = 0, len = props.batchGroups.length; i < len; i++) {
+                    const grp = props.batchGroups[i];
+                    batcher.addGroup(grp.name, grp.dynamic, grp.maxAabbSize, grp.id, grp.layers);
+                }
             }
         }
 
@@ -1196,7 +1212,10 @@ class AppBase extends EventHandler {
 
         this.fire('prerender');
         this.root.syncHierarchy();
-        this.batcher.updateAll();
+
+        if (this._batcher) {
+            this._batcher.updateAll();
+        }
 
         // #if _PROFILER
         ForwardRenderer._skipRenderCounter = 0;
@@ -1634,31 +1653,6 @@ class AppBase extends EventHandler {
         }
     }
 
-    /**
-     * Create and assign a {@link VrManager} object to allow this application render in VR.
-     *
-     * @ignore
-     * @deprecated
-     */
-    enableVr() {
-        if (!this.vr) {
-            this.vr = new VrManager(this);
-        }
-    }
-
-    /**
-     * Destroy the {@link VrManager}.
-     *
-     * @ignore
-     * @deprecated
-     */
-    disableVr() {
-        if (this.vr) {
-            this.vr.destroy();
-            this.vr = null;
-        }
-    }
-
     /** @private */
     _firstBake() {
         if (this.lightmapper) {
@@ -2031,8 +2025,10 @@ class AppBase extends EventHandler {
         this.lightmapper?.destroy();
         this.lightmapper = null;
 
-        this.batcher.destroy();
-        this.batcher = null;
+        if (this._batcher) {
+            this._batcher.destroy();
+            this._batcher = null;
+        }
 
         this._entityIndex = {};
 

src/framework/app-create-options.js

@@ -6,8 +6,10 @@
 /** @typedef {import('../input/mouse.js').Mouse} Mouse */
 /** @typedef {import('../input/touch-device.js').TouchDevice} TouchDevice */
 /** @typedef {import('../sound/manager.js').SoundManager} SoundManager */
-/** @typedef {import('../scene/lightmapper.js').Lightmapper} Lightmapper */
+/** @typedef {import('../scene/lightmapper/lightmapper.js').Lightmapper} Lightmapper */
+/** @typedef {import('../scene/batching/batch-manager.js').BatchManager} BatchManager */
 /** @typedef {import('./components/system.js').ComponentSystem} ComponentSystem */
+/** @typedef {import('../xr/xr-manager.js').XrManager} XrManager */
 
 class AppCreateOptions {
     /**
@@ -83,10 +85,24 @@ class AppCreateOptions {
     /**
      * The lightmapper.
      *
-     * @type {Lightmapper}
+     * @type {typeof Lightmapper}
      */
     lightmapper;
 
+    /**
+     * The BatchManager.
+     *
+     * @type {typeof BatchManager}
+     */
+    batchManager;
+
+    /**
+     * The XrManager.
+     *
+     * @type {typeof XrManager}
+     */
+    xr;
+
     /**
      * The component systems the app requires.
      *

src/framework/application.js

@@ -5,6 +5,7 @@ import { WebglGraphicsDevice } from '../graphics/webgl/webgl-graphics-device.js'
 import { SoundManager } from '../sound/manager.js';
 
 import { Lightmapper } from '../scene/lightmapper/lightmapper.js';
+import { BatchManager } from '../scene/batching/batch-manager.js';
 
 import { AppBase } from './app-base.js';
 import { AppCreateOptions } from './app-create-options.js';
@@ -59,6 +60,8 @@ import { TextHandler } from '../resources/text.js';
 import { TextureAtlasHandler } from '../resources/texture-atlas.js';
 import { TextureHandler } from '../resources/texture.js';
 
+import { XrManager } from '../xr/xr-manager.js';
+
 /** @typedef {import('../input/element-input.js').ElementInput} ElementInput */
 /** @typedef {import('../input/game-pads.js').GamePads} GamePads */
 /** @typedef {import('../input/keyboard.js').Keyboard} Keyboard */
@@ -134,6 +137,8 @@ import { TextureHandler } from '../resources/texture.js';
 
         createOptions.soundManager = new SoundManager(options);
         createOptions.lightmapper = Lightmapper;
+        createOptions.batchManager = BatchManager;
+        createOptions.xr = XrManager;
 
         this.init(createOptions);
     }

src/framework/components/element/component.js

@@ -334,11 +334,11 @@ class ElementComponent extends Component {
             return;
 
         if (this.entity.enabled && this._batchGroupId >= 0) {
-            this.system.app.batcher.remove(BatchGroup.ELEMENT, this.batchGroupId, this.entity);
+            this.system.app.batcher?.remove(BatchGroup.ELEMENT, this.batchGroupId, this.entity);
         }
 
         if (this.entity.enabled && value >= 0) {
-            this.system.app.batcher.insert(BatchGroup.ELEMENT, value, this.entity);
+            this.system.app.batcher?.insert(BatchGroup.ELEMENT, value, this.entity);
         }
 
         if (value < 0 && this._batchGroupId >= 0 && this.enabled && this.entity.enabled) {
@@ -1394,7 +1394,7 @@ class ElementComponent extends Component {
         }
 
         if (this._batchGroupId >= 0) {
-            this.system.app.batcher.insert(BatchGroup.ELEMENT, this.batchGroupId, this.entity);
+            this.system.app.batcher?.insert(BatchGroup.ELEMENT, this.batchGroupId, this.entity);
         }
 
         this.fire('enableelement');
@@ -1416,7 +1416,7 @@ class ElementComponent extends Component {
         }
 
         if (this._batchGroupId >= 0) {
-            this.system.app.batcher.remove(BatchGroup.ELEMENT, this.batchGroupId, this.entity);
+            this.system.app.batcher?.remove(BatchGroup.ELEMENT, this.batchGroupId, this.entity);
         }
 
         this.fire('disableelement');

src/framework/components/model/component.js

@@ -547,12 +547,11 @@ class ModelComponent extends Component {
     set batchGroupId(value) {
         if (this._batchGroupId === value) return;
 
-        const batcher = this.system.app.batcher;
         if (this.entity.enabled && this._batchGroupId >= 0) {
-            batcher.remove(BatchGroup.MODEL, this.batchGroupId, this.entity);
+            this.system.app.batcher?.remove(BatchGroup.MODEL, this.batchGroupId, this.entity);
         }
         if (this.entity.enabled && value >= 0) {
-            batcher.insert(BatchGroup.MODEL, value, this.entity);
+            this.system.app.batcher?.insert(BatchGroup.MODEL, value, this.entity);
         }
 
         if (value < 0 && this._batchGroupId >= 0 && this.enabled && this.entity.enabled) {
@@ -912,7 +911,7 @@ class ModelComponent extends Component {
         }
 
         if (this._batchGroupId >= 0) {
-            app.batcher.insert(BatchGroup.MODEL, this.batchGroupId, this.entity);
+            app.batcher?.insert(BatchGroup.MODEL, this.batchGroupId, this.entity);
         }
     }
 
@@ -927,7 +926,7 @@ class ModelComponent extends Component {
         }
 
         if (this._batchGroupId >= 0) {
-            app.batcher.remove(BatchGroup.MODEL, this.batchGroupId, this.entity);
+            app.batcher?.remove(BatchGroup.MODEL, this.batchGroupId, this.entity);
         }
 
         if (this._model) {

src/framework/components/render/component.js

@@ -453,12 +453,11 @@ class RenderComponent extends Component {
     set batchGroupId(value) {
         if (this._batchGroupId !== value) {
 
-            const batcher = this.system.app.batcher;
             if (this.entity.enabled && this._batchGroupId >= 0) {
-                batcher.remove(BatchGroup.RENDER, this.batchGroupId, this.entity);
+                this.system.app.batcher?.remove(BatchGroup.RENDER, this.batchGroupId, this.entity);
             }
             if (this.entity.enabled && value >= 0) {
-                batcher.insert(BatchGroup.RENDER, value, this.entity);
+                this.system.app.batcher?.insert(BatchGroup.RENDER, value, this.entity);
             }
 
             if (value < 0 && this._batchGroupId >= 0 && this.enabled && this.entity.enabled) {
@@ -725,7 +724,7 @@ class RenderComponent extends Component {
         }
 
         if (this._batchGroupId >= 0) {
-            app.batcher.insert(BatchGroup.RENDER, this.batchGroupId, this.entity);
+            app.batcher?.insert(BatchGroup.RENDER, this.batchGroupId, this.entity);
         }
     }
 
@@ -740,7 +739,7 @@ class RenderComponent extends Component {
         }
 
         if (this._batchGroupId >= 0) {
-            app.batcher.remove(BatchGroup.RENDER, this.batchGroupId, this.entity);
+            app.batcher?.remove(BatchGroup.RENDER, this.batchGroupId, this.entity);
         }
 
         this.removeFromLayers();

src/framework/components/screen/component.js

@@ -71,7 +71,7 @@ class ScreenComponent extends Component {
             e.element.drawOrder = i++;
 
             if (e.element._batchGroupId >= 0 && prevDrawOrder !== e.element.drawOrder) {
-                this.system.app.batcher.markGroupDirty(e.element._batchGroupId);
+                this.system.app.batcher?.markGroupDirty(e.element._batchGroupId);
             }
         }
 

src/framework/components/sprite/component.js

@@ -419,10 +419,10 @@ class SpriteComponent extends Component {
         this._batchGroupId = value;
 
         if (this.entity.enabled && prev >= 0) {
-            this.system.app.batcher.remove(BatchGroup.SPRITE, prev, this.entity);
+            this.system.app.batcher?.remove(BatchGroup.SPRITE, prev, this.entity);
         }
         if (this.entity.enabled && value >= 0) {
-            this.system.app.batcher.insert(BatchGroup.SPRITE, value, this.entity);
+            this.system.app.batcher?.insert(BatchGroup.SPRITE, value, this.entity);
         } else {
             // re-add model to scene in case it was removed by batching
             if (prev >= 0) {
@@ -518,7 +518,7 @@ class SpriteComponent extends Component {
             this._tryAutoPlay();
 
         if (this._batchGroupId >= 0) {
-            app.batcher.insert(BatchGroup.SPRITE, this._batchGroupId, this.entity);
+            app.batcher?.insert(BatchGroup.SPRITE, this._batchGroupId, this.entity);
         }
     }
 
@@ -537,7 +537,7 @@ class SpriteComponent extends Component {
 
 
         if (this._batchGroupId >= 0) {
-            app.batcher.remove(BatchGroup.SPRITE, this._batchGroupId, this.entity);
+            app.batcher?.remove(BatchGroup.SPRITE, this._batchGroupId, this.entity);
         }
     }