@aidinabedi/playcanvas

<!doctype html> <html lang="en"> <head> <title>pc.Application | PlayCanvas API Reference</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/png" href="images/playcanvas-favicon.png"> <link href="styles/styles.css" rel="stylesheet"> <link href="styles/playcanvas-theme.css" rel="stylesheet"> <script src="scripts/interface.js"></script> <script src="scripts/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> </head> <body> <header> <nav class="header-width"> <a href="/" class="header-title"><img src="images/playcanvas-manual.png"></a> <ul class="header-menu"> <li class="user-manual"><a href="https://developer.playcanvas.com/en/user-manual/">User Manual</a></li> <li class="tutorials"><a href="https://developer.playcanvas.com/en/tutorials">Tutorials</a></li> <li class="forum"><a href="https://forum.playcanvas.com/" target="_blank">Forum</a></li> <li class="api active"><a href="/api/">API Reference</a></li> </ul> </nav> <div class="header-content header-page header-width"> <h1><span class="font-icon"></span>API Reference</h1> <input id="search" class="search" type="text" placeholder="Search"></input> </div> </header> <div class="container content-width"> <nav class="sidebar"> <div class="sidebarFilter"> <input id="filter-input" type="text" placeholder="Filter"> </div> <ul> <li id="nav-pc"><a href="pc.html">pc</a></li> <li id="nav-pc.callbacks"><a href="pc.callbacks.html">pc.callbacks</a></li> <li id="nav-pc.guid"><a href="pc.guid.html">pc.guid</a></li> <li id="nav-pc.math"><a href="pc.math.html">pc.math</a></li> <li id="nav-pc.path"><a href="pc.path.html">pc.path</a></li> <li id="nav-pc.platform"><a href="pc.platform.html">pc.platform</a></li> <li id="nav-pc.script"><a href="pc.script.html">pc.script</a></li> <li id="nav-pc.string"><a href="pc.string.html">pc.string</a></li> <li id="nav-pc.Animation"><a href="pc.Animation.html">Animation</a></li> <li id="nav-pc.AnimationComponent"><a href="pc.AnimationComponent.html">AnimationComponent</a></li> <li id="nav-pc.AnimationComponentSystem"><a href="pc.AnimationComponentSystem.html">AnimationComponentSystem</a></li> <li id="nav-pc.AnimationHandler"><a href="pc.AnimationHandler.html">AnimationHandler</a></li> <li id="nav-pc.AnimCache"><a href="pc.AnimCache.html">AnimCache</a></li> <li id="nav-pc.AnimClip"><a href="pc.AnimClip.html">AnimClip</a></li> <li id="nav-pc.AnimController"><a href="pc.AnimController.html">AnimController</a></li> <li id="nav-pc.AnimCurve"><a href="pc.AnimCurve.html">AnimCurve</a></li> <li id="nav-pc.AnimData"><a href="pc.AnimData.html">AnimData</a></li> <li id="nav-pc.AnimSnapshot"><a href="pc.AnimSnapshot.html">AnimSnapshot</a></li> <li id="nav-pc.AnimTarget"><a href="pc.AnimTarget.html">AnimTarget</a></li> <li id="nav-pc.AnimTrack"><a href="pc.AnimTrack.html">AnimTrack</a></li> <li id="nav-pc.Application"><a href="pc.Application.html">Application</a></li> <li id="nav-pc.Asset"><a href="pc.Asset.html">Asset</a></li> <li id="nav-pc.AssetReference"><a href="pc.AssetReference.html">AssetReference</a></li> <li id="nav-pc.AssetRegistry"><a href="pc.AssetRegistry.html">AssetRegistry</a></li> <li id="nav-pc.AudioHandler"><a href="pc.AudioHandler.html">AudioHandler</a></li> <li id="nav-pc.AudioListenerComponent"><a href="pc.AudioListenerComponent.html">AudioListenerComponent</a></li> <li id="nav-pc.AudioListenerComponentSystem"><a href="pc.AudioListenerComponentSystem.html">AudioListenerComponentSystem</a></li> <li id="nav-pc.BasicMaterial"><a href="pc.BasicMaterial.html">BasicMaterial</a></li> <li id="nav-pc.Batch"><a href="pc.Batch.html">Batch</a></li> <li id="nav-pc.BatchGroup"><a href="pc.BatchGroup.html">BatchGroup</a></li> <li id="nav-pc.BatchManager"><a href="pc.BatchManager.html">BatchManager</a></li> <li id="nav-pc.BoundingBox"><a href="pc.BoundingBox.html">BoundingBox</a></li> <li id="nav-pc.BoundingSphere"><a href="pc.BoundingSphere.html">BoundingSphere</a></li> <li id="nav-pc.ButtonComponent"><a href="pc.ButtonComponent.html">ButtonComponent</a></li> <li id="nav-pc.ButtonComponentSystem"><a href="pc.ButtonComponentSystem.html">ButtonComponentSystem</a></li> <li id="nav-pc.CameraComponent"><a href="pc.CameraComponent.html">CameraComponent</a></li> <li id="nav-pc.CameraComponentSystem"><a href="pc.CameraComponentSystem.html">CameraComponentSystem</a></li> <li id="nav-pc.CollisionComponent"><a href="pc.CollisionComponent.html">CollisionComponent</a></li> <li id="nav-pc.CollisionComponentSystem"><a href="pc.CollisionComponentSystem.html">CollisionComponentSystem</a></li> <li id="nav-pc.Color"><a href="pc.Color.html">Color</a></li> <li id="nav-pc.Component"><a href="pc.Component.html">Component</a></li> <li id="nav-pc.ComponentSystem"><a href="pc.ComponentSystem.html">ComponentSystem</a></li> <li id="nav-pc.ComponentSystemRegistry"><a href="pc.ComponentSystemRegistry.html">ComponentSystemRegistry</a></li> <li id="nav-pc.ContactPoint"><a href="pc.ContactPoint.html">ContactPoint</a></li> <li id="nav-pc.ContactResult"><a href="pc.ContactResult.html">ContactResult</a></li> <li id="nav-pc.ContainerHandler"><a href="pc.ContainerHandler.html">ContainerHandler</a></li> <li id="nav-pc.ContainerResource"><a href="pc.ContainerResource.html">ContainerResource</a></li> <li id="nav-pc.Controller"><a href="pc.Controller.html">Controller</a></li> <li id="nav-pc.CubemapHandler"><a href="pc.CubemapHandler.html">CubemapHandler</a></li> <li id="nav-pc.Curve"><a href="pc.Curve.html">Curve</a></li> <li id="nav-pc.CurveSet"><a href="pc.CurveSet.html">CurveSet</a></li> <li id="nav-pc.ElementComponent"><a href="pc.ElementComponent.html">ElementComponent</a></li> <li id="nav-pc.ElementComponentSystem"><a href="pc.ElementComponentSystem.html">ElementComponentSystem</a></li> <li id="nav-pc.ElementDragHelper"><a href="pc.ElementDragHelper.html">ElementDragHelper</a></li> <li id="nav-pc.ElementInput"><a href="pc.ElementInput.html">ElementInput</a></li> <li id="nav-pc.ElementInputEvent"><a href="pc.ElementInputEvent.html">ElementInputEvent</a></li> <li id="nav-pc.ElementMouseEvent"><a href="pc.ElementMouseEvent.html">ElementMouseEvent</a></li> <li id="nav-pc.ElementTouchEvent"><a href="pc.ElementTouchEvent.html">ElementTouchEvent</a></li> <li id="nav-pc.Entity"><a href="pc.Entity.html">Entity</a></li> <li id="nav-pc.EventHandler"><a href="pc.EventHandler.html">EventHandler</a></li> <li id="nav-pc.Font"><a href="pc.Font.html">Font</a></li> <li id="nav-pc.FontHandler"><a href="pc.FontHandler.html">FontHandler</a></li> <li id="nav-pc.ForwardRenderer"><a href="pc.ForwardRenderer.html">ForwardRenderer</a></li> <li id="nav-pc.Frustum"><a href="pc.Frustum.html">Frustum</a></li> <li id="nav-pc.GamePads"><a href="pc.GamePads.html">GamePads</a></li> <li id="nav-pc.GraphicsDevice"><a href="pc.GraphicsDevice.html">GraphicsDevice</a></li> <li id="nav-pc.GraphNode"><a href="pc.GraphNode.html">GraphNode</a></li> <li id="nav-pc.Http"><a href="pc.Http.html">Http</a></li> <li id="nav-pc.I18n"><a href="pc.I18n.html">I18n</a></li> <li id="nav-pc.IndexBuffer"><a href="pc.IndexBuffer.html">IndexBuffer</a></li> <li id="nav-pc.Keyboard"><a href="pc.Keyboard.html">Keyboard</a></li> <li id="nav-pc.KeyboardEvent"><a href="pc.KeyboardEvent.html">KeyboardEvent</a></li> <li id="nav-pc.Layer"><a href="pc.Layer.html">Layer</a></li> <li id="nav-pc.LayerComposition"><a href="pc.LayerComposition.html">LayerComposition</a></li> <li id="nav-pc.LayoutChildComponent"><a href="pc.LayoutChildComponent.html">LayoutChildComponent</a></li> <li id="nav-pc.LayoutChildComponentSystem"><a href="pc.LayoutChildComponentSystem.html">LayoutChildComponentSystem</a></li> <li id="nav-pc.LayoutGroupComponent"><a href="pc.LayoutGroupComponent.html">LayoutGroupComponent</a></li> <li id="nav-pc.LayoutGroupComponentSystem"><a href="pc.LayoutGroupComponentSystem.html">LayoutGroupComponentSystem</a></li> <li id="nav-pc.LightComponent"><a href="pc.LightComponent.html">LightComponent</a></li> <li id="nav-pc.LightComponentSystem"><a href="pc.LightComponentSystem.html">LightComponentSystem</a></li> <li id="nav-pc.Lightmapper"><a href="pc.Lightmapper.html">Lightmapper</a></li> <li id="nav-pc.Mat3"><a href="pc.Mat3.html">Mat3</a></li> <li id="nav-pc.Mat4"><a href="pc.Mat4.html">Mat4</a></li> <li id="nav-pc.Material"><a href="pc.Material.html">Material</a></li> <li id="nav-pc.MaterialHandler"><a href="pc.MaterialHandler.html">MaterialHandler</a></li> <li id="nav-pc.Mesh"><a href="pc.Mesh.html">Mesh</a></li> <li id="nav-pc.MeshInstance"><a href="pc.MeshInstance.html">MeshInstance</a></li> <li id="nav-pc.Model"><a href="pc.Model.html">Model</a></li> <li id="nav-pc.ModelComponent"><a href="pc.ModelComponent.html">ModelComponent</a></li> <li id="nav-pc.ModelComponentSystem"><a href="pc.ModelComponentSystem.html">ModelComponentSystem</a></li> <li id="nav-pc.ModelHandler"><a href="pc.ModelHandler.html">ModelHandler</a></li> <li id="nav-pc.Morph"><a href="pc.Morph.html">Morph</a></li> <li id="nav-pc.MorphInstance"><a href="pc.MorphInstance.html">MorphInstance</a></li> <li id="nav-pc.MorphTarget"><a href="pc.MorphTarget.html">MorphTarget</a></li> <li id="nav-pc.Mouse"><a href="pc.Mouse.html">Mouse</a></li> <li id="nav-pc.MouseEvent"><a href="pc.MouseEvent.html">MouseEvent</a></li> <li id="nav-pc.Node"><a href="pc.Node.html">Node</a></li> <li id="nav-pc.OrientedBox"><a href="pc.OrientedBox.html">OrientedBox</a></li> <li id="nav-pc.ParticleSystemComponent"><a href="pc.ParticleSystemComponent.html">ParticleSystemComponent</a></li> <li id="nav-pc.ParticleSystemComponentSystem"><a href="pc.ParticleSystemComponentSystem.html">ParticleSystemComponentSystem</a></li> <li id="nav-pc.Picker"><a href="pc.Picker.html">Picker</a></li> <li id="nav-pc.PostEffect"><a href="pc.PostEffect.html">PostEffect</a></li> <li id="nav-pc.PostEffectQueue"><a href="pc.PostEffectQueue.html">PostEffectQueue</a></li> <li id="nav-pc.Quat"><a href="pc.Quat.html">Quat</a></li> <li id="nav-pc.Ray"><a href="pc.Ray.html">Ray</a></li> <li id="nav-pc.RaycastResult"><a href="pc.RaycastResult.html">RaycastResult</a></li> <li id="nav-pc.RenderTarget"><a href="pc.RenderTarget.html">RenderTarget</a></li> <li id="nav-pc.ResourceHandler"><a href="pc.ResourceHandler.html">ResourceHandler</a></li> <li id="nav-pc.ResourceLoader"><a href="pc.ResourceLoader.html">ResourceLoader</a></li> <li id="nav-pc.RigidBodyComponent"><a href="pc.RigidBodyComponent.html">RigidBodyComponent</a></li> <li id="nav-pc.RigidBodyComponentSystem"><a href="pc.RigidBodyComponentSystem.html">RigidBodyComponentSystem</a></li> <li id="nav-pc.Scene"><a href="pc.Scene.html">Scene</a></li> <li id="nav-pc.SceneHandler"><a href="pc.SceneHandler.html">SceneHandler</a></li> <li id="nav-pc.ScopeId"><a href="pc.ScopeId.html">ScopeId</a></li> <li id="nav-pc.ScopeSpace"><a href="pc.ScopeSpace.html">ScopeSpace</a></li> <li id="nav-pc.ScreenComponent"><a href="pc.ScreenComponent.html">ScreenComponent</a></li> <li id="nav-pc.ScreenComponentSystem"><a href="pc.ScreenComponentSystem.html">ScreenComponentSystem</a></li> <li id="nav-pc.ScriptAttributes"><a href="pc.ScriptAttributes.html">ScriptAttributes</a></li> <li id="nav-pc.ScriptComponent"><a href="pc.ScriptComponent.html">ScriptComponent</a></li> <li id="nav-pc.ScriptComponentSystem"><a href="pc.ScriptComponentSystem.html">ScriptComponentSystem</a></li> <li id="nav-pc.ScriptHandler"><a href="pc.ScriptHandler.html">ScriptHandler</a></li> <li id="nav-pc.ScriptRegistry"><a href="pc.ScriptRegistry.html">ScriptRegistry</a></li> <li id="nav-pc.ScriptType"><a href="pc.ScriptType.html">ScriptType</a></li> <li id="nav-pc.ScrollbarComponent"><a href="pc.ScrollbarComponent.html">ScrollbarComponent</a></li> <li id="nav-pc.ScrollbarComponentSystem"><a href="pc.ScrollbarComponentSystem.html">ScrollbarComponentSystem</a></li> <li id="nav-pc.ScrollViewComponent"><a href="pc.ScrollViewComponent.html">ScrollViewComponent</a></li> <li id="nav-pc.ScrollViewComponentSystem"><a href="pc.ScrollViewComponentSystem.html">ScrollViewComponentSystem</a></li> <li id="nav-pc.Shader"><a href="pc.Shader.html">Shader</a></li> <li id="nav-pc.SingleContactResult"><a href="pc.SingleContactResult.html">SingleContactResult</a></li> <li id="nav-pc.Skeleton"><a href="pc.Skeleton.html">Skeleton</a></li> <li id="nav-pc.Skin"><a href="pc.Skin.html">Skin</a></li> <li id="nav-pc.SkinInstance"><a href="pc.SkinInstance.html">SkinInstance</a></li> <li id="nav-pc.Sound"><a href="pc.Sound.html">Sound</a></li> <li id="nav-pc.SoundComponent"><a href="pc.SoundComponent.html">SoundComponent</a></li> <li id="nav-pc.SoundComponentSystem"><a href="pc.SoundComponentSystem.html">SoundComponentSystem</a></li> <li id="nav-pc.SoundInstance"><a href="pc.SoundInstance.html">SoundInstance</a></li> <li id="nav-pc.SoundInstance3d"><a href="pc.SoundInstance3d.html">SoundInstance3d</a></li> <li id="nav-pc.SoundManager"><a href="pc.SoundManager.html">SoundManager</a></li> <li id="nav-pc.SoundSlot"><a href="pc.SoundSlot.html">SoundSlot</a></li> <li id="nav-pc.Sprite"><a href="pc.Sprite.html">Sprite</a></li> <li id="nav-pc.SpriteAnimationClip"><a href="pc.SpriteAnimationClip.html">SpriteAnimationClip</a></li> <li id="nav-pc.SpriteComponent"><a href="pc.SpriteComponent.html">SpriteComponent</a></li> <li id="nav-pc.SpriteComponentSystem"><a href="pc.SpriteComponentSystem.html">SpriteComponentSystem</a></li> <li id="nav-pc.SpriteHandler"><a href="pc.SpriteHandler.html">SpriteHandler</a></li> <li id="nav-pc.StandardMaterial"><a href="pc.StandardMaterial.html">StandardMaterial</a></li> <li id="nav-pc.StencilParameters"><a href="pc.StencilParameters.html">StencilParameters</a></li> <li id="nav-pc.Tags"><a href="pc.Tags.html">Tags</a></li> <li id="nav-pc.Texture"><a href="pc.Texture.html">Texture</a></li> <li id="nav-pc.TextureAtlas"><a href="pc.TextureAtlas.html">TextureAtlas</a></li> <li id="nav-pc.TextureAtlasHandler"><a href="pc.TextureAtlasHandler.html">TextureAtlasHandler</a></li> <li id="nav-pc.TextureHandler"><a href="pc.TextureHandler.html">TextureHandler</a></li> <li id="nav-pc.Touch"><a href="pc.Touch.html">Touch</a></li> <li id="nav-pc.TouchDevice"><a href="pc.TouchDevice.html">TouchDevice</a></li> <li id="nav-pc.TouchEvent"><a href="pc.TouchEvent.html">TouchEvent</a></li> <li id="nav-pc.TransformFeedback"><a href="pc.TransformFeedback.html">TransformFeedback</a></li> <li id="nav-pc.Vec2"><a href="pc.Vec2.html">Vec2</a></li> <li id="nav-pc.Vec3"><a href="pc.Vec3.html">Vec3</a></li> <li id="nav-pc.Vec4"><a href="pc.Vec4.html">Vec4</a></li> <li id="nav-pc.VertexAttributeDescription"><a href="pc.VertexAttributeDescription.html">VertexAttributeDescription</a></li> <li id="nav-pc.VertexAttributeElement"><a href="pc.VertexAttributeElement.html">VertexAttributeElement</a></li> <li id="nav-pc.VertexBuffer"><a href="pc.VertexBuffer.html">VertexBuffer</a></li> <li id="nav-pc.VertexFormat"><a href="pc.VertexFormat.html">VertexFormat</a></li> <li id="nav-pc.VertexIterator"><a href="pc.VertexIterator.html">VertexIterator</a></li> <li id="nav-pc.VertexIteratorAccessor"><a href="pc.VertexIteratorAccessor.html">VertexIteratorAccessor</a></li> <li id="nav-pc.XrInput"><a href="pc.XrInput.html">XrInput</a></li> <li id="nav-pc.XrInputSource"><a href="pc.XrInputSource.html">XrInputSource</a></li> <li id="nav-pc.XrManager"><a href="pc.XrManager.html">XrManager</a></li> </ul> </nav> <div class='sidebarToggle'><span></span>Class List</div> <main class="cls"> <h1>pc.Application</h1> <p class="extends">Extends: <a href="pc.EventHandler.html">pc.EventHandler</a></p> <p><p>A pc.Application represents and manages your PlayCanvas application. If you are developing using the PlayCanvas Editor, the pc.Application is created for you. You can access your pc.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:</p> <pre class="prettyprint source lang-javascript"><code>// 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... var app = this.app; }; MyScript.prototype.update = function(dt) { // ...and update functions. var app = this.app; }; </code></pre> <p>If you are using the Engine without the Editor, you have to create the application instance manually.</p></p> <pre><code class="javascript">// Engine-only example: create the application manually var app = new pc.Application(canvas, options); // Start the application's main loop app.start();</code></pre>  <h1>Summary</h1>    <h3>Static Methods</h3> <table class="properties"> <tr> <td><a href="#getApplication">getApplication</a></td><td><p>Get the current application.</td> </tr> </table>  <h3>Properties</h3> <table class="properties"> <tr> <td><a href="#assets">assets</a></td><td><p>The asset registry managed by the application.</td> </tr> <tr> <td><a href="#autoRender">autoRender</a></td><td><p>When true, the application's render function is called every frame.</td> </tr> <tr> <td><a href="#batcher">batcher</a></td><td><p>The application's batch manager.</td> </tr> <tr> <td><a href="#elementInput">elementInput</a></td><td><p>Used to handle input for <a href="pc.ElementComponent.html">pc.ElementComponent</a>s.</td> </tr> <tr> <td><a href="#gamepads">gamepads</a></td><td><p>Used to access GamePad input.</td> </tr> <tr> <td><a href="#graphicsDevice">graphicsDevice</a></td><td><p>The graphics device used by the application.</td> </tr> <tr> <td><a href="#i18n">i18n</a></td><td><p>Handles localization.</td> </tr> <tr> <td><a href="#keyboard">keyboard</a></td><td><p>The keyboard device.</td> </tr> <tr> <td><a href="#loader">loader</a></td><td><p>The resource loader.</td> </tr> <tr> <td><a href="#maxDeltaTime">maxDeltaTime</a></td><td><p>Clamps per-frame delta time to an upper bound.</td> </tr> <tr> <td><a href="#mouse">mouse</a></td><td><p>The mouse device.</td> </tr> <tr> <td><a href="#renderNextFrame">renderNextFrame</a></td><td><p>Set to true to render the scene on the next iteration of the main loop.</td> </tr> <tr> <td><a href="#root">root</a></td><td><p>The root entity of the application.</td> </tr> <tr> <td><a href="#scene">scene</a></td><td><p>The scene managed by the application.</td> </tr> <tr> <td><a href="#scripts">scripts</a></td><td><p>The application's script registry.</td> </tr> <tr> <td><a href="#systems">systems</a></td><td><p>The application's component system registry.</td> </tr> <tr> <td><a href="#timeScale">timeScale</a></td><td><p>Scales the global time delta.</td> </tr> <tr> <td><a href="#touch">touch</a></td><td><p>Used to get touch events input.</td> </tr> <tr> <td><a href="#xr">xr</a></td><td><p>The XR Manager that provides ability to start VR/AR sessions.</td> </tr> </table>  <h3>Methods</h3> <table class="properties"> <tr> <td><a href="#applySceneSettings">applySceneSettings</a></td><td><p>Apply scene settings to the current scene.</td> </tr> <tr> <td><a href="#configure">configure</a></td><td><p>Load the application configuration file and apply application properties and fill the asset registry.</td> </tr> <tr> <td><a href="#destroy">destroy</a></td><td><p>Destroys application and removes all event listeners.</td> </tr> <tr> <td><a href="#getSceneUrl">getSceneUrl</a></td><td><p>Look up the URL of the scene hierarchy file via the name given to the scene in the editor.</td> </tr> <tr> <td><a href="#isHidden">isHidden</a></td><td><p>Queries the visibility of the window or tab in which the application is running.</td> </tr> <tr> <td><a href="#loadSceneHierarchy">loadSceneHierarchy</a></td><td><p>Load a scene file, create and initialize the Entity hierarchy and add the hierarchy to the application root Entity.</td> </tr> <tr> <td><a href="#loadSceneSettings">loadSceneSettings</a></td><td><p>Load a scene file and automatically apply the scene settings to the current scene.</td> </tr> <tr> <td><a href="#preload">preload</a></td><td><p>Load all assets in the asset registry that are marked as 'preload'.</td> </tr> <tr> <td><a href="#render">render</a></td><td><p>Render the application's scene.</td> </tr> <tr> <td><a href="#renderLine">renderLine</a></td><td><p>Renders a line.</td> </tr> <tr> <td><a href="#renderLines">renderLines</a></td><td><p>Draw an array of lines.</td> </tr> <tr> <td><a href="#resizeCanvas">resizeCanvas</a></td><td><p>Resize the application's canvas element in line with the current fill mode.</td> </tr> <tr> <td><a href="#setCanvasFillMode">setCanvasFillMode</a></td><td><p>Controls how the canvas fills the window and resizes when the window changes.</td> </tr> <tr> <td><a href="#setCanvasResolution">setCanvasResolution</a></td><td><p>Change the resolution of the canvas, and set the way it behaves when the window is resized.</td> </tr> <tr> <td><a href="#setSkybox">setSkybox</a></td><td><p>Sets the skybox asset to current scene, and subscribes to asset load/change events.</td> </tr> <tr> <td><a href="#start">start</a></td><td><p>Start the application.</td> </tr> <tr> <td><a href="#update">update</a></td><td><p>Update the application.</td> </tr> </table>  <h2>Inherited</h2>    <h3>Methods</h3> <table class="properties"> <tr> <td><a href="#fire">fire</a></td><td><p>Fire an event, all additional arguments are passed on to the event listener.</td> </tr> <tr> <td><a href="#hasEvent">hasEvent</a></td><td><p>Test if there are any handlers bound to an event name.</td> </tr> <tr> <td><a href="#off">off</a></td><td><p>Detach an event handler from an event.</td> </tr> <tr> <td><a href="#on">on</a></td><td><p>Attach an event handler to an event.</td> </tr> <tr> <td><a href="#once">once</a></td><td><p>Attach an event handler to an event.</td> </tr> </table>  <h1>Details</h1>    <h2>Static Methods</h2> <div id="getApplication"> <h3 class="methodname">getApplication([id]) <a class="font-icon" href="#getApplication"></a></h3> <p><p>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 pc.Application is not readily available. For example, in the JavaScript console of the browser's developer tools.</p></p> <pre><code class="javascript">var app = pc.Application.getApplication();</code></pre> <h4>Parameters</h4> <table> <tr> <td>id</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>If defined, the returned application should use the canvas which has this id. Otherwise current application will be returned.</p></td> </tr> </table> <h4>Returns</h4> <a href="pc.Application.html">pc.Application</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Undefined">undefined</a> <p>The running application, if any.</p> </div> <h2>Constructor</h2>  <div id="Application"> <h3 class="methodname">Application(canvas, options) <a class="font-icon" href="#Application"></a></h3> <p><p>Create a new Application.</p></p> <pre><code class="javascript">// Engine-only example: create the application manually var app = new pc.Application(canvas, options); // Start the application's main loop app.start();</code></pre> <h4>Parameters</h4> <table> <tr> <td>canvas</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a></td><td><p>The canvas element.</p></td> </tr> <tr> <td>options</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></td><td></td> </tr> <tr> <td>options.elementInput</td><td><a href="pc.ElementInput.html">pc.ElementInput</a></td><td><p>Input handler for <a href="pc.ElementComponent.html">pc.ElementComponent</a>s.</p></td> </tr> <tr> <td>options.keyboard</td><td><a href="pc.Keyboard.html">pc.Keyboard</a></td><td><p>Keyboard handler for input.</p></td> </tr> <tr> <td>options.mouse</td><td><a href="pc.Mouse.html">pc.Mouse</a></td><td><p>Mouse handler for input.</p></td> </tr> <tr> <td>options.touch</td><td><a href="pc.TouchDevice.html">pc.TouchDevice</a></td><td><p>TouchDevice handler for input.</p></td> </tr> <tr> <td>options.gamepads</td><td><a href="pc.GamePads.html">pc.GamePads</a></td><td><p>Gamepad handler for input.</p></td> </tr> <tr> <td>options.scriptPrefix</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>Prefix to apply to script urls before loading.</p></td> </tr> <tr> <td>options.assetPrefix</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>Prefix to apply to asset urls before loading.</p></td> </tr> <tr> <td>options.graphicsDeviceOptions</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></td><td><p>Options object that is passed into the <a href="pc.GraphicsDevice.html">pc.GraphicsDevice</a> constructor.</p></td> </tr> <tr> <td>options.scriptsOrder</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string[]</a></td><td><p>Scripts in order of loading first.</p></td> </tr> </table> </div>  <h2>Properties</h2> <div id="assets"> <span class="property"><a href="pc.AssetRegistry.html">pc.AssetRegistry</a></span><span class="property">assets <a class="font-icon" href="#assets"></a></span> <p><p>The asset registry managed by the application.</p></p> <pre><code class="javascript">// Search the asset registry for all assets with the tag 'vehicle' var vehicleAssets = this.app.assets.findByTag('vehicle');</code></pre> </div> <div id="autoRender"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">autoRender <a class="font-icon" href="#autoRender"></a></span> <p><p>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.</p></p> <pre><code class="javascript">// Disable rendering every frame and only render on a keydown event this.app.autoRender = false; this.app.keyboard.on('keydown', function (event) { this.app.renderNextFrame = true; }, this);</code></pre> </div> <div id="batcher"> <span class="property"><a href="pc.BatchManager.html">pc.BatchManager</a></span><span class="property">batcher <a class="font-icon" href="#batcher"></a></span> <p><p>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.</p></p> </div> <div id="elementInput"> <span class="property"><a href="pc.ElementInput.html">pc.ElementInput</a></span><span class="property">elementInput <a class="font-icon" href="#elementInput"></a></span> <p><p>Used to handle input for <a href="pc.ElementComponent.html">pc.ElementComponent</a>s.</p></p> </div> <div id="gamepads"> <span class="property"><a href="pc.GamePads.html">pc.GamePads</a></span><span class="property">gamepads <a class="font-icon" href="#gamepads"></a></span> <p><p>Used to access GamePad input.</p></p> </div> <div id="graphicsDevice"> <span class="property"><a href="pc.GraphicsDevice.html">pc.GraphicsDevice</a></span><span class="property">graphicsDevice <a class="font-icon" href="#graphicsDevice"></a></span> <p><p>The graphics device used by the application.</p></p> </div> <div id="i18n"> <span class="property"><a href="pc.I18n.html">pc.I18n</a></span><span class="property">i18n <a class="font-icon" href="#i18n"></a></span> <p><p>Handles localization.</p></p> </div> <div id="keyboard"> <span class="property"><a href="pc.Keyboard.html">pc.Keyboard</a></span><span class="property">keyboard <a class="font-icon" href="#keyboard"></a></span> <p><p>The keyboard device.</p></p> </div> <div id="loader"> <span class="property"><a href="pc.ResourceLoader.html">pc.ResourceLoader</a></span><span class="property">loader <a class="font-icon" href="#loader"></a></span> <p><p>The resource loader.</p></p> </div> <div id="maxDeltaTime"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">maxDeltaTime <a class="font-icon" href="#maxDeltaTime"></a></span> <p><p>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).</p></p> <pre><code class="javascript">// Don't clamp inter-frame times of 200ms or less this.app.maxDeltaTime = 0.2;</code></pre> </div> <div id="mouse"> <span class="property"><a href="pc.Mouse.html">pc.Mouse</a></span><span class="property">mouse <a class="font-icon" href="#mouse"></a></span> <p><p>The mouse device.</p></p> </div> <div id="renderNextFrame"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span><span class="property">renderNextFrame <a class="font-icon" href="#renderNextFrame"></a></span> <p><p>Set to true to render the scene on the next iteration of the main loop. This only has an effect if <a href="pc.Application.html#autoRender">pc.Application#autoRender</a> is set to false. The value of renderNextFrame is set back to false again as soon as the scene has been rendered.</p></p> <pre><code class="javascript">// Render the scene only while space key is pressed if (this.app.keyboard.isPressed(pc.KEY_SPACE)) { this.app.renderNextFrame = true; }</code></pre> </div> <div id="root"> <span class="property"><a href="pc.Entity.html">pc.Entity</a></span><span class="property">root <a class="font-icon" href="#root"></a></span> <p><p>The root entity of the application.</p></p> <pre><code class="javascript">// Return the first entity called 'Camera' in a depth-first search of the scene hierarchy var camera = this.app.root.findByName('Camera');</code></pre> </div> <div id="scene"> <span class="property"><a href="pc.Scene.html">pc.Scene</a></span><span class="property">scene <a class="font-icon" href="#scene"></a></span> <p><p>The scene managed by the application.</p></p> <pre><code class="javascript">// Set the tone mapping property of the application's scene this.app.scene.toneMapping = pc.TONEMAP_FILMIC;</code></pre> </div> <div id="scripts"> <span class="property"><a href="pc.ScriptRegistry.html">pc.ScriptRegistry</a></span><span class="property">scripts <a class="font-icon" href="#scripts"></a></span> <p><p>The application's script registry.</p></p> </div> <div id="systems"> <span class="property"><a href="pc.ComponentSystemRegistry.html">pc.ComponentSystemRegistry</a></span><span class="property">systems <a class="font-icon" href="#systems"></a></span> <p><p>The application's component system registry. The pc.Application constructor adds the following component systems to its component system registry:</p> <ul> <li>animation (<a href="pc.AnimationComponentSystem.html">pc.AnimationComponentSystem</a>)</li> <li>audiolistener (<a href="pc.AudioListenerComponentSystem.html">pc.AudioListenerComponentSystem</a>)</li> <li>button (<a href="pc.ButtonComponentSystem.html">pc.ButtonComponentSystem</a>)</li> <li>camera (<a href="pc.CameraComponentSystem.html">pc.CameraComponentSystem</a>)</li> <li>collision (<a href="pc.CollisionComponentSystem.html">pc.CollisionComponentSystem</a>)</li> <li>element (<a href="pc.ElementComponentSystem.html">pc.ElementComponentSystem</a>)</li> <li>layoutchild (<a href="pc.LayoutChildComponentSystem.html">pc.LayoutChildComponentSystem</a>)</li> <li>layoutgroup (<a href="pc.LayoutGroupComponentSystem.html">pc.LayoutGroupComponentSystem</a>)</li> <li>light (<a href="pc.LightComponentSystem.html">pc.LightComponentSystem</a>)</li> <li>model (<a href="pc.ModelComponentSystem.html">pc.ModelComponentSystem</a>)</li> <li>particlesystem (<a href="pc.ParticleSystemComponentSystem.html">pc.ParticleSystemComponentSystem</a>)</li> <li>rigidbody (<a href="pc.RigidBodyComponentSystem.html">pc.RigidBodyComponentSystem</a>)</li> <li>screen (<a href="pc.ScreenComponentSystem.html">pc.ScreenComponentSystem</a>)</li> <li>script (<a href="pc.ScriptComponentSystem.html">pc.ScriptComponentSystem</a>)</li> <li>scrollbar (<a href="pc.ScrollbarComponentSystem.html">pc.ScrollbarComponentSystem</a>)</li> <li>scrollview (<a href="pc.ScrollViewComponentSystem.html">pc.ScrollViewComponentSystem</a>)</li> <li>sound (<a href="pc.SoundComponentSystem.html">pc.SoundComponentSystem</a>)</li> <li>sprite (<a href="pc.SpriteComponentSystem.html">pc.SpriteComponentSystem</a>)</li> </ul></p> <pre><code class="javascript">// Set global gravity to zero this.app.systems.rigidbody.gravity.set(0, 0, 0);</code></pre> <pre><code class="javascript">// Set the global sound volume to 50% this.app.systems.sound.volume = 0.5;</code></pre> </div> <div id="timeScale"> <span class="property"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span><span class="property">timeScale <a class="font-icon" href="#timeScale"></a></span> <p><p>Scales the global time delta. Defaults to 1.</p></p> <pre><code class="javascript">// Set the app to run at half speed this.app.timeScale = 0.5;</code></pre> </div> <div id="touch"> <span class="property"><a href="pc.TouchDevice.html">pc.TouchDevice</a></span><span class="property">touch <a class="font-icon" href="#touch"></a></span> <p><p>Used to get touch events input.</p></p> </div> <div id="xr"> <span class="property"><a href="pc.XrManager.html">pc.XrManager</a></span><span class="property">xr <a class="font-icon" href="#xr"></a></span> <p><p>The XR Manager that provides ability to start VR/AR sessions.</p></p> <pre><code class="javascript">// check if VR is available if (app.xr.isAvailable(pc.XRTYPE_VR)) { // VR is available }</code></pre> </div>  <h2>Methods</h2> <div id="applySceneSettings"> <h3 class="methodname">applySceneSettings(settings) <a class="font-icon" href="#applySceneSettings"></a></h3> <p><p>Apply scene settings to the current scene. Useful when your scene settings are parsed or generated from a non-URL source.</p></p> <pre><code class="javascript">var 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, fog_color: [0, 0, 0], lightmapMode: 1, fog: 'none', lightmapMaxResolution: 2048, skyboxMip: 2, lightmapSizeMultiplier: 16 } }; app.applySceneSettings(settings);</code></pre> <h4>Parameters</h4> <table> <tr> <td>settings</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></td><td><p>The scene settings to be applied.</p></td> </tr> <tr> <td>settings.physics</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></td><td><p>The physics settings to be applied.</p></td> </tr> <tr> <td>settings.physics.gravity</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number[]</a></td><td><p>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 ].</p></td> </tr> <tr> <td>settings.render</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></td><td><p>The rendering settings to be applied.</p></td> </tr> <tr> <td>settings.render.global_ambient</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number[]</a></td><td><p>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 ].</p></td> </tr> <tr> <td>settings.render.fog</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>The type of fog used by the scene. Can be:</p> <ul> <li><a href="pc.html#FOG_NONE">pc.FOG_NONE</a></li> <li><a href="pc.html#FOG_LINEAR">pc.FOG_LINEAR</a></li> <li><a href="pc.html#FOG_EXP">pc.FOG_EXP</a></li> <li><a href="pc.html#FOG_EXP2">pc.FOG_EXP2</a></li> </ul></td> </tr> <tr> <td>settings.render.fog_color</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number[]</a></td><td><p>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 ].</p></td> </tr> <tr> <td>settings.render.fog_density</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The density of the fog (if enabled). This property is only valid if the fog property is set to pc.FOG_EXP or pc.FOG_EXP2.</p></td> </tr> <tr> <td>settings.render.fog_start</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The distance from the viewpoint where linear fog begins. This property is only valid if the fog property is set to pc.FOG_LINEAR.</p></td> </tr> <tr> <td>settings.render.fog_end</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The distance from the viewpoint where linear fog reaches its maximum. This property is only valid if the fog property is set to pc.FOG_LINEAR.</p></td> </tr> <tr> <td>settings.render.gamma_correction</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The gamma correction to apply when rendering the scene. Can be:</p> <ul> <li><a href="pc.html#GAMMA_NONE">pc.GAMMA_NONE</a></li> <li><a href="pc.html#GAMMA_SRGB">pc.GAMMA_SRGB</a></li> </ul></td> </tr> <tr> <td>settings.render.tonemapping</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The tonemapping transform to apply when writing fragments to the frame buffer. Can be:</p> <ul> <li><a href="pc.html#TONEMAP_LINEAR">pc.TONEMAP_LINEAR</a></li> <li><a href="pc.html#TONEMAP_FILMIC">pc.TONEMAP_FILMIC</a></li> <li><a href="pc.html#TONEMAP_HEJL">pc.TONEMAP_HEJL</a></li> <li><a href="pc.html#TONEMAP_ACES">pc.TONEMAP_ACES</a></li> </ul></td> </tr> <tr> <td>settings.render.exposure</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The exposure value tweaks the overall brightness of the scene.</p></td> </tr> <tr> <td>settings.render.skybox</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Null">null</a></td><td><p>The asset ID of the cube map texture to be used as the scene's skybox. Defaults to null.</p></td> </tr> <tr> <td>settings.render.skyboxIntensity</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>Multiplier for skybox intensity.</p></td> </tr> <tr> <td>settings.render.skyboxMip</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The mip level of the skybox to be displayed. Only valid for prefiltered cubemap skyboxes.</p></td> </tr> <tr> <td>settings.render.lightmapSizeMultiplier</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The lightmap resolution multiplier.</p></td> </tr> <tr> <td>settings.render.lightmapMaxResolution</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The maximum lightmap resolution.</p></td> </tr> <tr> <td>settings.render.lightmapMode</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></td><td><p>The lightmap baking mode. Can be:</p> <ul> <li><a href="pc.html#BAKE_COLOR">pc.BAKE_COLOR</a>: single color lightmap</li> <li><a href="pc.html#BAKE_COLORDIR">pc.BAKE_COLORDIR</a>: single color lightmap + dominant light direction (used for bump/specular)</li> </ul> <p>Only lights with bakeDir=true will be used for generating the dominant light direction. Defaults to.</p></td> </tr> </table> </div> <div id="configure"> <h3 class="methodname">configure(url, callback) <a class="font-icon" href="#configure"></a></h3> <p><p>Load the application configuration file and apply application properties and fill the asset registry.</p></p> <h4>Parameters</h4> <table> <tr> <td>url</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>The URL of the configuration file to load.</p></td> </tr> <tr> <td>callback</td><td><a href="pc.callbacks.html#ConfigureApp">pc.callbacks.ConfigureApp</a></td><td><p>The Function called when the configuration file is loaded and parsed (or an error occurs).</p></td> </tr> </table> </div> <div id="destroy"> <h3 class="methodname">destroy() <a class="font-icon" href="#destroy"></a></h3> <p><p>Destroys application and removes all event listeners.</p></p> <pre><code class="javascript">this.app.destroy();</code></pre> </div> <div id="getSceneUrl"> <h3 class="methodname">getSceneUrl(name) <a class="font-icon" href="#getSceneUrl"></a></h3> <p><p>Look up the URL of the scene hierarchy file via the name given to the scene in the editor. Use this to in <a href="pc.Application.html#loadSceneHierarchy">pc.Application#loadSceneHierarchy</a>.</p></p> <h4>Parameters</h4> <table> <tr> <td>name</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>The name of the scene file given in the Editor.</p></td> </tr> </table> <h4>Returns</h4> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> <p>The URL of the scene file.</p> </div> <div id="isHidden"> <h3 class="methodname">isHidden() <a class="font-icon" href="#isHidden"></a></h3> <p><p>Queries the visibility of the window or tab in which the application is running.</p></p> <h4>Returns</h4> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a> <p>True if the application is not visible and false otherwise.</p> </div> <div id="loadSceneHierarchy"> <h3 class="methodname">loadSceneHierarchy(url, callback) <a class="font-icon" href="#loadSceneHierarchy"></a></h3> <p><p>Load a scene file, create and initialize the Entity hierarchy and add the hierarchy to the application root Entity.</p></p> <pre><code class="javascript">app.loadSceneHierarchy("1000.json", function (err, entity) { if (!err) { var e = app.root.find("My New Entity"); } else { // error } });</code></pre> <h4>Parameters</h4> <table> <tr> <td>url</td><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></td><td><p>The URL of the scene file. Usually this will be "scene_id.json".</p></td> </tr> <tr> <td>callback</td><td><a href="pc.callbacks.html#LoadHierarchy">pc.callbacks.LoadHierarchy</a></td><td><p>The function to call after loading, passed (err, entity) where err is null if no errors occurred.</p></td> </tr> </table> </div> <div id="loadSceneSettings"> <h3 class="methodname">loadSceneSettings(url, callback) <a class="font-icon" href="#loadSceneSettings"></a></h3> <p><p>Load a scene file and automatically apply the scene settings to the current scene.</p></p> <pre><code class="javascript">app.loadSceneSettings("1000.json", function (err) { if (!err) { // success } else { // error } });</code></pre> <h4>Parameters</h4> <table> <tr> <td>url</td><td><a href="https://developer.mozill