First playground check

Playground/fileSaver.js

@@ -0,0 +1,253 @@
+/*! FileSaver.js
+ *  A saveAs() FileSaver implementation.
+ *  2014-01-24
+ *
+ *  By Eli Grey, http://eligrey.com
+ *  License: X11/MIT
+ *    See LICENSE.md
+ */
+
+/*global self */
+/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
+
+var saveAs = saveAs
+  // IE 10+ (native saveAs)
+  || (typeof navigator !== "undefined" &&
+      navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
+  // Everyone else
+  || (function (view) {
+      "use strict";
+      // IE <10 is explicitly unsupported
+      if (typeof navigator !== "undefined" &&
+          /MSIE [1-9]\./.test(navigator.userAgent)) {
+          return;
+      }
+      var
+            doc = view.document
+            // only get URL when necessary in case BlobBuilder.js hasn't overridden it yet
+          , get_URL = function () {
+              return view.URL || view.webkitURL || view;
+          }
+          , URL = view.URL || view.webkitURL || view
+          , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
+          , can_use_save_link = !view.externalHost && "download" in save_link
+          , click = function (node) {
+              var event = doc.createEvent("MouseEvents");
+              event.initMouseEvent(
+                  "click", true, false, view, 0, 0, 0, 0, 0
+                  , false, false, false, false, 0, null
+              );
+              node.dispatchEvent(event);
+          }
+          , webkit_req_fs = view.webkitRequestFileSystem
+          , req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
+          , throw_outside = function (ex) {
+              (view.setImmediate || view.setTimeout)(function () {
+                  throw ex;
+              }, 0);
+          }
+          , force_saveable_type = "application/octet-stream"
+          , fs_min_size = 0
+          , deletion_queue = []
+          , process_deletion_queue = function () {
+              var i = deletion_queue.length;
+              while (i--) {
+                  var file = deletion_queue[i];
+                  if (typeof file === "string") { // file is an object URL
+                      URL.revokeObjectURL(file);
+                  } else { // file is a File
+                      file.remove();
+                  }
+              }
+              deletion_queue.length = 0; // clear queue
+          }
+          , dispatch = function (filesaver, event_types, event) {
+              event_types = [].concat(event_types);
+              var i = event_types.length;
+              while (i--) {
+                  var listener = filesaver["on" + event_types[i]];
+                  if (typeof listener === "function") {
+                      try {
+                          listener.call(filesaver, event || filesaver);
+                      } catch (ex) {
+                          throw_outside(ex);
+                      }
+                  }
+              }
+          }
+          , FileSaver = function (blob, name) {
+              // First try a.download, then web filesystem, then object URLs
+              var
+                    filesaver = this
+                  , type = blob.type
+                  , blob_changed = false
+                  , object_url
+                  , target_view
+                  , get_object_url = function () {
+                      var object_url = get_URL().createObjectURL(blob);
+                      deletion_queue.push(object_url);
+                      return object_url;
+                  }
+                  , dispatch_all = function () {
+                      dispatch(filesaver, "writestart progress write writeend".split(" "));
+                  }
+                  // on any filesys errors revert to saving with object URLs
+                  , fs_error = function () {
+                      // don't create more object URLs than needed
+                      if (blob_changed || !object_url) {
+                          object_url = get_object_url(blob);
+                      }
+                      if (target_view) {
+                          target_view.location.href = object_url;
+                      } else {
+                          window.open(object_url, "_blank");
+                      }
+                      filesaver.readyState = filesaver.DONE;
+                      dispatch_all();
+                  }
+                  , abortable = function (func) {
+                      return function () {
+                          if (filesaver.readyState !== filesaver.DONE) {
+                              return func.apply(this, arguments);
+                          }
+                      };
+                  }
+                  , create_if_not_found = { create: true, exclusive: false }
+                  , slice
+              ;
+              filesaver.readyState = filesaver.INIT;
+              if (!name) {
+                  name = "download";
+              }
+              if (can_use_save_link) {
+                  object_url = get_object_url(blob);
+                  // FF for Android has a nasty garbage collection mechanism
+                  // that turns all objects that are not pure javascript into 'deadObject'
+                  // this means `doc` and `save_link` are unusable and need to be recreated
+                  // `view` is usable though:
+                  doc = view.document;
+                  save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a");
+                  save_link.href = object_url;
+                  save_link.download = name;
+                  var event = doc.createEvent("MouseEvents");
+                  event.initMouseEvent(
+                      "click", true, false, view, 0, 0, 0, 0, 0
+                      , false, false, false, false, 0, null
+                  );
+                  save_link.dispatchEvent(event);
+                  filesaver.readyState = filesaver.DONE;
+                  dispatch_all();
+                  return;
+              }
+              // Object and web filesystem URLs have a problem saving in Google Chrome when
+              // viewed in a tab, so I force save with application/octet-stream
+              // http://code.google.com/p/chromium/issues/detail?id=91158
+              if (view.chrome && type && type !== force_saveable_type) {
+                  slice = blob.slice || blob.webkitSlice;
+                  blob = slice.call(blob, 0, blob.size, force_saveable_type);
+                  blob_changed = true;
+              }
+              // Since I can't be sure that the guessed media type will trigger a download
+              // in WebKit, I append .download to the filename.
+              // https://bugs.webkit.org/show_bug.cgi?id=65440
+              if (webkit_req_fs && name !== "download") {
+                  name += ".download";
+              }
+              if (type === force_saveable_type || webkit_req_fs) {
+                  target_view = view;
+              }
+              if (!req_fs) {
+                  fs_error();
+                  return;
+              }
+              fs_min_size += blob.size;
+              req_fs(view.TEMPORARY, fs_min_size, abortable(function (fs) {
+                  fs.root.getDirectory("saved", create_if_not_found, abortable(function (dir) {
+                      var save = function () {
+                          dir.getFile(name, create_if_not_found, abortable(function (file) {
+                              file.createWriter(abortable(function (writer) {
+                                  writer.onwriteend = function (event) {
+                                      target_view.location.href = file.toURL();
+                                      deletion_queue.push(file);
+                                      filesaver.readyState = filesaver.DONE;
+                                      dispatch(filesaver, "writeend", event);
+                                  };
+                                  writer.onerror = function () {
+                                      var error = writer.error;
+                                      if (error.code !== error.ABORT_ERR) {
+                                          fs_error();
+                                      }
+                                  };
+                                  "writestart progress write abort".split(" ").forEach(function (event) {
+                                      writer["on" + event] = filesaver["on" + event];
+                                  });
+                                  writer.write(blob);
+                                  filesaver.abort = function () {
+                                      writer.abort();
+                                      filesaver.readyState = filesaver.DONE;
+                                  };
+                                  filesaver.readyState = filesaver.WRITING;
+                              }), fs_error);
+                          }), fs_error);
+                      };
+                      dir.getFile(name, { create: false }, abortable(function (file) {
+                          // delete file if it already exists
+                          file.remove();
+                          save();
+                      }), abortable(function (ex) {
+                          if (ex.code === ex.NOT_FOUND_ERR) {
+                              save();
+                          } else {
+                              fs_error();
+                          }
+                      }));
+                  }), fs_error);
+              }), fs_error);
+          }
+          , FS_proto = FileSaver.prototype
+          , saveAs = function (blob, name) {
+              return new FileSaver(blob, name);
+          }
+      ;
+      FS_proto.abort = function () {
+          var filesaver = this;
+          filesaver.readyState = filesaver.DONE;
+          dispatch(filesaver, "abort");
+      };
+      FS_proto.readyState = FS_proto.INIT = 0;
+      FS_proto.WRITING = 1;
+      FS_proto.DONE = 2;
+
+      FS_proto.error =
+      FS_proto.onwritestart =
+      FS_proto.onprogress =
+      FS_proto.onwrite =
+      FS_proto.onabort =
+      FS_proto.onerror =
+      FS_proto.onwriteend =
+          null;
+
+      view.addEventListener("unload", process_deletion_queue, false);
+      saveAs.unload = function () {
+          process_deletion_queue();
+          view.removeEventListener("unload", process_deletion_queue, false);
+      };
+      return saveAs;
+  }(
+	   typeof self !== "undefined" && self
+	|| typeof window !== "undefined" && window
+	|| this.content
+));
+// `self` is undefined in Firefox for Android content script context
+// while `this` is nsIContentFrameMessageManager
+// with an attribute `content` that corresponds to the window
+
+if (typeof module !== "undefined" && module !== null) {
+    module.exports = saveAs;
+} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
+    define([], function () {
+        return saveAs;
+    });
+}

Playground/frame.css

@@ -0,0 +1,39 @@
+html, body, canvas {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background-color: #272822;
+    margin:0;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    touch-action: none;
+}
+
+#fpsLabel {
+    position: absolute;
+    right: 10px;
+    top: 20px;
+    cursor: default;
+    color: white;
+}
+
+#link {
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+    cursor: default;
+    color: white;
+    text-align: center;
+    left:0;
+    cursor:pointer;
+}
+
+#refresh {
+    position: absolute;
+    width: 100%;
+    top: 10px;
+    cursor: default;
+    color: white;
+    text-align: center;
+    left:0;
+    cursor:pointer;
+}

Playground/frame.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Babylon.js Playground</title>
+    <script src="hand.minified-1.2.js"></script>
+    <script src="http://www.babylonjs.com/poly2tri.js"></script>
+    <!-- Babylon.js -->
+    <script src="http://www.babylonjs.com/cannon.js"></script>
+    <script src="http://www.babylonjs.com/Oimo.js"></script>
+    <script src="http://www.babylonjs.com/babylon.js"></script>
+    <script src="babylon.fireMaterial.min.js"></script>
+    <script src="babylon.waterMaterial.min.js"></script>
+    <script src="babylon.lavaMaterial.min.js"></script>
+    <script src="babylon.normalMaterial.min.js"></script>
+    <script src="babylon.pbrMaterial.min.js"></script>
+    <script src="babylon.skyMaterial.min.js"></script>
+    <script src="babylon.triPlanarMaterial.min.js"></script>
+    <script src="babylon.terrainMaterial.min.js"></script>
+    <script src="babylon.gradientMaterial.min.js"></script>
+    <script src="babylon.furMaterial.min.js"></script>    
+    <script src="babylon.gridMaterial.min.js"></script>
+
+    <script src="babylon.brickProceduralTexture.min.js"></script>
+    <script src="babylon.cloudProceduralTexture.min.js"></script>
+    <script src="babylon.fireProceduralTexture.min.js"></script>
+    <script src="babylon.grassProceduralTexture.min.js"></script>
+    <script src="babylon.marbleProceduralTexture.min.js"></script>
+    <script src="babylon.roadProceduralTexture.min.js"></script>
+    <script src="babylon.starfieldProceduralTexture.min.js"></script>
+    <script src="babylon.woodProceduralTexture.min.js"></script>  
+    <link href="frame.css" rel="stylesheet" />
+</head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+
+    <span class="label" id="fpsLabel">FPS</span>
+
+    <a class="link" id="refresh" href="#">Reload</a>
+    <a class="link" id="link" href="#" target="_blank">Edit</a>
+
+    <script src="http://code.jquery.com/jquery.js"></script>
+    <script src="frame.js"></script>
+</body>
+</html>

Playground/frame.js

@@ -0,0 +1,161 @@
+(function () {
+    var snippetUrl = "http://babylonjs-api.azurewebsites.net/api/snippet";
+    var currentSnippetToken;
+    var engine;
+    var fpsLabel = document.getElementById("fpsLabel");
+    var scripts;
+    var zipCode;
+    BABYLON.Engine.ShadersRepository = "/src/Shaders/";
+    var loadScript = function (scriptURL, title) {
+        var xhr = new XMLHttpRequest();
+
+        xhr.open('GET', scriptURL, true);
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    blockEditorChange = true;
+                    jsEditor.setValue(xhr.responseText);
+                    jsEditor.setPosition({ lineNumber: 0, column: 0 });
+                    blockEditorChange = false;
+                    compileAndRun();
+
+                    document.getElementById("currentScript").innerHTML = title;
+
+                    currentSnippetToken = null;
+                }
+            }
+        };
+
+        xhr.send(null);
+    };
+
+    compileAndRun = function (code) {
+        try {
+
+            if (!BABYLON.Engine.isSupported()) {
+                showError("Your browser does not support WebGL");
+                return;
+            }
+
+            if (engine) {
+                engine.dispose();
+                engine = null;
+            }
+
+            var canvas = document.getElementById("renderCanvas");
+            engine = new BABYLON.Engine(canvas, true);
+            engine.renderEvenInBackground = false;
+            BABYLON.Camera.ForceAttachControlToAlwaysPreventDefault = true;
+
+            engine.runRenderLoop(function () {
+                if (engine.scenes.length === 0) {
+                    return;
+                }
+
+                if (canvas.width !== canvas.clientWidth) {
+                    engine.resize();
+                }
+
+                var scene = engine.scenes[0];
+
+                if (scene.activeCamera || scene.activeCameras.length > 0) {
+                    scene.render();
+                }
+
+                fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
+            });
+
+            var scene;
+            if (code.indexOf("createScene") !== -1) { // createScene
+                eval(code);
+                scene = createScene();
+                if (!scene) {
+                    showError("createScene function must return a scene.");
+                    return;
+                }
+
+                zipCode = code + "\r\n\r\nvar scene = createScene();";
+            } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
+                eval(code);
+                scene = CreateScene();
+                if (!scene) {
+                    showError("CreateScene function must return a scene.");
+                    return;
+                }
+
+                zipCode = code + "\r\n\r\nvar scene = CreateScene();";
+            } else if (code.indexOf("createscene") !== -1) { // createscene
+                eval(code);
+                scene = createscene();
+                if (!scene) {
+                    showError("createscene function must return a scene.");
+                    return;
+                }
+
+                zipCode = code + "\r\n\r\nvar scene = createscene();";
+            } else { // Direct code
+                scene = new BABYLON.Scene(engine);
+                eval("runScript = function(scene, canvas) {" + code + "}");
+                runScript(scene, canvas);
+
+                zipCode = "var scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
+            }
+
+        } catch (e) {
+            showError(e.message);
+        }
+    };
+    window.addEventListener("resize", function () {
+        if (engine) {
+            engine.resize();
+        }
+    });
+
+    // UI
+
+    var cleanHash = function () {
+        var splits = decodeURIComponent(location.hash.substr(1)).split("#");
+
+        if (splits.length > 2) {
+            splits.splice(2, splits.length - 2);
+        }
+
+        location.hash = splits.join("#");
+    }
+
+    var checkHash = function () {
+        if (location.hash) {
+            cleanHash();
+
+            try {
+                var xmlHttp = new XMLHttpRequest();
+                xmlHttp.onreadystatechange = function () {
+                    if (xmlHttp.readyState === 4) {
+                        if (xmlHttp.status === 200) {
+                            var snippet = JSON.parse(xmlHttp.responseText);
+                            compileAndRun(snippet.code.toString());
+
+                            document.getElementById("refresh").addEventListener("click", function () {
+                                compileAndRun(snippet.code.toString());
+                            });
+                        }
+                    }
+                }
+
+                var hash = location.hash.substr(1);
+                currentSnippetToken = hash.split("#")[0];
+
+                xmlHttp.open("GET", snippetUrl + "/" + hash.replace("#", "/"));
+                xmlHttp.send();
+
+                document.getElementById("link").href = "http://www.babylonjs-playground.com/#" + hash;
+            } catch (e) {
+
+            }
+        }
+    }
+
+    checkHash();
+
+})();

