

## 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 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.

## 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** ![run](/img/features/PGsupport/run.jpg): Commands the playground to try to render your scene.
- **Save** ![save](/img/features/PGsupport/save.jpg): 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** ![zip](/img/features/PGsupport/zip.jpg): 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** ![new](/img/features/PGsupport/new.jpg): Places a basic `createScene()` function into the editor along with code to initialise the scene variable and provide a camera.
- **Clear** ![clear](/img/features/PGsupport/clear.jpg): Empties all the code out of the playground editor.  You could then paste in any createScene function you are working on locally.
- **Settings** ![set](/img/features/PGsupport/set.jpg): 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.
  - *Inspector*: The checkbox toggles the playground scene inspector which shows a multitude of variable values.
  - *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** ![examples](/img/features/PGsupport/ex.jpg): A drop down menu giving examples of playgrounds with a search filter.

### Small Screens

- **Menu** ![menu](/img/features/PGsupport/menu.jpg): Contains Run, New, Clear, Save and Zip as submenus.
- **Code** ![code](/img/features/PGsupport/code.jpg): Bottom Left Corner - switch to Code View and Editor.
- **Scene** ![scene](/img/features/PGsupport/scene.jpg): Bottom Right Corner - switch to Scene View.

## Playground URL formats

New playgrounds have this URL format

| JavaScript | Typescript |
|---|---|
| https://www.babylonjs-playground.com/# | [https://www.babylonjs-playground.com/#](https://www.babylonjs-playground.com/#) |

Saved playgrounds have a hash code reference key added to the URL

| JavaScript | Typescript |
|---|---|
| https://www.babylonjs-playground.com/#6F0LKI | [https://www.babylonjs-playground.com/#M1HI7X](https://www.babylonjs-playground.com/ts.html#M1HI7X) |


After editing any saves of the playground are numbered incrementally from one, for example 

| JavaScript | Typescript |
|---|---|
| https://www.babylonjs-playground.com/#6F0LKI#1 | [https://www.babylonjs-playground.com/#M1HI7X#1](https://www.babylonjs-playground.com/ts.html#M1HI7X#1) |
| https://www.babylonjs-playground.com/#6F0LKI#2 | [https://www.babylonjs-playground.com/#M1HI7X#2](https://www.babylonjs-playground.com/ts.html#M1HI7X#1) |
  
etc.

