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 are currently using. Original code can be restored by refreshing the browser.

You can write the code in JavaScript or TypeScript. The Playground 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: delayCreateScene example).

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: createEngine example

Overview

Expand

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 on the right.

The space for the coding editor and rendering area can be adjusted by dragging the vertical bar between them.

The Menu

Expand

In Typescript mode the menu has an orange color theme:

Expand

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 submenu 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 others 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 that gives examples of playgrounds with a search filter.

Small Screens

Expand

• 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:

Forum sharing

Of course, the Playground is extremely useful for getting help from the community. In the forum, simply paste the link to your playground.

You can also embed your playground directly in your message using an iframe. But use this sparingly, because it will slow down the loading of your topic.

<iframe src="https://playground.babylonjs.com/frame.html#6F0LKI#2" width="400px" height="250px"></iframe>

Expand

Compilation Errors

Expand

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 requires the use of keys to move an object, such as a mesh or camera, the rendering area needs to have focus. After running the Playground, ensure that the render area has focus by clicking inside it before using the keys.

Further reading

The Texture Library

Learn about the free available textures in the Babylon.js texture library.

The Meshes Library

Learn about the free available meshes in the Babylon.js meshes library.

Using External Assets In the Playground

Learn how to use external assets in the playground in Babylon.js.

Inspector V2

Learn all about the incredibly powerful debug layer called "The Inspector" in Babylon.js.

Make your own Snippet Server

Learn about the Snippet Server and how you can implement and use your own.

Coming next

Using External Assets In the Playground

Learn how to use external assets in the playground in Babylon.js.

Playground Templates

Learn how to add common code snippets into the playground quickly with playground templates.

Make your own Snippet Server

Learn about the Snippet Server and how you can implement and use your own.

Using the Playground for Development in Babylon.js

Learn all about making your development process easier with the super handy playground.