Playground/index.css

@@ -0,0 +1,124 @@
+html, body {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background-color: #272822;
+}
+
+x-splitbox {
+    position: absolute;
+    left: 0px;
+    top: 50px;
+    width: 100%;
+    bottom: 40px;
+    height: auto;
+}
+
+    x-splitbox > [splitter]:after {
+        display: none;
+    }
+
+
+#jsEditor {
+    min-width: 250px;
+}
+
+#canvasZone {
+    min-width: 250px;
+    height: 100%;
+}
+
+#renderCanvas {
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+}
+
+ul#scriptsList {
+    overflow-y: auto;
+    height: 600px;
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+    padding: 10px
+}
+
+#fpsLabel {
+    position: absolute;
+    right: 10px;
+    top: 70px;
+    cursor: default;
+}
+
+#topbar {
+    padding: 5px;
+}
+
+.navbar .brand {
+    margin-left: 0px;
+}
+
+#errorZone {
+    position: absolute;
+    width: 50%;
+    left: 25%;
+    bottom: 40px;
+}
+
+#statusBar {
+    padding: 10px 15px 10px;
+    color: #999;
+}
+
+@media (max-width: 800px) {
+    .desktopOnly {
+        display: none !important;
+    }
+}
+
+@media (max-width: 1100px) {
+    .largeOnly {
+        display: none !important;
+    }
+}
+
+@media (max-width: 550px) {
+    .btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
+        font-size: 12px !important;
+    }
+}
+
+/* MONACO */
+.monaco-editor .container:before, .monaco-editor .row:before {
+    content: "";
+    display: inherit;
+}
+
+.monaco-editor .container:after, .monaco-editor .row:after {
+    clear: inherit;
+}
+
+.monaco-editor .container {
+    width: auto;
+    margin: inherit;
+    padding: inherit;
+}
+
+.monaco-editor .close {
+    float: none;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    text-shadow: inherit;
+    opacity: inherit;
+    filter: inherit;
+}
+
+.monaco-editor .row {
+    margin: inherit;
+}
+
+.monaco-editor .invisible {
+    visibility: visible;
+}

Playground/index.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Babylon.js Playground</title>
+    <script src="http://www.babylonjs.com/poly2tri.js"></script>
+    <!--x-tag-->
+    <script src="xtag.min.js"></script>
+    <script src="splitbox.js"></script>
+    <link href="splitbox.css" rel="stylesheet" />
+    <!-- jszip -->
+    <script src="jszip.min.js"></script>
+    <script src="fileSaver.js"></script>
+    <!-- Bootstrap -->
+    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
+    <!-- Babylon.js -->
+    <script src="../dist/preview release/cannon.js"></script>
+    <script src="../dist/preview release/Oimo.js"></script>
+    <!--<script src="../babylon.js"></script>-->
+    <script src="../src/Math/babylon.math.js"></script>
+    <script src="../src/Tools/babylon.observable.js"></script>
+    <script src="../src/Culling/babylon.ray.js"></script>
+    <script src="../src/States/babylon.alphaCullingState.js"></script>
+    <script src="../src/States/babylon.depthCullingState.js"></script>
+    <script src="../src/States/babylon.stencilState.js"></script>
+    <script src="../src/Tools/babylon.decorators.js"></script>
+    <script src="../src/Tools/babylon.database.js"></script>
+    <script src="../src/Tools/babylon.tools.tga.js"></script>
+    <script src="../src/Tools/babylon.tools.dds.js"></script>
+    <script src="../src/Tools/babylon.smartArray.js"></script>
+    <script src="../src/Tools/babylon.tools.js"></script>
+    <script src="../src/babylon.engine.js"></script>
+    <script src="../src/babylon.node.js"></script>
+    <script src="../src/Mesh/babylon.buffer.js"></script>
+    <script src="../src/Cameras/VR/babylon.vrCameraMetrics.js"></script>
+    <script src="../src/Cameras/babylon.cameraInputsManager.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.arcrotatecamera.input.gamepad.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.arcrotatecamera.input.keyboard.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.arcrotatecamera.input.mousewheel.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.arcrotatecamera.input.pointers.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.freecamera.input.deviceorientation.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.freecamera.input.mouse.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.freecamera.input.touch.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.freecamera.input.keyboard.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.freecamera.input.virtualjoystick.js"></script>
+    <script src="../src/Cameras/Inputs/babylon.freecamera.input.gamepad.js"></script>
+    <script src="../src/Cameras/babylon.freeCameraInputsManager.js"></script>
+    <script src="../src/Cameras/babylon.arcRotateCameraInputsManager.js"></script>
+    <script src="../src/Tools/babylon.filesInput.js"></script>
+    <script src="../src/Collisions/babylon.pickingInfo.js"></script>
+    <script src="../src/Culling/babylon.boundingSphere.js"></script>
+    <script src="../src/Culling/babylon.boundingBox.js"></script>
+    <script src="../src/Culling/babylon.boundingInfo.js"></script>
+    <script src="../src/Mesh/babylon.abstractMesh.js"></script>
+    <script src="../src/Lights/babylon.light.js"></script>
+    <script src="../src/Lights/babylon.pointLight.js"></script>
+    <script src="../src/Lights/babylon.spotLight.js"></script>
+    <script src="../src/Lights/babylon.hemisphericLight.js"></script>
+    <script src="../src/Lights/babylon.directionalLight.js"></script>
+    <script src="../src/Lights/Shadows/babylon.shadowGenerator.js"></script>
+    <script src="../src/Collisions/babylon.collider.js"></script>
+    <script src="../src/Collisions/babylon.collisionCoordinator.js"></script>
+    <script src="../src/Collisions/babylon.collisionWorker.js"></script>
+    <script src="../src/Cameras/babylon.camera.js"></script>
+    <script src="../src/Cameras/babylon.targetCamera.js"></script>
+    <script src="../src/Cameras/babylon.followCamera.js"></script>
+    <script src="../src/Cameras/babylon.freeCamera.js"></script>
+    <script src="../src/Cameras/babylon.touchCamera.js"></script>
+    <script src="../src/Cameras/babylon.arcRotateCamera.js"></script>
+    <script src="../src/Cameras/babylon.deviceOrientationCamera.js"></script>
+    <script src="../src/Cameras/babylon.universalCamera.js"></script>
+    <script src="../src/Tools/babylon.gamepads.js"></script>
+    <script src="../src/Cameras/babylon.gamepadCamera.js"></script>
+    <script src="../src/Rendering/babylon.renderingManager.js"></script>
+    <script src="../src/Rendering/babylon.renderingGroup.js"></script>
+    <script src="../src/babylon.scene.js"></script>
+    <script src="../src/Mesh/babylon.vertexBuffer.js"></script>
+    <script src="../src/Mesh/babylon.InstancedMesh.js"></script>
+    <script src="../src/Mesh/babylon.mesh.js"></script>
+    <script src="../src/Mesh/babylon.groundMesh.js"></script>
+    <script src="../src/Mesh/babylon.subMesh.js"></script>
+    <script src="../src/Mesh/babylon.meshBuilder.js"></script>
+    <script src="../src/Materials/textures/babylon.baseTexture.js"></script>
+    <script src="../src/Materials/textures/babylon.texture.js"></script>
+    <script src="../src/Materials/textures/babylon.cubeTexture.js"></script>
+    <script src="../src/Materials/textures/babylon.renderTargetTexture.js"></script>
+    <script src="../src/Materials/textures/babylon.mirrorTexture.js"></script>
+    <script src="../src/Materials/textures/babylon.dynamicTexture.js"></script>
+    <script src="../src/Materials/textures/babylon.videoTexture.js"></script>
+    <script src="../src/Materials/babylon.effect.js"></script>
+    <script src="../src/Materials/babylon.materialHelper.js"></script>
+    <script src="../src/Materials/babylon.material.js"></script>
+    <script src="../src/Materials/babylon.standardMaterial.js"></script>
+    <script src="../src/Materials/babylon.multiMaterial.js"></script>
+    <script src="../src/Materials/textures/procedurals/babylon.proceduralTexture.js"></script>
+    <script src="../src/Materials/textures/procedurals/babylon.customProceduralTexture.js"></script>
+    <script src="../src/Loading/babylon.sceneLoader.js"></script>
+    <script src="../src/Loading/Plugins/babylon.babylonFileLoader.js"></script>
+    <script src="../src/Sprites/babylon.spriteManager.js"></script>
+    <script src="../src/Sprites/babylon.sprite.js"></script>
+    <script src="../src/Layer/babylon.layer.js"></script>
+    <script src="../src/Particles/babylon.particle.js"></script>
+    <script src="../src/Particles/babylon.particleSystem.js"></script>
+    <script src="../src/Animations/babylon.animation.js"></script>
+    <script src="../src/Animations/babylon.animatable.js"></script>
+    <script src="../src/Animations/babylon.easing.js"></script>
+    <script src="../src/Culling/Octrees/babylon.octree.js"></script>
+    <script src="../src/Culling/Octrees/babylon.octreeBlock.js"></script>
+    <script src="../src/Bones/babylon.bone.js"></script>
+    <script src="../src/Bones/babylon.skeleton.js"></script>
+    <script src="../src/Bones/babylon.skeleton.js"></script>
+    <script src="../src/PostProcess/babylon.postProcess.js"></script>
+    <script src="../src/PostProcess/babylon.postProcessManager.js"></script>
+    <script src="../src/PostProcess/babylon.passPostProcess.js"></script>
+    <script src="../src/PostProcess/babylon.blurPostProcess.js"></script>
+    <script src="../src/PostProcess/babylon.refractionPostProcess.js"></script>
+    <script src="../src/PostProcess/babylon.blackAndWhitePostProcess.js"></script>
+    <script src="../src/PostProcess/babylon.convolutionPostProcess.js"></script>
+    <script src="../src/PostProcess/babylon.filterPostProcess.js"></script>
+    <script src="../src/PostProcess/babylon.fxaaPostProcess.js"></script>
+    <script src="../src/LensFlare/babylon.lensFlare.js"></script>
+    <script src="../src/LensFlare/babylon.lensFlareSystem.js"></script>
+    <script src="../src/Physics/babylon.physicsJoint.js"></script>
+    <script src="../src/Physics/babylon.physicsImpostor.js"></script>
+    <script src="../src/Physics/Plugins/babylon.cannonJSPlugin.js"></script>
+    <script src="../src/Physics/Plugins/babylon.oimoJSPlugin.js"></script>
+    <script src="../src/Physics/babylon.physicsEngine.js"></script>
+    <script src="../src/Tools/babylon.sceneSerializer.js"></script>
+    <script src="../src/Mesh/babylon.csg.js"></script>
+    <script src="../src/PostProcess/babylon.vrDistortionCorrectionPostProcess.js"></script>
+    <script src="../src/Tools/babylon.virtualJoystick.js"></script>
+    <script src="../src/Cameras/babylon.virtualJoysticksCamera.js"></script>
+    <script src="../src/Materials/babylon.shaderMaterial.js"></script>
+    <script src="../src/Mesh/babylon.mesh.vertexData.js"></script>
+    <script src="../src/PostProcess/babylon.anaglyphPostProcess.js"></script>
+    <script src="../src/Tools/babylon.tags.js"></script>
+    <script src="../src/Tools/babylon.andOrNotEvaluator.js"></script>
+    <script src="../src/PostProcess/RenderPipeline/babylon.postProcessRenderPass.js"></script>
+    <script src="../src/PostProcess/RenderPipeline/babylon.postProcessRenderEffect.js"></script>
+    <script src="../src/PostProcess/RenderPipeline/babylon.postProcessRenderPipeline.js"></script>
+    <script src="../src/PostProcess/RenderPipeline/babylon.postProcessRenderPipelineManager.js"></script>
+    <script src="../src/PostProcess/babylon.displayPassPostProcess.js"></script>
+    <script src="../src/Rendering/babylon.boundingBoxRenderer.js"></script>
+    <script src="../src/Actions/babylon.condition.js"></script>
+    <script src="../src/Actions/babylon.action.js"></script>
+    <script src="../src/Actions/babylon.actionManager.js"></script>
+    <script src="../src/Actions/babylon.interpolateValueAction.js"></script>
+    <script src="../src/Actions/babylon.directActions.js"></script>
+    <script src="../src/Mesh/babylon.geometry.js"></script>
+    <script src="../src/Mesh/babylon.linesMesh.js"></script>
+    <script src="../src/Rendering/babylon.outlineRenderer.js"></script>
+    <script src="../src/Tools/babylon.assetsManager.js"></script>
+    <script src="../src/Cameras/VR/babylon.vrDeviceOrientationCamera.js"></script>
+    <script src="../src/Cameras/VR/babylon.webVRCamera.js"></script>
+    <script src="../src/Tools/babylon.sceneOptimizer.js"></script>
+    <script src="../src/Mesh/babylon.meshLODLevel.js"></script>
+    <script src="../src/Audio/babylon.audioengine.js"></script>
+    <script src="../src/Audio/babylon.sound.js"></script>
+    <script src="../src/Audio/babylon.analyser.js"></script>
+    <script src="../src/Debug/babylon.debugLayer.js"></script>
+    <script src="../src/Audio/babylon.soundtrack.js"></script>
+    <script src="../src/Materials/Textures/babylon.rawTexture.js"></script>
+    <script src="../src/Mesh/babylon.polygonMesh.js"></script>
+    <script src="../src/Mesh/babylon.meshSimplification.js"></script>
+    <script src="../src/Rendering/babylon.depthRenderer.js"></script>
+    <script src="../src/PostProcess/babylon.ssaoRenderingPipeline.js"></script>
+    <script src="../src/PostProcess/babylon.volumetricLightScatteringPostProcess.js"></script>
+    <script src="../src/PostProcess/babylon.lensRenderingPipeline.js"></script>
+    <script src="../src/PostProcess/babylon.colorCorrectionPostProcess.js"></script>
+    <script src="../src/Tools/babylon.stringDictionary.js"></script>
+    <script src="../src/PostProcess/babylon.stereoscopicInterlacePostProcess.js"></script>
+    <script src="../src/Cameras/babylon.stereoscopicCameras.js"></script>
+    <script src="../src/PostProcess/babylon.hdrRenderingPipeline.js"></script>
+    <script src="../src/Rendering/babylon.edgesRenderer.js"></script>
+    <script src="../src/PostProcess/babylon.tonemapPostProcess.js"></script>
+    <script src="../src/Tools/babylon.loadingScreen.js"></script>
+    <script src="../src/Materials/babylon.pbrMaterial.js"></script>
+    <script src="../src/Probes/babylon.reflectionProbe.js"></script>
+    <script src="../src/Particles/babylon.solidParticle.js"></script>
+    <script src="../src/Particles/babylon.solidParticleSystem.js"></script>
+    <script src="../src/Debug/babylon.skeletonViewer.js"></script>
+    <script src="../src/Materials/Textures/babylon.hdrCubeTexture.js"></script>
+    <script src="../src/Tools/HDR/babylon.tools.cubemapToSphericalPolynomial.js"></script>
+    <script src="../src/Tools/HDR/babylon.tools.hdr.js"></script>
+    <script src="../src/Tools/HDR/babylon.tools.pmremGenerator.js"></script>
+    <script src="../src/Tools/HDR/babylon.tools.panoramaToCubemap.js"></script>
+    <script src="../src/Materials/babylon.fresnelParameters.js"></script>
+    <script src="../dist/preview release/babylon.canvas2d.max.js"></script>
+    <script src="../src/Tools/babylon.dynamicFloatArray.js"></script>
+    <script src="../src/Materials/Textures/babylon.fontTexture.js"></script>
+    <script src="../src/Materials/Textures/babylon.mapTexture.js"></script>
+    <script src="../src/Tools/babylon.rectPackingMap.js"></script>
+    <script src="../src/Materials/babylon.colorCurves.js"></script>
+    <script src="../src/Materials/Textures/babylon.colorGradingTexture.js"></script>
+    <script src="../src/Layer/babylon.highlightlayer.js"></script>
+
+    <script src="../materialsLibrary/dist/babylon.fireMaterial.min.js"></script>
+    <script src="../materialsLibrary/dist/babylon.waterMaterial.min.js"></script>
+    <script src="../materialsLibrary/dist/babylon.lavaMaterial.min.js"></script>
+    <script src="../materialsLibrary/dist/babylon.normalMaterial.min.js"></script>
+    <script src="../materialsLibrary/dist/babylon.skyMaterial.min.js"></script>
+    <script src="../materialsLibrary/dist/babylon.triPlanarMaterial.min.js"></script>
+    <script src="../materialsLibrary/dist/babylon.terrainMaterial.min.js"></script>
+    <script src="../materialsLibrary/dist/babylon.gradientMaterial.min.js"></script>
+    <script src="../materialsLibrary/dist/babylon.furMaterial.min.js"></script>
+    <script src="../materialsLibrary/dist/babylon.gridMaterial.min.js"></script>
+
+    <script src="../proceduralTexturesLibrary/dist/babylon.brickProceduralTexture.min.js"></script>
+    <script src="../proceduralTexturesLibrary/dist/babylon.cloudProceduralTexture.min.js"></script>
+    <script src="../proceduralTexturesLibrary/dist/babylon.fireProceduralTexture.min.js"></script>
+    <script src="../proceduralTexturesLibrary/dist/babylon.grassProceduralTexture.min.js"></script>
+    <script src="../proceduralTexturesLibrary/dist/babylon.marbleProceduralTexture.min.js"></script>
+    <script src="../proceduralTexturesLibrary/dist/babylon.roadProceduralTexture.min.js"></script>
+    <script src="../proceduralTexturesLibrary/dist/babylon.starfieldProceduralTexture.min.js"></script>
+    <script src="../proceduralTexturesLibrary/dist/babylon.woodProceduralTexture.min.js"></script>
+    <link href="index.css" rel="stylesheet" />
+</head>
+<body>
+    <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner" id="topbar">
+            <a class="brand largeOnly" href="#" id="mainTitle">Babylon.js Playground</a>
+            <div class="btn-group">
+                <button class="btn" id="runButton">Run</button>
+                <button class="btn" id="saveButton">Save</button>
+                <button class="btn desktopOnly" id="zipButton">Get .zip</button>
+                <button class="btn desktopOnly" id="newButton">New</button>
+                <button class="btn desktopOnly" id="clearButton">Clear</button>
+            </div>
+            <div class="btn-group desktopOnly">
+                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+                    <span id="currentFontSize">Font: 12</span>
+                    <span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu" id="sizeList">
+                    <li><a href="#" onclick="setFontSize(12);">12</a></li>
+                    <li><a href="#" onclick="setFontSize(14);">14</a></li>
+                    <li><a href="#" onclick="setFontSize(16);">16</a></li>
+                    <li><a href="#" onclick="setFontSize(18);">18</a></li>
+                    <li><a href="#" onclick="setFontSize(20);">20</a></li>
+                    <li><a href="#" onclick="setFontSize(22);">22</a></li>
+                </ul>
+            </div>
+            <div class="btn-group">
+                <label class="btn btn-sm active">
+                    <input type="checkbox" autocomplete="off" id='safemodeToggle' style="margin-top:-0.1em;margin-right:4px">Safe Mode
+                </label>
+                <button class="btn btn-sm" id="editorButton">-Editor</button>
+                <button class="btn btn-sm" id="debugButton">+Debug layer</button>
+            </div>
+            <div class="btn-group pull-right">
+                <button class="btn" id="fullscreenButton">Fullscreen</button>
+            </div>
+            <div class="btn-group pull-right">
+                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+                    <span id="currentScript">Predefined scripts</span>
+                    <span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu" id="scriptsList"></ul>
+            </div>
+        </div>
+    </div>
+
+    <x-splitbox>
+        <div id="jsEditor"></div>
+        <div splitter></div>
+        <div id="canvasZone">
+            <canvas id="renderCanvas"></canvas>
+        </div>
+    </x-splitbox>
+
+    <span class="label" id="fpsLabel">FPS</span>
+
+    <div id="errorZone">
+    </div>
+
+    <div class="navbar navbar-inverse navbar-fixed-bottom">
+        <div class="navbar-inner">
+            <ul class="nav pull-left">
+                <li id="statusBar"></li>
+            </ul>
+            <ul class="nav pull-right">
+                <li><a href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></li>
+                <li><a href="http://www.babylonjs.com/sandbox">Sandbox</a></li>
+                <li><a href="https://github.com/BabylonJS/Babylon.js/wiki">Wiki</a></li>
+                <li><a href="http://www.sokrate.fr/documentation/babylonjs/index.html">Documentation</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <script src="http://code.jquery.com/jquery.js"></script>
+    <script src="bootstrap/js/bootstrap.min.js"></script>
+    <script src="index.js"></script>
+</body>
+</html>

