
# Using External Assets in the Playground

Sometimes you might want to load you own assets into the playground. Should the reason for doing so be to get help with a feature please think carefully before doing so.

It is very likely that the issue you are struggling with can be isolated and presented in a simplified and more focused form using basic meshes and existing [textures](/toolsAndResources/assetLibraries/availableTextures) and [models](/toolsAndResources/assetLibraries/availableMeshes).

Doing this will lead to quicker answers as your question will be more understandable, since few people want to work through long sections of code. Using the existing assets will also ensure that they remain reachable and the playgrounds you create will still be a useful resource in the future. However should you still wish to use your own assets then this page describes ways of doing so.

Any site hosting you assets must be [CORS compliant](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) and use the secure [https](https://en.wikipedia.org/wiki/HTTPS) protocol.

## From github.com

### using raw.githubusercontent.com

- ensure that your git repo is set to **public**
- navigate to your file. We'll take as example https://github.com/BabylonJS/MeshesLibrary/blob/master/PBR_Spheres.glb
- remove `/blob/` part
- replace `https://github.com` by `https://raw.githubusercontent.com`
- you now have raw access to your file `https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/PBR_Spheres.glb`

```javascript
BABYLON.ImportMeshAsync("https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/PBR_Spheres.glb", scene);
```

 <Playground id="#YIU90M#1416" title="Using Assets From Github" description="Simple example of loading assets from github into the playground."/>

### using rawgit.com

You were able to use [GitHub](https://github.com/) with a link generated by the **[RawGit](https://rawgit.com/)** site to ensure correct MIME type. Unfortunately this site has now closed.

Any existing links to files using **RawGit** can be updated using **[Raw Git to jsDelivr](https://www.jsdelivr.com/rawgit)**. Changes should be made to **RawGit** links before October 2019.

### using jsdelivr.com

To use **[jsDelivr](https://www.jsdelivr.com)** with a file:

- ensure that your git repo is set to **public**
- let's say you have a file named _myFile.babylon_ on **github**, go to that file in your repository and click on the commit number.
- then in the address bar copy the part after `https://github.com/`, for example

```javascript
myGithubUserName/myRepository/commit/2bd79648e08709145cd9575e6679b2ea360f12f6
```

- replace `/commit/` with `@`

```javascript
myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6
```

- add at the front `https://cdn.jsdelivr.net/gh/`

```javascript
https://cdn.jsdelivr.net/gh/myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6
```

- _(optional)_ by adding the filename to the end, you now have direct download access

```javascript
https://cdn.jsdelivr.net/gh/myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6/myFile.babylon
```

You now have all necessary data to load your meshes.

```javascript
BABYLON.ImportMeshAsync("https://cdn.jsdelivr.net/gh/myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6/myFile.babylon", scene);
```

From our MeshesLibrary repo, [using PBR_Spheres.glb](https://github.com/BabylonJS/MeshesLibrary/commit/fa494961cbe0b8d44854b3cf8aa8268ba211741a):

 <Playground id="#IX12S2#139" title="Loading Assets From The Babylon.js Meshes Library" description="Simple example showing how to load assets from the Babylon.js meshes library."/>

## From Gitlab.com

### using GitLab pages

You have to configure your own [Gitlab pages](https://docs.gitlab.com/ee/user/project/pages/).

When done, just use the direct link in the loader:

```javascript
BABYLON.ImportMeshAsync("https://yourpages.gitlab.io/yourScene/myFile.babylon", scene);
```

## From dropbox.com

[Dropbox](https://dropbox.com) could be use both for playground debugging and easily sharing assets.

- upload your file
- click on `Share` button
- generate a public download link, here our example: `https://www.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb?dl=0`
- replace `www` in url by `dl`, also remove `?dl=0` at the end if this is the only argument
- there may also be an `rlkey` augument included which looks like `?dl=0&rlkey=rANdoMGeneR4tedValUe`, this argument needs to stay in the link, even if you remove the `dl=0&` first argument leaving `?rlkey=rANdoMGeneR4tedValUe`
- you now have a direct access url which will look like `https://dl.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb` if there was no `rlkey` parameter or `https://dl.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb?rlkey=rANdoMGeneR4tedValUe` if there is one

It can be used in this way:

```javascript
BABYLON.ImportMeshAsync("https://dl.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb", scene);
```

 <Playground id="#8LFTCH#14" title="Loading Assets From Dropbox" description="Simple example of loading assets from dropbox."/>

## From imgur.com

[Imgur](https://imgur.com) could be useful to quickly use custom textures.

- upload your image, here our example: https://imgur.com/a/KhuCTFr
- copy the direct link, here https://imgur.com/yn98ktz
- do a `right-click > View image` or add `i.` in front of `imgur.com` and image extension to the end of url, here https://i.imgur.com/yn98ktz.png
- use this direct access url in your playground

```javascript
var texture = new BABYLON.Texture("https://i.imgur.com/yn98ktz.png", scene);
```

 <Playground id="#UNEWTE" title="Loading Assets From Imgur" description="Simple example of loading assets from imgur."/>

## Embedded assets

You can make a raw text copy-paste of your assets, like the content of a .gltf file.

Note that you need to use `Append` so you can define the plugin to use as there is no more file extension.

```javascript
    var mymodel = {
        [...]
    };

    var json = JSON.stringify(mymodel);
    var blob = new Blob([json]);
    var url = URL.createObjectURL(blob);

    BABYLON.AppendSceneAsync(url, scene, {
        pluginExtension: ".gltf"
    }).then(function() {
        scene.createDefaultCameraOrLight(true, true, true),
        scene.createDefaultEnvironment();
    });
```

 <Playground id="#KEY4S4#93" title="Loading Embedded Assest" description="Simple example showing how to load embedded assets."/>

## Javascript files

For Javascript files you need to wait for the file to be loaded before attempting to access it.

```javascript
var url = "LINK ADDRESS";
var s = document.createElement("script");
s.src = url;
document.head.appendChild(s);

var createScene = function () {
  //Scene set up code

  s.onload = function () {
    //any code calling on loaded file code
  };

  return scene;
};
```

 <Playground id="#WF3VKZ" title="Loading Embeded Assets (javascript)" description="Another example of loading embedded assets."/>



## Using Playground Templates

With Babylon.js 4.2, you now have a handy new tool available in the playground. This tool allows you to hit `CTRL+Space` on your keyboard to bring up snippets handy bits of code. From loading a box, to exporting a .gltf file, some of the most commonly used code blocks are now available at the click of a button.

You can also use the `tab` button to quickly navigate to the next property in the code block to fill in.

## Contributing Playground Templates

If you'd like to add your own snippet of code to the available templates, you can do so by updating the playground templates configuration file in the engine.

[Playground Templates Config File](https://github.com/BabylonJS/Babylon.js/blob/master/packages/tools/playground/public/templates.json)

Each playground template entry into this .json file should include 3 components:

- Label - The name that will be visible in the Intellisense menu when hitting `CTRL+Space`
- Documentation - A link to the appropriate documentation page that most accurately covers the topic of the template you're adding.
- insertText - The code snippet itself

Let's take a look at a simple example, setting up a shadow generator.

```json
{
    "label" : "Setup a shadow generator",
    "documentation" : "https://doc.babylonjs.com/divingDeeper/lights/shadows",
    "insertText" : "var shadowGenerator = new BABYLON.ShadowGenerator(${1:size}, ${2:the_light_source});\nshadowGenerator.getShadowMap().renderList.push(${3:the_mesh_that_casts_a_shadow});\n${4:mesh_that_receives_the_shadow}.receiveShadows = true;"    
},
```

This will produce the following lines of javascript code:
```javascript
var shadowGenerator = new BABYLON.ShadowGenerator(${1:size}, ${2:the_light_source});
shadowGenerator.getShadowMap().renderList.push(${3:the_mesh_that_casts_a_shadow});
${4:mesh_that_receives_the_shadow}.receiveShadows = true;
```
While the label and documentation components are fairly straight forward, the code snippet itself has a few things to note.

- 1) For any property that you'd like the user to be able to tab over to, you can wrap a default value into this syntax: `${1:x}`. In the case of the shadow generator, the first property entry has the word "size" substituted for 'x'. This means that the word "size" will show up as the default value for that property, inviting the user to override it with their desired value. Also note that for every additional property you'd like to allow the user to tab over to, you'll increment the number in front of the colon. So in the case of the shadow generator we see the following tab property entries `${1:size}`, `${2:the_light_source}`, `${3:the_mesh_that_casts_a_shadow}`, `${4:mesh_that_receives_the_shadow}`. Notice how the number is increasing.

- 2) If you'd like your playground template to span multiple lines, use the `\n` syntax to signal the start of a new line. Again, take a look at the shadow generator example to see this in action.



# Using the Playground in Development of BJS

During the early stages of developing code to contribute to Babylon.js it can be useful to try out that code in the Playground. Just ensure that the Playground is in Typescript mode by using the link https://www.babylonjs-playground.com/ts.html# . The `New` button will then give you the starting code.

## An Example

Babylon.js has code to form a bezier curve found at https://github.com/BabylonJS/Babylon.js/tree/master/packages/dev/core/src/Maths/math.path.ts , (just search for Curve3 on this page) so it would make sense to put any code to form a bezier surface on the same page.

The first step is to produce code that works. You can of course immediately follow the steps in [how to start contributing](/contribute/toBabylon/HowToContribute) and of course before submitting a PR there will have to be working code submitted as described on this page. However you might not yet be confident with the whole approach of forking the code, using git, setting up an IDE and pull requests but are familiar with using Typescript.

So an alternative is to try out the code in the playground. The following playground shows the Typescript code for a bezier surface which is in development with the playground.

<Playground id="H3AF26#1" title="Playground Code Example - Bezier Surface" description="Simple playground example of a Bezier Surface." image="/img/playgroundsAndNMEs/divingDeeperUsingPlaygrounds1.jpg"/>

Though this shows working code it is not completely ready for copying into a local repository of Babylon.js, committing and sending a PR. For a start not all the comments needed are in place.

Also once placed in the local repository the first line

```javascript
class BezierSurface {
```

would need to be changed to

```javascript
export class BezierSurface {
```


## From Playground to Pull Request

Once you are happy the code works and you have copied it to your local repository then before submitting your PR please make sure you have read the following to ensure a smooth positive result.

[Start Contributing](/contribute/toBabylon/HowToContribute)
[Contributing Read Me](https://github.com/BabylonJS/Babylon.js/blob/master/contributing.md)
[Code Guidelines](/contribute/toBabylon/approvedNamingConventions)
[Comments in the API](/contribute/toBabylon/contributeToAPI)

On the other hand there is always the possibility that someone in the core team likes your idea and its execution so much they might just copy and add it to Babylon.js directly.



## What is the Snippet Server

The Snippet Server is the content server used by the Babylon library. Whenever you save a playground, an animation, or a node material, and get a unique URL pointing to your content, this is accomplished by sending HTTP requests to the Snippet Server. However, the default server we use doesn't have authentication, which means that anyone with this unique URL will be able to access your content. It is also closed source, which means it isn't possible to run a local copy of it. So, if you want to run your own, private server, you'll have to implement your own. This page explains one such example implementation.

## Making your own Snippet Server

To check out what is the minimum expected of a Snippet Server, let's take a look at this reference [implementation](https://github.com/BabylonJS/SnippetServerReference). It was done in NodeJS and Express, which are JavaScript-based like Babylon itself, but you could implement your server in any language you prefer, like Python or Go. You only need to implement two API calls. It also uses the file system to store the snippet files, which is very simple to implement, but not the safest. Again, feel free to modify it to suit your needs.

In this reference implementation, the snippets are armazened in a directory called `data`, while another directory, called `metadata`, stores the latest version of each snippet ID. And what is a "snippet ID" and a "version", you may ask? If you look at any URL that is saved in our tools, you can see it has two parts:

![Example of a snippet ID: https://playground.babylonjs.com/#CBGEQX#2, with a red arrow pointing from the section "CBGEQX" to the words "snippet ID" and a blue arrow pointing from the number 2 to the word "version" ](/img/tools/Playground/snippet_url.png)

In the example: `https://playground.babylonjs.com/#CBGEQX#2`, the section `CBGEQX#2` is the snippet URL, with everything before the # being the snippet ID, and the number after it being the snippet version. The first version of a snippet may not have a explicit version number. We use a 5-character string for our snippet IDs, but that isn't a requirement. You do need to have the `#<version>` section, through.

## Saving a snippet

When saving a snippet (like when we click the button "Save" on the Playground), a [HTTP POST](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) request is sent to the server. It may not contain any ID, in which case a new ID will be created (and it will be the first version), or it may contain an ID, in which case a new version is created for that ID. You can see this in action here:

```javascript
app.post("/:id?", (req, res) => {
    let id = req.params.id;
    let version;

    if (!id) {
        // Generate "random" 5 character string
        const genRndChar = () => {
            const idx = Math.floor(Math.random() * chars.length);
            return chars[idx];
        };

        id = "";
        for (let i = 0; i < ID_LEN; i++) {
            id += genRndChar();
        }
    }

    const metadataPath = METADATA_DIR + id + METADATA_EXT;
    // Look for the latest version in the metadata directory. If there is no metadata file, then it is the first version.
    if (fs.existsSync(metadataPath)) {
        version = fs.readFileSync(metadataPath, {encoding: 'utf-8'});
        // Increment the version and convert back to string
        version = Number.parseInt(version) + 1;
        version = version + "";
    } else {
        version = "1";
    }

    const newLocalToken = id + LOCAL_SEPARATOR + version;
    
    fs.writeFileSync(metadataPath, version);

    const filePath = DATA_DIR + newLocalToken + FILE_EXT;
    const stringBody = JSON.stringify(req.body);
    fs.writeFileSync(filePath, stringBody);
    
    res.status(200).json({
        id,
        version
    });
});
```

The request body itself is a JSON containing the following attributes:

* payload: That's the content itself in the form of a string, which may be a JavaScript/TypeScript code string in the case of the Playground, or a JSON string in the case of Animations.
* name
* description
* tags

The response body is also a JSON, and should contain the snippet ID and snippet version as attributes.

## Retrieving a snippet

When retrieving a snippet, a [HTTP GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) request is sent to the Snippet Server, containing at least the ID of the snippet and possibly its version. You can see this in action here:

```javascript
app.get("/:id/:version?", (req, res) => {
    const id = req.params.id;
    const version = req.params.version || "1";
    
    const localToken = id + LOCAL_SEPARATOR + version;
    const path = DATA_DIR + localToken + FILE_EXT;
    
    if (fs.existsSync(path)) {
        const rawData = fs.readFileSync(path);
        const parsedData = JSON.parse(rawData);
        
        res.status(200).json({
            name: parsedData.name,
            description: parsedData.description,
            tags: parsedData.tags,
            jsonPayload: parsedData.payload
        });
    } else {
        res.status(404).send();
    }
});
```

The response returned to the Babylon tools is a JSON with almost the same format as the POST body, with only one difference: the "payload" attribute is named "jsonPayload".

And that's all you need for your own Snippet Server! You can add more functionalities too, like deletion, authentication, and search.

## Using your server on Babylon

Now that you have a server up and running, you'll want to point your Babylon library and tools to it. This can be accomplished by [making a copy of the Babylon repository locally](/contribute/toBabylon/HowToContribute) and changing instances of the URL "https://snippet.babylonjs.com" to your own Snippet Server URL. You can use the same instance of the server for all cases, or you can have separate instances with separate URLs for separate functionalities like Node Material, Animation, etc. To make it easier to find all these URLs, you can use the "CTRL+SHIFT+F" shortcut on Visual Studio Code (if that's your IDE of choice):

![Example of using the Search function of Visual Studio Code to search for "https://snippet.babylonjs.com"](/img/tools/Playground/snippet_search.png)

## A Note About CORS

Depending on your browser of choice, your calls to the Snippet Server may be blocked by [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), so you'll need to add the [Access-Control-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#access-control-allow-origin) header to your responses. The easiest way to do that in Express is using the [CORS Middleware](https://expressjs.com/en/resources/middleware/cors.html).



## The Playground

The place to try out coding with Babylon.js. [Playground](https://playground.babylonjs.com/)

Experimenting and changing any code in the playground and clicking on the **Run** button will not affect any original code in the playground you are currently using.
Original code can be restored by refreshing the browser.

You can write the code in JavaScript or Typescript. The playground software compiles the code to JavaScript, in the background, before rendering.

### Scene creation functions

Usually you'll want to place your scene creation code in the already defined `createScene` function. But sometimes, you might want to substitute it for the `delayCreateScene` function, which allows you to return a scene without a camera (because for instance you plan to create the camera after an asynchronous mesh load, like: <Playground id="TVHK90#113" title="delayCreateScene example" description="An example of a Playground scene defined using the delayCreateScene function" image="/img/playgroundsAndNMEs/delayCreateSceneExample.png"/>).

You can also override the engine creation by defining the `createEngine` function. This can be useful if you want to test a scene without antialiasing, for example: <Playground id="#NCWBUU#1" title="createEngine example" description="How to use createEngine on the playground to customize engine creation" image="/img/playgroundsAndNMEs/createEnginePG.png"/>

## Overview

![Playground Overview](/img/how_to/Introduction/playground.jpg)

The Playground consists of four areas:

- A menu bar at the top.
- A links bar at the bottom.
- A coding editor on the left
- A rendering area of the right.

The space for the coding editor and rendering area can be adjusted by dragging the vertical bar between them.

## The Menu

![Playground Menu](/img/how_to/Introduction/pgmenu.jpg)

In Typescript mode the menu has an orange color theme:

![Playground Typescript Menu](/img/how_to/Introduction/pgmenu_ts.jpg)

### Large Screen

- **Title and Version**: As stated.
- **Language**: Typescript/JavaScript switch.
- **Run**: Commands the playground to try to render your scene.
- **Save**: Causes your scene to be permanently stored in the playground's database and it will issue a unique URL for each save. On save you will be asked to complete the metadata so that it can be searched for. Once saved it is a good idea to bookmark the page so you can return to it later. You could then share the URL with others, for example, if it is not working as you expect you can ask a question in the forum along with the link to your playground.
- **Download**: Allows you to download a zip file named _sample.zip_. Once downloaded and unzipped, you will see a file named `index.html`
  which contains everything necessary to run the code in your browser, including links to external _Babylon.js_ and other files.
- **New**: Places a basic `createScene()` function into the editor along with code to initialize the scene variable and provide a camera.
- **Clear**: Empties all the code out of the playground editor. You could then paste in any createScene function you are working on locally.
- **Settings**: The Settings button has a sub menu with extra options
  - _Theme_: Choose the theme for the playground
  - _Font size_: Set the font size in the editor.
  - _Safe Mode_: When the checkbox is ticked the playground issues a "leaving the page?" confirmation warning when you try to unload/reload a freshly-edited, un-saved scene.
  - _Editor_: The checkbox hides or un-hides the editor portion of the playground.
  - _Full Screen_: Makes the render area full screen.
  - _Editor Full Screen_: Makes the editor area full screen.
  - _Format Code_: Pretty prints the code.
  - _Minimap_: Display the minimap of the code editor.
  - _Metadata_: This is where you describe your playground allowing yourself and other to search the playground database for examples of use.
- **Version**: Allows and shows your choice of the Babylon.js framework, either the current stable one or the latest preview version.
- **Examples**: A drop down menu giving examples of playgrounds with a search filter.

### Small Screens

![Playground Typescript Menu](/img/how_to/Introduction/smallScreensPG.png)

- **Menu**: Contains Run, New, Clear, Save and Zip as submenus.
- **Code/Scene**: Bottom Left Corner - switch between Code and Scene views.

## Playground URL formats and templates

After editing any saves of the playground are numbered incrementally from one, for example:

- https://playground.babylonjs.com/#6F0LKI#1
- https://playground.babylonjs.com/#6F0LKI#2
- etc...

Some useful HTML templates are also available:

| Template                                                           | Description                                                                                          |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| [full.html](https://playground.babylonjs.com/full.html#6F0LKI#2)   | Shows the render area in full screen                                                                 |
| [frame.html](https://playground.babylonjs.com/frame.html#6F0LKI#2) | Shows the render area in full screen, but with a bottom toolbar showing FPS, reload and edit buttons |
| [debug.html](https://playground.babylonjs.com/debug.html#6F0LKI#2) | Uses a debug version of Babylon.js                                                                   |

## Forum sharing

Of course the playground is extremely useful to get help from the community. In the forum, simply paste the link of your playground.

You can have fun showing directly your playground embedded into your message, using iframe. But take note that you have to be sparing with this functionality: this will slow down the loading of your topic.

```html
<iframe src="https://playground.babylonjs.com/frame.html#6F0LKI#2" width="400px" height="250px"></iframe>
```

![playground forum sharing ways](/img/features/pgsupport/pg-forum-sharing-ways.jpg)

## Compilation Errors

![compilation error popup](/img/features/pgsupport/pg-compilation-error.jpg)

Any errors in your playground are flagged with a red pop-up box containing limited information. After making an adjustment to your code, you need not close the compilation error pop-up. It should close automatically at the next Run, if all errors have been corrected.

## Focus

Whenever a scene in the playground needs the use of keys to move an object, such as a mesh or camera, around then the rendering area needs to have the focus. After running the playground ensure that the render area has the focus by clicking inside it before using the keys.



## What is Screen Reader?

[Screen reader](https://en.wikipedia.org/wiki/Screen_reader) is an assistive technology for blind or low vision people to interact with digital content. For users with blindness or low vision, they can't rely 100% on visual interface. Depending on the degree of visual disabilities, some of them don't even use a monitor display or mouse when they use computers. This user would use screen reading software to translate what is displayed on screen into speech or braille output. They use keyboard to tell the screen reader what to read and interact with the computer. Here's an example video of how a user uses screen reader: [Screen Reader Demo - YouTube](https://www.youtube.com/watch?v=q_ATY9gimOM&ab_channel=SLCCUniversalAccess).

There are different screen reader applications that a user can choose, including OS built-in screen readers like Windows's "Narrator", MacOS and iOS's "VoiceOver", Android's "TalkBack", and third party screen readers like JAWS and NVDA.

Nowadays 2D pages on web generally have good accessibility support to screen reader users, because it can understand different HTML elements. But 3D applications like WebGL applications do not. This is because objects in webGL applications are rendered in a `<canvas>` element. When screen reader read the page, it will only read: "_Image_", but can't interpret any objects inside the scene. If we do not deal with it correctly, users who are blind or low vision will have difficulty using the application.

The **Accessibility Package** provides a way to create html twin elements for objects in the scene that should be accessible. Here's an example of a simple scene of three boxes using the Accessibility Package. If you turn on a screen reader to read the page, it will say "A big box in the middle of the scene. A small box on the left of the big box. A small box on the right of the big box".

<Playground id="#C9GZTF#11" title="Boxes with accessible description" description="Simple example of boxes with accessible descriptions." />

## How to use Accessibility Package to Support Screen Reader and Keyboard Navigation

### IAccessibilityTag

Blind or low vision users listen to the content and use keyboard to interact, so we need to add description to Babylon.js content that will be read by screen reader. You can add description to your Nodes or Controls (that you think should be accessible) by using **IAccessibilityTag**.

```javascript
let egg = BABYLON.MeshBuilder.CreateSphere("Egg", { diameterX: 0.62, diameterY: 0.8, diameterZ: 0.6 }, scene);
egg.accessibilityTag = {
  description: "An easter egg",
};
```

Not all content in the scene should be accessible. For example, the decorative trees or background image on a UI panel. Only add IAccessibilityTag to the contents that's important to the user experience.

By default, all Controls (GUI) are considered "important" for accessibility, and will have their html twins with its own information (like the text to show on a button), even if you haven't assigned the IAccessibility tag. But if you define the IAccessibilityTag, it can override default metadata (like assigning the IAccessibilityTag.description will override the text to show on a button). By default, Node type objects are not considered "important", unless you assign a IAccessibilityTag to it.

### HTMLTwinRenderer.Render()

The accessibility package basically generates HTML elements for your scene, based on the metadata (IAccessibilityTag) you added to your scene content. The screen reader then can read the HTML elements. To generate it for your scene:

```javascript
ACCESSIBILITY.HTMLTwinRenderer.Render(scene);
```

This will generate a `<div id="accessibility-host">` HTML element right after the Babylon.js scene's canvas element. Inside this div element, the renderer generates HTML twin elementss for each of your accessible contents in the scene. These HTML twin elements are internally connected with Babylon.js objects, so the screen reader user can also interact with the Babylon.js objects through their HTML twin.

### Interaction

Some of your contents in the scene might be interactable (e.g. clickable). For Node type objects, if you use Babylon.js's [ActionManager](https://doc.babylonjs.com/divingDeeper/events/actions) to define the interaction, the Accessibility package can automatically detect it and apply on the generated HTML twin elements, so that the user can use keyboard to trigger events like click or right click on the HTML twin elements, thus trigger the correspond action on the Babylon.js objects. Only ACTION_OnPickTrigger, ACTION_OnLeftPickTrigger, ACTION_OnRightPickTrigger are supported. For Control type objects, if you defined observer for onPointerClickObservable, the Accessibility package can also automatically detect it and apply on the generated HTML twin element.

If you want to customize the interaction, use the eventHandler field of IAccessibilityTag:

```javascript
let egg = BABYLON.MeshBuilder.CreateSphere("Egg", { diameterX: 0.62, diameterY: 0.8, diameterZ: 0.6 }, scene);
egg.accessibilityTag = {
  description: "An easter egg",
  eventHandler: {
    onclick: yourFunction,
  },
};
```

<Playground id="#C9GZTF#12" title="Custom event handling" description="Accessible scene with custom event handling." />

### When is HTML twins Updated

Your scene might be not static, and you may want to update html twins when your scene is changed. The html twins will automatically update when:

- A Node (Mesh or TransformNode) is added/removed in a scene;
- A Node (Mesh or TransformNode)'s enabled status is changed;
- A Control is added/removed from a Container;
- A Control's isVisible status is changed;
- A Node or Control's IAccessibilityTag is assigned or re-assigned;

<Playground id="#C9GZTF#13" title="Update Accessibility Tree" description="Demo scene that shows situations where the accessibility tree is automatically updated" />

### Customize HTML Twin with ARIA Attributes

If you are a pro in Web Accessibility, and know what you are doing, you can use IAccessibilityTag.role and IAccessibilityTag.aria to assign different [Role and ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) to the HTML Twin of this object to do whatever you want.

```javascript
yourObject.accessibilityTag = {
    description: "An demo customized progressbar",
    role: "progressbar",
    aria: {
      "aria-valuemin": "0",
      "aria-valuemax": "100"
      "aria-valuenow": "0"
    }
}
```

Note that using ARIA attributes incorrectly can introduce errors in your webpage. While ARIA is designed to make web pages more accessible, if used incorrectly, it can do more harm than good. If you choose to use ARIA, you are responsible for mimicking the equivalent browser behavior in script.
