Merge branch 'master' of https://github.com/BabylonJS/Babylon.js into gltf-export-interfaces

Viewer/README.md

@@ -2,7 +2,7 @@
 
 This project is a 3d model viewer using babylonjs.
 
-Please note that this is an *initial release*. The API and project structure could (and probably SHOULD) be changed, so please don't rely on this yet in a productive environment.
+Please note that this is an _initial release_. The API and project structure could (and probably SHOULD) be changed, so please don't rely on this yet in a productive environment.
 
 The viewer is using the latest Babylon from npm (3.1 alpha).
 
@@ -15,21 +15,23 @@ See `basicExample.html` in `/dist`.
 Basically, all that is needed is an html tag, and the viewer.js, which includes everything needed to render a Scene:
 
 ```html
-<babylon model="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBox/glTF/BoomBox.gltf" default-viewer="true"></babylon>
+<babylon
+  model="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBox/glTF/BoomBox.gltf"
+  default-viewer="true"
+></babylon>
 <script src="viewer.js"></script>
-``` 
+```
 
 This will create a (default) viewer and will load the model in this URL using the gltf loader.
 
-The `babylon` tag will be automatically initialized. 
+The `babylon` tag will be automatically initialized.
 
 ## Configuration
 
-Configuration can be provided using html attributes or a JSON (at the moment). A configuration Mapper can be registered to create new configuration readers. 
+Configuration can be provided using html attributes or a JSON (at the moment). A configuration Mapper can be registered to create new configuration readers.
 
 Before I finish a full documentation, take a look at `configuration.ts`
 
 ## Templating
 
 The default templates are integrated in the viewer.js file. The current templates are located in `/assets/templates/default/` . Those templates can be extended and registered using the configuration file.
-

Viewer/src/configuration/interfaces/templateConfiguration.ts

@@ -4,12 +4,12 @@
 export interface ITemplateConfiguration {
     /**
      * can be either the id of the template's html element or a URL.
-     * See - http://doc.babylonjs.com/extensions/the_templating_system#location-vs-html
+     * See - https://doc.babylonjs.com/extensions/the_templating_system#location-vs-html
      */
     location?: string; // #template-id OR http://example.com/loading.html
     /**
      * If no location is provided you can provide here the raw html of this template.
-     * See http://doc.babylonjs.com/extensions/the_templating_system#location-vs-html
+     * See https://doc.babylonjs.com/extensions/the_templating_system#location-vs-html
      */
     html?: string; // raw html string
     id?: string;
@@ -22,7 +22,7 @@ export interface ITemplateConfiguration {
      * event name is the key. the value can either be a boolean (attach to the parent element)
      * or a map of html id elements.
      *
-     * See - http://doc.babylonjs.com/extensions/the_templating_system#event-binding
+     * See - https://doc.babylonjs.com/extensions/the_templating_system#event-binding
      */
     events?: {
         // pointer events

contributing.md

@@ -18,18 +18,18 @@ Babylon.js is a 3D rendering engine. So every piece of code has to be scrutinize
 
 ### Simplicity
 
-A developer should be able to quickly and easily learn to use the API. 
+A developer should be able to quickly and easily learn to use the API.
 
-Simplicity and a low barrier to entry are must-have features of every API. If you have any second thoughts about the complexity of a design, it is almost always much better to cut the feature from the current release and spend more time to get the design right for the next release. 
+Simplicity and a low barrier to entry are must-have features of every API. If you have any second thoughts about the complexity of a design, it is almost always much better to cut the feature from the current release and spend more time to get the design right for the next release.
 
 You can always add to an API, you cannot ever remove anything from one. If the design does not feel right, and you ship it anyway, you are likely to regret having done so.
 
 ## Forum and Github issues
 
-Since the very beginning, Babylon.js relies on a great forum and a tremendous community: https://forum.babylonjs.com/.
-Please use the forum for **ANY questions you may have**.
+Since the very beginning, Babylon.js relies on a great forum and a tremendous community: [https://forum.babylonjs.com/](https://forum.babylonjs.com/). Please use the forum for **ANY questions you may have**.
 
 Please use the Github issues (after discussing them on the forum) **only** for:
+
 - Bugs
 - Feature requests
 
@@ -49,19 +49,21 @@ so that you can start straight away.
 
 ## Pull requests
 
-We are not complicated people, but we still have some [coding guidelines](http://doc.babylonjs.com/how_to/approved_naming_conventions)
-Before submitting your PR, just check that everything goes well by [creating the minified version](http://doc.babylonjs.com/resources/creating_the_mini-fied_version)
+We are not complicated people, but we still have some [coding guidelines](https://doc.babylonjs.com/how_to/approved_naming_conventions)
+Before submitting your PR, just check that everything goes well by [creating the minified version](https://doc.babylonjs.com/resources/creating_the_mini-fied_version)
+
+You should read the [how to contribute documentation](https://doc.babylonjs.com/how_to/how_to_start) before working on your PR.
 
-You should read the [how to contribute documentation](http://doc.babylonjs.com/how_to/how_to_start) before working on your PR.
-  
 To validate your PR, please follow these steps:
+
 - Run "gulp" locally and make sure that no error is generated
 - Make sure that all public functions and classes are commented using JSDoc syntax
 - Make sure to add a line about your PR in the [what's new](https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/what's%20new.md)
-  
- ## What should go where?
+
+## What should go where
 
 In order to not bloat the core engine with unwanted or unnecessary features (that we will need to maintain forever), here is a list of questions you could ask yourself before submitting a new feature (or feature request) for Babylon.js core engine:
+
 - Does my feature belong to a framework library?
 - Can my feature be used by multiple different applications?
 - Is there a general use case for this feature?

dist/preview release/what's new.md

@@ -8,7 +8,7 @@
 - Added HDR texture filtering tools to the sandbox ([Sebavan](https://github.com/sebavan/))
 - Reflection probes can now be used to give accurate shading with PBR ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added editing of PBR materials, Post processes and Particle fragment shaders in the node material editor ([Popov72](https://github.com/Popov72))
-- Added Curve editor to manage selected entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to manage entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
 - Added support in `ShadowGenerator` for fast fake soft transparent shadows ([Popov72](https://github.com/Popov72))
 - Added support for **thin instances** for faster mesh instances. [Doc](https://doc.babylonjs.com/how_to/how_to_use_thininstances) ([Popov72](https://github.com/Popov72))
 
@@ -133,7 +133,7 @@
 - Default (XR-global) rendering group ID can be defined when initializing a default experience ([RaananW](https://github.com/RaananW))
 - Added support for (experimental) haptic actuators ([#8068](https://github.com/BabylonJS/Babylon.js/issues/8068)) ([RaananW](https://github.com/RaananW))
 - It is now possible to enable experimental (AR) features using the options of the default xr helper ([RaananW](https://github.com/RaananW))
-- Full support for right handed systems ([#8132](https://github.com/BabylonJS/Babylon.js/issues/8132)) ([RaananW](https://github.com/RaananW))
+- Full support for right handed scenes ([#8132](https://github.com/BabylonJS/Babylon.js/issues/8132)) ([RaananW](https://github.com/RaananW))
 - WebXR anchors feature implemented ([#7917](https://github.com/BabylonJS/Babylon.js/issues/7917)) ([RaananW](https://github.com/RaananW))
 
 ### Collisions

gui/readme.md

@@ -1,6 +1,7 @@
 # js GUI library
+
 The js GUI library is an extension you can use to generate interactive user interface.
 It is build on top of the DynamicTexture.
 
-Documentation: http://doc.babylonjs.com/how_to/gui
-API: http://doc.babylonjs.com/api/modules/gui
+Documentation: https://doc.babylonjs.com/how_to/gui
+API: https://doc.babylonjs.com/api/modules/gui

gui/src/2D/advancedDynamicTexture.ts

@@ -46,7 +46,7 @@ export interface IFocusableControl {
 }
 /**
 * Class used to create texture to support 2D GUI elements
-* @see http://doc.babylonjs.com/how_to/gui
+* @see https://doc.babylonjs.com/how_to/gui
 */
 export class AdvancedDynamicTexture extends DynamicTexture {
     private _isDirty = false;
@@ -161,7 +161,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     /**
     * Gets or sets the ideal width used to design controls.
     * The GUI will then rescale everything accordingly
-    * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+    * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
     */
     public get idealWidth(): number {
         return this._idealWidth;
@@ -177,7 +177,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     /**
     * Gets or sets the ideal height used to design controls.
     * The GUI will then rescale everything accordingly
-    * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+    * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
     */
     public get idealHeight(): number {
         return this._idealHeight;
@@ -192,7 +192,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     }
     /**
     * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
-    * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+    * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
     */
     public get useSmallestIdeal(): boolean {
         return this._useSmallestIdeal;
@@ -207,7 +207,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     }
     /**
     * Gets or sets a boolean indicating if adaptive scaling must be used
-    * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+    * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
     */
     public get renderAtIdealSize(): boolean {
         return this._renderAtIdealSize;
@@ -222,7 +222,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
 
     /**
      * Gets the ratio used when in "ideal mode"
-    * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+    * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
      * */
     public get idealRatio(): number {
         var rwidth: number = 0;
@@ -432,7 +432,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     /**
     * Helper function used to create a new style
     * @returns a new style
-    * @see http://doc.babylonjs.com/how_to/gui#styles
+    * @see https://doc.babylonjs.com/how_to/gui#styles
     */
     public createStyle(): Style {
         return new Style(this);

gui/src/2D/controls/colorpicker.ts

@@ -87,7 +87,7 @@ export class ColorPicker extends Control {
 
     /**
      * Gets or sets control width
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get width(): string | number {
         return this._width.toString(this._host);
@@ -106,7 +106,7 @@ export class ColorPicker extends Control {
 
     /**
      * Gets or sets control height
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get height(): string | number {
         return this._height.toString(this._host);

gui/src/2D/controls/container.ts

@@ -8,7 +8,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Root class for 2D containers
- * @see http://doc.babylonjs.com/how_to/gui#containers
+ * @see https://doc.babylonjs.com/how_to/gui#containers
  */
 export class Container extends Control {
     /** @hidden */

gui/src/2D/controls/control.ts

@@ -17,7 +17,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Root class used for all 2D controls
- * @see http://doc.babylonjs.com/how_to/gui#controls
+ * @see https://doc.babylonjs.com/how_to/gui#controls
  */
 export class Control {
     /**
@@ -332,7 +332,7 @@ export class Control {
     }
 
     /** Gets or sets a value indicating the scale factor on X axis (1 by default)
-     * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
     */
     public get scaleX(): number {
         return this._scaleX;
@@ -349,7 +349,7 @@ export class Control {
     }
 
     /** Gets or sets a value indicating the scale factor on Y axis (1 by default)
-     * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
     */
     public get scaleY(): number {
         return this._scaleY;
@@ -366,7 +366,7 @@ export class Control {
     }
 
     /** Gets or sets the rotation angle (0 by default)
-     * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
     */
     public get rotation(): number {
         return this._rotation;
@@ -383,7 +383,7 @@ export class Control {
     }
 
     /** Gets or sets the transformation center on Y axis (0 by default)
-     * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
     */
     public get transformCenterY(): number {
         return this._transformCenterY;
@@ -400,7 +400,7 @@ export class Control {
     }
 
     /** Gets or sets the transformation center on X axis (0 by default)
-     * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
+     * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
     */
     public get transformCenterX(): number {
         return this._transformCenterX;
@@ -418,7 +418,7 @@ export class Control {
 
     /**
      * Gets or sets the horizontal alignment
-     * @see http://doc.babylonjs.com/how_to/gui#alignments
+     * @see https://doc.babylonjs.com/how_to/gui#alignments
      */
     public get horizontalAlignment(): number {
         return this._horizontalAlignment;
@@ -435,7 +435,7 @@ export class Control {
 
     /**
      * Gets or sets the vertical alignment
-     * @see http://doc.babylonjs.com/how_to/gui#alignments
+     * @see https://doc.babylonjs.com/how_to/gui#alignments
      */
     public get verticalAlignment(): number {
         return this._verticalAlignment;
@@ -452,7 +452,7 @@ export class Control {
 
     /**
      * Gets or sets control width
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get width(): string | number {
         return this._width.toString(this._host);
@@ -470,7 +470,7 @@ export class Control {
 
     /**
      * Gets or sets the control width in pixel
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get widthInPixels(): number {
         return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
@@ -485,7 +485,7 @@ export class Control {
 
     /**
      * Gets or sets control height
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get height(): string | number {
         return this._height.toString(this._host);
@@ -503,7 +503,7 @@ export class Control {
 
     /**
      * Gets or sets control height in pixel
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get heightInPixels(): number {
         return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
@@ -563,7 +563,7 @@ export class Control {
 
     /**
      * Gets or sets style
-     * @see http://doc.babylonjs.com/how_to/gui#styles
+     * @see https://doc.babylonjs.com/how_to/gui#styles
      */
     public get style(): Nullable<Style> {
         return this._style;
@@ -700,7 +700,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the padding to use on the left of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get paddingLeft(): string | number {
         return this._paddingLeft.toString(this._host);
@@ -714,7 +714,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the padding in pixels to use on the left of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get paddingLeftInPixels(): number {
         return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
@@ -729,7 +729,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the padding to use on the right of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get paddingRight(): string | number {
         return this._paddingRight.toString(this._host);
@@ -743,7 +743,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the padding in pixels to use on the right of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get paddingRightInPixels(): number {
         return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
@@ -758,7 +758,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the padding to use on the top of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get paddingTop(): string | number {
         return this._paddingTop.toString(this._host);
@@ -772,7 +772,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the padding in pixels to use on the top of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get paddingTopInPixels(): number {
         return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
@@ -787,7 +787,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the padding to use on the bottom of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get paddingBottom(): string | number {
         return this._paddingBottom.toString(this._host);
@@ -801,7 +801,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the padding in pixels to use on the bottom of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get paddingBottomInPixels(): number {
         return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
@@ -816,7 +816,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the left coordinate of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get left(): string | number {
         return this._left.toString(this._host);
@@ -830,7 +830,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the left coordinate in pixels of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get leftInPixels(): number {
         return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
@@ -845,7 +845,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the top coordinate of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get top(): string | number {
         return this._top.toString(this._host);
@@ -859,7 +859,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the top coordinate in pixels of the control
-     * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
     public get topInPixels(): number {
         return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
@@ -874,7 +874,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the offset on X axis to the linked mesh
-     * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
+     * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
      */
     public get linkOffsetX(): string | number {
         return this._linkOffsetX.toString(this._host);
@@ -888,7 +888,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the offset in pixels on X axis to the linked mesh
-     * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
+     * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
      */
     public get linkOffsetXInPixels(): number {
         return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
@@ -903,7 +903,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the offset on Y axis to the linked mesh
-     * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
+     * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
      */
     public get linkOffsetY(): string | number {
         return this._linkOffsetY.toString(this._host);
@@ -917,7 +917,7 @@ export class Control {
 
     /**
      * Gets or sets a value indicating the offset in pixels on Y axis to the linked mesh
-     * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
+     * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
      */
     public get linkOffsetYInPixels(): number {
         return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
@@ -1127,7 +1127,7 @@ export class Control {
     /**
      * Link current control with a target mesh
      * @param mesh defines the mesh to link with
-     * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
+     * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
      */
     public linkWithMesh(mesh: Nullable<AbstractMesh>): void {
         if (!this._host || this.parent && this.parent !== this._host._rootContainer) {

gui/src/2D/controls/image.ts

@@ -239,7 +239,7 @@ export class Image extends Control {
 
     /**
      * Gets or sets a boolean indicating if the image can force its container to adapt its size
-     * @see http://doc.babylonjs.com/how_to/gui#image
+     * @see https://doc.babylonjs.com/how_to/gui#image
      */
     public get autoScale(): boolean {
         return this._autoScale;
@@ -560,7 +560,7 @@ export class Image extends Control {
 
     /**
      * Gets or sets the cell width to use when animation sheet is enabled
-     * @see http://doc.babylonjs.com/how_to/gui#image
+     * @see https://doc.babylonjs.com/how_to/gui#image
      */
     get cellWidth(): number {
         return this._cellWidth;
@@ -576,7 +576,7 @@ export class Image extends Control {
 
     /**
      * Gets or sets the cell height to use when animation sheet is enabled
-     * @see http://doc.babylonjs.com/how_to/gui#image
+     * @see https://doc.babylonjs.com/how_to/gui#image
      */
     get cellHeight(): number {
         return this._cellHeight;
@@ -592,7 +592,7 @@ export class Image extends Control {
 
     /**
      * Gets or sets the cell id to use (this will turn on the animation sheet mode)
-     * @see http://doc.babylonjs.com/how_to/gui#image
+     * @see https://doc.babylonjs.com/how_to/gui#image
      */
     get cellId(): number {
         return this._cellId;

gui/src/2D/controls/selector.ts

@@ -278,7 +278,7 @@ export class SliderGroup extends SelectorGroup {
 }
 
 /** Class used to hold the controls for the checkboxes, radio buttons and sliders
- * @see http://doc.babylonjs.com/how_to/selector
+ * @see https://doc.babylonjs.com/how_to/selector
 */
 export class SelectionPanel extends Rectangle {
     private _panel: StackPanel;

gui/src/2D/valueAndUnit.ts

@@ -8,7 +8,7 @@ export class ValueAndUnit {
     private _originalUnit: number;
     /**
      * Gets or sets a value indicating that this value will not scale accordingly with adaptive scaling property
-     * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+     * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
      */
     public ignoreAdaptiveScaling = false;
 

gui/src/3D/controls/control3D.ts

@@ -106,7 +106,7 @@ export class Control3D implements IDisposable, IBehaviorAware<Control3D> {
 
     /**
      * Gets the list of attached behaviors
-     * @see http://doc.babylonjs.com/features/behaviour
+     * @see https://doc.babylonjs.com/features/behaviour
      */
     public get behaviors(): Behavior<Control3D>[] {
         return this._behaviors;
@@ -114,7 +114,7 @@ export class Control3D implements IDisposable, IBehaviorAware<Control3D> {
 
     /**
      * Attach a behavior to the control
-     * @see http://doc.babylonjs.com/features/behaviour
+     * @see https://doc.babylonjs.com/features/behaviour
      * @param behavior defines the behavior to attach
      * @returns the current control
      */
@@ -142,7 +142,7 @@ export class Control3D implements IDisposable, IBehaviorAware<Control3D> {
 
     /**
      * Remove an attached behavior
-     * @see http://doc.babylonjs.com/features/behaviour
+     * @see https://doc.babylonjs.com/features/behaviour
      * @param behavior defines the behavior to attach
      * @returns the current control
      */
@@ -162,7 +162,7 @@ export class Control3D implements IDisposable, IBehaviorAware<Control3D> {
     /**
      * Gets an attached behavior by name
      * @param name defines the name of the behavior to look for
-     * @see http://doc.babylonjs.com/features/behaviour
+     * @see https://doc.babylonjs.com/features/behaviour
      * @returns null if behavior was not found else the requested behavior
      */
     public getBehaviorByName(name: string): Nullable<Behavior<Control3D>> {

gui/src/3D/gui3DManager.ts

@@ -14,7 +14,7 @@ import { Control3D } from "./controls/control3D";
 
 /**
  * Class used to manage 3D user interface
- * @see http://doc.babylonjs.com/how_to/gui3d
+ * @see https://doc.babylonjs.com/how_to/gui3d
  */
 export class GUI3DManager implements IDisposable {
     private _scene: Scene;

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationCurveEditorComponent.tsx

@@ -18,6 +18,7 @@ import { TargetedAnimation } from 'babylonjs/Animations/animationGroup';
 import { EditorControls } from './editorControls';
 import { SelectedCoordinate } from './animationListTree';
 import { LockObject } from '../lockObject';
+import { GlobalState } from '../../../../globalState';
 import { Nullable } from 'babylonjs/types';
 import { Observer } from 'babylonjs/Misc/observable';
 
@@ -29,6 +30,7 @@ interface IAnimationCurveEditorComponentProps {
   scene: Scene;
   entity: IAnimatable | TargetedAnimation;
   lockObject: LockObject;
+  globalState: GlobalState;
 }
 
 interface ICanvasAxis {
@@ -68,6 +70,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     selectedCoordinate: number;
   }
 > {
+  private _snippetUrl = 'https://snippet.babylonjs.com';
   // Height scale *Review this functionaliy
   private _heightScale: number = 100;
   // Canvas Length *Review this functionality
@@ -692,6 +695,18 @@ export class AnimationCurveEditorComponent extends React.Component<
       case Animation.ANIMATIONTYPE_VECTOR2:
         type = Vector2.Zero();
         break;
+      case Animation.ANIMATIONTYPE_QUATERNION:
+        type = Quaternion.Zero();
+        break;
+      case Animation.ANIMATIONTYPE_COLOR3:
+        type = new Color3(0, 0, 0);
+        break;
+      case Animation.ANIMATIONTYPE_COLOR4:
+        type = new Color4(0, 0, 0, 0);
+        break;
+      case Animation.ANIMATIONTYPE_SIZE:
+        type = new Size(0, 0);
+        break;
     }
     return type;
   }
@@ -789,12 +804,12 @@ export class AnimationCurveEditorComponent extends React.Component<
               if (this.state !== undefined) {
                 let emptyTangents = keyframes.map((kf, i) => {
                   if (i === 0) {
-                    kf.outTangent = 0;
+                    kf.outTangent = this.returnZero(valueType);
                   } else if (i === keyframes.length - 1) {
-                    kf.inTangent = 0;
+                    kf.inTangent = this.returnZero(valueType);
                   } else {
-                    kf.inTangent = 0;
-                    kf.outTangent = 0;
+                    kf.inTangent = this.returnZero(valueType);
+                    kf.outTangent = this.returnZero(valueType);
                   }
                   return kf;
                 });
@@ -1410,6 +1425,8 @@ export class AnimationCurveEditorComponent extends React.Component<
               setNotificationMessage={(message: string) => {
                 this.setState({ notification: message });
               }}
+              globalState={this.props.globalState}
+              snippetServer={this._snippetUrl}
             />
 
             <div
@@ -1475,17 +1492,15 @@ export class AnimationCurveEditorComponent extends React.Component<
                     );
                   })}
 
-                  <svg>
-                    <rect
-                      onClick={(e) => this.moveFrameTo(e)}
-                      x='0%'
-                      y='91%'
-                      width='105%'
-                      height='10%'
-                      fill='#222'
-                      style={{ cursor: 'pointer' }}
-                    ></rect>
-                  </svg>
+                  <rect
+                    onClick={(e) => this.moveFrameTo(e)}
+                    x='0%'
+                    y='91%'
+                    width='105%'
+                    height='10%'
+                    fill='#222'
+                    style={{ cursor: 'pointer' }}
+                  ></rect>
 
                   {this.state.frameAxisLength.map((f, i) => (
                     <svg key={i} x='0' y='96%'>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationListTree.tsx

@@ -1,187 +1,400 @@
-
-import * as React from "react";
+import * as React from 'react';
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
-import { TargetedAnimation } from "babylonjs/Animations/animationGroup";
-import { Observable } from "babylonjs/Misc/observable";
-import { PropertyChangedEvent } from "../../../../../components/propertyChangedEvent";
+import { TargetedAnimation } from 'babylonjs/Animations/animationGroup';
+import { Observable } from 'babylonjs/Misc/observable';
+import { PropertyChangedEvent } from '../../../../../components/propertyChangedEvent';
 import { Animation } from 'babylonjs/Animations/animation';
 import { IconButtonLineComponent } from '../../../lines/iconButtonLineComponent';
 import { Nullable } from 'babylonjs/types';
 
 interface IAnimationListTreeProps {
-    isTargetedAnimation: boolean;
-    entity: IAnimatable | TargetedAnimation;
-    selected: Animation | null
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    selectAnimation: (selected: Animation, coordinate?: SelectedCoordinate) => void;
-    empty: () => void;
+  isTargetedAnimation: boolean;
+  entity: IAnimatable | TargetedAnimation;
+  selected: Animation | null;
+  onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+  selectAnimation: (
+    selected: Animation,
+    coordinate?: SelectedCoordinate
+  ) => void;
+  empty: () => void;
 }
 
 interface Item {
-    index: number;
-    name: string;
-    property: string;
-    selected: boolean;
-    open: boolean;
+  index: number;
+  name: string;
+  property: string;
+  selected: boolean;
+  open: boolean;
 }
 
 export enum SelectedCoordinate {
-    x = 0,
-    y = 1,
-    z = 2,
-    w = 3,
-    r = 0,
-    g = 1,
-    b = 2,
-    a = 3,
-    width = 0,
-    height = 1
+  x = 0,
+  y = 1,
+  z = 2,
+  w = 3,
+  r = 0,
+  g = 1,
+  b = 2,
+  a = 3,
+  width = 0,
+  height = 1,
 }
 
-export class AnimationListTree extends React.Component<IAnimationListTreeProps, { list: Item[], selectedCoordinate: SelectedCoordinate, selectedAnimation: number }>{
-    constructor(props: IAnimationListTreeProps) {
-        super(props);
-        let animationList = (this.props.entity as IAnimatable).animations && (this.props.entity as IAnimatable).animations?.map((animation, i) => {
-            return ({ index: i, name: animation.name, property: animation.targetProperty, selected: false, open: false } as Item)
-        });
-        this.state = { list: animationList ?? [], selectedCoordinate: 0, selectedAnimation: 0 }
-    }
+export class AnimationListTree extends React.Component<
+  IAnimationListTreeProps,
+  {
+    selectedCoordinate: SelectedCoordinate;
+    selectedAnimation: number;
+  }
+> {
+  private _list: Item[] | null;
+  constructor(props: IAnimationListTreeProps) {
+    super(props);
 
-    deleteAnimation() {
-        let currentSelected = this.props.selected;
-        if (this.props.entity instanceof TargetedAnimation) {
-            console.log("no animation remove allowed");
-        } else {
-            let animations = (this.props.entity as IAnimatable).animations;
-            if (animations) {
-                let updatedAnimations = animations.filter(anim => anim !== currentSelected);
-                (this.props.entity as IAnimatable).animations = updatedAnimations as Nullable<Animation[]>;
-                this.generateList();
-            }
-        }
-    }
+    this._list = this.generateList();
 
-    generateList() {
-        let animationList = (this.props.entity as IAnimatable).animations && (this.props.entity as IAnimatable).animations?.map((animation, i) => {
-            return ({ index: i, name: animation.name, property: animation.targetProperty, selected: false, open: false } as Item)
-        });
-        if (animationList?.length === 0) {
-            this.props.empty();
-        }
-        this.setState({ list: animationList ?? [] });
-    }
+    this.state = {
+      selectedCoordinate: 0,
+      selectedAnimation: 0,
+    };
+  }
 
-    editAnimation() {
-        console.log('Edit animation');// TODO. Implement the edit options here
+  deleteAnimation() {
+    let currentSelected = this.props.selected;
+    if (this.props.entity instanceof TargetedAnimation) {
+      console.log('no animation remove allowed');
+    } else {
+      let animations = (this.props.entity as IAnimatable).animations;
+      if (animations) {
+        let updatedAnimations = animations.filter(
+          (anim) => anim !== currentSelected
+        );
+        (this.props
+          .entity as IAnimatable).animations = updatedAnimations as Nullable<
+          Animation[]
+        >;
+        this._list = this.generateList();
+      }
     }
+  }
 
-    toggleProperty(index: number) {
-        let item = this.state.list[index];
-        item.open = !item.open;
+  generateList() {
+    let animationList =
+      (this.props.entity as IAnimatable).animations &&
+      (this.props.entity as IAnimatable).animations?.map((animation, i) => {
+        return {
+          index: i,
+          name: animation.name,
+          property: animation.targetProperty,
+          selected: false,
+          open: false,
+        } as Item;
+      });
+    if (animationList?.length === 0) {
+      this.props.empty();
     }
+    return animationList ?? null;
+  }
 
-    setSelectedCoordinate(animation: Animation, coordinate: SelectedCoordinate, index: number) {
-        this.setState({ selectedCoordinate: coordinate, selectedAnimation: index });
-        this.props.selectAnimation(animation, SelectedCoordinate.x)
-    }
+  editAnimation() {
+    console.log('Edit animation'); // TODO. Implement the edit options here
+  }
 
-    setListItem(animation: Animation, i: number) {
-        let element;
+  toggleProperty(index: number) {
+    if (this._list !== null) {
+      let item = this._list[index];
+      item.open = !item.open;
+    }
+  }
 
-        switch (animation.dataType) {
-            case Animation.ANIMATIONTYPE_FLOAT:
-                element = <li className={this.props.selected && this.props.selected.name === animation.name ? 'property active' : 'property'} key={i} onClick={() => this.props.selectAnimation(animation)}>
-                    <div className={`animation-bullet`}></div>
-                    <p>{animation.targetProperty}</p>
-                    <IconButtonLineComponent tooltip="Options" icon="small animation-options" onClick={() => this.editAnimation()} />
-                    {!(this.props.entity instanceof TargetedAnimation) ? this.props.selected && this.props.selected.name === animation.name ? <IconButtonLineComponent tooltip="Remove" icon="small animation-delete" onClick={() => this.deleteAnimation()} /> : <div className="spacer"></div> : null}
-                </li>
-                break;
-            case Animation.ANIMATIONTYPE_VECTOR2:
-                element = <li className={this.props.selected && this.props.selected.name === animation.name ? 'property active' : 'property'} key={i} onClick={() => this.props.selectAnimation(animation)}>
-                    <p>{animation.targetProperty}</p>
-                    <ul>
-                        <li key={`${i}_x`}>Property <strong>X</strong></li>
-                        <li key={`${i}_y`}>Property <strong>Y</strong></li>
-                    </ul>
-                </li>
-                break;
-            case Animation.ANIMATIONTYPE_VECTOR3:
-                element = <li className={this.props.selected && this.props.selected.name === animation.name ? 'property sub active' : 'property sub'} key={i}>
-                    <div className={`animation-arrow ${this.state.list[i].open ? '' : 'flip'}`} onClick={() => this.toggleProperty(i)}></div>
-                    <p onClick={() => this.props.selectAnimation(animation)}>{animation.targetProperty}</p>
-                    <IconButtonLineComponent tooltip="Options" icon="small animation-options" onClick={() => this.editAnimation()} />
-                    {!(this.props.entity instanceof TargetedAnimation) ? this.props.selected && this.props.selected.name === animation.name ? <IconButtonLineComponent tooltip="Remove" icon="small animation-delete" onClick={() => this.deleteAnimation()} /> : <div className="spacer"></div> : null}
-                    <ul className={`sub-list ${this.state.list[i].open ? '' : 'hidden'}`}>
-                        <li key={`${i}_x`} id={`${i}_x`} className="property" style={{ color: '#db3e3e' }} onClick={() => this.setSelectedCoordinate(animation, SelectedCoordinate.x, i)}>
-                            <div className={`handle-indicator ${this.state.selectedCoordinate === SelectedCoordinate.x && this.state.selectedAnimation === i ? 'show' : 'hide'}`}></div>
-                            {animation.targetProperty} X</li>
-                        <li key={`${i}_y`} id={`${i}_y`} className="property" style={{ color: '#51e22d' }} onClick={() => this.setSelectedCoordinate(animation, SelectedCoordinate.y, i)}>
-                            <div className={`handle-indicator ${this.state.selectedCoordinate === SelectedCoordinate.y && this.state.selectedAnimation === i ? 'show' : 'hide'}`}></div>
-                            {animation.targetProperty} Y</li>
-                        <li key={`${i}_z`} id={`${i}_z`} className="property" style={{ color: '#00a3ff' }} onClick={() => this.setSelectedCoordinate(animation, SelectedCoordinate.z, i)}>
-                            <div className={`handle-indicator ${this.state.selectedCoordinate === SelectedCoordinate.z && this.state.selectedAnimation === i ? 'show' : 'hide'}`}></div>
-                            {animation.targetProperty} Z</li>
-                    </ul>
-                </li>
-                break;
-            case Animation.ANIMATIONTYPE_QUATERNION:
-                element = <li className="property" key={i}><p>{animation.targetProperty}</p>
-                    <ul>
-                        <li key={`${i}_x`}>Property <strong>X</strong></li>
-                        <li key={`${i}_y`}>Property <strong>Y</strong></li>
-                        <li key={`${i}_z`}>Property <strong>Z</strong></li>
-                        <li key={`${i}_w`}>Property <strong>W</strong></li>
-                    </ul>
-                </li>
-                break;
-            case Animation.ANIMATIONTYPE_COLOR3:
-                element = <li className="property" key={i}><p>{animation.targetProperty}</p>
-                    <ul>
-                        <li key={`${i}_r`}>Property <strong>R</strong></li>
-                        <li key={`${i}_g`}>Property <strong>G</strong></li>
-                        <li key={`${i}_b`}>Property <strong>B</strong></li>
-                    </ul>
-                </li>
-                break;
-            case Animation.ANIMATIONTYPE_COLOR4:
-                element = <li className="property" key={i}><p>{animation.targetProperty}</p>
-                    <ul>
-                        <li key={`${i}_r`}>Property <strong>R</strong></li>
-                        <li key={`${i}_g`}>Property <strong>G</strong></li>
-                        <li key={`${i}_b`}>Property <strong>B</strong></li>
-                        <li key={`${i}_a`}>Property <strong>A</strong></li>
-                    </ul>
-                </li>
-                break;
-            case Animation.ANIMATIONTYPE_SIZE:
-                element = <li className="property" key={i}><p>{animation.targetProperty}</p>
-                    <ul>
-                        <li key={`${i}_width`}>Property <strong>Width</strong></li>
-                        <li key={`${i}_height`}>Property <strong>Height</strong></li>
-                    </ul>
-                </li>
-                break;
-            default: console.log("not recognized");
-                element = null;
-                break;
-        }
+  setSelectedCoordinate(
+    animation: Animation,
+    coordinate: SelectedCoordinate,
+    index: number
+  ) {
+    this.setState({ selectedCoordinate: coordinate, selectedAnimation: index });
+    this.props.selectAnimation(animation, SelectedCoordinate.x);
+  }
 
-        return element;
-    }
+  setListItem(animation: Animation, i: number) {
+    let element;
+    this._list = this.generateList();
 
-    render() {
-        return (
-            <div className="object-tree">
-                <ul>
-                    {
-                        this.props.isTargetedAnimation ? this.setListItem((this.props.entity as TargetedAnimation).animation, 0) :
-                            (this.props.entity as IAnimatable).animations && (this.props.entity as IAnimatable).animations?.map((animation, i) => {
-                                return this.setListItem(animation, i);
-                            })}
+    if (this._list !== null) {
+      switch (animation.dataType) {
+        case Animation.ANIMATIONTYPE_FLOAT:
+          element = (
+            <li
+              className={
+                this.props.selected &&
+                this.props.selected.name === animation.name
+                  ? 'property active'
+                  : 'property'
+              }
+              key={i}
+              onClick={() => this.props.selectAnimation(animation)}
+            >
+              <div className={`animation-bullet`}></div>
+              <p>{animation.targetProperty}</p>
+              <IconButtonLineComponent
+                tooltip='Options'
+                icon='small animation-options'
+                onClick={() => this.editAnimation()}
+              />
+              {!(this.props.entity instanceof TargetedAnimation) ? (
+                this.props.selected &&
+                this.props.selected.name === animation.name ? (
+                  <IconButtonLineComponent
+                    tooltip='Remove'
+                    icon='small animation-delete'
+                    onClick={() => this.deleteAnimation()}
+                  />
+                ) : (
+                  <div className='spacer'></div>
+                )
+              ) : null}
+            </li>
+          );
+          break;
+        case Animation.ANIMATIONTYPE_VECTOR2:
+          element = (
+            <li
+              className={
+                this.props.selected &&
+                this.props.selected.name === animation.name
+                  ? 'property active'
+                  : 'property'
+              }
+              key={i}
+              onClick={() => this.props.selectAnimation(animation)}
+            >
+              <p>{animation.targetProperty}</p>
+              <ul>
+                <li key={`${i}_x`}>
+                  Property <strong>X</strong>
+                </li>
+                <li key={`${i}_y`}>
+                  Property <strong>Y</strong>
+                </li>
+              </ul>
+            </li>
+          );
+          break;
+        case Animation.ANIMATIONTYPE_VECTOR3:
+          element = (
+            <li
+              className={
+                this.props.selected &&
+                this.props.selected.name === animation.name
+                  ? 'property sub active'
+                  : 'property sub'
+              }
+              key={i}
+            >
+              <div
+                className={`animation-arrow ${
+                  this._list[i].open ? '' : 'flip'
+                }`}
+                onClick={() => this.toggleProperty(i)}
+              ></div>
+              <p onClick={() => this.props.selectAnimation(animation)}>
+                {animation.targetProperty}
+              </p>
+              <IconButtonLineComponent
+                tooltip='Options'
+                icon='small animation-options'
+                onClick={() => this.editAnimation()}
+              />
+              {!(this.props.entity instanceof TargetedAnimation) ? (
+                this.props.selected &&
+                this.props.selected.name === animation.name ? (
+                  <IconButtonLineComponent
+                    tooltip='Remove'
+                    icon='small animation-delete'
+                    onClick={() => this.deleteAnimation()}
+                  />
+                ) : (
+                  <div className='spacer'></div>
+                )
+              ) : null}
+              <ul className={`sub-list ${this._list[i].open ? '' : 'hidden'}`}>
+                <li
+                  key={`${i}_x`}
+                  id={`${i}_x`}
+                  className='property'
+                  style={{ color: '#db3e3e' }}
+                  onClick={() =>
+                    this.setSelectedCoordinate(
+                      animation,
+                      SelectedCoordinate.x,
+                      i
+                    )
+                  }
+                >
+                  <div
+                    className={`handle-indicator ${
+                      this.state.selectedCoordinate === SelectedCoordinate.x &&
+                      this.state.selectedAnimation === i
+                        ? 'show'
+                        : 'hide'
+                    }`}
+                  ></div>
+                  {animation.targetProperty} X
+                </li>
+                <li
+                  key={`${i}_y`}
+                  id={`${i}_y`}
+                  className='property'
+                  style={{ color: '#51e22d' }}
+                  onClick={() =>
+                    this.setSelectedCoordinate(
+                      animation,
+                      SelectedCoordinate.y,
+                      i
+                    )
+                  }
+                >
+                  <div
+                    className={`handle-indicator ${
+                      this.state.selectedCoordinate === SelectedCoordinate.y &&
+                      this.state.selectedAnimation === i
+                        ? 'show'
+                        : 'hide'
+                    }`}
+                  ></div>
+                  {animation.targetProperty} Y
+                </li>
+                <li
+                  key={`${i}_z`}
+                  id={`${i}_z`}
+                  className='property'
+                  style={{ color: '#00a3ff' }}
+                  onClick={() =>
+                    this.setSelectedCoordinate(
+                      animation,
+                      SelectedCoordinate.z,
+                      i
+                    )
+                  }
+                >
+                  <div
+                    className={`handle-indicator ${
+                      this.state.selectedCoordinate === SelectedCoordinate.z &&
+                      this.state.selectedAnimation === i
+                        ? 'show'
+                        : 'hide'
+                    }`}
+                  ></div>
+                  {animation.targetProperty} Z
+                </li>
+              </ul>
+            </li>
+          );
+          break;
+        case Animation.ANIMATIONTYPE_QUATERNION:
+          element = (
+            <li className='property' key={i}>
+              <p>{animation.targetProperty}</p>
+              <ul>
+                <li key={`${i}_x`}>
+                  Property <strong>X</strong>
+                </li>
+                <li key={`${i}_y`}>
+                  Property <strong>Y</strong>
+                </li>
+                <li key={`${i}_z`}>
+                  Property <strong>Z</strong>
+                </li>
+                <li key={`${i}_w`}>
+                  Property <strong>W</strong>
+                </li>
+              </ul>
+            </li>
+          );
+          break;
+        case Animation.ANIMATIONTYPE_COLOR3:
+          element = (
+            <li className='property' key={i}>
+              <p>{animation.targetProperty}</p>
+              <ul>
+                <li key={`${i}_r`}>
+                  Property <strong>R</strong>
+                </li>
+                <li key={`${i}_g`}>
+                  Property <strong>G</strong>
+                </li>
+                <li key={`${i}_b`}>
+                  Property <strong>B</strong>
+                </li>
+              </ul>
+            </li>
+          );
+          break;
+        case Animation.ANIMATIONTYPE_COLOR4:
+          element = (
+            <li className='property' key={i}>
+              <p>{animation.targetProperty}</p>
+              <ul>
+                <li key={`${i}_r`}>
+                  Property <strong>R</strong>
+                </li>
+                <li key={`${i}_g`}>
+                  Property <strong>G</strong>
+                </li>
+                <li key={`${i}_b`}>
+                  Property <strong>B</strong>
+                </li>
+                <li key={`${i}_a`}>
+                  Property <strong>A</strong>
+                </li>
+              </ul>
+            </li>
+          );
+          break;
+        case Animation.ANIMATIONTYPE_SIZE:
+          element = (
+            <li className='property' key={i}>
+              <p>{animation.targetProperty}</p>
+              <ul>
+                <li key={`${i}_width`}>
+                  Property <strong>Width</strong>
+                </li>
+                <li key={`${i}_height`}>
+                  Property <strong>Height</strong>
+                </li>
+              </ul>
+            </li>
+          );
+          break;
+        default:
+          console.log('not recognized');
+          element = null;
+          break;
+      }
 
-                </ul>
-            </div>
-        )
+      return element;
+    } else {
+      return null;
     }
-} 
+  }
+
+  render() {
+    return (
+      <div className='object-tree'>
+        <ul>
+          {this.props.isTargetedAnimation
+            ? this.setListItem(
+                (this.props.entity as TargetedAnimation).animation,
+                0
+              )
+            : (this.props.entity as IAnimatable).animations &&
+              (this.props.entity as IAnimatable).animations?.map(
+                (animation, i) => {
+                  return this.setListItem(animation, i);
+                }
+              )}
+        </ul>
+      </div>
+    );
+  }
+}

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationPropertyGridComponent.tsx

@@ -247,6 +247,7 @@ export class AnimationGridComponent extends React.Component<
                     }
                     lockObject={this.props.lockObject}
                     playOrPause={() => this.playOrPause()}
+                    globalState={this.props.globalState}
                   />
                 </PopupComponent>
               )}

inspector/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor.scss

@@ -757,15 +757,16 @@ body {
           margin-left: 75px;
           height: 20px;
           margin-top: 10px;
-          button {
+          button,
+          label {
             border: none;
             font-size: 12px;
             margin: 0px;
-            width: 60px;
+            width: 127px;
             background-color: #444;
             height: 20px;
             font-family: acumin-pro-condensed;
-            padding-top: 1px;
+            padding-top: 0px;
           }
         }
 
@@ -786,6 +787,7 @@ body {
               font-family: acumin-pro-condensed;
               padding-bottom: 6px;
               padding-left: 6px;
+              color: white;
             }
           }
         }
@@ -852,7 +854,7 @@ body {
         }
 
         .buttonLine {
-          width: 80px;
+          width: 105px;
           padding: 0px;
           display: block;
           margin-left: 75px;
@@ -862,12 +864,22 @@ body {
             border: none;
             font-size: 12px;
             margin: 0px;
-            width: 80px;
             background-color: #444444;
             height: 20px;
+            width: 105px;
             font-family: acumin-pro-condensed;
             padding-top: 1px;
           }
+
+          &:first-child {
+            width: 105px;
+          }
+          &:nth-child(2) {
+            width: 60px;
+            button {
+              width: 60px;
+            }
+          }
         }
 
         .textInputLine {
@@ -1089,8 +1101,8 @@ body {
       .linear {
         overflow: visible;
         border: 0px solid white;
-        height: 362px;
-        width: 780px;
+        height: 100%;
+        width: 100%;
         outline: none;
 
         svg {
@@ -1126,7 +1138,7 @@ body {
       }
 
       .playhead-wrapper {
-        left: -13px;
+        left: 20px;
         bottom: 366px;
         position: relative;
       }

inspector/src/components/actionTabs/tabs/propertyGrids/animations/editorControls.tsx

@@ -12,6 +12,7 @@ import { TargetedAnimation } from 'babylonjs/Animations/animationGroup';
 import { LoadSnippet } from './loadsnippet';
 import { SaveSnippet } from './saveSnippet';
 import { LockObject } from '../lockObject';
+import { GlobalState } from '../../../../globalState';
 
 interface IEditorControlsProps {
   isTargetedAnimation: boolean;
@@ -21,6 +22,8 @@ interface IEditorControlsProps {
   onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
   setNotificationMessage: (message: string) => void;
   selectAnimation: (selected: Animation, axis?: SelectedCoordinate) => void;
+  globalState: GlobalState;
+  snippetServer: string;
 }
 
 export class EditorControls extends React.Component<
@@ -33,6 +36,7 @@ export class EditorControls extends React.Component<
     isLoopActive: boolean;
     animationsCount: number;
     framesPerSecond: number;
+    snippetId: string;
   }
 > {
   constructor(props: IEditorControlsProps) {
@@ -48,6 +52,7 @@ export class EditorControls extends React.Component<
       isLoopActive: false,
       animationsCount: count,
       framesPerSecond: 60,
+      snippetId: '',
     };
   }
 
@@ -122,6 +127,16 @@ export class EditorControls extends React.Component<
     });
   }
 
+  animationsLoaded(numberOfAnimations: number) {
+    this.setState({
+      animationsCount: numberOfAnimations,
+      isEditTabOpen: true,
+      isAnimationTabOpen: false,
+      isLoadTabOpen: false,
+      isSaveTabOpen: false,
+    });
+  }
+
   render() {
     return (
       <div className='animation-list'>
@@ -197,11 +212,28 @@ export class EditorControls extends React.Component<
         )}
 
         {this.state.isLoadTabOpen ? (
-          <LoadSnippet lockObject={this.props.lockObject} animations={[]} />
+          <LoadSnippet
+            animationsLoaded={(numberOfAnimations: number) =>
+              this.animationsLoaded(numberOfAnimations)
+            }
+            lockObject={this.props.lockObject}
+            animations={[]}
+            snippetServer={this.props.snippetServer}
+            globalState={this.props.globalState}
+            setSnippetId={(id: string) => this.setState({ snippetId: id })}
+            entity={this.props.entity}
+            setNotificationMessage={this.props.setNotificationMessage}
+          />
         ) : null}
 
         {this.state.isSaveTabOpen ? (
-          <SaveSnippet lockObject={this.props.lockObject} animations={[]} />
+          <SaveSnippet
+            lockObject={this.props.lockObject}
+            animations={(this.props.entity as IAnimatable).animations}
+            snippetServer={this.props.snippetServer}
+            globalState={this.props.globalState}
+            snippetId={this.state.snippetId}
+          />
         ) : null}
 
         {this.state.isEditTabOpen ? (

inspector/src/components/actionTabs/tabs/propertyGrids/animations/loadsnippet.tsx

@@ -1,49 +1,124 @@
-import * as React from "react";
-import { Observable } from "babylonjs/Misc/observable";
-import { PropertyChangedEvent } from "../../../../../components/propertyChangedEvent";
-import { Animation } from "babylonjs/Animations/animation";
-import { ButtonLineComponent } from "../../../lines/buttonLineComponent";
-import { TextInputLineComponent } from "../../../lines/textInputLineComponent";
-import { LockObject } from "../lockObject";
+import * as React from 'react';
+import { Observable } from 'babylonjs/Misc/observable';
+import { PropertyChangedEvent } from '../../../../../components/propertyChangedEvent';
+import { Animation } from 'babylonjs/Animations/animation';
+import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
+import { FileButtonLineComponent } from '../../../lines/fileButtonLineComponent';
+import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
+import { LockObject } from '../lockObject';
+import { Tools } from 'babylonjs/Misc/tools';
+import { GlobalState } from '../../../../globalState';
+import { ReadFileError } from 'babylonjs/Misc/fileTools';
+import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
+import { TargetedAnimation } from 'babylonjs/Animations/animationGroup';
 
 interface ILoadSnippetProps {
   animations: Animation[];
   onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
   lockObject: LockObject;
+  globalState: GlobalState;
+  snippetServer: string;
+  setSnippetId: (id: string) => void;
+  entity: IAnimatable | TargetedAnimation;
+  setNotificationMessage: (message: string) => void;
+  animationsLoaded: (numberOfAnimations: number) => void;
 }
 
 export class LoadSnippet extends React.Component<
   ILoadSnippetProps,
-  { server: string }
+  { snippetId: string }
 > {
   private _serverAddress: string;
   constructor(props: ILoadSnippetProps) {
     super(props);
-    this._serverAddress = "-";
-    this.state = { server: "" };
+    this._serverAddress = this.props.snippetServer;
+    this.state = { snippetId: '' };
   }
 
   change(value: string) {
-    this.setState({ server: value });
+    this.setState({ snippetId: value });
+    this.props.setSnippetId(value);
+  }
+
+  loadFromFile(file: File) {
+    Tools.ReadFile(
+      file,
+      (data) => {
+        let decoder = new TextDecoder('utf-8');
+        let jsonObject = JSON.parse(decoder.decode(data));
+        var result: Animation[] = [];
+
+        for (var i in jsonObject) {
+          result.push(Animation.Parse(jsonObject[i]));
+        }
+
+        if (this.props.entity) {
+          (this.props.entity as IAnimatable).animations = result;
+          var e = new PropertyChangedEvent();
+          e.object = this.props.entity;
+          e.property = 'animations';
+          e.value = (this.props.entity as IAnimatable).animations;
+          this.props.globalState.onPropertyChangedObservable.notifyObservers(e);
+          this.props.animationsLoaded(result.length);
+        }
+      },
+      undefined,
+      true,
+      (error: ReadFileError) => {
+        console.log(error.message);
+      }
+    );
+  }
+
+  loadFromSnippet() {
+    if (this.state.snippetId !== '') {
+      //How to dispose() previous animations;
+      //How to notify observers
+      Animation.CreateFromSnippetAsync(this.state.snippetId)
+        .then((newAnimations) => {
+          // Explore how observers are notified from snippet
+          if (newAnimations instanceof Array) {
+            (this.props.entity as IAnimatable).animations = newAnimations;
+          }
+
+          if (newAnimations instanceof Animation) {
+            (this.props.entity as IAnimatable).animations?.push(newAnimations);
+          }
+        })
+        .catch((err) => {
+          this.props.setNotificationMessage(
+            `Unable to load your animations: ${err}`
+          );
+        });
+    } else {
+      this.props.setNotificationMessage(`You need to add an snippet id`);
+    }
   }
 
   render() {
     return (
-      <div className="load-container">
+      <div className='load-container'>
         <TextInputLineComponent
-          label="Snippet Server"
+          label='Snippet Id'
           lockObject={this.props.lockObject}
-          value={this.state.server}
+          value={this.state.snippetId}
           onChange={(value: string) => this.change(value)}
         />
-        <ButtonLineComponent label="Load" onClick={() => {}} />
-        <div className="load-browse">
+        <ButtonLineComponent
+          label='Load from snippet server'
+          onClick={() => this.loadFromSnippet()}
+        />
+        <div className='load-browse'>
           <p>Local File</p>
-          <ButtonLineComponent label="Browse" onClick={() => {}} />
+          <FileButtonLineComponent
+            label='Load'
+            onClick={(file) => this.loadFromFile(file)}
+            accept='.json'
+          />
         </div>
-        <div className="load-server">
-          <p>Snippet Server : </p>
-          <p>{this._serverAddress}</p>
+        <div className='load-server'>
+          <p>Snippet Server: </p>&nbsp;
+          <p> {this._serverAddress ?? '-'}</p>
         </div>
       </div>
     );

inspector/src/components/actionTabs/tabs/propertyGrids/animations/playhead.tsx

@@ -47,7 +47,7 @@ export class Playhead extends React.Component<IPlayheadProps> {
   }
 
   calculateMove() {
-    return `calc(${this.props.frame * this.props.offset}px - 13px)`;
+    return `calc(${this.props.frame * this.props.offset}px + 20px)`;
   }
 
   render() {

inspector/src/components/actionTabs/tabs/propertyGrids/animations/saveSnippet.tsx

@@ -1,15 +1,26 @@
-import * as React from "react";
-import { Observable } from "babylonjs/Misc/observable";
-import { PropertyChangedEvent } from "../../../../../components/propertyChangedEvent";
-import { ButtonLineComponent } from "../../../lines/buttonLineComponent";
-import { LockObject } from "../lockObject";
+import * as React from 'react';
+import { Observable } from 'babylonjs/Misc/observable';
+import { PropertyChangedEvent } from '../../../../../components/propertyChangedEvent';
+import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
+import { Tools } from 'babylonjs/Misc/tools';
+import { Animation } from 'babylonjs/Animations/animation';
+import { LockObject } from '../lockObject';
+import { Nullable } from 'babylonjs/types';
+import { GlobalState } from '../../../../globalState';
 
 interface ISaveSnippetProps {
-  animations: any[];
+  animations: Nullable<Animation[]>;
   onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
   lockObject: LockObject;
+  globalState: GlobalState;
+  snippetServer: string;
+  snippetId: string;
 }
 
+export interface Snippet {
+  url: string;
+  id: string;
+}
 interface SelectedAnimation {
   id: string;
   name: string;
@@ -21,11 +32,9 @@ export class SaveSnippet extends React.Component<
   ISaveSnippetProps,
   { selectedAnimations: SelectedAnimation[] }
 > {
-  private _serverAddress: string;
   constructor(props: ISaveSnippetProps) {
     super(props);
-    this._serverAddress = "-";
-    let animList = this.props.animations.map((animation, i) => {
+    let animList = this.props.animations?.map((animation, i) => {
       return {
         id: `${animation.name}_${animation.targetProperty}`,
         name: animation.name,
@@ -33,15 +42,15 @@ export class SaveSnippet extends React.Component<
         selected: false,
       };
     });
-    this.state = { selectedAnimations: animList };
+    this.state = { selectedAnimations: animList ?? [] };
   }
 
   handleCheckboxChange(e: React.ChangeEvent<HTMLInputElement>) {
     e.preventDefault();
 
-    let index = parseInt(e.target.id.replace("save_", ""));
+    let index = parseInt(e.target.id.replace('save_', ''));
 
-    let updated = this.state.selectedAnimations.map((item) => {
+    let updated = this.state.selectedAnimations?.map((item) => {
       if (item.index === index) {
         item.selected = !item.selected;
       }
@@ -51,24 +60,102 @@ export class SaveSnippet extends React.Component<
     this.setState({ selectedAnimations: updated });
   }
 
+  stringifySelectedAnimations() {
+    const content: string[] = [];
+    this.state.selectedAnimations.forEach((animation) => {
+      if (animation.selected) {
+        const selected =
+          this.props.animations && this.props.animations[animation.index];
+        if (selected) {
+          content.push(selected.serialize());
+        }
+      }
+    });
+    return JSON.stringify(content);
+  }
+
+  saveToFile() {
+    const content = this.stringifySelectedAnimations();
+    Tools.Download(new Blob([content]), 'animations.json');
+  }
+
+  saveToSnippet() {
+    if (this.props.snippetId !== '') {
+      let serverId = this.props.snippetId;
+      const serverUrl = this.props.snippetServer;
+      const content = this.stringifySelectedAnimations();
+
+      var xmlHttp = new XMLHttpRequest();
+      xmlHttp.onreadystatechange = () => {
+        if (xmlHttp.readyState == 4) {
+          if (xmlHttp.status == 200) {
+            var snippet = JSON.parse(xmlHttp.responseText);
+            const oldId = serverId;
+            serverId = snippet.id;
+            if (snippet.version && snippet.version != '0') {
+              serverId += '#' + snippet.version;
+            }
+            this.forceUpdate();
+            if (navigator.clipboard) {
+              navigator.clipboard.writeText(serverId);
+            }
+
+            let windowAsAny = window as any;
+
+            if (windowAsAny.Playground && oldId) {
+              windowAsAny.Playground.onRequestCodeChangeObservable.notifyObservers(
+                {
+                  regex: new RegExp(oldId, 'g'),
+                  replace: serverId,
+                }
+              );
+            }
+
+            alert(
+              'Animations saved with ID: ' +
+                serverId +
+                ' (please note that the id was also saved to your clipboard)'
+            );
+          } else {
+            alert('Unable to save your animations');
+          }
+        }
+      };
+
+      xmlHttp.open('POST', serverUrl + (serverId ? '/' + serverId : ''), true);
+      xmlHttp.setRequestHeader('Content-Type', 'application/json');
+
+      var dataToSend = {
+        payload: JSON.stringify({
+          animations: content,
+        }),
+        name: '',
+        description: '',
+        tags: '',
+      };
+
+      xmlHttp.send(JSON.stringify(dataToSend));
+    }
+  }
+
   render() {
     return (
-      <div className="save-container">
-        <div className="item-list">
+      <div className='save-container'>
+        <div className='item-list'>
           <ul>
-            {this.props.animations.map((animation, i) => {
+            {this.props.animations?.map((animation, i) => {
               return (
                 <li key={i}>
                   <div>
                     <label>
                       <input
                         id={`save_${i}`}
-                        name={`save_${animation.name}`}
-                        type="checkbox"
+                        name={`save_${animation?.name}`}
+                        type='checkbox'
                         checked={this.state.selectedAnimations[i].selected}
                         onChange={(e) => this.handleCheckboxChange(e)}
                       />
-                      {animation.name}
+                      {animation?.name}
                     </label>
                   </div>
                 </li>
@@ -76,13 +163,18 @@ export class SaveSnippet extends React.Component<
             })}
           </ul>
         </div>
-        <div className="save-buttons">
-          <ButtonLineComponent label="Save Snippet" onClick={() => {}} />
-          <ButtonLineComponent label="Save File" onClick={() => {}} />
+        <div className='save-buttons'>
+          {this.props.snippetId !== '' ? (
+            <ButtonLineComponent
+              label='Save to snippet server'
+              onClick={() => this.saveToSnippet()}
+            />
+          ) : null}
+          <ButtonLineComponent label='Save' onClick={() => this.saveToFile()} />
         </div>
-        <div className="save-server">
-          <p>Snippet Server:</p>
-          <p>{this._serverAddress}</p>
+        <div className='save-server'>
+          <p>Snippet Server: </p>&nbsp;
+          <p> {this.props.snippetServer ?? '-'}</p>
         </div>
       </div>
     );

inspector/src/components/actionTabs/tabs/propertyGrids/animations/svgDraggableArea.tsx

@@ -1,230 +1,242 @@
-import * as React from "react";
+import * as React from 'react';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { KeyframeSvgPoint, IKeyframeSvgPoint } from './keyframeSvgPoint';
 
 interface ISvgDraggableAreaProps {
-    keyframeSvgPoints: IKeyframeSvgPoint[];
-    updatePosition: (updatedKeyframe: IKeyframeSvgPoint, id: string) => void;
-    scale: number;
-    viewBoxScale: number;
-    selectKeyframe: (id: string) => void;
-    selectedControlPoint: (type: string, id: string) => void;
+  keyframeSvgPoints: IKeyframeSvgPoint[];
+  updatePosition: (updatedKeyframe: IKeyframeSvgPoint, id: string) => void;
+  scale: number;
+  viewBoxScale: number;
+  selectKeyframe: (id: string) => void;
+  selectedControlPoint: (type: string, id: string) => void;
 }
 
-export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
-
-    private _active: boolean;
-    private _isCurrentPointControl: string;
-    private _currentPointId: string;
-    private _draggableArea: React.RefObject<SVGSVGElement>;
-    private _panStart: Vector2;
-    private _panStop: Vector2;
-    private _width: number;
-
-    constructor(props: ISvgDraggableAreaProps) {
-        super(props);
-        this._currentPointId = "";
-        this._isCurrentPointControl = "";
-        this._draggableArea = React.createRef();
-        this._panStart = new Vector2(0, 0);
-        this._panStop = new Vector2(0, 0);
+export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps> {
+  private _active: boolean;
+  private _isCurrentPointControl: string;
+  private _currentPointId: string;
+  private _draggableArea: React.RefObject<SVGSVGElement>;
+  private _panStart: Vector2;
+  private _panStop: Vector2;
+  private _width: number;
+
+  constructor(props: ISvgDraggableAreaProps) {
+    super(props);
+    this._currentPointId = '';
+    this._isCurrentPointControl = '';
+    this._draggableArea = React.createRef();
+    this._panStart = new Vector2(0, 0);
+    this._panStop = new Vector2(0, 0);
+  }
+
+  componentDidMount() {
+    this._draggableArea.current?.addEventListener(
+      'keydown',
+      this.keyDown.bind(this)
+    );
+    this._draggableArea.current?.addEventListener(
+      'keyup',
+      this.keyUp.bind(this)
+    );
+    setTimeout(() => {
+      this._width =
+        this._draggableArea.current?.clientWidth !== undefined
+          ? this._draggableArea.current?.clientWidth
+          : 0;
+      console.log(this._width);
+    }, 500);
+  }
+
+  dragStart(e: React.TouchEvent<SVGSVGElement>): void;
+  dragStart(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
+  dragStart(e: any): void {
+    e.preventDefault();
+    if (e.target.classList.contains('draggable')) {
+      this._active = true;
+      this._currentPointId = e.target.getAttribute('data-id');
+
+      if (e.target.classList.contains('control-point')) {
+        this._isCurrentPointControl = e.target.getAttribute('type');
+      }
     }
 
-    componentDidMount() {
-        this._draggableArea.current?.addEventListener("keydown", this.keyDown.bind(this));
-        this._draggableArea.current?.addEventListener("keyup", this.keyUp.bind(this));
-        setTimeout(() => {
-            this._width = this._draggableArea.current?.clientWidth !== undefined ? this._draggableArea.current?.clientWidth : 0;
-            console.log(this._width);
-        }, 500);
+    if (e.target.classList.contains('pannable')) {
+      if (e.buttons === 1 && e.ctrlKey) {
+        this._panStart.set(e.clientX, e.clientY);
+      }
     }
-
-    dragStart(e: React.TouchEvent<SVGSVGElement>): void;
-    dragStart(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
-    dragStart(e: any): void {
-        e.preventDefault();
-        if (e.target.classList.contains("draggable")) {
-            this._active = true;
-            this._currentPointId = e.target.getAttribute('data-id');
-
-            if (e.target.classList.contains("control-point")) {
-                this._isCurrentPointControl = e.target.getAttribute("type");
-            }
-        }
-
-        if (e.target.classList.contains("pannable")) {
-            if (e.buttons === 1 && e.ctrlKey) {
-                this._panStart.set(e.clientX, e.clientY);
-            }
+  }
+
+  drag(e: React.TouchEvent<SVGSVGElement>): void;
+  drag(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
+  drag(e: any): void {
+    if (this._active) {
+      e.preventDefault();
+
+      var coord = this.getMousePosition(e);
+
+      if (coord !== undefined) {
+        var newPoints = [...this.props.keyframeSvgPoints];
+
+        let point = newPoints.find((kf) => kf.id === this._currentPointId);
+        if (point) {
+          // Check for NaN values here.
+          if (this._isCurrentPointControl === 'left') {
+            point.leftControlPoint = coord;
+          } else if (this._isCurrentPointControl === 'right') {
+            point.rightControlPoint = coord;
+          } else {
+            point.keyframePoint = coord;
+          }
+          this.props.updatePosition(point, this._currentPointId);
         }
+      }
     }
-
-    drag(e: React.TouchEvent<SVGSVGElement>): void;
-    drag(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
-    drag(e: any): void {
-        if (this._active) {
-
-            e.preventDefault();
-
-            var coord = this.getMousePosition(e);
-
-            if (coord !== undefined) {
-
-                var newPoints = [...this.props.keyframeSvgPoints];
-
-                let point = newPoints.find(kf => kf.id === this._currentPointId);
-                if (point) {
-                    // Check for NaN values here. 
-                    if (this._isCurrentPointControl === "left") {
-                        point.leftControlPoint = coord;
-                    } else if (this._isCurrentPointControl === "right") {
-                        point.rightControlPoint = coord;
-                    } else {
-                        point.keyframePoint = coord;
-                    }
-                    this.props.updatePosition(point, this._currentPointId);
-                }
-            }
-        }
+  }
+
+  dragEnd(e: React.TouchEvent<SVGSVGElement>): void;
+  dragEnd(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
+  dragEnd(e: any): void {
+    e.preventDefault();
+    this._active = false;
+    this._currentPointId = '';
+    this._isCurrentPointControl = '';
+
+    if (e.target.classList.contains('pannable')) {
+      if (this._panStart.x !== 0 && this._panStart.y !== 0) {
+        this._panStop.set(e.clientX, e.clientY);
+        this.panDirection();
+      }
     }
-
-    dragEnd(e: React.TouchEvent<SVGSVGElement>): void;
-    dragEnd(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
-    dragEnd(e: any): void {
-        e.preventDefault();
-        this._active = false;
-        this._currentPointId = "";
-        this._isCurrentPointControl = "";
-
-        if (e.target.classList.contains("pannable")) {
-            if (this._panStart.x !== 0 && this._panStart.y !== 0) {
-                this._panStop.set(e.clientX, e.clientY);
-                this.panDirection();
-            }
-        }
+  }
+
+  getMousePosition(e: React.TouchEvent<SVGSVGElement>): Vector2 | undefined;
+  getMousePosition(
+    e: React.MouseEvent<SVGSVGElement, MouseEvent>
+  ): Vector2 | undefined;
+  getMousePosition(e: any): Vector2 | undefined {
+    if (e.touches) {
+      e = e.touches[0];
     }
 
-    getMousePosition(e: React.TouchEvent<SVGSVGElement>): Vector2 | undefined;
-    getMousePosition(e: React.MouseEvent<SVGSVGElement, MouseEvent>): Vector2 | undefined;
-    getMousePosition(e: any): Vector2 | undefined {
-
-        if (e.touches) { e = e.touches[0]; }
-
-        if (this._draggableArea.current) {
-            var svg = this._draggableArea.current as SVGSVGElement;
-            var CTM = svg.getScreenCTM();
-            if (CTM) {
-                return new Vector2((e.clientX - CTM.e) / CTM.a, (e.clientY - CTM.f) / CTM.d);
-            } else {
-                return undefined;
-            }
-        } else {
-            return undefined;
-        }
+    if (this._draggableArea.current) {
+      var svg = this._draggableArea.current as SVGSVGElement;
+      var CTM = svg.getScreenCTM();
+      if (CTM) {
+        return new Vector2(
+          (e.clientX - CTM.e) / CTM.a,
+          (e.clientY - CTM.f) / CTM.d
+        );
+      } else {
+        return undefined;
+      }
+    } else {
+      return undefined;
     }
+  }
 
-    panDirection() {
-
-        // Movement Right to Left
-        if (this._panStart.x > this._panStop.x) {
-            console.log("right to left");
-            this.panTo("right", Math.abs(this._panStart.x - this._panStop.x));
-        }
-
-        // Movement Right to Left
-        if (this._panStart.x < this._panStop.x) {
-            this.panTo("left", Math.abs(this._panStart.x - this._panStop.x));
-            console.log("left to right");
-        }
-
-        // Movement Bottom to Up
-        if (this._panStart.y > this._panStop.y) {
-            console.log("down up");
-        }
-
-        // Movement Up to Bottom
-        if (this._panStart.y < this._panStop.y) {
-            console.log("up down");
-        }
-
-        this._panStart.set(0, 0);
-        this._panStop.set(0, 0);
+  panDirection() {
+    // Movement Right to Left
+    if (this._panStart.x > this._panStop.x) {
+      console.log('right to left');
+      this.panTo('right', Math.abs(this._panStart.x - this._panStop.x));
+    }
 
+    // Movement Right to Left
+    if (this._panStart.x < this._panStop.x) {
+      this.panTo('left', Math.abs(this._panStart.x - this._panStop.x));
+      console.log('left to right');
     }
 
-    panTo(direction: string, value: number) {
-
-        switch (direction) {
-            case "left":
-                (this._draggableArea.current?.parentElement as HTMLDivElement).scrollLeft -= (value * 1);
-                break;
-            case "right":
-                (this._draggableArea.current?.parentElement as HTMLDivElement).scrollLeft += (value * 1);
-                break;
-            case "top":
-                break;
-            case "down":
-                break;
-        }
+    // Movement Bottom to Up
+    if (this._panStart.y > this._panStop.y) {
+      console.log('down up');
     }
 
-    keyDown(e: KeyboardEvent) {
-        e.preventDefault();
-        if (e.keyCode === 17) {
-            this._draggableArea.current?.style.setProperty("cursor", "grab");
-        }
+    // Movement Up to Bottom
+    if (this._panStart.y < this._panStop.y) {
+      console.log('up down');
     }
 
-    keyUp(e: KeyboardEvent) {
-        e.preventDefault();
-        if (e.keyCode === 17) {
-            this._draggableArea.current?.style.setProperty("cursor", "initial");
-        }
+    this._panStart.set(0, 0);
+    this._panStop.set(0, 0);
+  }
+
+  panTo(direction: string, value: number) {
+    switch (direction) {
+      case 'left':
+        (this._draggableArea.current
+          ?.parentElement as HTMLDivElement).scrollLeft -= value * 1;
+        break;
+      case 'right':
+        (this._draggableArea.current
+          ?.parentElement as HTMLDivElement).scrollLeft += value * 1;
+        break;
+      case 'top':
+        break;
+      case 'down':
+        break;
     }
+  }
 
-    focus(e: React.MouseEvent<SVGSVGElement>) {
-        e.preventDefault();
-        this._draggableArea.current?.focus();
+  keyDown(e: KeyboardEvent) {
+    e.preventDefault();
+    if (e.keyCode === 17) {
+      this._draggableArea.current?.style.setProperty('cursor', 'grab');
     }
+  }
 
-    render() {
-        return (
-            <>
-                <svg className="linear pannable" ref={this._draggableArea} tabIndex={0}
-
-                    onMouseMove={(e) => this.drag(e)}
-                    onTouchMove={(e) => this.drag(e)}
-                    onTouchStart={(e) => this.dragStart(e)}
-                    onTouchEnd={(e) => this.dragEnd(e)}
-
-                    onMouseDown={(e) => this.dragStart(e)}
-                    onMouseUp={(e) => this.dragEnd(e)}
-                    onMouseLeave={(e) => this.dragEnd(e)}
-                    // Add way to add new keyframe
-                    onClick={(e) => this.focus(e)}
-
-                    viewBox={`0 0 ${Math.round(this.props.scale * 200)} ${Math.round(this.props.scale * 100)}`}>
-
-                    {this.props.children}
-                    {this.props.keyframeSvgPoints.map((keyframe, i) =>
-                        <KeyframeSvgPoint
-                            key={`${keyframe.id}_${i}`}
-                            id={keyframe.id}
-                            keyframePoint={keyframe.keyframePoint}
-                            leftControlPoint={keyframe.leftControlPoint}
-                            rightControlPoint={keyframe.rightControlPoint}
-                            isLeftActive={keyframe.isLeftActive}
-                            isRightActive={keyframe.isRightActive}
-                            selected={keyframe.selected}
-                            selectedControlPoint={(type: string, id: string) => this.props.selectedControlPoint(type, id)}
-                            selectKeyframe={(id: string) => this.props.selectKeyframe(id)} />
-                    )}
-                </svg>
-            </>)
+  keyUp(e: KeyboardEvent) {
+    e.preventDefault();
+    if (e.keyCode === 17) {
+      this._draggableArea.current?.style.setProperty('cursor', 'initial');
     }
+  }
+
+  focus(e: React.MouseEvent<SVGSVGElement>) {
+    e.preventDefault();
+    this._draggableArea.current?.focus();
+  }
+
+  render() {
+    return (
+      <>
+        <svg
+          className='linear pannable'
+          ref={this._draggableArea}
+          tabIndex={0}
+          onMouseMove={(e) => this.drag(e)}
+          onTouchMove={(e) => this.drag(e)}
+          onTouchStart={(e) => this.dragStart(e)}
+          onTouchEnd={(e) => this.dragEnd(e)}
+          onMouseDown={(e) => this.dragStart(e)}
+          onMouseUp={(e) => this.dragEnd(e)}
+          onMouseLeave={(e) => this.dragEnd(e)}
+          // Add way to add new keyframe
+          onClick={(e) => this.focus(e)}
+          viewBox={`0 0 ${Math.round(this.props.scale * 200)} ${Math.round(
+            this.props.scale * 100
+          )}`}
+        >
+          {this.props.children}
+          {this.props.keyframeSvgPoints.map((keyframe, i) => (
+            <KeyframeSvgPoint
+              key={`${keyframe.id}_${i}`}
+              id={keyframe.id}
+              keyframePoint={keyframe.keyframePoint}
+              leftControlPoint={keyframe.leftControlPoint}
+              rightControlPoint={keyframe.rightControlPoint}
+              isLeftActive={keyframe.isLeftActive}
+              isRightActive={keyframe.isRightActive}
+              selected={keyframe.selected}
+              selectedControlPoint={(type: string, id: string) =>
+                this.props.selectedControlPoint(type, id)
+              }
+              selectKeyframe={(id: string) => this.props.selectKeyframe(id)}
+            />
+          ))}
+        </svg>
+      </>
+    );
+  }
 }
-
-
-
-
-

inspector/src/components/actionTabs/tabs/propertyGrids/animations/targetedAnimationPropertyGridComponent.tsx

@@ -1,19 +1,19 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { Observable } from "babylonjs/Misc/observable";
-import { TargetedAnimation } from "babylonjs/Animations/animationGroup";
-import { Scene } from "babylonjs/scene";
+import { Observable } from 'babylonjs/Misc/observable';
+import { TargetedAnimation } from 'babylonjs/Animations/animationGroup';
+import { Scene } from 'babylonjs/scene';
 
-import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
-import { ButtonLineComponent } from "../../../lines/buttonLineComponent";
-import { LineContainerComponent } from "../../../lineContainerComponent";
-import { TextLineComponent } from "../../../lines/textLineComponent";
-import { LockObject } from "../lockObject";
-import { GlobalState } from "../../../../globalState";
-import { TextInputLineComponent } from "../../../lines/textInputLineComponent";
-import { PopupComponent } from "../animations/popupComponent";
-import { AnimationCurveEditorComponent } from "../animations/animationCurveEditorComponent";
-import { AnimationGroup } from "babylonjs/Animations/animationGroup";
+import { PropertyChangedEvent } from '../../../../propertyChangedEvent';
+import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
+import { LineContainerComponent } from '../../../lineContainerComponent';
+import { TextLineComponent } from '../../../lines/textLineComponent';
+import { LockObject } from '../lockObject';
+import { GlobalState } from '../../../../globalState';
+import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
+import { PopupComponent } from '../animations/popupComponent';
+import { AnimationCurveEditorComponent } from '../animations/animationCurveEditorComponent';
+import { AnimationGroup } from 'babylonjs/Animations/animationGroup';
 
 interface ITargetedAnimationGridComponentProps {
   globalState: GlobalState;
@@ -83,25 +83,25 @@ export class TargetedAnimationGridComponent extends React.Component<
     const targetedAnimation = this.props.targetedAnimation;
 
     return (
-      <div className="pane">
+      <div className='pane'>
         <LineContainerComponent
           globalState={this.props.globalState}
-          title="GENERAL"
+          title='GENERAL'
         >
           <TextLineComponent
-            label="Class"
+            label='Class'
             value={targetedAnimation.getClassName()}
           />
           <TextInputLineComponent
             lockObject={this.props.lockObject}
-            label="Name"
+            label='Name'
             target={targetedAnimation.animation}
-            propertyName="name"
+            propertyName='name'
             onPropertyChangedObservable={this.props.onPropertyChangedObservable}
           />
           {targetedAnimation.target.name && (
             <TextLineComponent
-              label="Target"
+              label='Target'
               value={targetedAnimation.target.name}
               onLink={() =>
                 this.props.globalState.onSelectionChangedObservable.notifyObservers(
@@ -111,13 +111,13 @@ export class TargetedAnimationGridComponent extends React.Component<
             />
           )}
           <ButtonLineComponent
-            label="Edit animation"
+            label='Edit animation'
             onClick={() => this.onOpenAnimationCurveEditor()}
           />
           {this._isCurveEditorOpen && (
             <PopupComponent
-              id="curve-editor"
-              title="Curve Animation Editor"
+              id='curve-editor'
+              title='Curve Animation Editor'
               size={{ width: 1024, height: 512 }}
               onOpen={(window: Window) => {}}
               onClose={(window: Window) =>
@@ -129,12 +129,13 @@ export class TargetedAnimationGridComponent extends React.Component<
                 entity={targetedAnimation as any}
                 playOrPause={() => this.playOrPause()}
                 lockObject={this.props.lockObject}
+                globalState={this.props.globalState}
                 close={(event) => this.onCloseAnimationCurveEditor(event.view)}
               />
             </PopupComponent>
           )}
           <ButtonLineComponent
-            label="Dispose"
+            label='Dispose'
             onClick={() => this.deleteAnimation()}
           />
         </LineContainerComponent>

inspector/src/components/actionTabs/tabs/propertyGrids/animations/timeline.tsx

@@ -226,25 +226,7 @@ export class Timeline extends React.Component<
                   y2='40'
                   style={{ stroke: '#12506b', strokeWidth: 6 }}
                 />
-                {this.props.keyframes &&
-                  this.props.keyframes.map((kf, i) => {
-                    return (
-                      <svg
-                        key={`kf_${i}`}
-                        style={{ cursor: 'pointer' }}
-                        tabIndex={i + 40}
-                      >
-                        <line
-                          id={`kf_${i.toString()}`}
-                          x1={kf.frame * 10}
-                          y1='0'
-                          x2={kf.frame * 10}
-                          y2='40'
-                          style={{ stroke: 'red', strokeWidth: 6 }}
-                        />
-                      </svg>
-                    );
-                  })}
+
                 {this._frames.map((frame, i) => {
                   return (
                     <svg key={`tl_${i}`}>
@@ -269,6 +251,26 @@ export class Timeline extends React.Component<
                     </svg>
                   );
                 })}
+
+                {this.props.keyframes &&
+                  this.props.keyframes.map((kf, i) => {
+                    return (
+                      <svg
+                        key={`kf_${i}`}
+                        style={{ cursor: 'pointer' }}
+                        tabIndex={i + 40}
+                      >
+                        <line
+                          id={`kf_${i.toString()}`}
+                          x1={kf.frame * 10}
+                          y1='0'
+                          x2={kf.frame * 10}
+                          y2='40'
+                          style={{ stroke: '#ffc017', strokeWidth: 1 }}
+                        />
+                      </svg>
+                    );
+                  })}
               </svg>
             </div>
 

loaders/src/glTF/2.0/Extensions/KHR_materials_transmission.ts

@@ -79,7 +79,9 @@ export class KHR_materials_transmission implements IGLTFLoaderExtension {
         if (extension.transmissionFactor !== undefined) {
             pbrMaterial.subSurface.refractionIntensity = extension.transmissionFactor;
         } else {
-            pbrMaterial.subSurface.refractionIntensity = 1.0;
+            pbrMaterial.subSurface.refractionIntensity = 0.0;
+            pbrMaterial.subSurface.isRefractionEnabled = false;
+            return Promise.resolve();
         }
 
         if (extension.transmissionTexture) {

materialsLibrary/readme.md

@@ -2,7 +2,7 @@
 
 To get a detailled tutorial, please read the [documentation](https://doc.babylonjs.com/how_to/how_to_create_a_material_for_materialslibrary)
 
-For every material, you can find a detailled documentation [here](http://doc.babylonjs.com/extensions) under **materials library** tag.
+For every material, you can find a detailled documentation [here](https://doc.babylonjs.com/extensions) under **materials library** tag.
 
 ## Using a material from the library
 

src/Actions/abstractActionManager.ts

@@ -7,7 +7,7 @@ import { Nullable } from "../types";
 /**
  * Abstract class used to decouple action Manager from scene and meshes.
  * Do not instantiate.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export abstract class AbstractActionManager implements IDisposable {
 

src/Actions/action.ts

@@ -67,7 +67,7 @@ export interface IAction {
 
 /**
  * The action to be carried out following a trigger
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions#available-actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions#available-actions
  */
 export class Action implements IAction {
     /**

src/Actions/actionManager.ts

@@ -18,107 +18,107 @@ import { Constants } from "../Engines/constants";
 /**
  * Action Manager manages all events to be triggered on a given mesh or the global scene.
  * A single scene can have many Action Managers to handle predefined actions on specific meshes.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class ActionManager extends AbstractActionManager {
     /**
      * Nothing
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly NothingTrigger = Constants.ACTION_NothingTrigger;
 
     /**
      * On pick
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnPickTrigger = Constants.ACTION_OnPickTrigger;
 
     /**
      * On left pick
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnLeftPickTrigger = Constants.ACTION_OnLeftPickTrigger;
 
     /**
      * On right pick
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnRightPickTrigger = Constants.ACTION_OnRightPickTrigger;
 
     /**
      * On center pick
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnCenterPickTrigger = Constants.ACTION_OnCenterPickTrigger;
 
     /**
      * On pick down
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnPickDownTrigger = Constants.ACTION_OnPickDownTrigger;
 
     /**
      * On double pick
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnDoublePickTrigger = Constants.ACTION_OnDoublePickTrigger;
 
     /**
      * On pick up
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnPickUpTrigger = Constants.ACTION_OnPickUpTrigger;
     /**
      * On pick out.
      * This trigger will only be raised if you also declared a OnPickDown
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnPickOutTrigger = Constants.ACTION_OnPickOutTrigger;
 
     /**
      * On long press
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnLongPressTrigger = Constants.ACTION_OnLongPressTrigger;
 
     /**
      * On pointer over
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnPointerOverTrigger = Constants.ACTION_OnPointerOverTrigger;
 
     /**
      * On pointer out
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnPointerOutTrigger = Constants.ACTION_OnPointerOutTrigger;
 
     /**
      * On every frame
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnEveryFrameTrigger = Constants.ACTION_OnEveryFrameTrigger;
     /**
      * On intersection enter
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnIntersectionEnterTrigger = Constants.ACTION_OnIntersectionEnterTrigger;
 
     /**
      * On intersection exit
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnIntersectionExitTrigger = Constants.ACTION_OnIntersectionExitTrigger;
 
     /**
      * On key down
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnKeyDownTrigger = Constants.ACTION_OnKeyDownTrigger;
 
     /**
      * On key up
-     * @see http://doc.babylonjs.com/how_to/how_to_use_actions#triggers
+     * @see https://doc.babylonjs.com/how_to/how_to_use_actions#triggers
      */
     public static readonly OnKeyUpTrigger = 15;
 

src/Actions/directActions.ts

@@ -9,7 +9,7 @@ declare type ActionEvent = import("./actionEvent").ActionEvent;
 
 /**
  * This defines an action responsible to toggle a boolean once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class SwitchBooleanAction extends Action {
     /**
@@ -66,7 +66,7 @@ export class SwitchBooleanAction extends Action {
 /**
  * This defines an action responsible to set a the state field of the target
  *  to a desired value once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class SetStateAction extends Action {
     /**
@@ -115,7 +115,7 @@ export class SetStateAction extends Action {
 /**
  * This defines an action responsible to set a property of the target
  *  to a desired value once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class SetValueAction extends Action {
     /**
@@ -184,7 +184,7 @@ export class SetValueAction extends Action {
 /**
  * This defines an action responsible to increment the target value
  *  to a desired value once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class IncrementValueAction extends Action {
     /**
@@ -256,7 +256,7 @@ export class IncrementValueAction extends Action {
 
 /**
  * This defines an action responsible to start an animation once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class PlayAnimationAction extends Action {
     /**
@@ -325,7 +325,7 @@ export class PlayAnimationAction extends Action {
 
 /**
  * This defines an action responsible to stop an animation once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class StopAnimationAction extends Action {
     private _target: any;
@@ -368,7 +368,7 @@ export class StopAnimationAction extends Action {
 
 /**
  * This defines an action responsible that does nothing once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class DoNothingAction extends Action {
     /**
@@ -401,7 +401,7 @@ export class DoNothingAction extends Action {
 
 /**
  * This defines an action responsible to trigger several actions once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class CombineAction extends Action {
     /**
@@ -459,7 +459,7 @@ export class CombineAction extends Action {
 
 /**
  * This defines an action responsible to run code (external event) once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class ExecuteCodeAction extends Action {
     /**
@@ -488,7 +488,7 @@ export class ExecuteCodeAction extends Action {
 
 /**
  * This defines an action responsible to set the parent property of the target once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class SetParentAction extends Action {
     private _parent: any;

src/Actions/interpolateValueAction.ts

@@ -11,7 +11,7 @@ import { _TypeStore } from '../Misc/typeStore';
 /**
  * This defines an action responsible to change the value of a property
  * by interpolating between its current value and the newly set one once triggered.
- * @see http://doc.babylonjs.com/how_to/how_to_use_actions
+ * @see https://doc.babylonjs.com/how_to/how_to_use_actions
  */
 export class InterpolateValueAction extends Action {
     /**

src/Animations/animatable.ts

@@ -235,7 +235,7 @@ export class Animatable {
 
     /**
      * Allows the animatable to blend with current running animations
-     * @see http://doc.babylonjs.com/babylon101/animations#animation-blending
+     * @see https://doc.babylonjs.com/babylon101/animations#animation-blending
      * @param blendingSpeed defines the blending speed to use
      */
     public enableBlending(blendingSpeed: number): void {
@@ -249,7 +249,7 @@ export class Animatable {
 
     /**
      * Disable animation blending
-     * @see http://doc.babylonjs.com/babylon101/animations#animation-blending
+     * @see https://doc.babylonjs.com/babylon101/animations#animation-blending
      */
     public disableBlending(): void {
         var runtimeAnimations = this._runtimeAnimations;

src/Animations/animationGroup.ts

@@ -209,7 +209,7 @@ export class AnimationGroup implements IDisposable {
     /**
      * Instantiates a new Animation Group.
      * This helps managing several animations at once.
-     * @see http://doc.babylonjs.com/how_to/group
+     * @see https://doc.babylonjs.com/how_to/group
      * @param name Defines the name of the group
      * @param scene Defines the scene the group belongs to
      */
@@ -480,7 +480,7 @@ export class AnimationGroup implements IDisposable {
      * Set animation weight for all animatables
      * @param weight defines the weight to use
      * @return the animationGroup
-     * @see http://doc.babylonjs.com/babylon101/animations#animation-weights
+     * @see https://doc.babylonjs.com/babylon101/animations#animation-weights
      */
     public setWeightForAllAnimatables(weight: number): AnimationGroup {
         for (var index = 0; index < this._animatables.length; index++) {
@@ -495,7 +495,7 @@ export class AnimationGroup implements IDisposable {
      * Synchronize and normalize all animatables with a source animatable
      * @param root defines the root animatable to synchronize with
      * @return the animationGroup
-     * @see http://doc.babylonjs.com/babylon101/animations#animation-weights
+     * @see https://doc.babylonjs.com/babylon101/animations#animation-weights
      */
     public syncAllAnimationsWith(root: Animatable): AnimationGroup {
         for (var index = 0; index < this._animatables.length; index++) {

src/Animations/easing.ts

@@ -3,7 +3,7 @@ import { BezierCurve } from "../Maths/math.path";
 /**
  * This represents the main contract an easing function should follow.
  * Easing functions are used throughout the animation system.
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export interface IEasingFunction {
     /**
@@ -19,7 +19,7 @@ export interface IEasingFunction {
 
 /**
  * Base class used for every default easing function.
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class EasingFunction implements IEasingFunction {
     /**
@@ -87,7 +87,7 @@ export class EasingFunction implements IEasingFunction {
 /**
  * Easing function with a circle shape (see link below).
  * @see https://easings.net/#easeInCirc
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class CircleEase extends EasingFunction implements IEasingFunction {
     /** @hidden */
@@ -100,7 +100,7 @@ export class CircleEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with a ease back shape (see link below).
  * @see https://easings.net/#easeInBack
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class BackEase extends EasingFunction implements IEasingFunction {
     /**
@@ -124,7 +124,7 @@ export class BackEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with a bouncing shape (see link below).
  * @see https://easings.net/#easeInBounce
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class BounceEase extends EasingFunction implements IEasingFunction {
     /**
@@ -167,7 +167,7 @@ export class BounceEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with a power of 3 shape (see link below).
  * @see https://easings.net/#easeInCubic
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class CubicEase extends EasingFunction implements IEasingFunction {
     /** @hidden */
@@ -179,7 +179,7 @@ export class CubicEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with an elastic shape (see link below).
  * @see https://easings.net/#easeInElastic
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class ElasticEase extends EasingFunction implements IEasingFunction {
     /**
@@ -214,7 +214,7 @@ export class ElasticEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with an exponential shape (see link below).
  * @see https://easings.net/#easeInExpo
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class ExponentialEase extends EasingFunction implements IEasingFunction {
     /**
@@ -241,7 +241,7 @@ export class ExponentialEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with a power shape (see link below).
  * @see https://easings.net/#easeInQuad
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class PowerEase extends EasingFunction implements IEasingFunction {
     /**
@@ -265,7 +265,7 @@ export class PowerEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with a power of 2 shape (see link below).
  * @see https://easings.net/#easeInQuad
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class QuadraticEase extends EasingFunction implements IEasingFunction {
     /** @hidden */
@@ -277,7 +277,7 @@ export class QuadraticEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with a power of 4 shape (see link below).
  * @see https://easings.net/#easeInQuart
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class QuarticEase extends EasingFunction implements IEasingFunction {
     /** @hidden */
@@ -289,7 +289,7 @@ export class QuarticEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with a power of 5 shape (see link below).
  * @see https://easings.net/#easeInQuint
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class QuinticEase extends EasingFunction implements IEasingFunction {
     /** @hidden */
@@ -301,7 +301,7 @@ export class QuinticEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with a sin shape (see link below).
  * @see https://easings.net/#easeInSine
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class SineEase extends EasingFunction implements IEasingFunction {
     /** @hidden */
@@ -313,7 +313,7 @@ export class SineEase extends EasingFunction implements IEasingFunction {
 /**
  * Easing function with a bezier shape (see link below).
  * @see http://cubic-bezier.com/#.17,.67,.83,.67
- * @see http://doc.babylonjs.com/babylon101/animations#easing-functions
+ * @see https://doc.babylonjs.com/babylon101/animations#easing-functions
  */
 export class BezierCurveEase extends EasingFunction implements IEasingFunction {
     /**

src/Audio/analyser.ts

@@ -5,7 +5,7 @@ import { Engine } from "../Engines/engine";
 
 /**
  * Class used to work with sound analyzer using fast fourier transform (FFT)
- * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music
+ * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music
  */
 export class Analyser {
     /**

src/Audio/audioEngine.ts

@@ -9,7 +9,7 @@ import { Engine } from "../Engines/engine";
 /**
  * This represents an audio engine and it is responsible
  * to play, synchronize and analyse sounds throughout the application.
- * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music
+ * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music
  */
 export interface IAudioEngine extends IDisposable {
     /**
@@ -91,7 +91,7 @@ export interface IAudioEngine extends IDisposable {
     /**
      * Connect the audio engine to an audio analyser allowing some amazing
      * synchornization between the sounds/music and your visualization (VuMeter for instance).
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#using-the-analyser
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#using-the-analyser
      * @param analyser The analyser to connect to the engine
      */
     connectToAnalyser(analyser: Analyser): void;
@@ -103,7 +103,7 @@ Engine.AudioEngineFactory = (hostElement: Nullable<HTMLElement>) => { return new
 /**
  * This represents the default audio engine used in babylon.
  * It is responsible to play, synchronize and analyse sounds throughout the  application.
- * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music
+ * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music
  */
 export class AudioEngine implements IAudioEngine {
     private _audioContext: Nullable<AudioContext> = null;
@@ -382,7 +382,7 @@ export class AudioEngine implements IAudioEngine {
     /**
      * Connect the audio engine to an audio analyser allowing some amazing
      * synchornization between the sounds/music and your visualization (VuMeter for instance).
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#using-the-analyser
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#using-the-analyser
      * @param analyser The analyser to connect to the engine
      */
     public connectToAnalyser(analyser: Analyser): void {

src/Audio/audioSceneComponent.ts

@@ -63,7 +63,7 @@ declare module "../scene" {
         mainSoundTrack: SoundTrack;
         /**
          * The list of sound tracks added to the scene
-         * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music
+         * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music
          */
         soundTracks: Nullable<Array<SoundTrack>>;
 
@@ -76,19 +76,19 @@ declare module "../scene" {
 
         /**
          * Gets or sets if audio support is enabled
-         * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music
+         * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music
          */
         audioEnabled: boolean;
 
         /**
          * Gets or sets if audio will be output to headphones
-         * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music
+         * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music
          */
         headphone: boolean;
 
         /**
          * Gets or sets custom audio listener position provider
-         * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music
+         * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music
          */
         audioListenerPositionProvider: Nullable<() => Vector3>;
 

src/Audio/sound.ts

@@ -39,17 +39,17 @@ export interface ISoundOptions {
     useCustomAttenuation?: boolean;
     /**
     * Define the roll off factor of spatial sounds.
-    * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+    * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
     */
     rolloffFactor?: number;
     /**
      * Define the reference distance the sound should be heard perfectly.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     refDistance?: number;
     /**
      * Define the distance attenuation model the sound will follow.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     distanceModel?: string;
     /**
@@ -77,7 +77,7 @@ export interface ISoundOptions {
 /**
  * Defines a sound that can be played in the application.
  * The sound can either be an ambient track or a simple sound played in reaction to a user action.
- * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music
+ * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music
  */
 export class Sound {
     /**
@@ -95,7 +95,7 @@ export class Sound {
     /**
      * Does the sound use a custom attenuation curve to simulate the falloff
      * happening when the source gets further away from the camera.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-your-own-custom-attenuation-function
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-your-own-custom-attenuation-function
      */
     public useCustomAttenuation: boolean = false;
     /**
@@ -112,27 +112,27 @@ export class Sound {
     public isPaused: boolean = false;
     /**
      * Does this sound enables spatial sound.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     public spatialSound: boolean = false;
     /**
      * Define the reference distance the sound should be heard perfectly.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     public refDistance: number = 1;
     /**
      * Define the roll off factor of spatial sounds.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     public rolloffFactor: number = 1;
     /**
      * Define the max distance the sound should be heard (intensity just became 0 at this point).
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     public maxDistance: number = 100;
     /**
      * Define the distance attenuation model the sound will follow.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     public distanceModel: string = "linear";
     /**
@@ -514,7 +514,7 @@ export class Sound {
     /**
      * Switch the panning model to HRTF:
      * Renders a stereo output of higher quality than equalpower — it uses a convolution with measured impulse responses from human subjects.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     public switchPanningModelToHRTF() {
         this._panningModel = "HRTF";
@@ -524,7 +524,7 @@ export class Sound {
     /**
      * Switch the panning model to Equal Power:
      * Represents the equal-power panning algorithm, generally regarded as simple and efficient. equalpower is the default value.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     public switchPanningModelToEqualPower() {
         this._panningModel = "equalpower";
@@ -667,7 +667,7 @@ export class Sound {
     /**
      * Sets a new custom attenuation function for the sound.
      * @param callback Defines the function used for the attenuation
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-your-own-custom-attenuation-function
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-your-own-custom-attenuation-function
      */
     public setAttenuationFunction(callback: (currentVolume: number, currentDistance: number, maxDistance: number, refDistance: number, rolloffFactor: number) => number): void {
         this._customAttenuationFunction = callback;
@@ -907,7 +907,7 @@ export class Sound {
     /**
      * Attach the sound to a dedicated mesh
      * @param transformNode The transform node to connect the sound with
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#attaching-a-sound-to-a-mesh
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#attaching-a-sound-to-a-mesh
      */
     public attachToMesh(transformNode: TransformNode): void {
         if (this._connectedTransformNode && this._registerFunc) {
@@ -930,7 +930,7 @@ export class Sound {
 
     /**
      * Detach the sound from the previously attached mesh
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#attaching-a-sound-to-a-mesh
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#attaching-a-sound-to-a-mesh
      */
     public detachFromMesh() {
         if (this._connectedTransformNode && this._registerFunc) {

src/Audio/soundTrack.ts

@@ -21,7 +21,7 @@ export interface ISoundTrackOptions {
 /**
  * It could be useful to isolate your music & sounds on several tracks to better manage volume on a grouped instance of sounds.
  * It will be also used in a future release to apply effects on a specific track.
- * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#using-sound-tracks
+ * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#using-sound-tracks
  */
 export class SoundTrack {
     /**
@@ -41,7 +41,7 @@ export class SoundTrack {
 
     /**
      * Creates a new sound track.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#using-sound-tracks
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#using-sound-tracks
      * @param scene Define the scene the sound track belongs to
      * @param options
      */
@@ -137,7 +137,7 @@ export class SoundTrack {
     /**
      * Switch the panning model to HRTF:
      * Renders a stereo output of higher quality than equalpower — it uses a convolution with measured impulse responses from human subjects.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     public switchPanningModelToHRTF(): void {
         if (Engine.audioEngine.canUseWebAudio) {
@@ -150,7 +150,7 @@ export class SoundTrack {
     /**
      * Switch the panning model to Equal Power:
      * Represents the equal-power panning algorithm, generally regarded as simple and efficient. equalpower is the default value.
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#creating-a-spatial-3d-sound
      */
     public switchPanningModelToEqualPower(): void {
         if (Engine.audioEngine.canUseWebAudio) {
@@ -163,7 +163,7 @@ export class SoundTrack {
     /**
      * Connect the sound track to an audio analyser allowing some amazing
      * synchornization between the sounds/music and your visualization (VuMeter for instance).
-     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music#using-the-analyser
+     * @see https://doc.babylonjs.com/how_to/playing_sounds_and_music#using-the-analyser
      * @param analyser The analyser to connect to the engine
      */
     public connectToAnalyser(analyser: Analyser): void {

src/Behaviors/Cameras/autoRotationBehavior.ts

@@ -8,7 +8,7 @@ import { PrecisionDate } from "../../Misc/precisionDate";
 
 /**
  * The autoRotation behavior (AutoRotationBehavior) is designed to create a smooth rotation of an ArcRotateCamera when there is no user interaction.
- * @see http://doc.babylonjs.com/how_to/camera_behaviors#autorotation-behavior
+ * @see https://doc.babylonjs.com/how_to/camera_behaviors#autorotation-behavior
  */
 export class AutoRotationBehavior implements Behavior<ArcRotateCamera> {
     /**

src/Behaviors/Cameras/bouncingBehavior.ts

@@ -10,7 +10,7 @@ import { Animation } from "../../Animations/animation";
 
 /**
  * Add a bouncing effect to an ArcRotateCamera when reaching a specified minimum and maximum radius
- * @see http://doc.babylonjs.com/how_to/camera_behaviors#bouncing-behavior
+ * @see https://doc.babylonjs.com/how_to/camera_behaviors#bouncing-behavior
  */
 export class BouncingBehavior implements Behavior<ArcRotateCamera> {
     /**

src/Behaviors/Cameras/framingBehavior.ts

@@ -13,7 +13,7 @@ import { Animation } from "../../Animations/animation";
 
 /**
  * The framing behavior (FramingBehavior) is designed to automatically position an ArcRotateCamera when its target is set to a mesh. It is also useful if you want to prevent the camera to go under a virtual horizontal plane.
- * @see http://doc.babylonjs.com/how_to/camera_behaviors#framing-behavior
+ * @see https://doc.babylonjs.com/how_to/camera_behaviors#framing-behavior
  */
 export class FramingBehavior implements Behavior<ArcRotateCamera> {
     /**

src/Bones/bone.ts

@@ -13,7 +13,7 @@ declare type AnimationPropertiesOverride = import("../Animations/animationProper
 
 /**
  * Class used to store bone information
- * @see http://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons
+ * @see https://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons
  */
 export class Bone extends Node {
 

src/Bones/boneIKController.ts

@@ -6,7 +6,7 @@ import { Space } from '../Maths/math.axis';
 
 /**
  * Class used to apply inverse kinematics to bones
- * @see http://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons#boneikcontroller
+ * @see https://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons#boneikcontroller
  */
 export class BoneIKController {
 

src/Bones/boneLookController.ts

@@ -7,7 +7,7 @@ import { Space, Axis } from '../Maths/math.axis';
 
 /**
  * Class used to make a bone look toward a point in space
- * @see http://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons#bonelookcontroller
+ * @see https://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons#bonelookcontroller
  */
 export class BoneLookController {
 

src/Bones/skeleton.ts

@@ -19,7 +19,7 @@ import { IAnimatable } from '../Animations/animatable.interface';
 
 /**
  * Class used to handle skinning animations
- * @see http://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons
+ * @see https://doc.babylonjs.com/how_to/how_to_use_bones_and_skeletons
  */
 export class Skeleton implements IAnimatable {
     /**
@@ -645,7 +645,7 @@ export class Skeleton implements IAnimatable {
     /**
      * Enable animation blending for this skeleton
      * @param blendingSpeed defines the blending speed to apply
-     * @see http://doc.babylonjs.com/babylon101/animations#animation-blending
+     * @see https://doc.babylonjs.com/babylon101/animations#animation-blending
      */
     public enableBlending(blendingSpeed = 0.01) {
         this.bones.forEach((bone) => {

src/Cameras/Inputs/arcRotateCameraGamepadInput.ts

@@ -6,7 +6,7 @@ import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManage
 import { Gamepad } from "../../Gamepads/gamepad";
 /**
  * Manage the gamepad inputs to control an arc rotate camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class ArcRotateCameraGamepadInput implements ICameraInput<ArcRotateCamera> {
     /**

src/Cameras/Inputs/arcRotateCameraKeyboardMoveInput.ts

@@ -9,7 +9,7 @@ import { KeyboardInfo, KeyboardEventTypes } from "../../Events/keyboardEvents";
 
 /**
  * Manage the keyboard inputs to control the movement of an arc rotate camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class ArcRotateCameraKeyboardMoveInput implements ICameraInput<ArcRotateCamera> {
     /**

src/Cameras/Inputs/arcRotateCameraMouseWheelInput.ts

@@ -8,7 +8,7 @@ import { Scalar } from '../../Maths/math.scalar';
 
 /**
  * Manage the mouse wheel inputs to control an arc rotate camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class ArcRotateCameraMouseWheelInput implements ICameraInput<ArcRotateCamera> {
     /**

src/Cameras/Inputs/arcRotateCameraPointersInput.ts

@@ -7,7 +7,7 @@ import { PointerTouch } from "../../Events/pointerEvents";
 
 /**
  * Manage the pointers inputs to control an arc rotate camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class ArcRotateCameraPointersInput extends BaseCameraPointersInput {
     /**

src/Cameras/Inputs/arcRotateCameraVRDeviceOrientationInput.ts

@@ -26,7 +26,7 @@ ArcRotateCameraInputsManager.prototype.addVRDeviceOrientation = function(): ArcR
 
 /**
  * Manage the device orientation inputs (gyroscope) to control an arc rotate camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class ArcRotateCameraVRDeviceOrientationInput implements ICameraInput<ArcRotateCamera> {
     /**

src/Cameras/Inputs/flyCameraKeyboardInput.ts

@@ -10,7 +10,7 @@ import { Vector3 } from "../../Maths/math.vector";
 
 /**
  * Listen to keyboard events to control the camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FlyCameraKeyboardInput implements ICameraInput<FlyCamera> {
     /**

src/Cameras/Inputs/flyCameraMouseInput.ts

@@ -9,7 +9,7 @@ import { Quaternion } from "../../Maths/math.vector";
 import { Axis } from '../../Maths/math.axis';
 /**
  * Listen to mouse events to control the camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
     /**
@@ -69,7 +69,7 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
     /**
      * Listen to mouse events to control the camera.
      * @param touchEnabled Define if touch is enabled. (Default is true.)
-     * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+     * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
      */
     constructor(touchEnabled = true) {
     }

src/Cameras/Inputs/followCameraKeyboardMoveInput.ts

@@ -9,7 +9,7 @@ import { Scene } from "../../scene";
 
 /**
  * Manage the keyboard inputs to control the movement of a follow camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FollowCameraKeyboardMoveInput implements ICameraInput<FollowCamera> {
     /**

src/Cameras/Inputs/followCameraMouseWheelInput.ts

@@ -7,7 +7,7 @@ import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
 
 /**
  * Manage the mouse wheel inputs to control a follow camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FollowCameraMouseWheelInput implements ICameraInput<FollowCamera> {
     /**

src/Cameras/Inputs/followCameraPointersInput.ts

@@ -7,7 +7,7 @@ import { PointerTouch } from "../../Events/pointerEvents";
 
 /**
  * Manage the pointers inputs to control an follow camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FollowCameraPointersInput extends BaseCameraPointersInput {
     /**

src/Cameras/Inputs/freeCameraDeviceOrientationInput.ts

@@ -37,7 +37,7 @@ FreeCameraInputsManager.prototype.addDeviceOrientation = function(): FreeCameraI
 /**
  * Takes information about the orientation of the device as reported by the deviceorientation event to orient the camera.
  * Screen rotation is taken into account.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera> {
     private _camera: FreeCamera;
@@ -99,7 +99,7 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
     public _onDeviceOrientationChangedObservable = new Observable<void>();
     /**
      * Instantiates a new input
-     * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+     * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
      */
     constructor() {
         this._constantTranform = new Quaternion(- Math.sqrt(0.5), 0, 0, Math.sqrt(0.5));

src/Cameras/Inputs/freeCameraGamepadInput.ts

@@ -8,7 +8,7 @@ import { Gamepad } from "../../Gamepads/gamepad";
 
 /**
  * Manage the gamepad inputs to control a free camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FreeCameraGamepadInput implements ICameraInput<FreeCamera> {
     /**

src/Cameras/Inputs/freeCameraKeyboardMoveInput.ts

@@ -9,7 +9,7 @@ import { Vector3 } from "../../Maths/math.vector";
 import { Engine } from "../../Engines/engine";
 /**
  * Manage the keyboard inputs to control the movement of a free camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FreeCameraKeyboardMoveInput implements ICameraInput<FreeCamera> {
     /**

src/Cameras/Inputs/freeCameraMouseInput.ts

@@ -6,7 +6,7 @@ import { FreeCamera } from "../../Cameras/freeCamera";
 import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
 /**
  * Manage the mouse inputs to control the movement of a free camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
     /**
@@ -42,7 +42,7 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
     public _allowCameraRotation = true;
     /**
      * Manage the mouse inputs to control the movement of a free camera.
-     * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+     * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
      * @param touchEnabled Defines if touch is enabled or not
      */
     constructor(

src/Cameras/Inputs/freeCameraTouchInput.ts

@@ -7,7 +7,7 @@ import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
 import { Matrix, Vector3 } from "../../Maths/math.vector";
 /**
  * Manage the touch inputs to control the movement of a free camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
     /**

src/Cameras/Inputs/freeCameraVirtualJoystickInput.ts

@@ -27,7 +27,7 @@ FreeCameraInputsManager.prototype.addVirtualJoystick = function(): FreeCameraInp
 
 /**
  * Manage the Virtual Joystick inputs to control the movement of a free camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FreeCameraVirtualJoystickInput implements ICameraInput<FreeCamera> {
     /**

src/Cameras/Stereoscopic/anaglyphArcRotateCamera.ts

@@ -13,7 +13,7 @@ Node.AddNodeConstructor("AnaglyphArcRotateCamera", (name, scene, options) => {
 
 /**
  * Camera used to simulate anaglyphic rendering (based on ArcRotateCamera)
- * @see http://doc.babylonjs.com/features/cameras#anaglyph-cameras
+ * @see https://doc.babylonjs.com/features/cameras#anaglyph-cameras
  */
 export class AnaglyphArcRotateCamera extends ArcRotateCamera {
 

src/Cameras/Stereoscopic/anaglyphFreeCamera.ts

@@ -13,7 +13,7 @@ Node.AddNodeConstructor("AnaglyphFreeCamera", (name, scene, options) => {
 
 /**
  * Camera used to simulate anaglyphic rendering (based on FreeCamera)
- * @see http://doc.babylonjs.com/features/cameras#anaglyph-cameras
+ * @see https://doc.babylonjs.com/features/cameras#anaglyph-cameras
  */
 export class AnaglyphFreeCamera extends FreeCamera {
     /**

src/Cameras/Stereoscopic/anaglyphGamepadCamera.ts

@@ -13,7 +13,7 @@ Node.AddNodeConstructor("AnaglyphGamepadCamera", (name, scene, options) => {
 
 /**
  * Camera used to simulate anaglyphic rendering (based on GamepadCamera)
- * @see http://doc.babylonjs.com/features/cameras#anaglyph-cameras
+ * @see https://doc.babylonjs.com/features/cameras#anaglyph-cameras
  */
 export class AnaglyphGamepadCamera extends GamepadCamera {
     /**

src/Cameras/Stereoscopic/anaglyphUniversalCamera.ts

@@ -13,7 +13,7 @@ Node.AddNodeConstructor("AnaglyphUniversalCamera", (name, scene, options) => {
 
 /**
  * Camera used to simulate anaglyphic rendering (based on UniversalCamera)
- * @see http://doc.babylonjs.com/features/cameras#anaglyph-cameras
+ * @see https://doc.babylonjs.com/features/cameras#anaglyph-cameras
  */
 export class AnaglyphUniversalCamera extends UniversalCamera {
     /**

src/Cameras/Stereoscopic/stereoscopicArcRotateCamera.ts

@@ -13,7 +13,7 @@ Node.AddNodeConstructor("StereoscopicArcRotateCamera", (name, scene, options) =>
 
 /**
  * Camera used to simulate stereoscopic rendering (based on ArcRotateCamera)
- * @see http://doc.babylonjs.com/features/cameras
+ * @see https://doc.babylonjs.com/features/cameras
  */
 export class StereoscopicArcRotateCamera extends ArcRotateCamera {
     /**

src/Cameras/Stereoscopic/stereoscopicFreeCamera.ts

@@ -13,7 +13,7 @@ Node.AddNodeConstructor("StereoscopicFreeCamera", (name, scene, options) => {
 
 /**
  * Camera used to simulate stereoscopic rendering (based on FreeCamera)
- * @see http://doc.babylonjs.com/features/cameras
+ * @see https://doc.babylonjs.com/features/cameras
  */
 export class StereoscopicFreeCamera extends FreeCamera {
     /**

src/Cameras/Stereoscopic/stereoscopicGamepadCamera.ts

@@ -13,7 +13,7 @@ Node.AddNodeConstructor("StereoscopicGamepadCamera", (name, scene, options) => {
 
 /**
  * Camera used to simulate stereoscopic rendering (based on GamepadCamera)
- * @see http://doc.babylonjs.com/features/cameras
+ * @see https://doc.babylonjs.com/features/cameras
  */
 export class StereoscopicGamepadCamera extends GamepadCamera {
     /**

src/Cameras/Stereoscopic/stereoscopicUniversalCamera.ts

@@ -12,7 +12,7 @@ Node.AddNodeConstructor("StereoscopicFreeCamera", (name, scene, options) => {
 });
 /**
  * Camera used to simulate stereoscopic rendering (based on UniversalCamera)
- * @see http://doc.babylonjs.com/features/cameras
+ * @see https://doc.babylonjs.com/features/cameras
  */
 export class StereoscopicUniversalCamera extends UniversalCamera {
     /**

src/Cameras/VR/vrCameraMetrics.ts

@@ -1,7 +1,7 @@
 import { Matrix } from "../../Maths/math.vector";
 /**
  * This represents all the required metrics to create a VR camera.
- * @see http://doc.babylonjs.com/babylon101/cameras#device-orientation-camera
+ * @see https://doc.babylonjs.com/babylon101/cameras#device-orientation-camera
  */
 export class VRCameraMetrics {
     /**

src/Cameras/VR/vrDeviceOrientationArcRotateCamera.ts

@@ -16,7 +16,7 @@ Node.AddNodeConstructor("VRDeviceOrientationFreeCamera", (name, scene) => {
 
 /**
  * Camera used to simulate VR rendering (based on ArcRotateCamera)
- * @see http://doc.babylonjs.com/babylon101/cameras#vr-device-orientation-cameras
+ * @see https://doc.babylonjs.com/babylon101/cameras#vr-device-orientation-cameras
  */
 export class VRDeviceOrientationArcRotateCamera extends ArcRotateCamera {
 

src/Cameras/VR/vrDeviceOrientationFreeCamera.ts

@@ -14,7 +14,7 @@ Node.AddNodeConstructor("VRDeviceOrientationFreeCamera", (name, scene) => {
 
 /**
  * Camera used to simulate VR rendering (based on FreeCamera)
- * @see http://doc.babylonjs.com/babylon101/cameras#vr-device-orientation-cameras
+ * @see https://doc.babylonjs.com/babylon101/cameras#vr-device-orientation-cameras
  */
 export class VRDeviceOrientationFreeCamera extends DeviceOrientationCamera {
 

src/Cameras/VR/vrDeviceOrientationGamepadCamera.ts

@@ -12,7 +12,7 @@ Node.AddNodeConstructor("VRDeviceOrientationGamepadCamera", (name, scene) => {
 
 /**
  * Camera used to simulate VR rendering (based on VRDeviceOrientationFreeCamera)
- * @see http://doc.babylonjs.com/babylon101/cameras#vr-device-orientation-cameras
+ * @see https://doc.babylonjs.com/babylon101/cameras#vr-device-orientation-cameras
  */
 export class VRDeviceOrientationGamepadCamera extends VRDeviceOrientationFreeCamera {
 

src/Cameras/VR/vrExperienceHelper.ts

@@ -322,7 +322,7 @@ export class OnAfterEnteringVRObservableEvent {
 
 /**
  * Helps to quickly add VR support to an existing scene.
- * See http://doc.babylonjs.com/how_to/webvr_helper
+ * See https://doc.babylonjs.com/how_to/webvr_helper
  */
 export class VRExperienceHelper {
     private _scene: Scene;
@@ -516,7 +516,7 @@ export class VRExperienceHelper {
     /**
      * The mesh used to display where the user is selecting, this mesh will be cloned and set as the gazeTracker for the left and right controller
      * when set bakeCurrentTransformIntoVertices will be called on the mesh.
-     * See http://doc.babylonjs.com/resources/baking_transformations
+     * See https://doc.babylonjs.com/resources/baking_transformations
      */
     public get gazeTrackerMesh(): Mesh {
         return this._cameraGazer._gazeTracker;

src/Cameras/VR/webVRCamera.ts

@@ -154,7 +154,7 @@ export interface WebVROptions {
 /**
  * This represents a WebVR camera.
  * The WebVR camera is Babylon's simple interface to interaction with Windows Mixed Reality, HTC Vive and Oculus Rift.
- * @example http://doc.babylonjs.com/how_to/webvr_camera
+ * @example https://doc.babylonjs.com/how_to/webvr_camera
  */
 export class WebVRFreeCamera extends FreeCamera implements PoseControlled {
     /**

src/Cameras/arcRotateCamera.ts

@@ -28,7 +28,7 @@ Node.AddNodeConstructor("ArcRotateCamera", (name, scene) => {
  *
  * This camera always points towards a given target position and can be rotated around that target with the target as the centre of rotation. It can be controlled with cursors and mouse, or with touch events.
  * Think of this camera as one orbiting its target position, or more imaginatively as a spy satellite orbiting the earth. Its position relative to the target (earth) can be set by three parameters, alpha (radians) the longitudinal rotation, beta (radians) the latitudinal rotation and radius the distance from the target position.
- * @see http://doc.babylonjs.com/babylon101/cameras#arc-rotate-camera
+ * @see https://doc.babylonjs.com/babylon101/cameras#arc-rotate-camera
  */
 export class ArcRotateCamera extends TargetCamera {
     /**
@@ -509,7 +509,7 @@ export class ArcRotateCamera extends TargetCamera {
 
     /**
      * Gets the bouncing behavior of the camera if it has been enabled.
-     * @see http://doc.babylonjs.com/how_to/camera_behaviors#bouncing-behavior
+     * @see https://doc.babylonjs.com/how_to/camera_behaviors#bouncing-behavior
      */
     public get bouncingBehavior(): Nullable<BouncingBehavior> {
         return this._bouncingBehavior;
@@ -517,7 +517,7 @@ export class ArcRotateCamera extends TargetCamera {
 
     /**
      * Defines if the bouncing behavior of the camera is enabled on the camera.
-     * @see http://doc.babylonjs.com/how_to/camera_behaviors#bouncing-behavior
+     * @see https://doc.babylonjs.com/how_to/camera_behaviors#bouncing-behavior
      */
     public get useBouncingBehavior(): boolean {
         return this._bouncingBehavior != null;
@@ -541,7 +541,7 @@ export class ArcRotateCamera extends TargetCamera {
 
     /**
      * Gets the framing behavior of the camera if it has been enabled.
-     * @see http://doc.babylonjs.com/how_to/camera_behaviors#framing-behavior
+     * @see https://doc.babylonjs.com/how_to/camera_behaviors#framing-behavior
      */
     public get framingBehavior(): Nullable<FramingBehavior> {
         return this._framingBehavior;
@@ -549,7 +549,7 @@ export class ArcRotateCamera extends TargetCamera {
 
     /**
      * Defines if the framing behavior of the camera is enabled on the camera.
-     * @see http://doc.babylonjs.com/how_to/camera_behaviors#framing-behavior
+     * @see https://doc.babylonjs.com/how_to/camera_behaviors#framing-behavior
      */
     public get useFramingBehavior(): boolean {
         return this._framingBehavior != null;
@@ -573,7 +573,7 @@ export class ArcRotateCamera extends TargetCamera {
 
     /**
      * Gets the auto rotation behavior of the camera if it has been enabled.
-     * @see http://doc.babylonjs.com/how_to/camera_behaviors#autorotation-behavior
+     * @see https://doc.babylonjs.com/how_to/camera_behaviors#autorotation-behavior
      */
     public get autoRotationBehavior(): Nullable<AutoRotationBehavior> {
         return this._autoRotationBehavior;
@@ -581,7 +581,7 @@ export class ArcRotateCamera extends TargetCamera {
 
     /**
      * Defines if the auto rotation behavior of the camera is enabled on the camera.
-     * @see http://doc.babylonjs.com/how_to/camera_behaviors#autorotation-behavior
+     * @see https://doc.babylonjs.com/how_to/camera_behaviors#autorotation-behavior
      */
     public get useAutoRotationBehavior(): boolean {
         return this._autoRotationBehavior != null;
@@ -613,14 +613,14 @@ export class ArcRotateCamera extends TargetCamera {
 
     /**
      * Defines whether the camera should check collision with the objects oh the scene.
-     * @see http://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity#how-can-i-do-this
+     * @see https://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity#how-can-i-do-this
      */
     public checkCollisions = false;
 
     /**
      * Defines the collision radius of the camera.
      * This simulates a sphere around the camera.
-     * @see http://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity#arcrotatecamera
+     * @see https://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity#arcrotatecamera
      */
     public collisionRadius = new Vector3(0.5, 0.5, 0.5);
 

src/Cameras/arcRotateCameraInputsManager.ts

@@ -7,7 +7,7 @@ import { CameraInputsManager } from "../Cameras/cameraInputsManager";
 /**
  * Default Inputs manager for the ArcRotateCamera.
  * It groups all the default supported inputs for ease of use.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class ArcRotateCameraInputsManager extends CameraInputsManager<ArcRotateCamera> {
     /**

src/Cameras/camera.ts

@@ -25,7 +25,7 @@ declare type Ray = import("../Culling/ray").Ray;
 
 /**
  * This is the base class of all the camera used in the application.
- * @see http://doc.babylonjs.com/features/cameras
+ * @see https://doc.babylonjs.com/features/cameras
  */
 export class Camera extends Node {
     /** @hidden */
@@ -311,7 +311,7 @@ export class Camera extends Node {
     /**
      * Instantiates a new camera object.
      * This should not be used directly but through the inherited cameras: ArcRotate, Free...
-     * @see http://doc.babylonjs.com/features/cameras
+     * @see https://doc.babylonjs.com/features/cameras
      * @param name Defines the name of the camera in the scene
      * @param position Defines the position of the camera
      * @param scene Defines the scene the camera belongs too
@@ -598,7 +598,7 @@ export class Camera extends Node {
 
     /**
      * Attach a post process to the camera.
-     * @see http://doc.babylonjs.com/how_to/how_to_use_postprocesses#attach-postprocess
+     * @see https://doc.babylonjs.com/how_to/how_to_use_postprocesses#attach-postprocess
      * @param postProcess The post process to attach to the camera
      * @param insertAt The position of the post process in case several of them are in use in the scene
      * @returns the position the post process has been inserted at
@@ -622,7 +622,7 @@ export class Camera extends Node {
 
     /**
      * Detach a post process to the camera.
-     * @see http://doc.babylonjs.com/how_to/how_to_use_postprocesses#attach-postprocess
+     * @see https://doc.babylonjs.com/how_to/how_to_use_postprocesses#attach-postprocess
      * @param postProcess The post process to detach from the camera
      */
     public detachPostProcess(postProcess: PostProcess): void {

src/Cameras/cameraInputsManager.ts

@@ -63,7 +63,7 @@ export interface CameraInputsMap<TCamera extends Camera> {
 /**
  * This represents the input manager used within a camera.
  * It helps dealing with all the different kind of input attached to a camera.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class CameraInputsManager<TCamera extends Camera> {
     /**
@@ -105,7 +105,7 @@ export class CameraInputsManager<TCamera extends Camera> {
 
     /**
      * Add an input method to a camera
-     * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+     * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
      * @param input camera input method
      */
     public add(input: ICameraInput<TCamera>): void {

src/Cameras/flyCamera.ts

@@ -19,7 +19,7 @@ export class FlyCamera extends TargetCamera {
     /**
      * Define the collision ellipsoid of the camera.
      * This is helpful for simulating a camera body, like a player's body.
-     * @see http://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity#arcrotatecamera
+     * @see https://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity#arcrotatecamera
      */
     @serializeAsVector3()
     public ellipsoid = new Vector3(1, 1, 1);

src/Cameras/flyCameraInputsManager.ts

@@ -6,7 +6,7 @@ import { FlyCameraKeyboardInput } from "../Cameras/Inputs/flyCameraKeyboardInput
 /**
  * Default Inputs manager for the FlyCamera.
  * It groups all the default supported inputs for ease of use.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FlyCameraInputsManager extends CameraInputsManager<FlyCamera> {
     /**

src/Cameras/followCamera.ts

@@ -18,7 +18,7 @@ Node.AddNodeConstructor("ArcFollowCamera", (name, scene) => {
 /**
  * A follow camera takes a mesh as a target and follows it as it moves. Both a free camera version followCamera and
  * an arc rotate version arcFollowCamera are available.
- * @see http://doc.babylonjs.com/features/cameras#follow-camera
+ * @see https://doc.babylonjs.com/features/cameras#follow-camera
  */
 export class FollowCamera extends TargetCamera {
     /**
@@ -109,7 +109,7 @@ export class FollowCamera extends TargetCamera {
 
     /**
      * Instantiates the follow camera.
-     * @see http://doc.babylonjs.com/features/cameras#follow-camera
+     * @see https://doc.babylonjs.com/features/cameras#follow-camera
      * @param name Define the name of the camera in the scene
      * @param position Define the position of the camera
      * @param scene Define the scene the camera belong to
@@ -240,7 +240,7 @@ export class FollowCamera extends TargetCamera {
 /**
  * Arc Rotate version of the follow camera.
  * It still follows a Defined mesh but in an Arc Rotate Camera fashion.
- * @see http://doc.babylonjs.com/features/cameras#follow-camera
+ * @see https://doc.babylonjs.com/features/cameras#follow-camera
  */
 export class ArcFollowCamera extends TargetCamera {
 
@@ -248,7 +248,7 @@ export class ArcFollowCamera extends TargetCamera {
 
     /**
      * Instantiates a new ArcFollowCamera
-     * @see http://doc.babylonjs.com/features/cameras#follow-camera
+     * @see https://doc.babylonjs.com/features/cameras#follow-camera
      * @param name Define the name of the camera
      * @param alpha Define the rotation angle of the camera around the logitudinal axis
      * @param beta Define the rotation angle of the camera around the elevation axis

src/Cameras/followCameraInputsManager.ts

@@ -7,7 +7,7 @@ import { FollowCameraPointersInput } from './Inputs/followCameraPointersInput';
 /**
  * Default Inputs manager for the FollowCamera.
  * It groups all the default supported inputs for ease of use.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FollowCameraInputsManager extends CameraInputsManager<FollowCamera> {
     /**

src/Cameras/freeCamera.ts

@@ -14,13 +14,13 @@ declare type Collider = import("../Collisions/collider").Collider;
 /**
  * This represents a free type of camera. It can be useful in First Person Shooter game for instance.
  * Please consider using the new UniversalCamera instead as it adds more functionality like the gamepad.
- * @see http://doc.babylonjs.com/features/cameras#universal-camera
+ * @see https://doc.babylonjs.com/features/cameras#universal-camera
  */
 export class FreeCamera extends TargetCamera {
     /**
      * Define the collision ellipsoid of the camera.
      * This is helpful to simulate a camera body like the player body around the camera
-     * @see http://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity#arcrotatecamera
+     * @see https://doc.babylonjs.com/babylon101/cameras,_mesh_collisions_and_gravity#arcrotatecamera
      */
     @serializeAsVector3()
     public ellipsoid = new Vector3(0.5, 1, 0.5);
@@ -208,7 +208,7 @@ export class FreeCamera extends TargetCamera {
      * Instantiates a Free Camera.
      * This represents a free type of camera. It can be useful in First Person Shooter game for instance.
      * Please consider using the new UniversalCamera instead as it adds more functionality like touch to this camera.
-     * @see http://doc.babylonjs.com/features/cameras#universal-camera
+     * @see https://doc.babylonjs.com/features/cameras#universal-camera
      * @param name Define the name of the camera in the scene
      * @param position Define the start position of the camera in the scene
      * @param scene Define the scene the camera belongs to

src/Cameras/freeCameraInputsManager.ts

@@ -8,7 +8,7 @@ import { Nullable } from '../types';
 /**
  * Default Inputs manager for the FreeCamera.
  * It groups all the default supported inputs for ease of use.
- * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
  */
 export class FreeCameraInputsManager extends CameraInputsManager<FreeCamera> {
     /**

src/Cameras/gamepadCamera.ts

@@ -9,14 +9,14 @@ Node.AddNodeConstructor("GamepadCamera", (name, scene) => {
 /**
  * This represents a FPS type of camera. This is only here for back compat purpose.
  * Please use the UniversalCamera instead as both are identical.
- * @see http://doc.babylonjs.com/features/cameras#universal-camera
+ * @see https://doc.babylonjs.com/features/cameras#universal-camera
  */
 export class GamepadCamera extends UniversalCamera {
     /**
      * Instantiates a new Gamepad Camera
      * This represents a FPS type of camera. This is only here for back compat purpose.
      * Please use the UniversalCamera instead as both are identical.
-     * @see http://doc.babylonjs.com/features/cameras#universal-camera
+     * @see https://doc.babylonjs.com/features/cameras#universal-camera
      * @param name Define the name of the camera in the scene
      * @param position Define the start position of the camera in the scene
      * @param scene Define the scene the camera belongs to

src/Cameras/targetCamera.ts

@@ -8,7 +8,7 @@ import { Axis } from '../Maths/math.axis';
 /**
  * A target camera takes a mesh or position as a target and continues to look at it while it moves.
  * This is the base of the follow, arc rotate cameras and Free camera
- * @see http://doc.babylonjs.com/features/cameras
+ * @see https://doc.babylonjs.com/features/cameras
  */
 export class TargetCamera extends Camera {
     private static _RigCamTransformMatrix = new Matrix();
@@ -102,7 +102,7 @@ export class TargetCamera extends Camera {
     /**
      * Instantiates a target camera that takes a mesh or position as a target and continues to look at it while it moves.
      * This is the base of the follow, arc rotate cameras and Free camera
-     * @see http://doc.babylonjs.com/features/cameras
+     * @see https://doc.babylonjs.com/features/cameras
      * @param name Defines the name of the camera in the scene
      * @param position Defines the start position of the camera in the scene
      * @param scene Defines the scene the camera belongs to

src/Cameras/touchCamera.ts

@@ -12,7 +12,7 @@ Node.AddNodeConstructor("TouchCamera", (name, scene) => {
 /**
  * This represents a FPS type of camera controlled by touch.
  * This is like a universal camera minus the Gamepad controls.
- * @see http://doc.babylonjs.com/features/cameras#universal-camera
+ * @see https://doc.babylonjs.com/features/cameras#universal-camera
  */
 export class TouchCamera extends FreeCamera {
     /**
@@ -59,7 +59,7 @@ export class TouchCamera extends FreeCamera {
      * Instantiates a new touch camera.
      * This represents a FPS type of camera controlled by touch.
      * This is like a universal camera minus the Gamepad controls.
-     * @see http://doc.babylonjs.com/features/cameras#universal-camera
+     * @see https://doc.babylonjs.com/features/cameras#universal-camera
      * @param name Define the name of the camera in the scene
      * @param position Define the start position of the camera in the scene
      * @param scene Define the scene the camera belongs to

src/Cameras/universalCamera.ts

@@ -15,7 +15,7 @@ Node.AddNodeConstructor("FreeCamera", (name, scene) => {
 /**
  * The Universal Camera is the one to choose for first person shooter type games, and works with all the keyboard, mouse, touch and gamepads. This replaces the earlier Free Camera,
  * which still works and will still be found in many Playgrounds.
- * @see http://doc.babylonjs.com/features/cameras#universal-camera
+ * @see https://doc.babylonjs.com/features/cameras#universal-camera
  */
 export class UniversalCamera extends TouchCamera {
     /**
@@ -61,7 +61,7 @@ export class UniversalCamera extends TouchCamera {
     /**
      * The Universal Camera is the one to choose for first person shooter type games, and works with all the keyboard, mouse, touch and gamepads. This replaces the earlier Free Camera,
      * which still works and will still be found in many Playgrounds.
-     * @see http://doc.babylonjs.com/features/cameras#universal-camera
+     * @see https://doc.babylonjs.com/features/cameras#universal-camera
      * @param name Define the name of the camera in the scene
      * @param position Define the start position of the camera in the scene
      * @param scene Define the scene the camera belongs to

src/Cameras/virtualJoysticksCamera.ts

@@ -13,7 +13,7 @@ Node.AddNodeConstructor("VirtualJoysticksCamera", (name, scene) => {
  * This represents a free type of camera. It can be useful in First Person Shooter game for instance.
  * It is identical to the Free Camera and simply adds by default a virtual joystick.
  * Virtual Joysticks are on-screen 2D graphics that are used to control the camera or other scene items.
- * @see http://doc.babylonjs.com/features/cameras#virtual-joysticks-camera
+ * @see https://doc.babylonjs.com/features/cameras#virtual-joysticks-camera
  */
 export class VirtualJoysticksCamera extends FreeCamera {
 
@@ -21,7 +21,7 @@ export class VirtualJoysticksCamera extends FreeCamera {
      * Intantiates a VirtualJoysticksCamera. It can be useful in First Person Shooter game for instance.
      * It is identical to the Free Camera and simply adds by default a virtual joystick.
      * Virtual Joysticks are on-screen 2D graphics that are used to control the camera or other scene items.
-     * @see http://doc.babylonjs.com/features/cameras#virtual-joysticks-camera
+     * @see https://doc.babylonjs.com/features/cameras#virtual-joysticks-camera
      * @param name Define the name of the camera in the scene
      * @param position Define the start position of the camera in the scene
      * @param scene Define the scene the camera belongs to

src/Culling/Octrees/octreeBlock.ts

@@ -16,7 +16,7 @@ export interface IOctreeContainer<T> {
 
 /**
  * Class used to store a cell in an octree
- * @see http://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
+ * @see https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
  */
 export class OctreeBlock<T> {
     /**

src/Culling/Octrees/octreeSceneComponent.ts

@@ -20,13 +20,13 @@ declare module "../../scene" {
 
         /**
          * Gets the octree used to boost mesh selection (picking)
-         * @see http://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
+         * @see https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
          */
         selectionOctree: Octree<AbstractMesh>;
 
         /**
          * Creates or updates the octree used to boost selection (picking)
-         * @see http://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
+         * @see https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
          * @param maxCapacity defines the maximum capacity per leaf
          * @param maxDepth defines the maximum depth of the octree
          * @returns an octree of AbstractMesh
@@ -77,7 +77,7 @@ declare module "../../Meshes/abstractMesh" {
          * @param maxDepth defines the maximum depth to use (no more than 2 levels by default)
          * @returns the new octree
          * @see https://www.babylonjs-playground.com/#NA4OQ#12
-         * @see http://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
+         * @see https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
          */
         createOrUpdateSubmeshesOctree(maxCapacity?: number, maxDepth?: number): Octree<SubMesh>;
     }
@@ -90,7 +90,7 @@ declare module "../../Meshes/abstractMesh" {
  * @param maxDepth defines the maximum depth to use (no more than 2 levels by default)
  * @returns the new octree
  * @see https://www.babylonjs-playground.com/#NA4OQ#12
- * @see http://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
+ * @see https://doc.babylonjs.com/how_to/optimizing_your_scene_with_octrees
  */
 AbstractMesh.prototype.createOrUpdateSubmeshesOctree = function(maxCapacity = 64, maxDepth = 2): Octree<SubMesh> {
     const scene = this.getScene();

src/Debug/debugLayer.ts

@@ -96,7 +96,7 @@ declare module "../scene" {
 
         /**
          * Gets the debug layer (aka Inspector) associated with the scene
-         * @see http://doc.babylonjs.com/features/playground_debuglayer
+         * @see https://doc.babylonjs.com/features/playground_debuglayer
          */
         debugLayer: DebugLayer;
     }
@@ -141,7 +141,7 @@ export enum DebugLayerTab {
 /**
  * The debug layer (aka Inspector) is the go to tool in order to better understand
  * what is happening in your scene
- * @see http://doc.babylonjs.com/features/playground_debuglayer
+ * @see https://doc.babylonjs.com/features/playground_debuglayer
  */
 export class DebugLayer {
     /**
@@ -175,7 +175,7 @@ export class DebugLayer {
      * Instantiates a new debug layer.
      * The debug layer (aka Inspector) is the go to tool in order to better understand
      * what is happening in your scene
-     * @see http://doc.babylonjs.com/features/playground_debuglayer
+     * @see https://doc.babylonjs.com/features/playground_debuglayer
      * @param scene Defines the scene to inspect
      */
     constructor(scene: Scene) {

src/Debug/rayHelper.ts

@@ -12,7 +12,7 @@ import "../Meshes/Builders/linesBuilder";
 /**
  * As raycast might be hard to debug, the RayHelper can help rendering the different rays
  * in order to better appreciate the issue one might have.
- * @see http://doc.babylonjs.com/babylon101/raycasts#debugging
+ * @see https://doc.babylonjs.com/babylon101/raycasts#debugging
  */
 export class RayHelper {
 
@@ -50,7 +50,7 @@ export class RayHelper {
      * Instantiate a new ray helper.
      * As raycast might be hard to debug, the RayHelper can help rendering the different rays
      * in order to better appreciate the issue one might have.
-     * @see http://doc.babylonjs.com/babylon101/raycasts#debugging
+     * @see https://doc.babylonjs.com/babylon101/raycasts#debugging
      * @param ray Defines the ray we are currently tryin to visualize
      */
     constructor(ray: Ray) {

src/Engines/Extensions/engine.alpha.ts

@@ -16,13 +16,13 @@ declare module "../../Engines/thinEngine" {
          * Sets the current alpha mode
          * @param mode defines the mode to use (one of the Engine.ALPHA_XXX)
          * @param noDepthWriteChange defines if depth writing state should remains unchanged (false by default)
-         * @see http://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered
+         * @see https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered
          */
         setAlphaMode(mode: number, noDepthWriteChange?: boolean): void;
 
         /**
          * Gets the current alpha mode
-         * @see http://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered
+         * @see https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered
          * @returns the current alpha mode
          */
         getAlphaMode(): number;

src/Engines/Extensions/engine.multiRender.ts

@@ -18,7 +18,7 @@ declare module "../../Engines/thinEngine" {
 
         /**
          * Create a multi render target texture
-         * @see http://doc.babylonjs.com/features/webgl2#multiple-render-target
+         * @see https://doc.babylonjs.com/features/webgl2#multiple-render-target
          * @param size defines the size of the texture
          * @param options defines the creation options
          * @returns the cube texture as an InternalTexture
@@ -27,7 +27,7 @@ declare module "../../Engines/thinEngine" {
 
         /**
          * Update the sample count for a given multiple render target texture
-         * @see http://doc.babylonjs.com/features/webgl2#multisample-render-targets
+         * @see https://doc.babylonjs.com/features/webgl2#multisample-render-targets
          * @param textures defines the textures to update
          * @param samples defines the sample count to set
          * @returns the effective sample count (could be 0 if multisample render targets are not supported)

src/Engines/Extensions/engine.occlusionQuery.ts

@@ -58,13 +58,13 @@ declare module "../../Engines/engine" {
          * @param algorithmType defines the algorithm to use
          * @param query defines the query to use
          * @returns the current engine
-         * @see http://doc.babylonjs.com/features/occlusionquery
+         * @see https://doc.babylonjs.com/features/occlusionquery
          */
         beginOcclusionQuery(algorithmType: number, query: WebGLQuery): Engine;
 
         /**
          * Ends an occlusion query
-         * @see http://doc.babylonjs.com/features/occlusionquery
+         * @see https://doc.babylonjs.com/features/occlusionquery
          * @param algorithmType defines the algorithm to use
          * @returns the current engine
          */
@@ -292,7 +292,7 @@ declare module "../../Meshes/abstractMesh" {
         /**
         * This number indicates the number of allowed retries before stop the occlusion query, this is useful if the occlusion query is taking long time before to the query result is retireved, the query result indicates if the object is visible within the scene or not and based on that Babylon.Js engine decideds to show or hide the object.
         * The default value is -1 which means don't break the query and wait till the result
-        * @see http://doc.babylonjs.com/features/occlusionquery
+        * @see https://doc.babylonjs.com/features/occlusionquery
         */
         occlusionRetryCount: number;
 
@@ -301,7 +301,7 @@ declare module "../../Meshes/abstractMesh" {
          * * OCCLUSION_TYPE_NONE (Default Value): this option means no occlusion query whith the Mesh.
          * * OCCLUSION_TYPE_OPTIMISTIC: this option is means use occlusion query and if occlusionRetryCount is reached and the query is broken show the mesh.
          * * OCCLUSION_TYPE_STRICT: this option is means use occlusion query and if occlusionRetryCount is reached and the query is broken restore the last state of the mesh occlusion if the mesh was visible then show the mesh if was hidden then hide don't show.
-         * @see http://doc.babylonjs.com/features/occlusionquery
+         * @see https://doc.babylonjs.com/features/occlusionquery
          */
         occlusionType: number;
 
@@ -309,19 +309,19 @@ declare module "../../Meshes/abstractMesh" {
         * This property determines the type of occlusion query algorithm to run in WebGl, you can use:
         * * AbstractMesh.OCCLUSION_ALGORITHM_TYPE_ACCURATE which is mapped to GL_ANY_SAMPLES_PASSED.
         * * AbstractMesh.OCCLUSION_ALGORITHM_TYPE_CONSERVATIVE (Default Value) which is mapped to GL_ANY_SAMPLES_PASSED_CONSERVATIVE which is a false positive algorithm that is faster than GL_ANY_SAMPLES_PASSED but less accurate.
-        * @see http://doc.babylonjs.com/features/occlusionquery
+        * @see https://doc.babylonjs.com/features/occlusionquery
         */
         occlusionQueryAlgorithmType: number;
 
         /**
         * Gets or sets whether the mesh is occluded or not, it is used also to set the intial state of the mesh to be occluded or not
-        * @see http://doc.babylonjs.com/features/occlusionquery
+        * @see https://doc.babylonjs.com/features/occlusionquery
         */
         isOccluded: boolean;
 
         /**
          * Flag to check the progress status of the query
-         * @see http://doc.babylonjs.com/features/occlusionquery
+         * @see https://doc.babylonjs.com/features/occlusionquery
          */
         isOcclusionQueryInProgress: boolean;
     }