Playground/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "babylonjsplayground",
+  "version": "2.4.0",
+  "description": "Babylon.js is a 3D engine based on webgl and javascript",
+  "main": "",
+  "repository": { "url": "https://github.com/BabylonJS/Babylon.js/" },
+  "readme": "https://github.com/BabylonJS/Babylon.js/edit/master/readme.md",
+  "license": "(Apache-2.0)",
+  "devDependencies": {
+    "monaco-editor": "^0.7.0"
+  }
+}

Playground/scripts/Basic sounds.js

@@ -0,0 +1,30 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 0), scene);
+
+    var gunshot = new BABYLON.Sound("Gunshot", "sounds/gunshot.wav", scene, function () {
+        console.log("Sound is now ready to be played.");
+        // Play immediatly
+        gunshot.play();
+        // Play after 3 seconds
+        gunshot.play(3);
+    });
+
+    // Load the sound and play it automatically once ready
+    var music = new BABYLON.Sound("Violons", "sounds/violons11.wav", scene, null, { loop: true, autoplay: true });
+
+    window.addEventListener("keydown", function (evt) {
+        // Press space key to fire
+        if (evt.keyCode === 32) {
+            gunshot.play();
+        }
+    });
+
+    // Stop the music after 5 seconds
+    window.setTimeout(function () {
+        music.stop();
+    }, 10000);
+
+    return scene;
+};

Playground/scripts/Easing functions.js

@@ -0,0 +1,96 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
+    camera.attachControl(canvas, true);
+
+    // Torus
+    var torus = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
+    torus.position.x = 25;
+    torus.position.z = 30;
+
+    var materialBox = new BABYLON.StandardMaterial("texture1", scene);
+    materialBox.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
+
+    // -----------------------------------------
+    // Creation of an easing animation within predefined easing functions
+    // ------------------------------------------
+
+    //Create a Vector3 animation at 30 FPS
+    var animationTorus = new BABYLON.Animation("torusEasingAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
+
+    // the torus destination position
+    var nextPos = torus.position.add(new BABYLON.Vector3(-80, 0, 0));
+
+    // Animation keys
+    var keysTorus = [];
+    keysTorus.push({ frame: 0, value: torus.position });
+    keysTorus.push({ frame: 120, value: nextPos });
+    animationTorus.setKeys(keysTorus);
+
+    // Adding an easing function
+    // You can use :
+    //1.	CircleEase()
+    //2.	BackEase(amplitude)
+    //3.	BounceEase(bounces, bounciness)
+    //4.	CubicEase()
+    //5.	ElasticEase(oscillations, springiness)
+    //6.	ExponentialEase(exponent)
+    //7.	PowerEase(power)
+    //8.	QuadraticEase()
+    //9.	QuarticEase()
+    //10.	QuinticEase()
+    //11.	SineEase()
+    // And if you want a total control, you can use a Bezier Curve animation
+    //12.   BezierCurveEase(x1, y1, x2, y2)
+    var easingFunction = new BABYLON.CircleEase();
+
+    // For each easing function, you can choose beetween EASEIN (default), EASEOUT, EASEINOUT
+    easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
+
+    // Adding easing function to my animation
+    animationTorus.setEasingFunction(easingFunction);
+
+    // Adding animation to my torus animations collection
+    torus.animations.push(animationTorus);
+
+    //Finally, launch animations on torus, from key 0 to key 120 with loop activated
+    scene.beginAnimation(torus, 0, 120, true);
+
+    // ------------------------------------------
+    // Using Bezier curve to create a custom easing function
+    // See here to see some samples and values : http://cubic-bezier.com/
+    // -----------------------------------------
+
+    // Torus
+    var bezierTorus = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
+    bezierTorus.position.x = 25;
+    bezierTorus.position.z = 0;
+
+
+    // Create the animation
+    var animationBezierTorus = new BABYLON.Animation("animationBezierTorus", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
+    var keysBezierTorus = [];
+    keysBezierTorus.push({ frame: 0, value: bezierTorus.position });
+    keysBezierTorus.push({ frame: 120, value: bezierTorus.position.add(new BABYLON.Vector3(-80, 0, 0)) });
+    animationBezierTorus.setKeys(keysBezierTorus);
+    var bezierEase = new BABYLON.BezierCurveEase(0.32, -0.73, 0.69, 1.59);
+    animationBezierTorus.setEasingFunction(bezierEase);
+    bezierTorus.animations.push(animationBezierTorus);
+    scene.beginAnimation(bezierTorus, 0, 120, true);
+
+    // ------------------------------------------
+    // Create a simple animation without easing functions
+    // ------------------------------------------
+
+    var torus0 = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
+    torus0.position.x = 25;
+    torus0.position.z = -30;
+    torus0.material = materialBox;
+
+    BABYLON.Animation.CreateAndStartAnimation("anim", torus0, "position", 30, 120,
+             torus0.position, torus0.position.add(new BABYLON.Vector3(-80, 0, 0)));
+
+    return scene;
+}

Playground/scripts/Environment.js

@@ -0,0 +1,52 @@
+function createScene() {
+    var scene = new BABYLON.Scene(engine);
+
+    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 50, 50), scene);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
+
+    camera.attachControl(canvas, true);
+
+    var material1 = new BABYLON.StandardMaterial("mat1", scene);
+    material1.diffuseColor = new BABYLON.Color3(1, 1, 0);
+
+    for (var i = 0; i < 10; i++) {
+        var box = BABYLON.Mesh.CreateBox("Box", 1.0, scene);
+        box.material = material1;
+        box.position = new BABYLON.Vector3(-i * 5, 0, 0);
+    }
+
+    // Fog
+    scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
+    //BABYLON.Scene.FOGMODE_NONE;
+    //BABYLON.Scene.FOGMODE_EXP;
+    //BABYLON.Scene.FOGMODE_EXP2;
+    //BABYLON.Scene.FOGMODE_LINEAR;
+
+    scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
+    scene.fogDensity = 0.01;
+
+    //Only if LINEAR
+    //scene.fogStart = 20.0;
+    //scene.fogEnd = 60.0;
+
+    // Skybox
+    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
+    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+    skyboxMaterial.backFaceCulling = false;
+    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
+    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.disableLighting = true;
+    skybox.material = skyboxMaterial;
+
+    var alpha = 0;
+    scene.registerBeforeRender(function () {
+
+        scene.fogDensity = Math.cos(alpha) / 10;
+        alpha += 0.02;
+
+    });
+
+    return scene;
+};

Playground/scripts/Intersections.js