You might be interested to know that [some html templates](https://github.com/BabylonJS/Babylon.js/tree/master/Playground) are also available:

Template | Description
--- | ---
[full.html](https://www.babylonjs-playground.com/full.html#6F0LKI#2) | show the render area in full screen
[frame.html](https://www.babylonjs-playground.com/frame.html#6F0LKI#2) | show the render area in full screen, but with a bottom toolbar showing FPS, reload and edit buttons
[indexStable.html](https://www.babylonjs-playground.com/indexStable.html#6F0LKI#2) | use the BJS stable version, not the preview one
[debug.html](https://www.babylonjs-playground.com/debug.html#6F0LKI#2) | used to run a version of the playground which uses debug version of babylon.js
[index-local.html](https://www.babylonjs-playground.com/index-local.html#6F0LKI#2) | used for local development using VSCode

## 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 imbedded 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://www.babylonjs-playground.com/frame.html#6F0LKI#2" width="400px" height="250px" ></iframe>
```

![playground forum sharing ways](/img/features/pgsupport/pg-forum-sharing-ways.jpg)
> *so many ways to share an issue*

## 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.

Please note that you can name your main function `delayCreateScene` instead of `createScene` if you want to return a scene without a camera (because for instance you plan to load a scene using `SceneLoader`).

## 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. 


## Contributions

You can contribute to either the babylon.js directly or the documentation for it. The documentation is split into two parts, the 'tutorial' section and the API. The documentation for the API is written from comments within the code for Babylon.js so that details of how to contribute to the API fall under this section.


This category provides support in creating 3D scene from getting started, in the Playground, with basic camera, light and shapes to multiple scenes with photorealistic textures and 3D environments.




A selection of tutorials on games and applications that describe how they are achieved.


## Welcome

Hello and welcome to Babylon.js! We know you're eager to start your learning journey, but before you dive any deeper or go clicking around, we'd humbly ask that you take the time to read through the following two very important documents. Reading these documents and seeing how everything fits together will set you up for success as you begin your Babylon.js learning journey.

- [The Journey Starts](/overview/journey)
- [About The Documentation](/overview/learningTheDocs)


# Tools and Resources

This section contains all sorts of handy information for developing scenes and application with Babylon.js. This section is sure to help you make the most beautiful experiences possible, as quickly and effeciently as possible!



## Workflow and Project Development
This category provides support in the workflow required in creating a 3D web app from getting started, by downloading a complete webpage from a simple playground, to building a large application, using an IDE and other developmental frameworks and packages.



<div style={{width: "100%", textAlign: "left", paddingTop: "1%", fontSize: "2em"}}>Welcome To The Babylon.js Documentation</div>
<div style={{width: "100%", textAlign: "left", paddingTop: "2%", fontSize: "1em"}}><p>Hello and welcome to the Babylon.js Documentation. In these pages you will find everything you could ever want to know about this powerful, beautiful, simple, and completely open-source web rendering engine. Whether you are just starting your Babylon.js journey, or you are a seasoned veteran, it is our sincere hope that the information contained here will help you bring your ideas to life.</p> <p>Although both are parts of a whole, we cater, individually, for those whose first interest is learning the features of Babylon.js to create 3D scenes and for those 3D world builders who want to know the workflow in order to develop simple or complex web apps.</p> <p>Whatever your approach our Playground is at the center of your learning and before you go any further, we strongly encourage EVERYONE <a href = "/overview/journey">to start your Babylon.js journey here</a></p></div>

<div style={{width: "100%"}}>
<div style={{width: "100%", textAlign: "center", paddingTop: "1%", fontSize: "2em"}}>Learn Babylon.js</div>
<div style={{width: "50%", textAlign: "center", fontSize: "1.75em", float: "left", backgroundColor: "#DDDDDD"}}>Features</div><div style={{width: "50%", textAlign: "center", fontSize: "1.75em", float: "left", backgroundColor: "#AAAAAA"}}>Workflow</div>
<div style={{width: "50%", textAlign: "center", fontSize: "1.55em", float: "left", backgroundColor: "#DDDDDD"}}>Scene Creation</div><div style={{width: "50%", textAlign: "center", fontSize: "1.55em", float: "left", backgroundColor: "#AAAAAA"}}>Project Development</div>
<div style={{width: "50%", textAlign: "center", fontSize: "1.4em", float: "left", paddingTop: "1%", backgroundColor: "#DDDDDD"}}><a href = "/features/get_started">Starter Scene Code</a></div>
<div style={{width: "50%", textAlign: "center", fontSize: "1.4em", float: "left", paddingTop: "1%", backgroundColor: "#AAAAAA"}}><a href = "/workflow/get_started">Starter HTML Template</a></div>
<div style={{width: "50%", textAlign: "center", fontSize: "1.25em", float: "left", backgroundColor: "#DDDDDD"}}>Draw simple 3D shapes in the Playground.</div>
<div style={{width: "50%", textAlign: "center", fontSize: "1.25em", float: "left", backgroundColor: "#AAAAAA"}}>Download a 3D webpage from the Playground.</div>
<img src = "/img/home/home_jigsaw_leftA.png" width = "50%" /><img src = "/img/home/home_jigsaw_rightA.png" width = "50%" />
<div  style={{width: "50%", textAlign: "center", fontSize: "1.25em", float: "left", backgroundColor: "#DDDDDD"}}>Advance to realistic 3D settings and environments.</div>
<div  style={{width: "50%", textAlign: "center", fontSize: "1.25em", float: "left", backgroundColor: "#AAAAAA"}}>Advance to 3D apps with IDEs and frameworks.</div>
</div>




In This Category

Overview

The very beginning of EVERYONE's Babylon journey.

Workflow

The workflow from simple webpage to complete app with IDE and developmental frameworks.

Features

Describes the features of Babylon.js and the code for them

Tools And Resources

Learn about handy development tools and resources available to you for creating stunning Babylon.js scenes.

Guided Learning

A selection of tutorials on games and applications that describe how they are achieved

Playground

Learn about the incredibly powerful playground, the online Babylon.js IDE.

Playground search

Documentation page for Playground search

Contribute

Describes how you can contibute to the development of Babylon.js

What's New

Documentation page for What's New

API

Documentation page for API

Search

Documentation page for Search