
## 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/tree/master/packages/tools/playground/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 itelf

Let's take a look at a simple example, Seting up a shadow generator.

```json
{
    "label" : "Setup a shadow generator",
    "documentation" : "https://doc.babylonjs.com/features/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.


## 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](/divingDeeper/developWithBjs/howToStart) 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).



# 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.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/", "PBR_Spheres.glb", scene);
```

 <Playground id="#YIU90M" 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
 ```

- *(optionnal)* 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.SceneLoader.ImportMesh("", "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" 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.SceneLoader.ImportMesh("", "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
- you now have a direct access url: `https://dl.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb`

It can be used in this way:

```javascript
BABYLON.SceneLoader.ImportMesh("", "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.SceneLoader.Append(url, "", scene, function(scene) {
        scene.createDefaultCameraOrLight(true, true, true),
        scene.createDefaultEnvironment();
    }, null, null, ".gltf");
```

 <Playground id="#KEY4S4" 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."/>

Playground Templates

Using Playground Templates

Contributing Playground Templates

Related videos