@@ -0,0 +1,90 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 70, new BABYLON.Vector3(5, 0, 0), scene);
+    camera.attachControl(canvas, true);
+
+    // Material
+    var matPlan = new BABYLON.StandardMaterial("matPlan1", scene);
+    matPlan.backFaceCulling = false;
+    matPlan.emissiveColor = new BABYLON.Color3(0.2, 1, 0.2);
+
+    var matBB = new BABYLON.StandardMaterial("matBB", scene);
+    matBB.emissiveColor = new BABYLON.Color3(1, 1, 1);
+    matBB.wireframe = true;
+
+    // Intersection point
+    var pointToIntersect = new BABYLON.Vector3(-30, 0, 0);
+    var origin = BABYLON.Mesh.CreateSphere("origin", 4, 0.3, scene);
+    origin.position = pointToIntersect;
+    origin.material = matPlan;
+
+    // Create two planes
+    var plan1 = BABYLON.Mesh.CreatePlane("plane1", 20, scene);
+    plan1.position = new BABYLON.Vector3(13, 0, 0);
+    plan1.rotation.x = -Math.PI / 4;
+    plan1.material = matPlan;
+
+    var plan2 = BABYLON.Mesh.CreatePlane("plane2", 20, scene);
+    plan2.position = new BABYLON.Vector3(-13, 0, 0);
+    plan2.rotation.x = -Math.PI / 4;
+    plan2.material = matPlan;
+
+    // AABB - Axis aligned bounding box
+    var planAABB = BABYLON.Mesh.CreateBox("AABB", 20, scene);
+    planAABB.material = matBB;
+    planAABB.position = new BABYLON.Vector3(13, 0, 0);
+    planAABB.scaling = new BABYLON.Vector3(1, Math.cos(Math.PI / 4), Math.cos(Math.PI / 4));
+
+    // OBB - Object boundind box
+    var planOBB = BABYLON.Mesh.CreateBox("OBB", 20, scene);
+    planOBB.scaling = new BABYLON.Vector3(1, 1, 0.05);
+    planOBB.parent = plan2;
+    planOBB.material = matBB;
+
+    // Balloons
+    var balloon1 = BABYLON.Mesh.CreateSphere("balloon1", 10, 2.0, scene);
+    var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 10, 2.0, scene);
+    var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 10, 2.0, scene);
+    balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
+    balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
+    balloon3.material = new BABYLON.StandardMaterial("matBallon", scene);
+
+    balloon1.position = new BABYLON.Vector3(6, 5, 0);
+    balloon2.position = new BABYLON.Vector3(-6, 5, 0);
+    balloon3.position = new BABYLON.Vector3(-30, 5, 0);
+
+    //Animation
+    var alpha = Math.PI;
+    scene.registerBeforeRender(function () {
+
+        //Balloon 1 intersection -- Precise = false
+        if (balloon1.intersectsMesh(plan1, false)) {
+            balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
+        } else {
+            balloon1.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
+        }
+
+        //Balloon 2 intersection -- Precise = true
+        if (balloon2.intersectsMesh(plan2, true)) {
+            balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
+        } else {
+            balloon2.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
+        }
+
+        //balloon 3 intersection on single point
+        if (balloon3.intersectsPoint(pointToIntersect)) {
+            balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
+        } else {
+            balloon3.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
+        }
+
+        alpha += 0.01;
+        balloon1.position.y += Math.cos(alpha) / 10;
+        balloon2.position.y = balloon1.position.y;
+        balloon3.position.y = balloon1.position.y;
+    });
+
+
+    return scene;
+}

Playground/scripts/Sound on mesh.js

@@ -0,0 +1,62 @@
+var createScene = function () {
+    // This creates a basic Babylon Scene object (non-mesh)
+    var scene = new BABYLON.Scene(engine);
+
+    // Lights
+    var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);
+    var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene);
+
+    // Need a free camera for collisions
+    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, -8, -20), scene);
+    camera.attachControl(canvas, true);
+
+    //Ground
+    var ground = BABYLON.Mesh.CreatePlane("ground", 400.0, scene);
+    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
+    ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
+    ground.material.backFaceCulling = false;
+    ground.position = new BABYLON.Vector3(5, -10, -15);
+    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
+
+    //Simple crate
+    var box = BABYLON.Mesh.CreateBox("crate", 2, scene);
+    box.material = new BABYLON.StandardMaterial("Mat", scene);
+    box.material.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
+    box.position = new BABYLON.Vector3(10, -9, 0);
+
+    // Create and load the sound async
+    var music = new BABYLON.Sound("Violons", "sounds/violons11.wav", scene, function () {
+        // Call with the sound is ready to be played (loaded & decoded)
+        // TODO: add your logic
+        console.log("Sound ready to be played!");
+    }, { loop: true, autoplay: true });
+
+    // Sound will now follow the mesh position
+    music.attachToMesh(box);
+
+    //Set gravity for the scene (G force like, on Y-axis)
+    scene.gravity = new BABYLON.Vector3(0, -0.9, 0);
+
+    // Enable Collisions
+    scene.collisionsEnabled = true;
+
+    //Then apply collisions and gravity to the active camera
+    camera.checkCollisions = true;
+    camera.applyGravity = true;
+
+    //Set the ellipsoid around the camera (e.g. your player's size)
+    camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
+
+    //finally, say which mesh will be collisionable
+    ground.checkCollisions = true;
+
+    var alpha = 0;
+
+    scene.registerBeforeRender(function () {
+        // Moving the box will automatically move the associated sound attached to it
+        box.position = new BABYLON.Vector3(Math.cos(alpha) * 30, -9, Math.sin(alpha) * 30);
+        alpha += 0.01;
+    });
+
+    return scene;
+};

Playground/scripts/actions.js

@@ -0,0 +1,144 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
+    camera.setPosition(new BABYLON.Vector3(20, 200, 400));
+    camera.attachControl(canvas, true);
+
+
+    camera.lowerBetaLimit = 0.1;
+    camera.upperBetaLimit = (Math.PI / 2) * 0.99;
+    camera.lowerRadiusLimit = 150;
+
+    scene.clearColor = new BABYLON.Color3(0, 0, 0);
+
+    var light1 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
+    var light2 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
+    var light3 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
+
+    light1.diffuse = BABYLON.Color3.Red();
+    light2.diffuse = BABYLON.Color3.Green();
+    light3.diffuse = BABYLON.Color3.Blue();
+
+    // Define states
+    light1.state = "on";
+    light2.state = "on";
+    light3.state = "on";
+
+    // Ground
+    var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);
+    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
+    groundMaterial.specularColor = BABYLON.Color3.Black();
+    ground.material = groundMaterial;
+
+    // Boxes
+    var redBox = BABYLON.Mesh.CreateBox("red", 20, scene);
+    var redMat = new BABYLON.StandardMaterial("ground", scene);
+    redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    redMat.emissiveColor = BABYLON.Color3.Red();
+    redBox.material = redMat;
+    redBox.position.x -= 100;
+
+    var greenBox = BABYLON.Mesh.CreateBox("green", 20, scene);
+    var greenMat = new BABYLON.StandardMaterial("ground", scene);
+    greenMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    greenMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    greenMat.emissiveColor = BABYLON.Color3.Green();
+    greenBox.material = greenMat;
+    greenBox.position.z -= 100;
+
+    var blueBox = BABYLON.Mesh.CreateBox("blue", 20, scene);
+    var blueMat = new BABYLON.StandardMaterial("ground", scene);
+    blueMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    blueMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    blueMat.emissiveColor = BABYLON.Color3.Blue();
+    blueBox.material = blueMat;
+    blueBox.position.x += 100;
+
+    // Sphere
+    var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 20, scene);
+    var sphereMat = new BABYLON.StandardMaterial("ground", scene);
+    sphereMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    sphereMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    sphereMat.emissiveColor = BABYLON.Color3.Purple();
+    sphere.material = sphereMat;
+    sphere.position.z += 100;
+
+    // Rotating donut
+    var donut = BABYLON.Mesh.CreateTorus("donut", 20, 8, 16, scene);
+
+    // On pick interpolations
+    var prepareButton = function (mesh, color, light) {
+        var goToColorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", color, 1000, null, true);
+
+        mesh.actionManager = new BABYLON.ActionManager(scene);
+        mesh.actionManager.registerAction(
+            new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", BABYLON.Color3.Black(), 1000))
+            .then(new BABYLON.CombineAction(BABYLON.ActionManager.NothingTrigger, [ // Then is used to add a child action used alternatively with the root action. 
+                goToColorAction,                                                 // First click: root action. Second click: child action. Third click: going back to root action and so on...   
+                new BABYLON.SetValueAction(BABYLON.ActionManager.NothingTrigger, mesh.material, "wireframe", false)
+            ]));
+        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, mesh.material, "wireframe", true))
+            .then(new BABYLON.DoNothingAction());
+        mesh.actionManager.registerAction(new BABYLON.SetStateAction(BABYLON.ActionManager.OnPickTrigger, light, "off"))
+            .then(new BABYLON.SetStateAction(BABYLON.ActionManager.OnPickTrigger, light, "on"));
+    }
+
+    prepareButton(redBox, BABYLON.Color3.Red(), light1);
+    prepareButton(greenBox, BABYLON.Color3.Green(), light2);
+    prepareButton(blueBox, BABYLON.Color3.Blue(), light3);
+
+    // Conditions
+    sphere.actionManager = new BABYLON.ActionManager(scene);
+    var condition1 = new BABYLON.StateCondition(sphere.actionManager, light1, "off");
+    var condition2 = new BABYLON.StateCondition(sphere.actionManager, light1, "on");
+
+    sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnLeftPickTrigger, camera, "alpha", 0, 500, condition1));
+    sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnLeftPickTrigger, camera, "alpha", Math.PI, 500, condition2));
+
+    // Over/Out
+    var makeOverOut = function (mesh) {
+        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh.material, "emissiveColor", mesh.material.emissiveColor));
+        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh.material, "emissiveColor", BABYLON.Color3.White()));
+        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, "scaling", new BABYLON.Vector3(1, 1, 1), 150));
+        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh, "scaling", new BABYLON.Vector3(1.1, 1.1, 1.1), 150));
+    }
+
+    makeOverOut(redBox);
+    makeOverOut(greenBox);
+    makeOverOut(blueBox);
+    makeOverOut(sphere);
+
+    // scene's actions
+    scene.actionManager = new BABYLON.ActionManager(scene);
+
+    var rotate = function (mesh) {
+        scene.actionManager.registerAction(new BABYLON.IncrementValueAction(BABYLON.ActionManager.OnEveryFrameTrigger, mesh, "rotation.y", 0.01));
+    }
+
+    rotate(redBox);
+    rotate(greenBox);
+    rotate(blueBox);
+
+    // Intersections
+    donut.actionManager = new BABYLON.ActionManager(scene);
+
+    donut.actionManager.registerAction(new BABYLON.SetValueAction(
+        { trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger, parameter: sphere },
+        donut, "scaling", new BABYLON.Vector3(1.2, 1.2, 1.2)));
+
+    donut.actionManager.registerAction(new BABYLON.SetValueAction(
+        { trigger: BABYLON.ActionManager.OnIntersectionExitTrigger, parameter: sphere }
+        , donut, "scaling", new BABYLON.Vector3(1, 1, 1)));
+
+    // Animations
+    var alpha = 0;
+    scene.registerBeforeRender(function () {
+        donut.position.x = 100 * Math.cos(alpha);
+        donut.position.y = 5;
+        donut.position.z = 100 * Math.sin(alpha);
+        alpha += 0.01;
+    });
+
+    return scene;
+}

Playground/scripts/animations.js

@@ -0,0 +1,74 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
+    camera.attachControl(canvas, true);
+
+    //Boxes
+    var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene);
+    box1.position.x = -20;
+    var box2 = BABYLON.Mesh.CreateBox("Box2", 10.0, scene);
+
+    var materialBox = new BABYLON.StandardMaterial("texture1", scene);
+    materialBox.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
+    var materialBox2 = new BABYLON.StandardMaterial("texture2", scene);
+
+    //Applying materials
+    box1.material = materialBox;
+    box2.material = materialBox2;
+
+    //Positioning box
+    box2.position.x = 20;
+
+    // Creation of a basic animation with box 1
+    //----------------------------------------
+
+    //Create a scaling animation at 30 FPS
+    var animationBox = new BABYLON.Animation("tutoAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
+                                                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
+    //Here we have chosen a loop mode, but you can change to :
+    //  Use previous values and increment it (BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE)
+    //  Restart from initial value (BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)
+    //  Keep the final value (BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT)
+
+    // Animation keys
+    var keys = [];
+    //At the animation key 0, the value of scaling is "1"
+    keys.push({
+        frame: 0,
+        value: 1
+    });
+
+    //At the animation key 20, the value of scaling is "0.2"
+    keys.push({
+        frame: 20,
+        value: 0.2
+    });
+
+    //At the animation key 100, the value of scaling is "1"
+    keys.push({
+        frame: 100,
+        value: 1
+    });
+
+    //Adding keys to the animation object
+    animationBox.setKeys(keys);
+
+    //Then add the animation object to box1
+    box1.animations.push(animationBox);
+
+    //Finally, launch animations on box1, from key 0 to key 100 with loop activated
+    scene.beginAnimation(box1, 0, 100, true);
+
+    // Creation of a manual animation with box 2
+    //------------------------------------------
+    scene.registerBeforeRender(function () {
+
+        //The color is defined at run time with random()
+        box2.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
+
+    });
+
+    return scene;
+}

Playground/scripts/basic elements.js

@@ -0,0 +1,71 @@
+var createScene = function () {
+	var scene = new BABYLON.Scene(engine);
+
+	var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);
+
+	camera.attachControl(canvas, true);
+
+	var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
+
+	//Creation of a box
+	//(name of the box, size, scene)
+	var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);
+
+	//Creation of a sphere 
+	//(name of the sphere, segments, diameter, scene) 
+	var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);
+
+	//Creation of a plan
+	//(name of the plane, size, scene)
+	var plan = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);
+
+	//Creation of a cylinder
+	//(name, height, diameter, tessellation, scene, updatable)
+	var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
+
+	// Creation of a torus
+	// (name, diameter, thickness, tessellation, scene, updatable)
+	var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
+
+	// Creation of a knot
+	// (name, radius, tube, radialSegments, tubularSegments, p, q, scene, updatable)
+	var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene);
+
+	// Creation of a lines mesh
+	var lines = BABYLON.Mesh.CreateLines("lines", [
+        new BABYLON.Vector3(-10, 0, 0),
+        new BABYLON.Vector3(10, 0, 0),
+        new BABYLON.Vector3(0, 0, -10),
+        new BABYLON.Vector3(0, 0, 10)
+	], scene);
+
+	// Creation of a ribbon
+	// let's first create many paths along a maths exponential function as an example 
+	var exponentialPath = function (p) {
+		var path = [];
+		for (var i = -10; i < 10; i++) {
+			path.push(new BABYLON.Vector3(p, i, Math.sin(p / 3) * 5 * Math.exp(-(i - p) * (i - p) / 60) + i / 3));
+		}
+		return path;
+	};
+	// let's populate arrayOfPaths with all these different paths
+	var arrayOfPaths = [];
+	for (var p = 0; p < 20; p++) {
+		arrayOfPaths[p] = exponentialPath(p);
+	}
+
+	// (name, array of paths, closeArray, closePath, offset, scene)
+	var ribbon = BABYLON.Mesh.CreateRibbon("ribbon", arrayOfPaths, false, false, 0, scene);
+
+
+	// Moving elements
+	box.position = new BABYLON.Vector3(-10, 0, 0);   // Using a vector
+	sphere.position = new BABYLON.Vector3(0, 10, 0); // Using a vector
+	plan.position.z = 10;                            // Using a single coordinate component
+	cylinder.position.z = -10;
+	torus.position.x = 10;
+	knot.position.y = -10;
+	ribbon.position = new BABYLON.Vector3(-10, -10, 20);
+
+	return scene;
+}

