# AppBase

Class · extends [`EventHandler`](https://api.playcanvas.com/engine/classes/EventHandler.md) · category: Framework

Source: https://github.com/playcanvas/engine/blob/f059dc005842f76e052cdf44d8370c8c7ec475ac/src/framework/app-base.js#L130

AppBase represents the base functionality for all PlayCanvas applications. It is responsible for
initializing and managing the application lifecycle. It coordinates core engine systems such
as:

- The graphics device - see [GraphicsDevice](https://api.playcanvas.com/engine/classes/GraphicsDevice.md).
- The asset registry - see [AssetRegistry](https://api.playcanvas.com/engine/classes/AssetRegistry.md).
- The component system registry - see [ComponentSystemRegistry](https://api.playcanvas.com/engine/classes/ComponentSystemRegistry.md).
- The scene - see [Scene](https://api.playcanvas.com/engine/classes/Scene.md).
- Input devices - see [Keyboard](https://api.playcanvas.com/engine/classes/Keyboard.md), [Mouse](https://api.playcanvas.com/engine/classes/Mouse.md), [TouchDevice](https://api.playcanvas.com/engine/classes/TouchDevice.md), and [GamePads](https://api.playcanvas.com/engine/classes/GamePads.md).
- The main update/render loop.

Using AppBase directly requires you to register [ComponentSystem](https://api.playcanvas.com/engine/classes/ComponentSystem.md)s and
[ResourceHandler](https://api.playcanvas.com/engine/classes/ResourceHandler.md)s yourself. This facilitates
[tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) when bundling
your application.

It is the preferred entry point for new code - [Application](https://api.playcanvas.com/engine/classes/Application.md) is a convenience subclass
that registers everything for you, and is expected to be deprecated in a future release.

`new AppBase(canvas)` only constructs the instance and its root entity. You must then call
[AppBase#init](https://api.playcanvas.com/engine/classes/AppBase.md#init) with an [AppOptions](https://api.playcanvas.com/engine/classes/AppOptions.md) supplying at minimum `graphicsDevice`,
`componentSystems` and `resourceHandlers` before adding components or calling
[AppBase#start](https://api.playcanvas.com/engine/classes/AppBase.md#start). Create the `graphicsDevice` with [createGraphicsDevice](https://api.playcanvas.com/engine/functions/createGraphicsDevice.md).

## Constructors

### constructor

```ts
new AppBase(canvas: OffscreenCanvas | HTMLCanvasElement)
```

Create a new AppBase instance.

**Parameters**

- `canvas` (`OffscreenCanvas | HTMLCanvasElement`): The canvas element.

**Example**

```ts
const app = new AppBase(canvas);

const options = new AppOptions();
app.init(options);

// Start the application's main loop
app.start();
```

## Properties

### assets

```ts
assets: AssetRegistry
```

The asset registry managed by the application.

**Example**

```ts
// Search the asset registry for all assets with the tag 'vehicle'
const vehicleAssets = this.app.assets.findByTag('vehicle');
```

### autoRender

```ts
autoRender: boolean = true
```

When true, the application's render function is called every frame. Setting autoRender to
false is useful to applications where the rendered image may often be unchanged over time.
This can heavily reduce the application's load on the CPU and GPU. Defaults to true.

**Example**

```ts
// Disable rendering every frame and only render on a keydown event
this.app.autoRender = false;
this.app.keyboard.on('keydown', (event) => {
    this.app.renderNextFrame = true;
});
```

### elementInput

```ts
elementInput: ElementInput | null = null
```

Used to handle input for [ElementComponent](https://api.playcanvas.com/engine/classes/ElementComponent.md)s.

### gamepads

```ts
gamepads: GamePads | null = null
```

Used to access GamePad input.

### graphicsDevice

```ts
graphicsDevice: GraphicsDevice
```

The graphics device used by the application.

### i18n

```ts
i18n: I18n
```

Handles localization.

### keyboard

```ts
keyboard: Keyboard | null = null
```

The keyboard device.

### lightmapper

```ts
lightmapper: Lightmapper | null = null
```

The run-time lightmapper.

### loader

```ts
loader: ResourceLoader
```

The resource loader.

### maxDeltaTime

```ts
maxDeltaTime: number = 0.1
```

Clamps per-frame delta time to an upper bound. Useful since returning from a tab
deactivation can generate huge values for dt, which can adversely affect game state.
Defaults to 0.1 (seconds).

**Example**

```ts
// Don't clamp inter-frame times of 200ms or less
this.app.maxDeltaTime = 0.2;
```

### mouse

```ts
mouse: Mouse | null = null
```

The mouse device.

### renderNextFrame

```ts
renderNextFrame: boolean
```

Set to true to render the scene on the next iteration of the main loop. This only has an
effect if [autoRender](https://api.playcanvas.com/engine/classes/AppBase.md#autorender) is set to false. The value of renderNextFrame is set back to
false again as soon as the scene has been rendered.

**Example**

```ts
// Render the scene only while space key is pressed
if (this.app.keyboard.isPressed(KEY_SPACE)) {
    this.app.renderNextFrame = true;
}
```

### root

```ts
root: Entity
```

The root entity of the application.

**Example**

```ts
// Return the first entity called 'Camera' in a depth-first search of the scene hierarchy
const camera = this.app.root.findByName('Camera');
```

### scene

```ts
scene: Scene
```

The scene managed by the application.

**Example**

```ts
// Set the fog type property of the application's scene
this.app.scene.fog.type = FOG_LINEAR;
```

### scenes

```ts
scenes: SceneRegistry
```

The scene registry managed by the application.

**Example**

```ts
// Search the scene registry for a item with the name 'racetrack1'
const sceneItem = this.app.scenes.find('racetrack1');

// Load the scene using the item's url
this.app.scenes.loadScene(sceneItem.url);
```

### scripts

```ts
scripts: ScriptRegistry
```

The application's script registry.

### scriptsOrder

```ts
scriptsOrder: string[] = []
```

Scripts in order of loading first.

### systems

```ts
systems: ComponentSystemRegistry
```

The application's component system registry.

**Example**

```ts
// Set global gravity to zero
this.app.systems.rigidbody.gravity.set(0, 0, 0);
```

**Example**

```ts
// Set the global sound volume to 50%
this.app.systems.sound.volume = 0.5;
```

### timeScale

```ts
timeScale: number = 1
```

Scales the global time delta. Defaults to 1. Scripts, animation and physics all receive
the scaled delta, so 0 stops them together. To pause or slow down physics alone while the
rest of the application keeps running, use [RigidBodyComponentSystem#timeScale](https://api.playcanvas.com/engine/classes/RigidBodyComponentSystem.md#timescale).

**Example**

```ts
// Set the app to run at half speed
this.app.timeScale = 0.5;
```

### touch

```ts
touch: TouchDevice | null = null
```

Used to get touch events input.

### xr

```ts
xr: XrManager | null = null
```

The XR Manager that provides ability to start VR/AR sessions.

**Example**

```ts
// check if VR is available
if (app.xr.isAvailable(XRTYPE_VR)) {
    // VR is available
}
```

## Accessors

### batcher

```ts
get batcher(): BatchManager
```

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.

### fillMode

```ts
get fillMode(): string
```

The current fill mode of the canvas. Can be:

- [FILLMODE_NONE](https://api.playcanvas.com/engine/variables/FILLMODE_NONE.md): the canvas will always match the size provided.
- [FILLMODE_FILL_WINDOW](https://api.playcanvas.com/engine/variables/FILLMODE_FILL_WINDOW.md): the canvas will simply fill the window, changing aspect ratio.
- [FILLMODE_KEEP_ASPECT](https://api.playcanvas.com/engine/variables/FILLMODE_KEEP_ASPECT.md): the canvas will grow to fill the window as best it can while
maintaining the aspect ratio.

### resolutionMode

```ts
get resolutionMode(): string
```

The current resolution mode of the canvas, Can be:

- [RESOLUTION_AUTO](https://api.playcanvas.com/engine/variables/RESOLUTION_AUTO.md): if width and height are not provided, canvas will be resized to
match canvas client size.
- [RESOLUTION_FIXED](https://api.playcanvas.com/engine/variables/RESOLUTION_FIXED.md): resolution of canvas will be fixed.

### stats

```ts
get stats(): AppStats
```

The application's performance statistics. Returns the same [AppStats](https://api.playcanvas.com/engine/classes/AppStats.md) instance on
every access. Engine measurements are read-only; [AppStats#user](https://api.playcanvas.com/engine/classes/AppStats.md#user) holds writable
application-defined counters. See [AppStats](https://api.playcanvas.com/engine/classes/AppStats.md) for units, sampling and GPU profiling setup.

## Methods

### applySceneSettings

```ts
applySceneSettings(settings: object): void
```

Apply scene settings to the current scene. Useful when your scene settings are parsed or
generated from a non-URL source.

**Parameters**

- `settings` (`object`): The scene settings to be applied.
    - `settings.physics` (`object`): The physics settings to be applied.
        - `settings.physics.gravity` (`number[]`): The world space vector representing global
          gravity in the physics simulation. Must be a fixed size array with three number elements,
          corresponding to each axis [ X, Y, Z ].
    - `settings.render` (`object`): The rendering settings to be applied.
        - `settings.render.ambientBake` (`boolean`, optional): Enable baking ambient light into lightmaps. Defaults to false.
        - `settings.render.ambientBakeNumSamples` (`number`, optional): Number of samples to use when baking ambient light. Defaults to 1.
        - `settings.render.ambientBakeOcclusionBrightness` (`number`, optional): Brightness of the baked ambient occlusion. Defaults to 0.
        - `settings.render.ambientBakeOcclusionContrast` (`number`, optional): Contrast of the baked ambient occlusion. Defaults to 0.
        - `settings.render.ambientBakeSpherePart` (`number`, optional): How much of the sphere to include when baking ambient light. Defaults to 0.4.
        - `settings.render.ambientLuminance` (`number`): Lux (lm/m^2) value for ambient light intensity.
        - `settings.render.clusteredLightingEnabled` (`boolean`, optional): Enable clustered lighting. Defaults to false.
        - `settings.render.exposure` (`number`): The exposure value tweaks the overall brightness
          of the scene.
        - `settings.render.fog` (`string`): The type of fog used by the scene. Can be:

          - [FOG_NONE](https://api.playcanvas.com/engine/variables/FOG_NONE.md)
          - [FOG_LINEAR](https://api.playcanvas.com/engine/variables/FOG_LINEAR.md)
          - [FOG_EXP](https://api.playcanvas.com/engine/variables/FOG_EXP.md)
          - [FOG_EXP2](https://api.playcanvas.com/engine/variables/FOG_EXP2.md)
        - `settings.render.fog_color` (`number[]`): The color of the fog (if enabled). Must be a
          fixed size array with three number elements, corresponding to each color channel [ R, G, B ].
        - `settings.render.fog_density` (`number`): The density of the fog (if enabled). This
          property is only valid if the fog property is set to [FOG_EXP](https://api.playcanvas.com/engine/variables/FOG_EXP.md) or [FOG_EXP2](https://api.playcanvas.com/engine/variables/FOG_EXP2.md).
        - `settings.render.fog_end` (`number`): The distance from the viewpoint where linear fog
          reaches its maximum. This property is only valid if the fog property is set to [FOG_LINEAR](https://api.playcanvas.com/engine/variables/FOG_LINEAR.md).
        - `settings.render.fog_start` (`number`): The distance from the viewpoint where linear fog
          begins. This property is only valid if the fog property is set to [FOG_LINEAR](https://api.playcanvas.com/engine/variables/FOG_LINEAR.md).
        - `settings.render.gamma_correction` (`number`): The gamma correction to apply when
          rendering the scene. Can be:

          - [GAMMA_NONE](https://api.playcanvas.com/engine/variables/GAMMA_NONE.md)
          - [GAMMA_SRGB](https://api.playcanvas.com/engine/variables/GAMMA_SRGB.md)
        - `settings.render.global_ambient` (`number[]`): The color of the scene's ambient light.
          Must be a fixed size array with three number elements, corresponding to each color channel
          [ R, G, B ].
        - `settings.render.gsplatAlphaClip` (`number`, optional): Alpha threshold for gsplat shadow, pick, and prepass rendering. Defaults to 0.3.
        - `settings.render.gsplatAlphaClipForward` (`number`, optional): Alpha threshold for the forward gsplat rendering pass. Defaults to 1 / 255.
        - `settings.render.gsplatAntiAlias` (`boolean`, optional): Enables anti-aliasing compensation for Gaussian splats. Defaults to false.
        - `settings.render.gsplatColorUpdateAngle` (`number`, optional): Viewing angle threshold in degrees for triggering gsplat spherical harmonics color updates. Defaults to 10.
        - `settings.render.gsplatCooldownTicks` (`number`, optional): Number of update ticks before unloading unused streamed gsplat resources. Defaults to 100.
        - `settings.render.gsplatDataFormat` (`string`, optional): Work buffer data format for gsplat rendering. One of the GSPLATDATA_* constants. Defaults to [GSPLATDATA_COMPACT](https://api.playcanvas.com/engine/variables/GSPLATDATA_COMPACT.md).
        - `settings.render.gsplatEnableIds` (`boolean`, optional): Enables per-component ID storage in the gsplat work buffer. Defaults to false.
        - `settings.render.gsplatFoveationCenter` (`number`, optional): Protected centre radius for foveated contribution culling. Defaults to 0.3.
        - `settings.render.gsplatFoveationStrength` (`number`, optional): Foveated contribution culling strength. Defaults to 0.
        - `settings.render.gsplatLodBehindPenalty` (`number`, optional): Multiplier applied to effective distance for gsplat nodes behind the camera. Defaults to 1.5.
        - `settings.render.gsplatLodUnderfillLimit` (`number`, optional): Maximum number of gsplat LOD levels allowed below the optimal level when optimal data is not resident. Defaults to 0.
        - `settings.render.gsplatLodUpdateAngle` (`number`, optional): Angle threshold in degrees to trigger gsplat LOD updates based on camera rotation. Defaults to 90.
        - `settings.render.gsplatLodUpdateDistance` (`number`, optional): Distance threshold in world units to trigger gsplat LOD updates. Defaults to 1.
        - `settings.render.gsplatMinContribution` (`number`, optional): Minimum visual contribution threshold for the compute gsplat renderer. Defaults to 3.
        - `settings.render.gsplatMinPixelSize` (`number`, optional): Minimum screen-space pixel size below which splats are discarded. Defaults to 2.
        - `settings.render.gsplatRadialSorting` (`boolean`, optional): Enables radial sorting of Gaussian splats. Defaults to false.
        - `settings.render.gsplatSplatBudget` (`number`, optional): Number of splats across all GSplats in the scene, used as set by `gsplatSplatBudgetMode`. 0 means no budget. Defaults to 1000000.
        - `settings.render.gsplatSplatBudgetMode` (`string`, optional): How the splat budget is used for streamed GSplats: 'target' (default) raises detail until the budget is used up; 'limit' lets the LOD distances of each GSplat decide the detail and only lowers it when they would exceed the budget.
        - `settings.render.gsplatUseFog` (`boolean`, optional): Whether to apply scene fog to Gaussian splats. Defaults to true.
        - `settings.render.gsplatUseTonemap` (`boolean`, optional): Whether to apply the camera's tonemapping and the
          scene exposure to Gaussian splats. Defaults to true.
        - `settings.render.lightingAreaLightsEnabled` (`boolean`, optional): If set to true, the clustered lighting will support area lights. Defaults to false.
        - `settings.render.lightingCells` (`number[]`, optional): Number of cells along each world space axis the space containing lights
          is subdivided into. Defaults to [10, 3, 10].

          Only lights with bakeDir=true will be used for generating the dominant light direction.
        - `settings.render.lightingCookieAtlasResolution` (`number`, optional): Resolution of the atlas texture storing all non-directional cookie textures. Defaults to 2048.
        - `settings.render.lightingCookiesEnabled` (`boolean`, optional): If set to true, the clustered lighting will support cookie textures. Defaults to false.
        - `settings.render.lightingMaxLights` (`number`, optional): Maximum number of lights the clustered lighting can use in a single
          frame. Keep this as low as the scene allows, as a larger value has a per-frame cost. The value is limited by the maximum
          texture size supported by the device. Defaults to 255.
        - `settings.render.lightingMaxLightsPerCell` (`number`, optional): Maximum number of lights a cell can store. Defaults to 255.
        - `settings.render.lightingShadowAtlasResolution` (`number`, optional): Resolution of the atlas texture storing all non-directional shadow textures. Defaults to 2048.
        - `settings.render.lightingShadowsEnabled` (`boolean`, optional): If set to true, the clustered lighting will support shadows. Defaults to true.
        - `settings.render.lightingShadowType` (`number`, optional): The type of shadow filtering used by all shadows. Can be:

          - [SHADOW_PCF1_32F](https://api.playcanvas.com/engine/variables/SHADOW_PCF1_32F.md)
          - [SHADOW_PCF3_32F](https://api.playcanvas.com/engine/variables/SHADOW_PCF3_32F.md)
          - [SHADOW_PCF5_32F](https://api.playcanvas.com/engine/variables/SHADOW_PCF5_32F.md)
          - [SHADOW_PCF1_16F](https://api.playcanvas.com/engine/variables/SHADOW_PCF1_16F.md)
          - [SHADOW_PCF3_16F](https://api.playcanvas.com/engine/variables/SHADOW_PCF3_16F.md)
          - [SHADOW_PCF5_16F](https://api.playcanvas.com/engine/variables/SHADOW_PCF5_16F.md)

          Defaults to [SHADOW_PCF3_32F](https://api.playcanvas.com/engine/variables/SHADOW_PCF3_32F.md).
        - `settings.render.lightmapFilterEnabled` (`boolean`, optional): Enables bilateral filter on runtime baked color lightmaps. Defaults to false.
        - `settings.render.lightmapFilterRange` (`number`, optional): Sets the range parameter of the bilateral filter. Defaults to 10.
        - `settings.render.lightmapFilterSmoothness` (`number`, optional): Sets the spatial parameter of the bilateral filter. Defaults to 0.2.
        - `settings.render.lightmapMaxResolution` (`number`): The maximum lightmap resolution.
        - `settings.render.lightmapMode` (`number`): The lightmap baking mode. Can be:

          - [BAKE_COLOR](https://api.playcanvas.com/engine/variables/BAKE_COLOR.md): single color lightmap
          - [BAKE_COLORDIR](https://api.playcanvas.com/engine/variables/BAKE_COLORDIR.md): single color lightmap + dominant light direction (used for bump/specular)
        - `settings.render.lightmapSizeMultiplier` (`number`): The lightmap resolution multiplier.
        - `settings.render.skybox` (`number | null`, optional): The asset ID of the cube map texture to be
          used as the scene's skybox. Defaults to null.
        - `settings.render.skyboxIntensity` (`number`, optional): Multiplier for skybox intensity. Defaults to 1.
        - `settings.render.skyboxLuminance` (`number`, optional): Lux (lm/m^2) value for skybox intensity when physical light units are enabled. Defaults to 20000.
        - `settings.render.skyboxMip` (`number`, optional): The mip level of the skybox to be displayed. Defaults to 0.
          Only valid for prefiltered cubemap skyboxes.
        - `settings.render.skyboxRotation` (`number[]`, optional): Rotation of skybox. Defaults to [0, 0, 0].
        - `settings.render.skyCenter` (`number[]`, optional): The center of the sky. Ignored for [SKYTYPE_INFINITE](https://api.playcanvas.com/engine/variables/SKYTYPE_INFINITE.md). Defaults to [0, 1, 0].
        - `settings.render.skyMeshPosition` (`number[]`, optional): The position of sky mesh. Ignored for [SKYTYPE_INFINITE](https://api.playcanvas.com/engine/variables/SKYTYPE_INFINITE.md). Defaults to [0, 0, 0].
        - `settings.render.skyMeshRotation` (`number[]`, optional): The rotation of sky mesh. Ignored for [SKYTYPE_INFINITE](https://api.playcanvas.com/engine/variables/SKYTYPE_INFINITE.md). Defaults to [0, 0, 0].
        - `settings.render.skyMeshScale` (`number[]`, optional): The scale of sky mesh. Ignored for [SKYTYPE_INFINITE](https://api.playcanvas.com/engine/variables/SKYTYPE_INFINITE.md). Defaults to [1, 1, 1].
        - `settings.render.skyType` (`string`, optional): The type of the sky. One of the SKYTYPE_* constants. Defaults to [SKYTYPE_INFINITE](https://api.playcanvas.com/engine/variables/SKYTYPE_INFINITE.md).
        - `settings.render.tonemapping` (`number`): The tonemapping transform to apply when
          writing fragments to the frame buffer. Can be:

          - [TONEMAP_LINEAR](https://api.playcanvas.com/engine/variables/TONEMAP_LINEAR.md)
          - [TONEMAP_FILMIC](https://api.playcanvas.com/engine/variables/TONEMAP_FILMIC.md)
          - [TONEMAP_HEJL](https://api.playcanvas.com/engine/variables/TONEMAP_HEJL.md)
          - [TONEMAP_ACES](https://api.playcanvas.com/engine/variables/TONEMAP_ACES.md)
          - [TONEMAP_ACES2](https://api.playcanvas.com/engine/variables/TONEMAP_ACES2.md)
          - [TONEMAP_NEUTRAL](https://api.playcanvas.com/engine/variables/TONEMAP_NEUTRAL.md)

**Example**

```ts
const settings = {
    physics: {
        gravity: [0, -9.8, 0]
    },
    render: {
        fog_end: 1000,
        tonemapping: 0,
        skybox: null,
        fog_density: 0.01,
        gamma_correction: 1,
        exposure: 1,
        fog_start: 1,
        global_ambient: [0, 0, 0],
        skyboxIntensity: 1,
        skyboxRotation: [0, 0, 0],
        fog_color: [0, 0, 0],
        lightmapMode: 1,
        fog: 'none',
        lightmapMaxResolution: 2048,
        skyboxMip: 2,
        lightmapSizeMultiplier: 16
    }
};
app.applySceneSettings(settings);
```

### configure

```ts
configure(url: string, callback: ConfigureAppCallback): void
```

Load the application configuration file and apply application properties and fill the asset
registry.

**Parameters**

- `url` (`string`): The URL of the configuration file to load.
- `callback` ([`ConfigureAppCallback`](https://api.playcanvas.com/engine/types/ConfigureAppCallback.md)): The Function called when the configuration file is
  loaded and parsed (or an error occurs).

### destroy

```ts
destroy(): void
```

Destroys application and removes all event listeners at the end of the current engine frame
update. However, if called outside of the engine frame update, calling destroy() will
destroy the application immediately.

**Example**

```ts
app.destroy();
```

### drawLine

```ts
drawLine(start: Vec3, end: Vec3, color?: Color, depthTest?: boolean, layer?: Layer): void
```

Draws a single line. Line start and end coordinates are specified in world space. The line
will be flat-shaded with the specified color.

**Parameters**

- `start` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The start world space coordinate of the line.
- `end` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)): The end world space coordinate of the line.
- `color` ([`Color`](https://api.playcanvas.com/engine/classes/Color.md), optional): The color of the line, specified in sRGB color space. It defaults
  to white if not specified.
- `depthTest` (`boolean`, optional): Specifies if the line is depth tested against the depth
  buffer. Defaults to true.
- `layer` ([`Layer`](https://api.playcanvas.com/engine/classes/Layer.md), optional): The layer to render the line into. Defaults to [LAYERID_IMMEDIATE](https://api.playcanvas.com/engine/variables/LAYERID_IMMEDIATE.md).

**Example**

```ts
// Render a 1-unit long white line
const start = new Vec3(0, 0, 0);
const end = new Vec3(1, 0, 0);
app.drawLine(start, end);
```

**Example**

```ts
// Render a 1-unit long red line which is not depth tested and renders on top of other geometry
const start = new Vec3(0, 0, 0);
const end = new Vec3(1, 0, 0);
app.drawLine(start, end, Color.RED, false);
```

**Example**

```ts
// Render a 1-unit long white line into the world layer
const start = new Vec3(0, 0, 0);
const end = new Vec3(1, 0, 0);
const worldLayer = app.scene.layers.getLayerById(LAYERID_WORLD);
app.drawLine(start, end, Color.WHITE, true, worldLayer);
```

### drawLineArrays

```ts
drawLineArrays(positions: number[], colors: number[] | Color, depthTest?: boolean, layer?: Layer): void
```

Renders an arbitrary number of discrete line segments. The lines are not connected by each
subsequent point in the array. Instead, they are individual segments specified by two
points.

**Parameters**

- `positions` (`number[]`): An array of points to draw lines between. Each point is
  represented by 3 numbers - x, y and z coordinate.
- `colors` (`number[] |` [`Color`](https://api.playcanvas.com/engine/classes/Color.md)): A single color for all lines, or an array of colors to color
  the lines. If an array is specified, the number of colors it stores must match the number
  of positions provided.
- `depthTest` (`boolean`, optional, default `true`): Specifies if the lines are depth tested against the depth
  buffer. Defaults to true.
- `layer` ([`Layer`](https://api.playcanvas.com/engine/classes/Layer.md), optional): The layer to render the lines into. Defaults to [LAYERID_IMMEDIATE](https://api.playcanvas.com/engine/variables/LAYERID_IMMEDIATE.md).

**Example**

```ts
// Render 2 discrete line segments
const points = [
    // Line 1
    0, 0, 0,
    1, 0, 0,
    // Line 2
    1, 1, 0,
    1, 1, 1
];
const colors = [
    // Line 1
    1, 0, 0, 1,  // red
    0, 1, 0, 1,  // green
    // Line 2
    0, 0, 1, 1,  // blue
    1, 1, 1, 1   // white
];
app.drawLineArrays(points, colors);
```

### drawLines

```ts
drawLines(positions: Vec3[], colors: Color | Color[], depthTest?: boolean, layer?: Layer): void
```

Renders an arbitrary number of discrete line segments. The lines are not connected by each
subsequent point in the array. Instead, they are individual segments specified by two
points. Therefore, the lengths of the supplied position and color arrays must be the same
and also must be a multiple of 2. The colors of the ends of each line segment will be
interpolated along the length of each line.

**Parameters**

- `positions` ([`Vec3`](https://api.playcanvas.com/engine/classes/Vec3.md)`[]`): An array of points to draw lines between. The length of the
  array must be a multiple of 2.
- `colors` ([`Color`](https://api.playcanvas.com/engine/classes/Color.md) `|` [`Color`](https://api.playcanvas.com/engine/classes/Color.md)`[]`): An array of colors or a single color. If an array is
  specified, this must be the same length as the position array. The length of the array
  must also be a multiple of 2.
- `depthTest` (`boolean`, optional, default `true`): Specifies if the lines are depth tested against the depth
  buffer. Defaults to true.
- `layer` ([`Layer`](https://api.playcanvas.com/engine/classes/Layer.md), optional): The layer to render the lines into. Defaults to [LAYERID_IMMEDIATE](https://api.playcanvas.com/engine/variables/LAYERID_IMMEDIATE.md).

**Example**

```ts
// Render a single line, with unique colors for each point
const start = new Vec3(0, 0, 0);
const end = new Vec3(1, 0, 0);
app.drawLines([start, end], [Color.RED, Color.WHITE]);
```

**Example**

```ts
// Render 2 discrete line segments
const points = [
    // Line 1
    new Vec3(0, 0, 0),
    new Vec3(1, 0, 0),
    // Line 2
    new Vec3(1, 1, 0),
    new Vec3(1, 1, 1)
];
const colors = [
    // Line 1
    Color.RED,
    Color.YELLOW,
    // Line 2
    Color.CYAN,
    Color.BLUE
];
app.drawLines(points, colors);
```

### init

```ts
init(appOptions: AppOptions): void
```

Initialize the app.

**Parameters**

- `appOptions` ([`AppOptions`](https://api.playcanvas.com/engine/classes/AppOptions.md)): Options specifying the init parameters for the app.

### isHidden

```ts
isHidden(): boolean
```

Queries the visibility of the window or tab in which the application is running.

**Returns** `boolean`: True if the application is not visible and false otherwise.

### preload

```ts
preload(callback: PreloadAppCallback): void
```

Load all assets in the asset registry that are marked as 'preload'.

Container-backed render assets wait for their referenced containers to be registered and
loaded. If a preloaded render asset's `data.containerAsset` refers to a container that is
never registered, this method never calls its callback or fires `preload:end`. Debug builds
warn when a render asset starts waiting for an unregistered container.

**Parameters**

- `callback` ([`PreloadAppCallback`](https://api.playcanvas.com/engine/types/PreloadAppCallback.md)): Function called when all assets are loaded.

### resizeCanvas

```ts
resizeCanvas(width?: number, height?: number): { height: number; width: number } | undefined
```

Resize the application's canvas element in line with the current fill mode.

- In [FILLMODE_KEEP_ASPECT](https://api.playcanvas.com/engine/variables/FILLMODE_KEEP_ASPECT.md) mode, the canvas will grow to fill the window as best it
can while maintaining the aspect ratio.
- In [FILLMODE_FILL_WINDOW](https://api.playcanvas.com/engine/variables/FILLMODE_FILL_WINDOW.md) mode, the canvas will simply fill the window, changing
aspect ratio.
- In [FILLMODE_NONE](https://api.playcanvas.com/engine/variables/FILLMODE_NONE.md) mode, the canvas will always match the size provided.

**Parameters**

- `width` (`number`, optional): The width of the canvas. Only used if current fill mode is [FILLMODE_NONE](https://api.playcanvas.com/engine/variables/FILLMODE_NONE.md).
- `height` (`number`, optional): The height of the canvas. Only used if current fill mode is [FILLMODE_NONE](https://api.playcanvas.com/engine/variables/FILLMODE_NONE.md).

**Returns** `{ height: number; width: number } | undefined`: An object containing the values
calculated to use as width and height, or `undefined` if resizing is not allowed or an XR
session is active.

### setAreaLightLuts

```ts
setAreaLightLuts(ltcMat1: number[], ltcMat2: number[]): void
```

Sets the area light LUT tables for this app.

**Parameters**

- `ltcMat1` (`number[]`): LUT table of type `array` to be set.
- `ltcMat2` (`number[]`): LUT table of type `array` to be set.

### setCanvasFillMode

```ts
setCanvasFillMode(mode: string, width?: number, height?: number): void
```

Controls how the canvas fills the window. The canvas is sized when this is called and on
every [AppBase#resizeCanvas](https://api.playcanvas.com/engine/classes/AppBase.md#resizecanvas); the engine installs no window `resize` listener of its
own, so call `resizeCanvas` from your own handler to keep the window-relative modes tracking
the window.

**Parameters**

- `mode` (`string`): The mode to use when setting the size of the canvas. Can be:

  - [FILLMODE_NONE](https://api.playcanvas.com/engine/variables/FILLMODE_NONE.md): the canvas will always match the size provided.
  - [FILLMODE_FILL_WINDOW](https://api.playcanvas.com/engine/variables/FILLMODE_FILL_WINDOW.md): the canvas will simply fill the window, changing aspect ratio.
  - [FILLMODE_KEEP_ASPECT](https://api.playcanvas.com/engine/variables/FILLMODE_KEEP_ASPECT.md): the canvas will grow to fill the window as best it can while
  maintaining the aspect ratio.
- `width` (`number`, optional): The width of the canvas (only used when mode is [FILLMODE_NONE](https://api.playcanvas.com/engine/variables/FILLMODE_NONE.md)).
- `height` (`number`, optional): The height of the canvas (only used when mode is [FILLMODE_NONE](https://api.playcanvas.com/engine/variables/FILLMODE_NONE.md)).

### setCanvasResolution

```ts
setCanvasResolution(mode: string, width?: number, height?: number): void
```

Change the resolution of the canvas, and set the way it behaves when the window is resized.

**Parameters**

- `mode` (`string`): The mode to use when setting the resolution. Can be:

  - [RESOLUTION_AUTO](https://api.playcanvas.com/engine/variables/RESOLUTION_AUTO.md): if width and height are not provided, canvas will be resized to
  match canvas client size.
  - [RESOLUTION_FIXED](https://api.playcanvas.com/engine/variables/RESOLUTION_FIXED.md): resolution of canvas will be fixed.
- `width` (`number`, optional): The horizontal resolution, optional in AUTO mode, if not provided
  canvas clientWidth is used.
- `height` (`number`, optional): The vertical resolution, optional in AUTO mode, if not provided
  canvas clientHeight is used.

### setSkybox

```ts
setSkybox(asset: Asset<string>): void
```

Sets the skybox asset to current scene, and subscribes to asset load/change events.

**Parameters**

- `asset` ([`Asset`](https://api.playcanvas.com/engine/classes/Asset.md)`<string>`): Asset of type `skybox` to be set to, or null to remove skybox.

### start

```ts
start(): void
```

Start the application. This function does the following:

1. Fires an event on the application named 'start'
2. Calls initialize for all components on entities in the hierarchy
3. Fires an event on the application named 'initialize'
4. Calls postInitialize for all components on entities in the hierarchy
5. Fires an event on the application named 'postinitialize'
6. Starts executing the main loop of the application

This function is called internally by PlayCanvas applications made in the Editor but you
will need to call start yourself if you are using the engine stand-alone.

The main loop is driven by `requestAnimationFrame`. Where that is unavailable, such as in
Node.js, no loop runs, so call [update](https://api.playcanvas.com/engine/classes/AppBase.md#update) yourself at the rate you need.

**Example**

```ts
app.start();
```

### update

```ts
update(dt: number): void
```

Update the application. This function will call the update functions and then the postUpdate
functions of all enabled components. It will then update the current state of all connected
input devices. This function is called internally in the application's main loop and does
not need to be called explicitly, except where there is no main loop, such as in Node.js.

**Parameters**

- `dt` (`number`): The time delta in seconds since the last frame.

**Example**

```ts
// run a Node.js server at 20 updates per second
setInterval(() => app.update(1 / 20), 50);
```

### updateCanvasSize

```ts
updateCanvasSize(): void
```

Updates the [GraphicsDevice](https://api.playcanvas.com/engine/classes/GraphicsDevice.md) canvas size to match the canvas size on the document
page. It is recommended to call this function when the canvas size changes (e.g on window
resize and orientation change events) so that the canvas resolution is immediately updated.

### getApplication

```ts
static getApplication(id?: string): AppBase | undefined
```

Get the current application. In the case where there are multiple running applications, the
function can get an application based on a supplied canvas id. This function is particularly
useful when the current Application is not readily available. For example, in the JavaScript
console of the browser's developer tools.

**Parameters**

- `id` (`string`, optional): If defined, the returned application should use the canvas which has
  this id. Otherwise current application will be returned.

**Returns** [`AppBase`](https://api.playcanvas.com/engine/classes/AppBase.md) `| undefined`: The running application, if any.

**Example**

```ts
const app = AppBase.getApplication();
```

## Inherited from [EventHandler](https://api.playcanvas.com/engine/classes/EventHandler.md)

- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`