UNPKG

playcanvas

Version:

PlayCanvas WebGL game engine

1,046 lines (1,045 loc) 41.8 kB
/** * Callback used by {@link AppBase#configure} when configuration file is loaded and parsed (or an * error occurs). */ export type ConfigureAppCallback = (err: string | null) => void; /** * Callback used by {@link AppBase#preload} when all assets (marked as 'preload') are loaded. */ export type PreloadAppCallback = () => void; /** * Callback used by {@link AppBase#start} and itself to request the rendering of a new animation * frame. */ export type MakeTickCallback = (timestamp?: number, frame?: XRFrame) => void; /** * @import { AppOptions } from './app-options.js' * @import { BatchManager } from '../scene/batching/batch-manager.js' * @import { ElementInput } from './input/element-input.js' * @import { GamePads } from '../platform/input/game-pads.js' * @import { GraphicsDevice } from '../platform/graphics/graphics-device.js' * @import { Keyboard } from '../platform/input/keyboard.js' * @import { Lightmapper } from './lightmapper/lightmapper.js' * @import { Material } from '../scene/materials/material.js' * @import { MeshInstance } from '../scene/mesh-instance.js' * @import { Mesh } from '../scene/mesh.js' * @import { Mouse } from '../platform/input/mouse.js' * @import { SoundManager } from '../platform/sound/manager.js' * @import { Texture } from '../platform/graphics/texture.js' * @import { TouchDevice } from '../platform/input/touch-device.js' * @import { XrManager } from './xr/xr-manager.js' */ /** * Callback used by {@link AppBase#configure} when configuration file is loaded and parsed (or an * error occurs). * * @callback ConfigureAppCallback * @param {string|null} err - The error message in the case where the loading or parsing fails. * @returns {void} */ /** * Callback used by {@link AppBase#preload} when all assets (marked as 'preload') are loaded. * * @callback PreloadAppCallback * @returns {void} */ /** * Callback used by {@link AppBase#start} and itself to request the rendering of a new animation * frame. * * @callback MakeTickCallback * @param {number} [timestamp] - The timestamp supplied by requestAnimationFrame. * @param {XRFrame} [frame] - XRFrame from requestAnimationFrame callback. * @returns {void} */ /** * Gets the current application, if any. * * @type {AppBase|null} * @ignore */ export let app: AppBase | null; /** * An Application represents and manages your PlayCanvas application. If you are developing using * the PlayCanvas Editor, the Application is created for you. You can access your Application * instance in your scripts. Below is a skeleton script which shows how you can access the * application 'app' property inside the initialize and update functions: * * ```javascript * // Editor example: accessing the pc.Application from a script * var MyScript = pc.createScript('myScript'); * * MyScript.prototype.initialize = function() { * // Every script instance has a property 'this.app' accessible in the initialize... * const app = this.app; * }; * * MyScript.prototype.update = function(dt) { * // ...and update functions. * const app = this.app; * }; * ``` * * If you are using the Engine without the Editor, you have to create the application instance * manually. */ export class AppBase extends EventHandler { static _applications: {}; /** * 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. * * @param {string} [id] - If defined, the returned application should use the canvas which has * this id. Otherwise current application will be returned. * @returns {AppBase|undefined} The running application, if any. * @example * const app = pc.AppBase.getApplication(); */ static getApplication(id?: string): AppBase | undefined; static cancelTick(app: any): void; /** * Create a new AppBase instance. * * @param {HTMLCanvasElement} canvas - The canvas element. * @example * // Engine-only example: create the application manually * const options = new AppOptions(); * const app = new pc.AppBase(canvas); * app.init(options); * * // Start the application's main loop * app.start(); */ constructor(canvas: HTMLCanvasElement); /** * The application's batch manager. * * @type {BatchManager|null} * @private */ private _batcher; /** @private */ private _destroyRequested; /** @private */ private _inFrameUpdate; /** @private */ private _librariesLoaded; /** @private */ private _fillMode; /** @private */ private _resolutionMode; /** @private */ private _allowResize; /** * @type {Asset|null} * @private */ private _skyboxAsset; /** * @type {SoundManager} * @private */ private _soundManager; /** @private */ private _visibilityChangeHandler; /** * Stores all entities that have been created for this app by guid. * * @type {Object<string, Entity>} * @ignore */ _entityIndex: { [x: string]: Entity; }; /** * @type {boolean} * @ignore */ _inTools: boolean; /** * @type {string} * @ignore */ _scriptPrefix: string; /** @ignore */ _time: number; /** * Set this to false if you want to run without using bundles. We set it to true only if * TextDecoder is available because we currently rely on it for untarring. * * @type {boolean} * @ignore */ enableBundles: boolean; /** * A request id returned by requestAnimationFrame, allowing us to cancel it. * * @ignore */ frameRequestId: any; /** * Scales the global time delta. Defaults to 1. * * @type {number} * @example * // Set the app to run at half speed * this.app.timeScale = 0.5; */ timeScale: number; /** * 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). * * @type {number} * @example * // Don't clamp inter-frame times of 200ms or less * this.app.maxDeltaTime = 0.2; */ maxDeltaTime: number; /** * The total number of frames the application has updated since start() was called. * * @type {number} * @ignore */ frame: number; /** * The frame graph. * * @type {FrameGraph} * @ignore */ frameGraph: FrameGraph; /** * The forward renderer. * * @type {ForwardRenderer} * @ignore */ renderer: ForwardRenderer; /** * Scripts in order of loading first. * * @type {string[]} */ scriptsOrder: string[]; /** * The application's performance stats. * * @type {ApplicationStats} * @ignore */ stats: ApplicationStats; /** * 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. * * @type {boolean} * @example * // 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; * }); */ autoRender: boolean; /** * Set to true to render the scene on the next iteration of the main loop. This only has an * effect if {@link AppBase#autoRender} is set to false. The value of renderNextFrame is set * back to false again as soon as the scene has been rendered. * * @type {boolean} * @example * // Render the scene only while space key is pressed * if (this.app.keyboard.isPressed(pc.KEY_SPACE)) { * this.app.renderNextFrame = true; * } */ renderNextFrame: boolean; /** * The graphics device used by the application. * * @type {GraphicsDevice} */ graphicsDevice: GraphicsDevice; /** * The root entity of the application. * * @type {Entity} * @example * // Return the first entity called 'Camera' in a depth-first search of the scene hierarchy * const camera = this.app.root.findByName('Camera'); */ root: Entity; /** * The scene managed by the application. * * @type {Scene} * @example * // Set the fog type property of the application's scene * this.app.scene.fog.type = pc.FOG_LINEAR; */ scene: Scene; /** * The run-time lightmapper. * * @type {Lightmapper|null} */ lightmapper: Lightmapper | null; /** * The resource loader. * * @type {ResourceLoader} */ loader: ResourceLoader; /** * The asset registry managed by the application. * * @type {AssetRegistry} * @example * // Search the asset registry for all assets with the tag 'vehicle' * const vehicleAssets = this.app.assets.findByTag('vehicle'); */ assets: AssetRegistry; /** * The bundle registry managed by the application. * * @type {BundleRegistry} * @ignore */ bundles: BundleRegistry; /** * The scene registry managed by the application. * * @type {SceneRegistry} * @example * // 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); */ scenes: SceneRegistry; /** * The application's script registry. * * @type {ScriptRegistry} */ scripts: ScriptRegistry; /** * The application's component system registry. * * @type {ComponentSystemRegistry} * @example * // Set global gravity to zero * this.app.systems.rigidbody.gravity.set(0, 0, 0); * @example * // Set the global sound volume to 50% * this.app.systems.sound.volume = 0.5; */ systems: ComponentSystemRegistry; /** * Handles localization. * * @type {I18n} */ i18n: I18n; /** * The keyboard device. * * @type {Keyboard|null} */ keyboard: Keyboard | null; /** * The mouse device. * * @type {Mouse|null} */ mouse: Mouse | null; /** * Used to get touch events input. * * @type {TouchDevice|null} */ touch: TouchDevice | null; /** * Used to access GamePad input. * * @type {GamePads|null} */ gamepads: GamePads | null; /** * Used to handle input for {@link ElementComponent}s. * * @type {ElementInput|null} */ elementInput: ElementInput | null; /** * The XR Manager that provides ability to start VR/AR sessions. * * @type {XrManager|null} * @example * // check if VR is available * if (app.xr.isAvailable(pc.XRTYPE_VR)) { * // VR is available * } */ xr: XrManager | null; /** * Initialize the app. * * @param {AppOptions} appOptions - Options specifying the init parameters for the app. */ init(appOptions: AppOptions): void; defaultLayerWorld: Layer; defaultLayerDepth: Layer; defaultLayerSkybox: Layer; defaultLayerUi: Layer; defaultLayerImmediate: Layer; _hiddenAttr: string; tick: MakeTickCallback; /** @private */ private _initDefaultMaterial; /** @private */ private _initProgramLibrary; /** * @type {SoundManager} * @ignore */ get soundManager(): 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(): BatchManager; /** * The current fill mode of the canvas. Can be: * * - {@link FILLMODE_NONE}: the canvas will always match the size provided. * - {@link FILLMODE_FILL_WINDOW}: the canvas will simply fill the window, changing aspect ratio. * - {@link FILLMODE_KEEP_ASPECT}: the canvas will grow to fill the window as best it can while * maintaining the aspect ratio. * * @type {string} */ get fillMode(): string; /** * The current resolution mode of the canvas, Can be: * * - {@link RESOLUTION_AUTO}: if width and height are not provided, canvas will be resized to * match canvas client size. * - {@link RESOLUTION_FIXED}: resolution of canvas will be fixed. * * @type {string} */ get resolutionMode(): string; /** * Load the application configuration file and apply application properties and fill the asset * registry. * * @param {string} url - The URL of the configuration file to load. * @param {ConfigureAppCallback} callback - The Function called when the configuration file is * loaded and parsed (or an error occurs). */ configure(url: string, callback: ConfigureAppCallback): void; /** * Load all assets in the asset registry that are marked as 'preload'. * * @param {PreloadAppCallback} callback - Function called when all assets are loaded. */ preload(callback: PreloadAppCallback): void; _preloadScripts(sceneData: any, callback: any): void; _parseApplicationProperties(props: any, callback: any): void; _width: any; _height: any; /** * @param {string[]} urls - List of URLs to load. * @param {Function} callback - Callback function. * @private */ private _loadLibraries; /** * Insert scene name/urls into the registry. * * @param {*} scenes - Scenes to add to the scene registry. * @private */ private _parseScenes; /** * Insert assets into registry. * * @param {*} assets - Assets to insert. * @private */ private _parseAssets; /** * 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. * * @example * app.start(); */ start(): void; _alreadyStarted: boolean; /** * Update all input devices managed by the application. * * @param {number} dt - The time in seconds since the last update. * @private */ private inputUpdate; /** * 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. * * @param {number} dt - The time delta in seconds since the last frame. */ update(dt: number): void; frameStart(): void; frameEnd(): void; /** * Render the application's scene. More specifically, the scene's {@link LayerComposition} is * rendered. This function is called internally in the application's main loop and does not * need to be called explicitly. * * @ignore */ render(): void; renderComposition(layerComposition: any): void; /** * @param {number} now - The timestamp passed to the requestAnimationFrame callback. * @param {number} dt - The time delta in seconds since the last frame. This is subject to the * application's time scale and max delta values. * @param {number} ms - The time in milliseconds since the last frame. * @private */ private _fillFrameStatsBasic; /** @private */ private _fillFrameStats; /** * Controls how the canvas fills the window and resizes when the window changes. * * @param {string} mode - The mode to use when setting the size of the canvas. Can be: * * - {@link FILLMODE_NONE}: the canvas will always match the size provided. * - {@link FILLMODE_FILL_WINDOW}: the canvas will simply fill the window, changing aspect ratio. * - {@link FILLMODE_KEEP_ASPECT}: the canvas will grow to fill the window as best it can while * maintaining the aspect ratio. * * @param {number} [width] - The width of the canvas (only used when mode is {@link FILLMODE_NONE}). * @param {number} [height] - The height of the canvas (only used when mode is {@link FILLMODE_NONE}). */ setCanvasFillMode(mode: string, width?: number, height?: number): void; /** * Change the resolution of the canvas, and set the way it behaves when the window is resized. * * @param {string} mode - The mode to use when setting the resolution. Can be: * * - {@link RESOLUTION_AUTO}: if width and height are not provided, canvas will be resized to * match canvas client size. * - {@link RESOLUTION_FIXED}: resolution of canvas will be fixed. * * @param {number} [width] - The horizontal resolution, optional in AUTO mode, if not provided * canvas clientWidth is used. * @param {number} [height] - The vertical resolution, optional in AUTO mode, if not provided * canvas clientHeight is used. */ setCanvasResolution(mode: string, width?: number, height?: number): void; /** * 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. */ isHidden(): boolean; /** * Called when the visibility state of the current tab/window changes. * * @private */ private onVisibilityChange; /** * Resize the application's canvas element in line with the current fill mode. * * - In {@link FILLMODE_KEEP_ASPECT} mode, the canvas will grow to fill the window as best it * can while maintaining the aspect ratio. * - In {@link FILLMODE_FILL_WINDOW} mode, the canvas will simply fill the window, changing * aspect ratio. * - In {@link FILLMODE_NONE} mode, the canvas will always match the size provided. * * @param {number} [width] - The width of the canvas. Only used if current fill mode is {@link FILLMODE_NONE}. * @param {number} [height] - The height of the canvas. Only used if current fill mode is {@link FILLMODE_NONE}. * @returns {object} A object containing the values calculated to use as width and height. */ resizeCanvas(width?: number, height?: number): object; /** * Updates the {@link GraphicsDevice} 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. */ updateCanvasSize(): void; /** * Event handler called when all code libraries have been loaded. Code libraries are passed * into the constructor of the Application and the application won't start running or load * packs until all libraries have been loaded. * * @private */ private onLibrariesLoaded; /** * Apply scene settings to the current scene. Useful when your scene settings are parsed or * generated from a non-URL source. * * @param {object} settings - The scene settings to be applied. * @param {object} settings.physics - The physics settings to be applied. * @param {number[]} settings.physics.gravity - 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 ]. * @param {object} settings.render - The rendering settings to be applied. * @param {number[]} settings.render.global_ambient - 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 ]. * @param {string} settings.render.fog - The type of fog used by the scene. Can be: * * - {@link FOG_NONE} * - {@link FOG_LINEAR} * - {@link FOG_EXP} * - {@link FOG_EXP2} * * @param {number[]} settings.render.fog_color - 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 ]. * @param {number} settings.render.fog_density - The density of the fog (if enabled). This * property is only valid if the fog property is set to {@link FOG_EXP} or {@link FOG_EXP2}. * @param {number} settings.render.fog_start - The distance from the viewpoint where linear fog * begins. This property is only valid if the fog property is set to {@link FOG_LINEAR}. * @param {number} settings.render.fog_end - The distance from the viewpoint where linear fog * reaches its maximum. This property is only valid if the fog property is set to {@link FOG_LINEAR}. * @param {number} settings.render.gamma_correction - The gamma correction to apply when * rendering the scene. Can be: * * - {@link GAMMA_NONE} * - {@link GAMMA_SRGB} * * @param {number} settings.render.tonemapping - The tonemapping transform to apply when * writing fragments to the frame buffer. Can be: * * - {@link TONEMAP_LINEAR} * - {@link TONEMAP_FILMIC} * - {@link TONEMAP_HEJL} * - {@link TONEMAP_ACES} * - {@link TONEMAP_ACES2} * - {@link TONEMAP_NEUTRAL} * * @param {number} settings.render.exposure - The exposure value tweaks the overall brightness * of the scene. * @param {number|null} [settings.render.skybox] - The asset ID of the cube map texture to be * used as the scene's skybox. Defaults to null. * @param {number} settings.render.skyboxIntensity - Multiplier for skybox intensity. * @param {number} settings.render.skyboxLuminance - Lux (lm/m^2) value for skybox intensity when physical light units are enabled. * @param {number} settings.render.skyboxMip - The mip level of the skybox to be displayed. * Only valid for prefiltered cubemap skyboxes. * @param {number[]} settings.render.skyboxRotation - Rotation of skybox. * @param {number} settings.render.lightmapSizeMultiplier - The lightmap resolution multiplier. * @param {number} settings.render.lightmapMaxResolution - The maximum lightmap resolution. * @param {number} settings.render.lightmapMode - The lightmap baking mode. Can be: * * - {@link BAKE_COLOR}: single color lightmap * - {@link BAKE_COLORDIR}: single color lightmap + dominant light direction (used for bump/specular) * * @param {boolean} settings.render.ambientBake - Enable baking ambient light into lightmaps. * @param {number} settings.render.ambientBakeNumSamples - Number of samples to use when baking ambient light. * @param {number} settings.render.ambientBakeSpherePart - How much of the sphere to include when baking ambient light. * @param {number} settings.render.ambientBakeOcclusionBrightness - Brightness of the baked ambient occlusion. * @param {number} settings.render.ambientBakeOcclusionContrast - Contrast of the baked ambient occlusion. * @param {number} settings.render.ambientLuminance - Lux (lm/m^2) value for ambient light intensity. * * @param {boolean} settings.render.clusteredLightingEnabled - Enable clustered lighting. * @param {boolean} settings.render.lightingShadowsEnabled - If set to true, the clustered lighting will support shadows. * @param {boolean} settings.render.lightingCookiesEnabled - If set to true, the clustered lighting will support cookie textures. * @param {boolean} settings.render.lightingAreaLightsEnabled - If set to true, the clustered lighting will support area lights. * @param {number} settings.render.lightingShadowAtlasResolution - Resolution of the atlas texture storing all non-directional shadow textures. * @param {number} settings.render.lightingCookieAtlasResolution - Resolution of the atlas texture storing all non-directional cookie textures. * @param {number} settings.render.lightingMaxLightsPerCell - Maximum number of lights a cell can store. * @param {number} settings.render.lightingShadowType - The type of shadow filtering used by all shadows. Can be: * * - {@link SHADOW_PCF1_32F} * - {@link SHADOW_PCF3_32F} * - {@link SHADOW_PCF5_32F} * - {@link SHADOW_PCF1_16F} * - {@link SHADOW_PCF3_16F} * - {@link SHADOW_PCF5_16F} * * @param {Vec3} settings.render.lightingCells - Number of cells along each world space axis the space containing lights * is subdivided into. * * Only lights with bakeDir=true will be used for generating the dominant light direction. * @example * * 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); */ applySceneSettings(settings: { physics: { gravity: number[]; }; render: { global_ambient: number[]; fog: string; fog_color: number[]; fog_density: number; fog_start: number; fog_end: number; gamma_correction: number; tonemapping: number; exposure: number; skybox?: number | null; skyboxIntensity: number; skyboxLuminance: number; skyboxMip: number; skyboxRotation: number[]; lightmapSizeMultiplier: number; lightmapMaxResolution: number; lightmapMode: number; ambientBake: boolean; ambientBakeNumSamples: number; ambientBakeSpherePart: number; ambientBakeOcclusionBrightness: number; ambientBakeOcclusionContrast: number; ambientLuminance: number; clusteredLightingEnabled: boolean; lightingShadowsEnabled: boolean; lightingCookiesEnabled: boolean; lightingAreaLightsEnabled: boolean; lightingShadowAtlasResolution: number; lightingCookieAtlasResolution: number; lightingMaxLightsPerCell: number; lightingShadowType: number; lightingCells: Vec3; }; }): void; /** * Sets the area light LUT tables for this app. * * @param {number[]} ltcMat1 - LUT table of type `array` to be set. * @param {number[]} ltcMat2 - LUT table of type `array` to be set. */ setAreaLightLuts(ltcMat1: number[], ltcMat2: number[]): void; /** * Sets the skybox asset to current scene, and subscribes to asset load/change events. * * @param {Asset} asset - Asset of type `skybox` to be set to, or null to remove skybox. */ setSkybox(asset: Asset): void; /** @private */ private _firstBake; /** @private */ private _firstBatch; /** * Provide an opportunity to modify the timestamp supplied by requestAnimationFrame. * * @param {number} [timestamp] - The timestamp supplied by requestAnimationFrame. * @returns {number|undefined} The modified timestamp. * @ignore */ _processTimestamp(timestamp?: number): number | undefined; /** * Draws a single line. Line start and end coordinates are specified in world space. The line * will be flat-shaded with the specified color. * * @param {Vec3} start - The start world space coordinate of the line. * @param {Vec3} end - The end world space coordinate of the line. * @param {Color} [color] - The color of the line. It defaults to white if not specified. * @param {boolean} [depthTest] - Specifies if the line is depth tested against the depth * buffer. Defaults to true. * @param {Layer} [layer] - The layer to render the line into. Defaults to {@link LAYERID_IMMEDIATE}. * @example * // Render a 1-unit long white line * const start = new pc.Vec3(0, 0, 0); * const end = new pc.Vec3(1, 0, 0); * app.drawLine(start, end); * @example * // Render a 1-unit long red line which is not depth tested and renders on top of other geometry * const start = new pc.Vec3(0, 0, 0); * const end = new pc.Vec3(1, 0, 0); * app.drawLine(start, end, pc.Color.RED, false); * @example * // Render a 1-unit long white line into the world layer * const start = new pc.Vec3(0, 0, 0); * const end = new pc.Vec3(1, 0, 0); * const worldLayer = app.scene.layers.getLayerById(pc.LAYERID_WORLD); * app.drawLine(start, end, pc.Color.WHITE, true, worldLayer); */ drawLine(start: Vec3, end: Vec3, 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. * * @param {Vec3[]} positions - An array of points to draw lines between. The length of the * array must be a multiple of 2. * @param {Color[] | Color} colors - 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. * @param {boolean} [depthTest] - Specifies if the lines are depth tested against the depth * buffer. Defaults to true. * @param {Layer} [layer] - The layer to render the lines into. Defaults to {@link LAYERID_IMMEDIATE}. * @example * // Render a single line, with unique colors for each point * const start = new pc.Vec3(0, 0, 0); * const end = new pc.Vec3(1, 0, 0); * app.drawLines([start, end], [pc.Color.RED, pc.Color.WHITE]); * @example * // Render 2 discrete line segments * const points = [ * // Line 1 * new pc.Vec3(0, 0, 0), * new pc.Vec3(1, 0, 0), * // Line 2 * new pc.Vec3(1, 1, 0), * new pc.Vec3(1, 1, 1) * ]; * const colors = [ * // Line 1 * pc.Color.RED, * pc.Color.YELLOW, * // Line 2 * pc.Color.CYAN, * pc.Color.BLUE * ]; * app.drawLines(points, colors); */ 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. * * @param {number[]} positions - An array of points to draw lines between. Each point is * represented by 3 numbers - x, y and z coordinate. * @param {number[]|Color} colors - A single color for all lines, or an array of colors to color * the lines. If an array is specified, number of colors it stores must match the number of * positions provided. * @param {boolean} [depthTest] - Specifies if the lines are depth tested against the depth * buffer. Defaults to true. * @param {Layer} [layer] - The layer to render the lines into. Defaults to {@link LAYERID_IMMEDIATE}. * @example * // 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); */ drawLineArrays(positions: number[], colors: number[] | Color, depthTest?: boolean, layer?: Layer): void; /** * Draws a wireframe sphere with center, radius and color. * * @param {Vec3} center - The center of the sphere. * @param {number} radius - The radius of the sphere. * @param {Color} [color] - The color of the sphere. It defaults to white if not specified. * @param {number} [segments] - Number of line segments used to render the circles forming the * sphere. Defaults to 20. * @param {boolean} [depthTest] - Specifies if the sphere lines are depth tested against the * depth buffer. Defaults to true. * @param {Layer} [layer] - The layer to render the sphere into. Defaults to {@link LAYERID_IMMEDIATE}. * @example * // Render a red wire sphere with radius of 1 * const center = new pc.Vec3(0, 0, 0); * app.drawWireSphere(center, 1.0, pc.Color.RED); * @ignore */ drawWireSphere(center: Vec3, radius: number, color?: Color, segments?: number, depthTest?: boolean, layer?: Layer): void; /** * Draws a wireframe axis aligned box specified by min and max points and color. * * @param {Vec3} minPoint - The min corner point of the box. * @param {Vec3} maxPoint - The max corner point of the box. * @param {Color} [color] - The color of the sphere. It defaults to white if not specified. * @param {boolean} [depthTest] - Specifies if the sphere lines are depth tested against the * depth buffer. Defaults to true. * @param {Layer} [layer] - The layer to render the sphere into. Defaults to {@link LAYERID_IMMEDIATE}. * @param {Mat4} [mat] - Matrix to transform the box before rendering. * @example * // Render a red wire aligned box * const min = new pc.Vec3(-1, -1, -1); * const max = new pc.Vec3(1, 1, 1); * app.drawWireAlignedBox(min, max, pc.Color.RED); * @ignore */ drawWireAlignedBox(minPoint: Vec3, maxPoint: Vec3, color?: Color, depthTest?: boolean, layer?: Layer, mat?: Mat4): void; /** * Draw meshInstance at this frame * * @param {MeshInstance} meshInstance - The mesh instance * to draw. * @param {Layer} [layer] - The layer to render the mesh instance into. Defaults to * {@link LAYERID_IMMEDIATE}. * @ignore */ drawMeshInstance(meshInstance: MeshInstance, layer?: Layer): void; /** * Draw mesh at this frame. * * @param {Mesh} mesh - The mesh to draw. * @param {Material} material - The material to use to render the mesh. * @param {Mat4} matrix - The matrix to use to render the mesh. * @param {Layer} [layer] - The layer to render the mesh into. Defaults to {@link LAYERID_IMMEDIATE}. * @ignore */ drawMesh(mesh: Mesh, material: Material, matrix: Mat4, layer?: Layer): void; /** * Draw quad of size [-0.5, 0.5] at this frame. * * @param {Mat4} matrix - The matrix to use to render the quad. * @param {Material} material - The material to use to render the quad. * @param {Layer} [layer] - The layer to render the quad into. Defaults to {@link LAYERID_IMMEDIATE}. * @ignore */ drawQuad(matrix: Mat4, material: Material, layer?: Layer): void; /** * Draws a texture at [x, y] position on screen, with size [width, height]. The origin of the * screen is top-left [0, 0]. Coordinates and sizes are in projected space (-1 .. 1). * * @param {number} x - The x coordinate on the screen of the top left corner of the texture. * Should be in the range [-1, 1]. * @param {number} y - The y coordinate on the screen of the top left corner of the texture. * Should be in the range [-1, 1]. * @param {number} width - The width of the rectangle of the rendered texture. Should be in the * range [0, 2]. * @param {number} height - The height of the rectangle of the rendered texture. Should be in * the range [0, 2]. * @param {Texture} texture - The texture to render. * @param {Material} material - The material used when rendering the texture. * @param {Layer} [layer] - The layer to render the texture into. Defaults to {@link LAYERID_IMMEDIATE}. * @param {boolean} [filterable] - Indicate if the texture can be sampled using filtering. * Passing false uses unfiltered sampling, allowing a depth texture to be sampled on WebGPU. * Defaults to true. * @ignore */ drawTexture(x: number, y: number, width: number, height: number, texture: Texture, material: Material, layer?: Layer, filterable?: boolean): void; /** * Draws a depth texture at [x, y] position on screen, with size [width, height]. The origin of * the screen is top-left [0, 0]. Coordinates and sizes are in projected space (-1 .. 1). * * @param {number} x - The x coordinate on the screen of the top left corner of the texture. * Should be in the range [-1, 1]. * @param {number} y - The y coordinate on the screen of the top left corner of the texture. * Should be in the range [-1, 1]. * @param {number} width - The width of the rectangle of the rendered texture. Should be in the * range [0, 2]. * @param {number} height - The height of the rectangle of the rendered texture. Should be in * the range [0, 2]. * @param {Layer} [layer] - The layer to render the texture into. Defaults to {@link LAYERID_IMMEDIATE}. * @ignore */ drawDepthTexture(x: number, y: number, width: number, height: number, layer?: Layer): 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 * app.destroy(); */ destroy(): void; controller: any; context: any; /** * Get entity from the index by guid. * * @param {string} guid - The GUID to search for. * @returns {Entity} The Entity with the GUID or null. * @ignore */ getEntityFromIndex(guid: string): Entity; /** * @param {Scene} scene - The scene. * @private */ private _registerSceneImmediate; } import { EventHandler } from '../core/event-handler.js'; import { Entity } from './entity.js'; import { FrameGraph } from '../scene/frame-graph.js'; import { ForwardRenderer } from '../scene/renderer/forward-renderer.js'; import { ApplicationStats } from './stats.js'; import type { GraphicsDevice } from '../platform/graphics/graphics-device.js'; import { Scene } from '../scene/scene.js'; import type { Lightmapper } from './lightmapper/lightmapper.js'; import { ResourceLoader } from './handlers/loader.js'; import { AssetRegistry } from './asset/asset-registry.js'; import { BundleRegistry } from './bundle/bundle-registry.js'; import { SceneRegistry } from './scene-registry.js'; import { ScriptRegistry } from './script/script-registry.js'; import { ComponentSystemRegistry } from './components/registry.js'; import { I18n } from './i18n/i18n.js'; import type { Keyboard } from '../platform/input/keyboard.js'; import type { Mouse } from '../platform/input/mouse.js'; import type { TouchDevice } from '../platform/input/touch-device.js'; import type { GamePads } from '../platform/input/game-pads.js'; import type { ElementInput } from './input/element-input.js'; import type { XrManager } from './xr/xr-manager.js'; import type { AppOptions } from './app-options.js'; import { Layer } from '../scene/layer.js'; import type { SoundManager } from '../platform/sound/manager.js'; import type { BatchManager } from '../scene/batching/batch-manager.js'; import { Vec3 } from '../core/math/vec3.js'; import { Asset } from './asset/asset.js'; import { Color } from '../core/math/color.js'; import { Mat4 } from '../core/math/mat4.js'; import type { MeshInstance } from '../scene/mesh-instance.js'; import type { Mesh } from '../scene/mesh.js'; import type { Material } from '../scene/materials/material.js'; import type { Texture } from '../platform/graphics/texture.js';