Playground/scripts/basic scene.js

@@ -0,0 +1,32 @@
+var createScene = function () {
+
+    // This creates a basic Babylon Scene object (non-mesh)
+    var scene = new BABYLON.Scene(engine);
+
+    // This creates and positions a free camera (non-mesh)
+    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
+
+    // This targets the camera to scene origin
+    camera.setTarget(BABYLON.Vector3.Zero());
+
+    // This attaches the camera to the canvas
+    camera.attachControl(canvas, true);
+
+    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
+    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
+
+    // Default intensity is 1. Let's dim the light a small amount
+    light.intensity = 0.7;
+
+    // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
+    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
+
+    // Move the sphere upward 1/2 its height
+    sphere.position.y = 1;
+
+    // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
+    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
+
+    return scene;
+
+};

Playground/scripts/cameras.js

@@ -0,0 +1,33 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    // Setup a simple environment
+    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
+    var box1 = BABYLON.Mesh.CreateBox("b1", 1.0, scene);
+    var box2 = BABYLON.Mesh.CreateBox("b2", 1.0, scene);
+    box2.position.x = -3;
+    var box3 = BABYLON.Mesh.CreateBox("b3", 1.0, scene);
+    box3.position.x = 3;
+
+    // ArcRotateCamera >> Camera rotating around a 3D point (here Vector zero)
+    // Parameters : name, alpha, beta, radius, target, scene
+    var arcCamera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
+    arcCamera.setPosition(new BABYLON.Vector3(0, 0, 50));
+    arcCamera.target = new BABYLON.Vector3(3, 0, 0);
+
+    // FreeCamera >> You can move around the world with mouse and keyboard (LEFT/RIGHT/UP/DOWN)
+    // Parameters : name, position, scene
+    var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 5), scene);
+    freeCamera.rotation = new BABYLON.Vector3(0, Math.PI, 0);
+
+    // TouchCamera >> Move in your world with your touch screen (or with your mouse, by drag/drop)
+    // Parameters : name, position, scene
+    var touchCamera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 0, 10), scene);
+    touchCamera.rotation = new BABYLON.Vector3(0, Math.PI, 0);
+
+    //Attach a camera to the scene and the canvas
+    scene.activeCamera = freeCamera;
+    freeCamera.attachControl(canvas, true);
+
+    return scene;
+}

Playground/scripts/collisions.js

@@ -0,0 +1,45 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    // Lights
+    var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);
+    var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene);
+
+    // Need a free camera for collisions
+    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, -8, -20), scene);
+    camera.attachControl(canvas, true);
+
+    //Ground
+    var ground = BABYLON.Mesh.CreatePlane("ground", 20.0, scene);
+    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
+    ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
+    ground.material.backFaceCulling = false;
+    ground.position = new BABYLON.Vector3(5, -10, -15);
+    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
+
+    //Simple crate
+    var box = new BABYLON.Mesh.CreateBox("crate", 2, scene);
+    box.material = new BABYLON.StandardMaterial("Mat", scene);
+    box.material.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
+    box.material.diffuseTexture.hasAlpha = true;
+    box.position = new BABYLON.Vector3(5, -9, -10);
+
+    //Set gravity for the scene (G force like, on Y-axis)
+    scene.gravity = new BABYLON.Vector3(0, -0.9, 0);
+
+    // Enable Collisions
+    scene.collisionsEnabled = true;
+
+    //Then apply collisions and gravity to the active camera
+    camera.checkCollisions = true;
+    camera.applyGravity = true;
+
+    //Set the ellipsoid around the camera (e.g. your player's size)
+    camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
+
+    //finally, say which mesh will be collisionable
+    ground.checkCollisions = true;
+    box.checkCollisions = true;
+
+    return scene;
+}

Playground/scripts/drag and drop.js

@@ -0,0 +1,130 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
+    camera.setPosition(new BABYLON.Vector3(20, 200, 400));
+
+    camera.lowerBetaLimit = 0.1;
+    camera.upperBetaLimit = (Math.PI / 2) * 0.99;
+    camera.lowerRadiusLimit = 150;
+
+    scene.clearColor = new BABYLON.Color3(0, 0, 0);
+
+    // Light
+    var light = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
+
+    // Ground
+    var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);
+    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
+    groundMaterial.specularColor = BABYLON.Color3.Black();
+    ground.material = groundMaterial;
+
+    // Meshes
+    var redSphere = BABYLON.Mesh.CreateSphere("red", 32, 20, scene);
+    var redMat = new BABYLON.StandardMaterial("ground", scene);
+    redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    redMat.emissiveColor = BABYLON.Color3.Red();
+    redSphere.material = redMat;
+    redSphere.position.y = 10;
+    redSphere.position.x -= 100;
+
+    var greenBox = BABYLON.Mesh.CreateBox("green", 20, scene);
+    var greenMat = new BABYLON.StandardMaterial("ground", scene);
+    greenMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    greenMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    greenMat.emissiveColor = BABYLON.Color3.Green();
+    greenBox.material = greenMat;
+    greenBox.position.z -= 100;
+    greenBox.position.y = 10;
+
+    var blueBox = BABYLON.Mesh.CreateBox("blue", 20, scene);
+    var blueMat = new BABYLON.StandardMaterial("ground", scene);
+    blueMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    blueMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    blueMat.emissiveColor = BABYLON.Color3.Blue();
+    blueBox.material = blueMat;
+    blueBox.position.x += 100;
+    blueBox.position.y = 10;
+
+
+    var purpleDonut = BABYLON.Mesh.CreateTorus("red", 30, 10, 32, scene);
+    var purpleMat = new BABYLON.StandardMaterial("ground", scene);
+    purpleMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    purpleMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+    purpleMat.emissiveColor = BABYLON.Color3.Purple();
+    purpleDonut.material = purpleMat;
+    purpleDonut.position.y = 10;
+    purpleDonut.position.z += 100;
+
+    // Events
+    var canvas = engine.getRenderingCanvas();
+    var startingPoint;
+    var currentMesh;
+
+    var getGroundPosition = function () {
+        // Use a predicate to get position on the ground
+        var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh == ground; });
+        if (pickinfo.hit) {
+            return pickinfo.pickedPoint;
+        }
+
+        return null;
+    }
+
+    var onPointerDown = function (evt) {
+        if (evt.button !== 0) {
+            return;
+        }
+
+        // check if we are under a mesh
+        var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh !== ground; });
+        if (pickInfo.hit) {
+            currentMesh = pickInfo.pickedMesh;
+            startingPoint = getGroundPosition(evt);
+
+            if (startingPoint) { // we need to disconnect camera from canvas
+                setTimeout(function () {
+                    camera.detachControl(canvas);
+                }, 0);
+            }
+        }
+    }
+
+    var onPointerUp = function () {
+        if (startingPoint) {
+            camera.attachControl(canvas, true);
+            startingPoint = null;
+            return;
+        }
+    }
+
+    var onPointerMove = function (evt) {
+        if (!startingPoint) {
+            return;
+        }
+
+        var current = getGroundPosition(evt);
+
+        if (!current) {
+            return;
+        }
+
+        var diff = current.subtract(startingPoint);
+        currentMesh.position.addInPlace(diff);
+
+        startingPoint = current;
+
+    }
+
+    canvas.addEventListener("pointerdown", onPointerDown, false);
+    canvas.addEventListener("pointerup", onPointerUp, false);
+    canvas.addEventListener("pointermove", onPointerMove, false);
+
+    scene.onDispose = function () {
+        canvas.removeEventListener("pointerdown", onPointerDown);
+        canvas.removeEventListener("pointerup", onPointerUp);
+        canvas.removeEventListener("pointermove", onPointerMove);
+    }
+
+    return scene;
+};

Playground/scripts/fresnel.js

@@ -0,0 +1,126 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
+    var material = new BABYLON.StandardMaterial("kosh", scene);
+    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 32, 3, scene);
+    var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 32, 3, scene);
+    var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 32, 3, scene);
+    var sphere4 = BABYLON.Mesh.CreateSphere("Sphere4", 32, 3, scene);
+    var sphere5 = BABYLON.Mesh.CreateSphere("Sphere5", 32, 3, scene);
+    var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);
+
+    camera.setPosition(new BABYLON.Vector3(-15, 3, 0));
+    camera.attachControl(canvas, true);
+
+    sphere2.position.z -= 5;
+    sphere3.position.z += 5;
+    sphere4.position.x += 5;
+    sphere5.position.x -= 5;
+
+    // Sphere1 material
+    material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
+    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    material.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+    material.alpha = 0.2;
+    material.specularPower = 16;
+
+    // Fresnel
+    material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
+    material.reflectionFresnelParameters.bias = 0.1;
+
+    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
+    material.emissiveFresnelParameters.bias = 0.6;
+    material.emissiveFresnelParameters.power = 4;
+    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.White();
+    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Black();
+
+    material.opacityFresnelParameters = new BABYLON.FresnelParameters();
+    material.opacityFresnelParameters.leftColor = BABYLON.Color3.White();
+    material.opacityFresnelParameters.rightColor = BABYLON.Color3.Black();
+
+    sphere1.material = material;
+
+    // Sphere2 material
+    material = new BABYLON.StandardMaterial("kosh2", scene);
+    material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
+    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    material.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+    material.specularPower = 32;
+
+    // Fresnel
+    material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
+    material.reflectionFresnelParameters.bias = 0.1;
+
+    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
+    material.emissiveFresnelParameters.bias = 0.5;
+    material.emissiveFresnelParameters.power = 4;
+    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.White();
+    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Black();
+
+    sphere2.material = material;
+
+    // Sphere3 material
+    material = new BABYLON.StandardMaterial("kosh3", scene);
+    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    material.emissiveColor = BABYLON.Color3.White();
+    material.specularPower = 64;
+    material.alpha = 0.2;
+
+    // Fresnel
+    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
+    material.emissiveFresnelParameters.bias = 0.2;
+    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.White();
+    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Black();
+
+    material.opacityFresnelParameters = new BABYLON.FresnelParameters();
+    material.opacityFresnelParameters.power = 4;
+    material.opacityFresnelParameters.leftColor = BABYLON.Color3.White();
+    material.opacityFresnelParameters.rightColor = BABYLON.Color3.Black();
+
+    sphere3.material = material;
+
+    // Sphere4 material
+    material = new BABYLON.StandardMaterial("kosh4", scene);
+    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    material.emissiveColor = BABYLON.Color3.White();
+    material.specularPower = 64;
+
+    // Fresnel
+    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
+    material.emissiveFresnelParameters.power = 4;
+    material.emissiveFresnelParameters.bias = 0.5;
+    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.White();
+    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Black();
+
+    sphere4.material = material;
+
+    // Sphere5 material
+    material = new BABYLON.StandardMaterial("kosh5", scene);
+    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
+    material.reflectionTexture.level = 0.5;
+    material.specularPower = 64;
+    material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
+
+    // Fresnel
+    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
+    material.emissiveFresnelParameters.bias = 0.4;
+    material.emissiveFresnelParameters.power = 2;
+    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.Black();
+    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.White();
+
+    sphere5.material = material;
+
+    // Skybox
+    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
+    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+    skyboxMaterial.backFaceCulling = false;
+    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
+    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.disableLighting = true;
+    skybox.material = skyboxMaterial;
+
+    return scene;
+}

Playground/scripts/hdr rendering pipeline.js

@@ -0,0 +1,57 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
+    var material = new BABYLON.StandardMaterial("kosh", scene);
+    var sphere = BABYLON.Mesh.CreateSphere("Sphere1", 32, 3, scene);
+    var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);
+
+    camera.setPosition(new BABYLON.Vector3(-15, 3, 0));
+    camera.attachControl(canvas, true);
+
+    // Sphere material
+    material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
+    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    material.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+    material.alpha = 0.2;
+    material.specularPower = 16;
+
+    // Fresnel
+    material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
+    material.reflectionFresnelParameters.bias = 0.1;
+
+    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
+    material.emissiveFresnelParameters.bias = 0.6;
+    material.emissiveFresnelParameters.power = 4;
+    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.White();
+    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Black();
+
+    material.opacityFresnelParameters = new BABYLON.FresnelParameters();
+    material.opacityFresnelParameters.leftColor = BABYLON.Color3.White();
+    material.opacityFresnelParameters.rightColor = BABYLON.Color3.Black();
+
+    sphere.material = material;
+
+    // Skybox
+    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
+    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+    skyboxMaterial.backFaceCulling = false;
+    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
+    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.disableLighting = true;
+    skybox.material = skyboxMaterial;
+
+    var hdr = new BABYLON.HDRRenderingPipeline("hdr", scene, 1.0, null, [camera]);
+    hdr.brightThreshold = 0.5;
+    hdr.gaussCoeff = 0.4;
+    hdr.gaussMean = 1.0;
+    hdr.gaussStandDev = 10.0;
+    hdr.minimumLuminance = 0.5;
+    hdr.luminanceDecreaseRate = 0.5;
+    hdr.luminanceIncreaserate = 0.5;
+    hdr.exposure = 1.0;
+    hdr.gaussMultiplier = 4;
+
+    return scene;
+}

Playground/scripts/height Map.js

@@ -0,0 +1,49 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    // Light
+    var spot = new BABYLON.PointLight("spot", new BABYLON.Vector3(0, 30, 10), scene);
+    spot.diffuse = new BABYLON.Color3(1, 1, 1);
+    spot.specular = new BABYLON.Color3(0, 0, 0);
+
+    // Camera
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
+    camera.lowerBetaLimit = 0.1;
+    camera.upperBetaLimit = (Math.PI / 2) * 0.9;
+    camera.lowerRadiusLimit = 30;
+    camera.upperRadiusLimit = 150;
+    camera.attachControl(canvas, true);
+
+    // Ground
+    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
+    groundMaterial.diffuseTexture = new BABYLON.Texture("textures/earth.jpg", scene);
+
+    var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false);
+    ground.material = groundMaterial;
+
+    //Sphere to see the light's position
+    var sun = BABYLON.Mesh.CreateSphere("sun", 10, 4, scene);
+    sun.material = new BABYLON.StandardMaterial("sun", scene);
+    sun.material.emissiveColor = new BABYLON.Color3(1, 1, 0);
+
+    // Skybox
+    var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene);
+    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+    skyboxMaterial.backFaceCulling = false;
+    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
+    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.disableLighting = true;
+    skybox.material = skyboxMaterial;
+
+    //Sun animation
+    scene.registerBeforeRender(function () {
+        sun.position = spot.position;
+        spot.position.x -= 0.5;
+        if (spot.position.x < -90)
+            spot.position.x = 100;
+    });
+
+    return scene;
+}

