Playground
The Playground
The place to try out coding with Babylon.js. Playground
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
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
In Typescript mode the menu has an orange color theme
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.htmlwhich 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 initialise 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.
- 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 : A drop down menu giving examples of playgrounds with a search filter.
Small Screens
- Menu : Contains Run, New, Clear, Save and Zip as submenus.
- Code : Bottom Left Corner - switch to Code View and Editor.
- Scene : Bottom Right Corner - switch to Scene View.
Playground URL formats
New playgrounds have this URL format
| JavaScript | Typescript |
|---|---|
JavaScript https://www.babylonjs-playground.com/# | Typescript https://www.babylonjs-playground.com/# |
Saved playgrounds have a hash code reference key added to the URL
| JavaScript | Typescript |
|---|---|
JavaScript https://www.babylonjs-playground.com/#6F0LKI | Typescript https://www.babylonjs-playground.com/#M1HI7X |
After editing any saves of the playground are numbered incrementally from one, for example
| JavaScript | Typescript |
|---|---|
JavaScript https://www.babylonjs-playground.com/#6F0LKI#1 | Typescript https://www.babylonjs-playground.com/#M1HI7X#1 |
JavaScript https://www.babylonjs-playground.com/#6F0LKI#2 | Typescript https://www.babylonjs-playground.com/#M1HI7X#2 |
etc.
You might be interested to know that some html templates are also available:
| Template | Description |
|---|---|
Template full.html | Description show the render area in full screen |
Template frame.html | Description show the render area in full screen, but with a bottom toolbar showing FPS, reload and edit buttons |
Template indexStable.html | Description use the BJS stable version, not the preview one |
Template debug.html | Description used to run a version of the playground which uses debug version of babylon.js |
Template index-local.html | Description 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.
<iframe src="https://www.babylonjs-playground.com/frame.html#6F0LKI#2" width="400px" height="250px" ></iframe>
so many ways to share an issue
Compilation Errors
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.