Playground/scripts/import meshes.js

@@ -0,0 +1,23 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    //Adding a light
+    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
+
+    //Adding an Arc Rotate Camera
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
+    camera.attachControl(canvas, false);
+
+    // The first parameter can be used to specify which mesh to import. Here we import all meshes
+    BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {
+        // Set the target of the camera to the first imported mesh
+        camera.target = newMeshes[0];
+    });
+
+    // Move the light with the camera
+    scene.registerBeforeRender(function () {
+        light.position = camera.position;
+    });
+
+    return scene;
+}

Playground/scripts/lights.js

@@ -0,0 +1,70 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    // Setup camera
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
+    camera.setPosition(new BABYLON.Vector3(-10, 10, 0));
+    camera.attachControl(canvas, true);
+
+    // Lights
+    var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 0), scene);
+    var light1 = new BABYLON.PointLight("Omni1", new BABYLON.Vector3(0, -10, 0), scene);
+    var light2 = new BABYLON.PointLight("Omni2", new BABYLON.Vector3(10, 0, 0), scene);
+    var light3 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene);
+
+    var material = new BABYLON.StandardMaterial("kosh", scene);
+    var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);
+
+    // Creating light sphere
+    var lightSphere0 = BABYLON.Mesh.CreateSphere("Sphere0", 16, 0.5, scene);
+    var lightSphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene);
+    var lightSphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene);
+
+    lightSphere0.material = new BABYLON.StandardMaterial("red", scene);
+    lightSphere0.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    lightSphere0.material.specularColor = new BABYLON.Color3(0, 0, 0);
+    lightSphere0.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
+
+    lightSphere1.material = new BABYLON.StandardMaterial("green", scene);
+    lightSphere1.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    lightSphere1.material.specularColor = new BABYLON.Color3(0, 0, 0);
+    lightSphere1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
+
+    lightSphere2.material = new BABYLON.StandardMaterial("blue", scene);
+    lightSphere2.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    lightSphere2.material.specularColor = new BABYLON.Color3(0, 0, 0);
+    lightSphere2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);
+
+    // Sphere material
+    material.diffuseColor = new BABYLON.Color3(1, 1, 1);
+    sphere.material = material;
+
+    // Lights colors
+    light0.diffuse = new BABYLON.Color3(1, 0, 0);
+    light0.specular = new BABYLON.Color3(1, 0, 0);
+
+    light1.diffuse = new BABYLON.Color3(0, 1, 0);
+    light1.specular = new BABYLON.Color3(0, 1, 0);
+
+    light2.diffuse = new BABYLON.Color3(0, 0, 1);
+    light2.specular = new BABYLON.Color3(0, 0, 1);
+
+    light3.diffuse = new BABYLON.Color3(1, 1, 1);
+    light3.specular = new BABYLON.Color3(1, 1, 1);
+
+    // Animations
+    var alpha = 0;
+    scene.beforeRender = function () {
+        light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha));
+        light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha));
+        light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha));
+
+        lightSphere0.position = light0.position;
+        lightSphere1.position = light1.position;
+        lightSphere2.position = light2.position;
+
+        alpha += 0.01;
+    };
+
+    return scene;
+}

Playground/scripts/materials.js

@@ -0,0 +1,82 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    //Create a light
+    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);
+
+    //Create an Arc Rotate Camera - aimed negative z this time
+    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 110, BABYLON.Vector3.Zero(), scene);
+    camera.attachControl(canvas, true);
+
+    //Creation of 6 spheres
+    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 9.0, scene);
+    var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 9.0, scene);//Only two segments
+    var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 9.0, scene);
+    var sphere4 = BABYLON.Mesh.CreateSphere("Sphere4", 10.0, 9.0, scene);
+    var sphere5 = BABYLON.Mesh.CreateSphere("Sphere5", 10.0, 9.0, scene);
+    var sphere6 = BABYLON.Mesh.CreateSphere("Sphere6", 10.0, 9.0, scene);
+
+    //Position the spheres
+    sphere1.position.x = 40;
+    sphere2.position.x = 25;
+    sphere3.position.x = 10;
+    sphere4.position.x = -5;
+    sphere5.position.x = -20;
+    sphere6.position.x = -35;
+
+    //Creation of a plane
+    var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
+    plane.position.y = -5;
+    plane.rotation.x = Math.PI / 2;
+
+    //Creation of a material with wireFrame
+    var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
+    materialSphere1.wireframe = true;
+
+    //Creation of a red material with alpha
+    var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene);
+    materialSphere2.diffuseColor = new BABYLON.Color3(1, 0, 0); //Red
+    materialSphere2.alpha = 0.3;
+
+    //Creation of a material with an image texture
+    var materialSphere3 = new BABYLON.StandardMaterial("texture3", scene);
+    materialSphere3.diffuseTexture = new BABYLON.Texture("textures/misc.jpg", scene);
+
+    //Creation of a material with translated texture
+    var materialSphere4 = new BABYLON.StandardMaterial("texture4", scene);
+    materialSphere4.diffuseTexture = new BABYLON.Texture("textures/misc.jpg", scene);
+    materialSphere4.diffuseTexture.vOffset = 0.1;//Vertical offset of 10%
+    materialSphere4.diffuseTexture.uOffset = 0.4;//Horizontal offset of 40%
+
+    //Creation of a material with an alpha texture
+    var materialSphere5 = new BABYLON.StandardMaterial("texture5", scene);
+    materialSphere5.diffuseTexture = new BABYLON.Texture("textures/tree.png", scene);
+    materialSphere5.diffuseTexture.hasAlpha = true;//Has an alpha
+
+    //Creation of a material and show all the faces
+    var materialSphere6 = new BABYLON.StandardMaterial("texture6", scene);
+    materialSphere6.diffuseTexture = new BABYLON.Texture("textures/tree.png", scene);
+    materialSphere6.diffuseTexture.hasAlpha = true;//Have an alpha
+    materialSphere6.backFaceCulling = false;//Show all the faces of the element
+
+    //Creation of a repeated textured material
+    var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
+    materialPlane.diffuseTexture = new BABYLON.Texture("textures/grass.jpg", scene);
+    materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes
+    materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes
+    materialPlane.backFaceCulling = false;//Always show the front and the back of an element
+
+    //Apply the materials to meshes
+    sphere1.material = materialSphere1;
+    sphere2.material = materialSphere2;
+
+    sphere3.material = materialSphere3;
+    sphere4.material = materialSphere4;
+
+    sphere5.material = materialSphere5;
+    sphere6.material = materialSphere6;
+
+    plane.material = materialPlane;
+
+    return scene;
+};

Playground/scripts/particles.js

@@ -0,0 +1,98 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    // Setup environment
+    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
+    var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
+    camera.attachControl(canvas, true);
+
+    // Fountain object
+    var fountain = BABYLON.Mesh.CreateBox("foutain", 1.0, scene);
+
+    // Ground
+    var ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene);
+    ground.position = new BABYLON.Vector3(0, -10, 0);
+    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
+
+    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
+    ground.material.backFaceCulling = false;
+    ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1);
+
+    // Create a particle system
+    var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
+
+    //Texture of each particle
+    particleSystem.particleTexture = new BABYLON.Texture("textures/flare.png", scene);
+
+    // Where the particles come from
+    particleSystem.emitter = fountain; // the starting object, the emitter
+    particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
+    particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...
+
+    // Colors of all particles
+    particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
+    particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
+    particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
+
+    // Size of each particle (random between...
+    particleSystem.minSize = 0.1;
+    particleSystem.maxSize = 0.5;
+
+    // Life time of each particle (random between...
+    particleSystem.minLifeTime = 0.3;
+    particleSystem.maxLifeTime = 1.5;
+
+    // Emission rate
+    particleSystem.emitRate = 1500;
+
+    // Blend mode : BLENDMODE_ONEONE, or BLENDMODE_STANDARD
+    particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
+
+    // Set the gravity of all particles
+    particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
+
+    // Direction of each particle after it has been emitted
+    particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
+    particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
+
+    // Angular speed, in radians
+    particleSystem.minAngularSpeed = 0;
+    particleSystem.maxAngularSpeed = Math.PI;
+
+    // Speed
+    particleSystem.minEmitPower = 1;
+    particleSystem.maxEmitPower = 3;
+    particleSystem.updateSpeed = 0.005;
+
+    // Start the particle system
+    particleSystem.start();
+
+    // Fountain's animation
+    var keys = [];
+    var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
+                                                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
+    // At the animation key 0, the value of scaling is "1"
+    keys.push({
+        frame: 0,
+        value: 0
+    });
+
+    // At the animation key 50, the value of scaling is "0.2"
+    keys.push({
+        frame: 50,
+        value: Math.PI
+    });
+
+    // At the animation key 100, the value of scaling is "1"
+    keys.push({
+        frame: 100,
+        value: 0
+    });
+
+    // Launch animation
+    animation.setKeys(keys);
+    fountain.animations.push(animation);
+    scene.beginAnimation(fountain, 0, 100, true);
+
+    return scene;
+}

Playground/scripts/pbr.js

@@ -0,0 +1,76 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 4, Math.PI / 2.5, 200, BABYLON.Vector3.Zero(), scene);
+    camera.attachControl(canvas, true);
+    camera.minZ = 0.1;
+
+    // Light
+    new BABYLON.PointLight("point", new BABYLON.Vector3(20, 20, 10), scene);
+
+    // Environment Texture
+    var hdrTexture = new BABYLON.HDRCubeTexture("textures/room.hdr", scene, 512);
+
+    // Skybox
+    var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
+    var hdrSkyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+    hdrSkyboxMaterial.backFaceCulling = false;
+    hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
+    hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+    hdrSkyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    hdrSkyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+    hdrSkyboxMaterial.disableLighting = true;
+    hdrSkybox.material = hdrSkyboxMaterial;
+    hdrSkybox.infiniteDistance = true;
+
+    // Create meshes
+    var sphereGlass = BABYLON.Mesh.CreateSphere("sphere", 48, 30.0, scene);
+    sphereGlass.translate(new BABYLON.Vector3(1, 0, 0), -50);
+
+    var sphereMetal = BABYLON.Mesh.CreateSphere("sphere", 48, 30.0, scene);
+    sphereMetal.translate(new BABYLON.Vector3(1, 0, 0), 50);
+
+    var woodPlank = BABYLON.MeshBuilder.CreateBox("plane", { width: 45, height: 1, depth: 90 }, scene);
+
+    // Create materials
+    var glass = new BABYLON.PBRMaterial("glass", scene);
+    glass.reflectionTexture = hdrTexture;
+    glass.refractionTexture = hdrTexture;
+    glass.linkRefractionWithTransparency = true;
+    glass.indexOfRefraction = 0.52;
+    glass.alpha = 0;
+    glass.directIntensity = 0.0;
+    glass.environmentIntensity = 0.5;
+    glass.cameraExposure = 0.5;
+    glass.cameraContrast = 1.7;
+    glass.microSurface = 1;
+    glass.reflectivityColor = new BABYLON.Color3(0.1, 0.1, 0.1);
+    glass.albedoColor = new BABYLON.Color3(0.3, 0.3, 0.3);
+    sphereGlass.material = glass;
+
+    var metal = new BABYLON.PBRMaterial("metal", scene);
+    metal.reflectionTexture = hdrTexture;
+    metal.directIntensity = 0.3;
+    metal.environmentIntensity = 0.7;
+    metal.cameraExposure = 0.6;
+    metal.cameraContrast = 1.6;
+    metal.microSurface = 0.96;
+    metal.reflectivityColor = new BABYLON.Color3(0.9, 0.9, 0.9);
+    metal.albedoColor = new BABYLON.Color3(1, 1, 1);
+    sphereMetal.material = metal;
+
+    var wood = new BABYLON.PBRMaterial("wood", scene);
+    wood.reflectionTexture = hdrTexture;
+    wood.directIntensity = 1.5;
+    wood.environmentIntensity = 0.5;
+    wood.specularIntensity = 0.3;
+    wood.cameraExposure = 0.9;
+    wood.cameraContrast = 1.6;
+
+    wood.reflectivityTexture = new BABYLON.Texture("textures/reflectivity.png", scene);
+    wood.useMicroSurfaceFromReflectivityMapAlpha = true;
+
+    wood.albedoColor = BABYLON.Color3.White();
+    wood.albedoTexture = new BABYLON.Texture("textures/albedo.png", scene);
+    woodPlank.material = wood;
+    return scene;
+};

Playground/scripts/picking.js

@@ -0,0 +1,30 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    // setup environment
+    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10, 20), scene);
+    var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);
+
+    // Impact impostor
+    var impact = BABYLON.Mesh.CreatePlane("impact", 1, scene);
+    impact.material = new BABYLON.StandardMaterial("impactMat", scene);
+    impact.material.diffuseTexture = new BABYLON.Texture("textures/impact.png", scene);
+    impact.material.diffuseTexture.hasAlpha = true;
+    impact.position = new BABYLON.Vector3(0, 0, -0.1);
+
+    //Wall
+    var wall = BABYLON.Mesh.CreatePlane("wall", 20.0, scene);
+    wall.material = new BABYLON.StandardMaterial("wallMat", scene);
+    wall.material.emissiveColor = new BABYLON.Color3(0.5, 1, 0.5);
+
+    //When pointer down event is raised
+    scene.onPointerDown = function (evt, pickResult) {
+        // if the click hits the ground object, we change the impact position
+        if (pickResult.hit) {
+            impact.position.x = pickResult.pickedPoint.x;
+            impact.position.y = pickResult.pickedPoint.y;
+        }
+    };
+
+    return scene;
+}

Playground/scripts/proceduralTexture.js

@@ -0,0 +1,165 @@
+var createScene = function () {
+    var CreateBosquet = function (name, x, y, z, scene, shadowGenerator, woodMaterial, grassMaterial) {
+        var bosquet = BABYLON.Mesh.CreateBox(name, 2, scene);
+        bosquet.position = new BABYLON.Vector3(x, y, z);
+        bosquet.material = grassMaterial;
+
+        var bosquetbawl = BABYLON.Mesh.CreateBox(name + "bawl", 1, scene);
+        bosquetbawl.position = new BABYLON.Vector3(x, y + 1, z);
+        bosquetbawl.material = grassMaterial;
+
+        shadowGenerator.getShadowMap().renderList.push(bosquet);
+        shadowGenerator.getShadowMap().renderList.push(bosquetbawl);
+    }
+
+    var CreateTree = function (name, x, y, z, scene, shadowGenerator, woodMaterial, grassMaterial) {
+        var trunk = BABYLON.Mesh.CreateCylinder(name + "trunk", 7, 2, 2, 12, 1, scene);
+        trunk.position = new BABYLON.Vector3(x, y, z);
+        trunk.material = woodMaterial;
+
+        var leafs = BABYLON.Mesh.CreateSphere(name + "leafs", 20, 7, scene);
+        leafs.position = new BABYLON.Vector3(x, y + 5.0, z);
+        leafs.material = grassMaterial;
+
+        shadowGenerator.getShadowMap().renderList.push(trunk);
+        shadowGenerator.getShadowMap().renderList.push(leafs);
+    }
+
+    var createFontain = function (name, x, y, z, scene, shadowGenerator, marbleMaterial, fireMaterial) {
+        var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 20, scene);
+        torus.position = new BABYLON.Vector3(x, y, z);
+        torus.material = marbleMaterial;
+
+        var fontainGround = BABYLON.Mesh.CreateBox("fontainGround", 4, scene);
+        fontainGround.position = new BABYLON.Vector3(x, y - 2, z);
+        fontainGround.material = marbleMaterial;
+
+        var fontainSculptur1 = BABYLON.Mesh.CreateCylinder("fontainSculptur1", 2, 2, 1, 10, 1, scene);
+        fontainSculptur1.position = new BABYLON.Vector3(x, y, z);
+        fontainSculptur1.material = marbleMaterial;
+
+        var fontainSculptur2 = BABYLON.Mesh.CreateSphere("fontainSculptur2", 7, 1.7, scene);
+        fontainSculptur2.position = new BABYLON.Vector3(x, y + 0.9, z);
+        fontainSculptur2.material = fireMaterial;
+        fontainSculptur2.rotate(new BABYLON.Vector3(1.0, 0.0, 0.0), Math.PI / 2.0, BABYLON.Space.Local);
+
+        shadowGenerator.getShadowMap().renderList.push(torus);
+        shadowGenerator.getShadowMap().renderList.push(fontainSculptur1);
+        shadowGenerator.getShadowMap().renderList.push(fontainSculptur2);
+    }
+
+    var createTorch = function (name, x, y, z, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial) {
+        //createBrickBlock
+        var brickblock = BABYLON.Mesh.CreateBox(name + "brickblock", 1, scene);
+        brickblock.position = new BABYLON.Vector3(x, y, z);
+        brickblock.material = brickMaterial;
+
+        //createWood
+        var torchwood = BABYLON.Mesh.CreateCylinder(name + "torchwood", 2, 0.25, 0.1, 12, 1, scene);
+        torchwood.position = new BABYLON.Vector3(x, y + 1, z);
+        torchwood.material = woodMaterial;
+
+        //leafs
+        var leafs2 = BABYLON.Mesh.CreateSphere(name + "leafs2", 10, 1.2, scene);
+        leafs2.position = new BABYLON.Vector3(x, y + 2, z);
+        leafs2.material = grassMaterial;
+
+        shadowGenerator.getShadowMap().renderList.push(torchwood);
+        shadowGenerator.getShadowMap().renderList.push(leafs2);
+        shadowGenerator.getShadowMap().renderList.push(brickblock);
+    }
+
+    //Ok, enough helpers, let the building start 
+    var scene = new BABYLON.Scene(engine);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 1, 1.2, 25, new BABYLON.Vector3(10, 0, 0), scene);
+    camera.upperBetaLimit = 1.2;
+    camera.attachControl(canvas, true);
+
+    //Material declaration
+    var woodMaterial = new BABYLON.StandardMaterial(name, scene);
+    var woodTexture = new BABYLON.WoodProceduralTexture(name + "text", 1024, scene);
+    woodTexture.ampScale = 50.0;
+    woodMaterial.diffuseTexture = woodTexture;
+
+    var grassMaterial = new BABYLON.StandardMaterial(name + "bawl", scene);
+    var grassTexture = new BABYLON.GrassProceduralTexture(name + "textbawl", 256, scene);
+    grassMaterial.ambientTexture = grassTexture;
+
+    var marbleMaterial = new BABYLON.StandardMaterial("torus", scene);
+    var marbleTexture = new BABYLON.MarbleProceduralTexture("marble", 512, scene);
+    marbleTexture.numberOfBricksHeight = 5;
+    marbleTexture.numberOfBricksWidth = 5;
+    marbleMaterial.ambientTexture = marbleTexture;
+
+    var fireMaterial = new BABYLON.StandardMaterial("fontainSculptur2", scene);
+    var fireTexture = new BABYLON.FireProceduralTexture("fire", 256, scene);
+    fireMaterial.diffuseTexture = fireTexture;
+    fireMaterial.opacityTexture = fireTexture;
+
+    var brickMaterial = new BABYLON.StandardMaterial(name, scene);
+    var brickTexture = new BABYLON.BrickProceduralTexture(name + "text", 512, scene);
+    brickTexture.numberOfBricksHeight = 2;
+    brickTexture.numberOfBricksWidth = 3;
+    brickMaterial.diffuseTexture = brickTexture;
+
+    //light
+    var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
+    light.diffuse = new BABYLON.Color3(1, 1, 1);
+    light.specular = new BABYLON.Color3(1, 1, 1);
+    light.groundColor = new BABYLON.Color3(0, 0, 0);
+    light.position = new BABYLON.Vector3(20, 40, 20);
+
+    //Create a square of grass using a custom procedural texture
+    var square = BABYLON.Mesh.CreateGround("square", 20, 20, 2, scene);
+    square.position = new BABYLON.Vector3(0, 0, 0);
+    var customMaterial = new BABYLON.StandardMaterial("custommat", scene);
+    var customProcText = new BABYLON.CustomProceduralTexture("customtext", "./textures/customProceduralTextures/land", 1024, scene);
+    customMaterial.ambientTexture = customProcText;
+    square.material = customMaterial;
+
+    //Applying some shadows
+    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
+    square.receiveShadows = true;
+
+    //Creating 4 bosquets
+    CreateBosquet("b1", -9, 1, 9, scene, shadowGenerator, woodMaterial, grassMaterial);
+    CreateBosquet("b2", -9, 1, -9, scene, shadowGenerator, woodMaterial, grassMaterial);
+    CreateBosquet("b3", 9, 1, 9, scene, shadowGenerator, woodMaterial, grassMaterial);
+    CreateBosquet("b4", 9, 1, -9, scene, shadowGenerator, woodMaterial, grassMaterial);
+
+    CreateTree("a1", 0, 3.5, 0, scene, shadowGenerator, woodMaterial, grassMaterial);
+
+    //Creating macadam
+    var macadam = BABYLON.Mesh.CreateGround("square", 20, 20, 2, scene);
+    macadam.position = new BABYLON.Vector3(20, 0, 0);
+    var customMaterialmacadam = new BABYLON.StandardMaterial("macadam", scene);
+    var customProcTextmacadam = new BABYLON.RoadProceduralTexture("customtext", 512, scene);
+    customMaterialmacadam.diffuseTexture = customProcTextmacadam;
+    macadam.material = customMaterialmacadam;
+    macadam.receiveShadows = true;
+
+    //Creating a fontain
+    createFontain("fontain", 20, 0.25, 0, scene, shadowGenerator, marbleMaterial, fireMaterial);
+    createTorch("torch1", 15, 0.5, 5, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial);
+    createTorch("torch2", 15, 0.5, -5, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial);
+    createTorch("torch3", 25, 0.5, 5, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial);
+    createTorch("torch4", 25, 0.5, -5, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial);
+
+    //Using a procedural texture to create the sky
+    var boxCloud = BABYLON.Mesh.CreateSphere("boxCloud", 100, 1000, scene);
+    boxCloud.position = new BABYLON.Vector3(0, 0, 12);
+    var cloudMaterial = new BABYLON.StandardMaterial("cloudMat", scene);
+    var cloudProcText = new BABYLON.CloudProceduralTexture("cloud", 1024, scene);
+    cloudMaterial.emissiveTexture = cloudProcText;
+    cloudMaterial.backFaceCulling = false;
+    cloudMaterial.emissiveTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+    boxCloud.material = cloudMaterial;
+
+    scene.registerBeforeRender(function () {
+        camera.alpha += 0.001 * scene.getAnimationRatio();
+    });
+
+    return scene;
+
+};
+

Playground/scripts/refraction and reflection.js

@@ -0,0 +1,39 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
+    var material = new BABYLON.StandardMaterial("kosh", scene);
+    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 32, 5, scene);
+    var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);
+
+    camera.setPosition(new BABYLON.Vector3(-15, 3, 0));
+    camera.attachControl(canvas, true);
+
+    // Sphere1 material
+    material.refractionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
+    material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
+    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    material.invertRefractionY = false;
+    material.indexOfRefraction = 0.98;
+    material.specularPower = 128;
+    sphere1.material = material;
+
+    material.refractionFresnelParameters = new BABYLON.FresnelParameters();
+    material.refractionFresnelParameters.power = 2;
+    material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
+    material.reflectionFresnelParameters.power = 2;
+    material.reflectionFresnelParameters.leftColor = BABYLON.Color3.Black();
+    material.reflectionFresnelParameters.rightColor = BABYLON.Color3.White();
+
+    // Skybox
+    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
+    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+    skyboxMaterial.backFaceCulling = false;
+    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
+    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.disableLighting = true;
+    skybox.material = skyboxMaterial;
+
+    return scene;
+}

Playground/scripts/rotation and scaling.js

@@ -0,0 +1,47 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI, Math.PI / 8, 150, BABYLON.Vector3.Zero(), scene);
+
+    camera.attachControl(canvas, true);
+
+    var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
+
+    //Creation of 3 boxes and 2 spheres
+    var box1 = BABYLON.Mesh.CreateBox("Box1", 6.0, scene);
+    var box2 = BABYLON.Mesh.CreateBox("Box2", 6.0, scene);
+    var box3 = BABYLON.Mesh.CreateBox("Box3", 6.0, scene);
+    var box4 = BABYLON.Mesh.CreateBox("Box4", 6.0, scene);
+    var box5 = BABYLON.Mesh.CreateBox("Box5", 6.0, scene);
+    var box6 = BABYLON.Mesh.CreateBox("Box6", 6.0, scene);
+    var box7 = BABYLON.Mesh.CreateBox("Box7", 6.0, scene);
+
+    //Moving boxes on the x axis
+    box1.position.x = -20;
+    box2.position.x = -10;
+    box3.position.x = 0;
+    box4.position.x = 15;
+    box5.position.x = 30;
+    box6.position.x = 45;
+
+    //Rotate box around the x axis
+    box1.rotation.x = Math.PI / 6;
+
+    //Rotate box around the y axis
+    box2.rotation.y = Math.PI / 3;
+
+    //Scaling on the x axis
+    box4.scaling.x = 2;
+
+    //Scaling on the y axis
+    box5.scaling.y = 2;
+
+    //Scaling on the z axis
+    box6.scaling.z = 2;
+
+    //Moving box7 relatively to box1
+    box7.parent = box1;
+    box7.position.z = -10;
+
+    return scene;
+}

Playground/scripts/scripts.txt

@@ -0,0 +1,28 @@
+Basic scene
+Basic elements
+Rotation and scaling
+Materials
+Cameras
+Lights
+Animations
+Sprites
+Collisions
+Intersections
+Picking
+Particles
+Environment
+Height map
+Shadows
+Import meshes
+Actions
+Drag and drop
+Fresnel
+Easing functions
+ProceduralTexture
+Basic sounds
+Sound on mesh
+SSAO rendering pipeline
+Volumetric Light Scattering
+HDR Rendering Pipeline
+Refraction and Reflection
+PBR

Playground/scripts/shadows.js

@@ -0,0 +1,68 @@
+var createScene = function () {
+	var scene = new BABYLON.Scene(engine);
+
+	// Setup environment
+	var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 90, BABYLON.Vector3.Zero(), scene);
+	camera.lowerBetaLimit = 0.1;
+	camera.upperBetaLimit = (Math.PI / 2) * 0.9;
+	camera.lowerRadiusLimit = 30;
+	camera.upperRadiusLimit = 150;
+	camera.attachControl(canvas, true);
+
+	// light1
+	var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
+	light.position = new BABYLON.Vector3(20, 40, 20);
+	light.intensity = 0.5;
+
+	var lightSphere = BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene);
+	lightSphere.position = light.position;
+	lightSphere.material = new BABYLON.StandardMaterial("light", scene);
+	lightSphere.material.emissiveColor = new BABYLON.Color3(1, 1, 0);
+
+	// light2
+	var light2 = new BABYLON.SpotLight("spot02", new BABYLON.Vector3(30, 40, 20),
+												new BABYLON.Vector3(-1, -2, -1), 1.1, 16, scene);
+	light2.intensity = 0.5;
+
+	var lightSphere2 = BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene);
+	lightSphere2.position = light2.position;
+	lightSphere2.material = new BABYLON.StandardMaterial("light", scene);
+	lightSphere2.material.emissiveColor = new BABYLON.Color3(1, 1, 0);
+
+	// Ground
+	var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/heightMap.png", 100, 100, 100, 0, 10, scene, false);
+	var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
+	groundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);
+	groundMaterial.diffuseTexture.uScale = 6;
+	groundMaterial.diffuseTexture.vScale = 6;
+	groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+	ground.position.y = -2.05;
+	ground.material = groundMaterial;
+
+	// Torus
+	var torus = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
+
+	// Shadows
+	var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
+	shadowGenerator.getShadowMap().renderList.push(torus);
+	shadowGenerator.useVarianceShadowMap = true;
+
+	var shadowGenerator2 = new BABYLON.ShadowGenerator(1024, light2);
+	shadowGenerator2.getShadowMap().renderList.push(torus);
+	shadowGenerator2.usePoissonSampling = true;
+
+	ground.receiveShadows = true;
+
+	// Animations
+	var alpha = 0;
+	scene.registerBeforeRender(function () {
+		torus.rotation.x += 0.01;
+		torus.rotation.z += 0.02;
+
+		torus.position = new BABYLON.Vector3(Math.cos(alpha) * 30, 10, Math.sin(alpha) * 30);
+		alpha += 0.01;
+
+	});
+
+	return scene;
+}

Playground/scripts/sprites.js

@@ -0,0 +1,61 @@
+var createScene = function () {
+    var scene = new BABYLON.Scene(engine);
+
+    // Create camera and light
+    var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);
+    camera.attachControl(canvas, true);
+
+    // Create a sprite manager to optimize GPU ressources
+    // Parameters : name, imgUrl, capacity, cellSize, scene
+    var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2000, 800, scene);
+
+    //We create 2000 trees at random positions
+    for (var i = 0; i < 2000; i++) {
+        var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
+        tree.position.x = Math.random() * 100 - 50;
+        tree.position.z = Math.random() * 100 - 50;
+        tree.isPickable = true;
+
+        //Some "dead" trees
+        if (Math.round(Math.random() * 5) === 0) {
+            tree.angle = Math.PI * 90 / 180;
+            tree.position.y = -0.3;
+        }
+    }
+
+    //Create a manager for the player's sprite animation
+    var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "textures/player.png", 2, 64, scene);
+
+    // First animated player
+    var player = new BABYLON.Sprite("player", spriteManagerPlayer);
+    player.playAnimation(0, 40, true, 100);
+    player.position.y = -0.3;
+    player.size = 0.3;
+    player.isPickable = true;
+
+    // Second standing player
+    var player2 = new BABYLON.Sprite("player2", spriteManagerPlayer);
+    player2.stopAnimation(); // Not animated
+    player2.cellIndex = 2; // Going to frame number 2
+    player2.position.y = -0.3;
+    player2.position.x = 1;
+    player2.size = 0.3;
+    player2.invertU = -1; //Change orientation
+    player2.isPickable = true;
+
+
+    // Picking
+    spriteManagerTrees.isPickable = true;
+    spriteManagerPlayer.isPickable = true;
+
+    scene.onPointerDown = function (evt) {
+        var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
+        if (pickResult.hit) {
+            pickResult.pickedSprite.angle += 0.5;
+        }
+    };
+
+
+    return scene;
+}

Playground/scripts/ssao rendering pipeline.js

@@ -0,0 +1,61 @@
+var createScene = function () {
+    // Create scene
+    var scene = new BABYLON.Scene(engine);
+    scene.clearColor = BABYLON.Color3.Black();
+
+    // Create camera
+    var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(29, 13, 23), scene);
+    camera.setTarget(new BABYLON.Vector3(0, 0, 0));
+    camera.attachControl(canvas);
+
+    // Create some boxes and deactivate lighting (specular color and back faces)
+    var boxMaterial = new BABYLON.StandardMaterial("boxMaterail", scene);
+    boxMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);
+    boxMaterial.specularColor = BABYLON.Color3.Black();
+    boxMaterial.emissiveColor = BABYLON.Color3.White();
+
+    for (var i = 0; i < 10; i++) {
+        for (var j = 0; j < 10; j++) {
+            var box = BABYLON.Mesh.CreateBox("box" + i + " - " + j, 5, scene);
+            box.position = new BABYLON.Vector3(i * 5, 2.5, j * 5);
+            box.rotation = new BABYLON.Vector3(i, i * j, j);
+            box.material = boxMaterial;
+        }
+    }
+
+    // Create SSAO and configure all properties (for the example)
+    var ssaoRatio = {
+        ssaoRatio: 0.5, // Ratio of the SSAO post-process, in a lower resolution
+        combineRatio: 1.0 // Ratio of the combine post-process (combines the SSAO and the scene)
+    };
+
+    var ssao = new BABYLON.SSAORenderingPipeline("ssao", scene, ssaoRatio);
+    ssao.fallOff = 0.000001;
+    ssao.area = 1;
+    ssao.radius = 0.0001;
+    ssao.totalStrength = 1.0;
+    ssao.base = 0.5;
+
+    // Attach camera to the SSAO render pipeline
+    scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
+
+    // Manage SSAO
+    window.addEventListener("keydown", function (evt) {
+        // draw SSAO with scene when pressed "1"
+        if (evt.keyCode === 49) {
+            scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
+            scene.postProcessRenderPipelineManager.enableEffectInPipeline("ssao", ssao.SSAOCombineRenderEffect, camera);
+        }
+            // draw without SSAO when pressed "2"
+        else if (evt.keyCode === 50) {
+            scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline("ssao", camera);
+        }
+            // draw only SSAO when pressed "2"
+        else if (evt.keyCode === 51) {
+            scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
+            scene.postProcessRenderPipelineManager.disableEffectInPipeline("ssao", ssao.SSAOCombineRenderEffect, camera);
+        }
+    });
+
+	return scene;
+}

Playground/scripts/volumetric light scattering.js

@@ -0,0 +1,33 @@
+var createScene = function () {
+	var scene = new BABYLON.Scene(engine);
+
+	//Adding a light
+	var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
+
+	//Adding an Arc Rotate Camera
+	var camera = new BABYLON.ArcRotateCamera("Camera", -0.5, 2.2, 100, BABYLON.Vector3.Zero(), scene);
+	camera.attachControl(canvas, false);
+
+	// The first parameter can be used to specify which mesh to import. Here we import all meshes
+	BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {
+		// Set the target of the camera to the first imported mesh
+		camera.target = newMeshes[0];
+
+		newMeshes[0].material = new BABYLON.StandardMaterial("skull", scene);
+		newMeshes[0].material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
+	});
+
+	// Create the "God Rays" effect (volumetric light scattering)
+	var godrays = new BABYLON.VolumetricLightScatteringPostProcess('godrays', 1.0, camera, null, 100, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, false);
+
+	// By default it uses a billboard to render the sun, just apply the desired texture
+	// position and scale
+	godrays.mesh.material.diffuseTexture = new BABYLON.Texture('textures/sun.png', scene, true, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
+	godrays.mesh.material.diffuseTexture.hasAlpha = true;
+	godrays.mesh.position = new BABYLON.Vector3(-150, 150, 150);
+	godrays.mesh.scaling = new BABYLON.Vector3(350, 350, 350);
+
+	light.position = godrays.mesh.position;
+
+	return scene;
+}

Playground/splitbox.css

@@ -0,0 +1,146 @@
+x-splitbox {
+  position: relative;
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  height: 100%;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-orient: horizontal;
+  -moz-box-orient: horizontal;
+  -ms-box-orient: horizontal;
+  box-orient: horizontal;
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+x-splitbox[direction="column"] {
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+x-splitbox > *:not([splitter]) {
+  min-width: 0;
+  min-height: 0;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+  -ms-flex: auto;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+x-splitbox[dragging], x-splitbox > [splitter] {
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+x-splitbox > [splitter] {
+  display: block;
+  position: relative;
+  min-width: 0px !important;
+  max-width: 0px !important;
+  cursor: ew-resize;
+  background: #fff;
+  opacity: 0.6;
+}
+
+  x-splitbox > [splitter]:before {
+    content: " ";
+    display: block;
+    position: absolute;
+    width: 0.8em;
+    height: 100%;
+    opacity: 0;
+    background: inherit;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transform: translate(-50%, 0);
+    -ms-transform: translate(-50%, 0);
+    transform: translate(-50%, 0);
+  }
+
+  x-splitbox > [splitter]:after {
+    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB3aWR0aD0iMWVtIiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0Ij48cGF0aCBmaWxsPSJyZ2JhKDAsMCwwLDAuNzUpIiBkPSJNNzU4IDIzNGwyMzIgMjc4LTIzMiAyNzgtNjYtNTQgMTg2LTIyNC0xODYtMjI0ek00NzAgNTU0di04NGg4NHY4NGgtODR6TTcyNiA0NzB2ODRoLTg2di04NGg4NnpNMjk4IDU1NHYtODRoODZ2ODRoLTg2ek0zMzIgMjg4bC0xODYgMjI0IDE4NiAyMjQtNjYgNTQtMjMyLTI3OCAyMzItMjc4eiI+PC9wYXRoPjwvc3ZnPg==');
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 1em;
+    padding: 0.05em;
+    background: inherit;
+    border-radius: 100%;
+    -webkit-box-shadow: 0 1px 1px 0px rgba(0,0,0,0.4);
+    -ms-box-shadow: 0 1px 1px 0px rgba(0,0,0,0.4);
+    box-shadow: 0 1px 1px 0px rgba(0,0,0,0.4);
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+  }
+
+  x-splitbox[direction="column"] > [splitter] {
+    cursor: ns-resize;
+    min-width: auto !important;
+    max-width: none !important;
+    min-height: 0px !important;
+    max-height: 0px !important;
+  }
+
+  x-splitbox[direction="column"] > [splitter]:before {
+    width: 100%;
+    height: 0.8em;
+    -webkit-transform: translate(0%, -50%);
+    -ms-transform: translate(0%, -50%);
+    transform: translate(0%, -50%);
+  }
+
+  x-splitbox[direction="column"] > [splitter]:after {
+    -webkit-box-shadow: 1px 0 1px 0px rgba(0,0,0,0.4);
+    -ms-box-shadow: 1px 0 1px 0px rgba(0,0,0,0.4);
+    box-shadow: 1px 0 1px 0px rgba(0,0,0,0.4);
+    -webkit-transform: translate(-50%, -50%) rotate(90deg);
+    -ms-transform: translate(-50%, -50%) rotate(90deg);
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+
+  x-splitbox > [splitter]:hover, x-splitbox > [splitter][dragging] {
+    opacity: 1;
+    z-index: 2;
+  }
+
+  x-splitbox > [splitter][dragging]:before {
+    opacity: 0.3;
+  }
+
+
+@media screen and (max-device-width: 415px) {
+  x-splitbox > [splitter]:before {
+    display: block;
+  }
+
+    x-splitbox[direction="column"] > [splitter] {
+      display: block;
+    }
+}
+

Playground/splitbox.js

@@ -0,0 +1,116 @@
+(function () {
+
+    function startDrag(node, splitter, event) {
+
+        node.setAttribute('dragging', '');
+        node.xtag.splitter = splitter;
+        splitter.setAttribute('dragging', '');
+        splitter.style.zIndex = node.xtag.splitZ = (node.xtag.splitZ || 0) + 1;
+
+        var props = getProps(node);
+        var lastCoord = event[props.page] - node[props.edge];
+        var next = splitter.nextElementSibling, next = !next.hasAttribute('splitter') && next;
+        var previous = splitter.previousElementSibling, previous = !previous.hasAttribute('splitter') && previous;
+        var startingTotal = next[props.size] + previous[props.size];
+
+        setPercents(node, props);
+
+        node.xtag.drag = xtag.addEvent(node, 'move', function (e) {
+            var delta = e[props.page] - node[props.edge] - lastCoord;
+            var nextSize = next[props.size];
+            var prevSize = previous[props.size];
+            var nextMod = nextSize - delta;
+            var prevMod = prevSize + delta;
+
+            if (delta > 0) {
+                if (nextSize > 0) {
+                    if (nextMod <= 0 || prevMod >= startingTotal || prevMod > startingTotal || nextMod > startingTotal) {
+                        prevMod = startingTotal;
+                        nextMod = 0;
+                    }
+                    setMinMax(next, props, nextMod);
+                    setMinMax(previous, props, prevMod);
+                }
+            }
+
+            else if (delta < 0) {
+                if (prevSize > 0) {
+                    if (prevMod <= 0 || nextMod >= startingTotal || prevMod > startingTotal || nextMod > startingTotal) {
+                        nextMod = startingTotal;
+                        prevMod = 0;
+                    }
+                    setMinMax(next, props, nextMod);
+                    setMinMax(previous, props, prevMod);
+                }
+            }
+
+            lastCoord = e[props.page] - node[props.edge];
+        });
+    }
+
+    function getProps(node) {
+        return node.xtag.props = (node.direction == 'column') ? {
+            page: 'pageY',
+            size: 'clientHeight',
+            edge: 'clientTop',
+            parentSize: node.clientHeight
+        } : {
+            page: 'pageX',
+            size: 'clientWidth',
+            edge: 'clientLeft',
+            parentSize: node.clientWidth
+        };
+    }
+
+    function setPercents(node, props, setup) {
+        node.xtag.panels = xtag.queryChildren(node, '*:not([splitter])').map(function (el) {
+            setMinMax(el, props, el[props.size], setup);
+            return el;
+        });
+    }
+
+    function setMinMax(panel, props, value, setup) {
+        panel.style.flex = panel.style[xtag.prefix.lowercase + 'Flex'] = (setup ? '0 0 ' : '1 1 ') + (value / props.parentSize) * 100 + '%';
+    }
+
+    function stopDrag(node) {
+        if (node.xtag.drag) {
+            xtag.removeEvent(node, node.xtag.drag);
+            node.removeAttribute('dragging');
+            node.xtag.splitter.removeAttribute('dragging');
+            node.xtag.splitter = null;
+            node.xtag.drag = null;
+        }
+    }
+
+    xtag.addEvent(window, 'tapend', function (e) {
+        xtag.query(document, 'x-splitbox[dragging]').forEach(stopDrag);
+    })
+
+    xtag.register('x-splitbox', {
+        events: {
+            'tapstart:delegate(x-splitbox > [splitter])': function (e) {
+                startDrag(e.currentTarget, this, e);
+            },
+            dragstart: function (e) {
+                if (this.hasAttribute('dragging')) {
+                    e.preventDefault();
+                    return false;
+                }
+            },
+            contextmemu: function (e) {
+                e.preventDefault();
+            }
+        },
+        accessors: {
+            direction: {
+                attribute: { def: 'row' },
+                set: function (direction) {
+                    setPercents(this, getProps(this), true);
+                }
+            }
+        }
+    });
+
+})();
+

Playground/textures/customProceduralTextures/land/config.json

@@ -0,0 +1,21 @@
+{
+    "animate": false,
+    "refreshrate": 1.0,
+    "uniforms": [
+        {
+            "type": "float",
+            "name": "dirtAmplifier",
+            "value": "6.0"
+        }
+    ],
+    "sampler2Ds": [
+        {
+            "sample2Dname": "dirtSampler",
+            "textureRelativeUrl": "textures/dirt.jpg"
+        },
+        {
+            "sample2Dname": "grassSampler",
+            "textureRelativeUrl": "textures/grass.png"
+        }
+    ]
+}

Playground/textures/customProceduralTextures/land/custom.fragment.fx

@@ -0,0 +1,32 @@
+varying vec2 vPosition;
+varying vec2 vUV;
+
+uniform sampler2D dirtSampler;
+uniform sampler2D grassSampler;
+uniform float dirtAmplifier;
+
+float rand(vec2 n) {
+	return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+}
+
+float noise(vec2 n) {
+	const vec2 d = vec2(0.0, 1.0);
+	vec2 b = floor(n);
+	vec2 f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+	return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+}
+
+float fbm(vec2 n) {
+	float total = 0.0, amplitude = 0.5;
+	for (int i = 0; i < 4; i++) {
+		total += noise(n) * amplitude;
+		n += n;
+		amplitude *= 0.5;
+	}
+	return total;
+}
+
+void main(void) {
+	vec3 color = mix(texture2D(dirtSampler, vUV).xyz, texture2D(grassSampler, vUV).xyz, fbm(vUV * dirtAmplifier));
+	gl_FragColor = vec4(color, 1.0);
+}