Merge pull request #7969 from BabylonJS/master

Nightly

dist/preview release/babylon.d.ts

@@ -21043,6 +21043,10 @@ declare module BABYLON {
         private _meshes;
         /** @hidden */
         _matriceNames: any;
+        /** Gets the standalone status of the wrapper */
+        get standalone(): boolean;
+        /** Gets the base material the wrapper is built upon */
+        get baseMaterial(): Material;
         /**
          * Instantiate a new shadow depth wrapper.
          * It works by injecting some specific code in the vertex/fragment shaders of the base material and is used by a shadow generator to
@@ -55599,11 +55603,13 @@ declare module BABYLON {
 declare module BABYLON {
     /** @hidden */
     export class OimoJSPlugin implements IPhysicsEnginePlugin {
+        private _useDeltaForWorldStep;
         world: any;
         name: string;
         BJSOIMO: any;
         private _raycastResult;
-        constructor(iterations?: number, oimoInjection?: any);
+        private _fixedTimeStep;
+        constructor(_useDeltaForWorldStep?: boolean, iterations?: number, oimoInjection?: any);
         setGravity(gravity: Vector3): void;
         setTimeStep(timeStep: number): void;
         getTimeStep(): number;

dist/preview release/babylon.module.d.ts

@@ -21690,6 +21690,10 @@ declare module "babylonjs/Materials/shadowDepthWrapper" {
         private _meshes;
         /** @hidden */
         _matriceNames: any;
+        /** Gets the standalone status of the wrapper */
+        get standalone(): boolean;
+        /** Gets the base material the wrapper is built upon */
+        get baseMaterial(): Material;
         /**
          * Instantiate a new shadow depth wrapper.
          * It works by injecting some specific code in the vertex/fragment shaders of the base material and is used by a shadow generator to
@@ -58104,11 +58108,13 @@ declare module "babylonjs/Physics/Plugins/oimoJSPlugin" {
     import { PhysicsRaycastResult } from "babylonjs/Physics/physicsRaycastResult";
     /** @hidden */
     export class OimoJSPlugin implements IPhysicsEnginePlugin {
+        private _useDeltaForWorldStep;
         world: any;
         name: string;
         BJSOIMO: any;
         private _raycastResult;
-        constructor(iterations?: number, oimoInjection?: any);
+        private _fixedTimeStep;
+        constructor(_useDeltaForWorldStep?: boolean, iterations?: number, oimoInjection?: any);
         setGravity(gravity: Vector3): void;
         setTimeStep(timeStep: number): void;
         getTimeStep(): number;
@@ -95463,6 +95469,10 @@ declare module BABYLON {
         private _meshes;
         /** @hidden */
         _matriceNames: any;
+        /** Gets the standalone status of the wrapper */
+        get standalone(): boolean;
+        /** Gets the base material the wrapper is built upon */
+        get baseMaterial(): Material;
         /**
          * Instantiate a new shadow depth wrapper.
          * It works by injecting some specific code in the vertex/fragment shaders of the base material and is used by a shadow generator to
@@ -130019,11 +130029,13 @@ declare module BABYLON {
 declare module BABYLON {
     /** @hidden */
     export class OimoJSPlugin implements IPhysicsEnginePlugin {
+        private _useDeltaForWorldStep;
         world: any;
         name: string;
         BJSOIMO: any;
         private _raycastResult;
-        constructor(iterations?: number, oimoInjection?: any);
+        private _fixedTimeStep;
+        constructor(_useDeltaForWorldStep?: boolean, iterations?: number, oimoInjection?: any);
         setGravity(gravity: Vector3): void;
         setTimeStep(timeStep: number): void;
         getTimeStep(): number;

dist/preview release/documentation.d.ts

@@ -10506,7 +10506,7 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
-        interface Engine {
+        interface ThinEngine {
             /**
              * Creates a raw texture
              * @param data defines the data to store in the texture
@@ -21043,6 +21043,10 @@ declare module BABYLON {
         private _meshes;
         /** @hidden */
         _matriceNames: any;
+        /** Gets the standalone status of the wrapper */
+        get standalone(): boolean;
+        /** Gets the base material the wrapper is built upon */
+        get baseMaterial(): Material;
         /**
          * Instantiate a new shadow depth wrapper.
          * It works by injecting some specific code in the vertex/fragment shaders of the base material and is used by a shadow generator to
@@ -32280,63 +32284,6 @@ declare module BABYLON {
          * @hidden
          */
         _rescaleTexture(source: InternalTexture, destination: InternalTexture, scene: Nullable<any>, internalFormat: number, onComplete: () => void): void;
-        /**
-         * Creates a raw texture
-         * @param data defines the data to store in the texture
-         * @param width defines the width of the texture
-         * @param height defines the height of the texture
-         * @param format defines the format of the data
-         * @param generateMipMaps defines if the engine should generate the mip levels
-         * @param invertY defines if data must be stored with Y axis inverted
-         * @param samplingMode defines the required sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
-         * @param compression defines the compression used (null by default)
-         * @param type defines the type fo the data (Engine.TEXTURETYPE_UNSIGNED_INT by default)
-         * @returns the raw texture inside an InternalTexture
-         */
-        createRawTexture(data: Nullable<ArrayBufferView>, width: number, height: number, format: number, generateMipMaps: boolean, invertY: boolean, samplingMode: number, compression?: Nullable<string>, type?: number): InternalTexture;
-        /**
-         * Creates a new raw cube texture
-         * @param data defines the array of data to use to create each face
-         * @param size defines the size of the textures
-         * @param format defines the format of the data
-         * @param type defines the type of the data (like Engine.TEXTURETYPE_UNSIGNED_INT)
-         * @param generateMipMaps  defines if the engine should generate the mip levels
-         * @param invertY defines if data must be stored with Y axis inverted
-         * @param samplingMode defines the required sampling mode (like Texture.NEAREST_SAMPLINGMODE)
-         * @param compression defines the compression used (null by default)
-         * @returns the cube texture as an InternalTexture
-         */
-        createRawCubeTexture(data: Nullable<ArrayBufferView[]>, size: number, format: number, type: number, generateMipMaps: boolean, invertY: boolean, samplingMode: number, compression?: Nullable<string>): InternalTexture;
-        /**
-         * Creates a new raw 3D texture
-         * @param data defines the data used to create the texture
-         * @param width defines the width of the texture
-         * @param height defines the height of the texture
-         * @param depth defines the depth of the texture
-         * @param format defines the format of the texture
-         * @param generateMipMaps defines if the engine must generate mip levels
-         * @param invertY defines if data must be stored with Y axis inverted
-         * @param samplingMode defines the required sampling mode (like Texture.NEAREST_SAMPLINGMODE)
-         * @param compression defines the compressed used (can be null)
-         * @param textureType defines the compressed used (can be null)
-         * @returns a new raw 3D texture (stored in an InternalTexture)
-         */
-        createRawTexture3D(data: Nullable<ArrayBufferView>, width: number, height: number, depth: number, format: number, generateMipMaps: boolean, invertY: boolean, samplingMode: number, compression?: Nullable<string>, textureType?: number): InternalTexture;
-        /**
-         * Creates a new raw 2D array texture
-         * @param data defines the data used to create the texture
-         * @param width defines the width of the texture
-         * @param height defines the height of the texture
-         * @param depth defines the number of layers of the texture
-         * @param format defines the format of the texture
-         * @param generateMipMaps defines if the engine must generate mip levels
-         * @param invertY defines if data must be stored with Y axis inverted
-         * @param samplingMode defines the required sampling mode (like Texture.NEAREST_SAMPLINGMODE)
-         * @param compression defines the compressed used (can be null)
-         * @param textureType defines the compressed used (can be null)
-         * @returns a new raw 2D array texture (stored in an InternalTexture)
-         */
-        createRawTexture2DArray(data: Nullable<ArrayBufferView>, width: number, height: number, depth: number, format: number, generateMipMaps: boolean, invertY: boolean, samplingMode: number, compression?: Nullable<string>, textureType?: number): InternalTexture;
         private _unpackFlipYCached;
         /**
          * In case you are sharing the context with other applications, it might
@@ -34235,8 +34182,6 @@ declare module BABYLON {
          * @param postProcess The post process which's output should be bound
          */
         setTextureFromPostProcessOutput(channel: number, postProcess: Nullable<PostProcess>): void;
-        /** @hidden */
-        _convertRGBtoRGBATextureData(rgbData: any, width: number, height: number, textureType: number): ArrayBufferView;
         protected _rebuildBuffers(): void;
         /** @hidden */
         _renderFrame(): void;
@@ -55658,11 +55603,13 @@ declare module BABYLON {
 declare module BABYLON {
     /** @hidden */
     export class OimoJSPlugin implements IPhysicsEnginePlugin {
+        private _useDeltaForWorldStep;
         world: any;
         name: string;
         BJSOIMO: any;
         private _raycastResult;
-        constructor(iterations?: number, oimoInjection?: any);
+        private _fixedTimeStep;
+        constructor(_useDeltaForWorldStep?: boolean, iterations?: number, oimoInjection?: any);
         setGravity(gravity: Vector3): void;
         setTimeStep(timeStep: number): void;
         getTimeStep(): number;
@@ -56533,10 +56480,6 @@ declare module BABYLON {
      */
     export class ColorGradingTexture extends BaseTexture {
         /**
-         * The current texture matrix. (will always be identity in color grading texture)
-         */
-        private _textureMatrix;
-        /**
          * The texture URL.
          */
         url: string;
@@ -56544,14 +56487,21 @@ declare module BABYLON {
          * Empty line regex stored for GC.
          */
         private static _noneEmptyLineRegex;
+        private _textureMatrix;
         private _engine;
+        private _onLoad;
         /**
          * Instantiates a ColorGradingTexture from the following parameters.
          *
          * @param url The location of the color gradind data (currently only supporting 3dl)
-         * @param scene The scene the texture will be used in
+         * @param sceneOrEngine The scene or engine the texture will be used in
+         * @param onLoad defines a callback triggered when the texture has been loaded
+         */
+        constructor(url: string, sceneOrEngine: Scene | ThinEngine, onLoad?: Nullable<() => void>);
+        /**
+         * Fires the onload event from the constructor if requested.
          */
-        constructor(url: string, scene: Scene);
+        private _triggerOnLoad;
         /**
          * Returns the texture matrix used in most of the material.
          * This is not used in color grading but keep for troubleshooting purpose (easily swap diffuse by colorgrading to look in).
@@ -56585,6 +56535,11 @@ declare module BABYLON {
          * Serializes the LUT texture to json format.
          */
         serialize(): any;
+        /**
+         * Returns true if the passed parameter is a scene object (can be use for typings)
+         * @param sceneOrEngine The object to test.
+         */
+        private static _isScene;
     }
 }
 declare module BABYLON {

dist/preview release/nodeEditor/babylon.nodeEditor.d.ts

@@ -100,24 +100,22 @@ declare module NODEEDITOR {
     export class FrameNodePort extends NodePort {
         connectionPoint: BABYLON.NodeMaterialConnectionPoint;
         node: GraphNode;
-        private _onFramePortMoveUpObservable;
-        private _onFramePortMoveDownObservable;
-        private _onFramePortPositionChangedObservable;
         private _portLabel;
+        private _parentFrameId;
         private _isInput;
         private _framePortPosition;
         private _framePortId;
-        get onFramePortMoveUpObservable(): BABYLON.Observable<FrameNodePort>;
-        get onFramePortMoveDownObservable(): BABYLON.Observable<FrameNodePort>;
-        get onFramePortPositionChangedObservable(): BABYLON.Observable<FramePortPosition>;
+        private _onFramePortPositionChangedObservable;
+        get parentFrameId(): number;
+        get onFramePortPositionChangedObservable(): BABYLON.Observable<FrameNodePort>;
         get isInput(): boolean;
         get portLabel(): string;
-        get framePortId(): BABYLON.Nullable<number>;
+        get framePortId(): number;
         set portLabel(newLabel: string);
         get framePortPosition(): FramePortPosition;
         set framePortPosition(position: FramePortPosition);
-        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number);
-        static CreateFrameNodePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number): FrameNodePort;
+        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number);
+        static CreateFrameNodePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort;
     }
 }
 declare module NODEEDITOR {
@@ -200,9 +198,9 @@ declare module NODEEDITOR {
         private _onUp;
         private _moveFrame;
         private _onMove;
-        private moveFramePortUp;
+        moveFramePortUp(nodePort: FrameNodePort): void;
         private _movePortUp;
-        private moveFramePortDown;
+        moveFramePortDown(nodePort: FrameNodePort): void;
         private _movePortDown;
         private initResizing;
         private cleanUpResizing;
@@ -263,7 +261,7 @@ declare module NODEEDITOR {
         protected _img: HTMLImageElement;
         protected _globalState: GlobalState;
         protected _onCandidateLinkMovedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<BABYLON.Vector2>>>;
-        protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FrameNodePort>>>;
+        protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
         delegatedPort: BABYLON.Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
         refresh(): void;
@@ -300,6 +298,11 @@ declare module NODEEDITOR {
     export interface IGraphCanvasComponentProps {
         globalState: GlobalState;
     }
+    export type FramePortData = {
+        frame: GraphFrame;
+        port: FrameNodePort;
+    };
+    export const isFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
     export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentProps> {
         private readonly MinZoom;
         private readonly MaxZoom;
@@ -1184,7 +1187,7 @@ declare module NODEEDITOR {
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         hostWindow: Window;
-        onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<GraphNode | NodePort | NodeLink | GraphFrame>>;
+        onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<GraphNode | NodePort | GraphFrame | NodeLink | FramePortData>>;
         onRebuildRequiredObservable: BABYLON.Observable<void>;
         onBuiltObservable: BABYLON.Observable<void>;
         onResetRequiredObservable: BABYLON.Observable<void>;
@@ -1267,11 +1270,13 @@ declare module NODEEDITOR {
     export interface IFrameNodePortPropertyTabComponentProps {
         globalState: GlobalState;
         frameNodePort: FrameNodePort;
+        frame: GraphFrame;
     }
     export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {
-        framePortPosition: FramePortPosition;
+        port: FrameNodePort;
     }> {
         private _onFramePortPositionChangedObserver;
+        private _onSelectionChangedObserver;
         constructor(props: IFrameNodePortPropertyTabComponentProps);
         componentWillUnmount(): void;
         render(): JSX.Element;

dist/preview release/nodeEditor/babylon.nodeEditor.module.d.ts

@@ -177,24 +177,22 @@ declare module "babylonjs-node-editor/diagram/frameNodePort" {
     export class FrameNodePort extends NodePort {
         connectionPoint: NodeMaterialConnectionPoint;
         node: GraphNode;
-        private _onFramePortMoveUpObservable;
-        private _onFramePortMoveDownObservable;
-        private _onFramePortPositionChangedObservable;
         private _portLabel;
+        private _parentFrameId;
         private _isInput;
         private _framePortPosition;
         private _framePortId;
-        get onFramePortMoveUpObservable(): Observable<FrameNodePort>;
-        get onFramePortMoveDownObservable(): Observable<FrameNodePort>;
-        get onFramePortPositionChangedObservable(): Observable<FramePortPosition>;
+        private _onFramePortPositionChangedObservable;
+        get parentFrameId(): number;
+        get onFramePortPositionChangedObservable(): Observable<FrameNodePort>;
         get isInput(): boolean;
         get portLabel(): string;
-        get framePortId(): Nullable<number>;
+        get framePortId(): number;
         set portLabel(newLabel: string);
         get framePortPosition(): FramePortPosition;
         set framePortPosition(position: FramePortPosition);
-        constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number);
-        static CreateFrameNodePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number): FrameNodePort;
+        constructor(portContainer: HTMLElement, connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number);
+        static CreateFrameNodePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort;
     }
 }
 declare module "babylonjs-node-editor/diagram/graphFrame" {
@@ -284,9 +282,9 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private _onUp;
         private _moveFrame;
         private _onMove;
-        private moveFramePortUp;
+        moveFramePortUp(nodePort: FrameNodePort): void;
         private _movePortUp;
-        private moveFramePortDown;
+        moveFramePortDown(nodePort: FrameNodePort): void;
         private _movePortDown;
         private initResizing;
         private cleanUpResizing;
@@ -350,6 +348,7 @@ declare module "babylonjs-node-editor/diagram/nodePort" {
     import { NodeLink } from "babylonjs-node-editor/diagram/nodeLink";
     import { GraphFrame } from "babylonjs-node-editor/diagram/graphFrame";
     import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
+    import { FramePortData } from "babylonjs-node-editor/diagram/graphCanvas";
     export class NodePort {
         connectionPoint: NodeMaterialConnectionPoint;
         node: GraphNode;
@@ -357,7 +356,7 @@ declare module "babylonjs-node-editor/diagram/nodePort" {
         protected _img: HTMLImageElement;
         protected _globalState: GlobalState;
         protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
-        protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FrameNodePort>>>;
+        protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
         delegatedPort: Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
         refresh(): void;
@@ -406,9 +405,15 @@ declare module "babylonjs-node-editor/diagram/graphCanvas" {
     import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
     import { GraphFrame } from "babylonjs-node-editor/diagram/graphFrame";
     import { IEditorData } from "babylonjs-node-editor/nodeLocationInfo";
+    import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
     export interface IGraphCanvasComponentProps {
         globalState: GlobalState;
     }
+    export type FramePortData = {
+        frame: GraphFrame;
+        port: FrameNodePort;
+    };
+    export const isFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
     export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentProps> {
         private readonly MinZoom;
         private readonly MaxZoom;
@@ -1438,12 +1443,13 @@ declare module "babylonjs-node-editor/globalState" {
     import { NodeLink } from "babylonjs-node-editor/diagram/nodeLink";
     import { GraphFrame } from "babylonjs-node-editor/diagram/graphFrame";
     import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
+    import { FramePortData } from "babylonjs-node-editor/diagram/graphCanvas";
     export class GlobalState {
         nodeMaterial: NodeMaterial;
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         hostWindow: Window;
-        onSelectionChangedObservable: Observable<Nullable<GraphNode | NodePort | NodeLink | GraphFrame>>;
+        onSelectionChangedObservable: Observable<Nullable<GraphNode | NodePort | GraphFrame | NodeLink | FramePortData>>;
         onRebuildRequiredObservable: Observable<void>;
         onBuiltObservable: Observable<void>;
         onResetRequiredObservable: Observable<void>;
@@ -1531,16 +1537,18 @@ declare module "babylonjs-node-editor/diagram/properties/framePropertyComponent"
 declare module "babylonjs-node-editor/diagram/properties/frameNodePortPropertyComponent" {
     import * as React from "react";
     import { GlobalState } from "babylonjs-node-editor/globalState";
-    import { FramePortPosition } from "babylonjs-node-editor/diagram/graphFrame";
+    import { GraphFrame } from "babylonjs-node-editor/diagram/graphFrame";
     import { FrameNodePort } from "babylonjs-node-editor/diagram/frameNodePort";
     export interface IFrameNodePortPropertyTabComponentProps {
         globalState: GlobalState;
         frameNodePort: FrameNodePort;
+        frame: GraphFrame;
     }
     export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {
-        framePortPosition: FramePortPosition;
+        port: FrameNodePort;
     }> {
         private _onFramePortPositionChangedObserver;
+        private _onSelectionChangedObserver;
         constructor(props: IFrameNodePortPropertyTabComponentProps);
         componentWillUnmount(): void;
         render(): JSX.Element;
@@ -1884,24 +1892,22 @@ declare module NODEEDITOR {
     export class FrameNodePort extends NodePort {
         connectionPoint: BABYLON.NodeMaterialConnectionPoint;
         node: GraphNode;
-        private _onFramePortMoveUpObservable;
-        private _onFramePortMoveDownObservable;
-        private _onFramePortPositionChangedObservable;
         private _portLabel;
+        private _parentFrameId;
         private _isInput;
         private _framePortPosition;
         private _framePortId;
-        get onFramePortMoveUpObservable(): BABYLON.Observable<FrameNodePort>;
-        get onFramePortMoveDownObservable(): BABYLON.Observable<FrameNodePort>;
-        get onFramePortPositionChangedObservable(): BABYLON.Observable<FramePortPosition>;
+        private _onFramePortPositionChangedObservable;
+        get parentFrameId(): number;
+        get onFramePortPositionChangedObservable(): BABYLON.Observable<FrameNodePort>;
         get isInput(): boolean;
         get portLabel(): string;
-        get framePortId(): BABYLON.Nullable<number>;
+        get framePortId(): number;
         set portLabel(newLabel: string);
         get framePortPosition(): FramePortPosition;
         set framePortPosition(position: FramePortPosition);
-        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number);
-        static CreateFrameNodePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number): FrameNodePort;
+        constructor(portContainer: HTMLElement, connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number);
+        static CreateFrameNodePortElement(connectionPoint: BABYLON.NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort;
     }
 }
 declare module NODEEDITOR {
@@ -1984,9 +1990,9 @@ declare module NODEEDITOR {
         private _onUp;
         private _moveFrame;
         private _onMove;
-        private moveFramePortUp;
+        moveFramePortUp(nodePort: FrameNodePort): void;
         private _movePortUp;
-        private moveFramePortDown;
+        moveFramePortDown(nodePort: FrameNodePort): void;
         private _movePortDown;
         private initResizing;
         private cleanUpResizing;
@@ -2047,7 +2053,7 @@ declare module NODEEDITOR {
         protected _img: HTMLImageElement;
         protected _globalState: GlobalState;
         protected _onCandidateLinkMovedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<BABYLON.Vector2>>>;
-        protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FrameNodePort>>>;
+        protected _onSelectionChangedObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
         delegatedPort: BABYLON.Nullable<FrameNodePort>;
         get element(): HTMLDivElement;
         refresh(): void;
@@ -2084,6 +2090,11 @@ declare module NODEEDITOR {
     export interface IGraphCanvasComponentProps {
         globalState: GlobalState;
     }
+    export type FramePortData = {
+        frame: GraphFrame;
+        port: FrameNodePort;
+    };
+    export const isFramePortData: (variableToCheck: any) => variableToCheck is FramePortData;
     export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentProps> {
         private readonly MinZoom;
         private readonly MaxZoom;
@@ -2968,7 +2979,7 @@ declare module NODEEDITOR {
         hostElement: HTMLElement;
         hostDocument: HTMLDocument;
         hostWindow: Window;
-        onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<GraphNode | NodePort | NodeLink | GraphFrame>>;
+        onSelectionChangedObservable: BABYLON.Observable<BABYLON.Nullable<GraphNode | NodePort | GraphFrame | NodeLink | FramePortData>>;
         onRebuildRequiredObservable: BABYLON.Observable<void>;
         onBuiltObservable: BABYLON.Observable<void>;
         onResetRequiredObservable: BABYLON.Observable<void>;
@@ -3051,11 +3062,13 @@ declare module NODEEDITOR {
     export interface IFrameNodePortPropertyTabComponentProps {
         globalState: GlobalState;
         frameNodePort: FrameNodePort;
+        frame: GraphFrame;
     }
     export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {
-        framePortPosition: FramePortPosition;
+        port: FrameNodePort;
     }> {
         private _onFramePortPositionChangedObserver;
+        private _onSelectionChangedObserver;
         constructor(props: IFrameNodePortPropertyTabComponentProps);
         componentWillUnmount(): void;
         render(): JSX.Element;

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":114719,"engineOnly":151377,"sceneOnly":508981,"minGridMaterial":641277,"minStandardMaterial":782458}
+{"thinEngineOnly":115611,"engineOnly":152019,"sceneOnly":510028,"minGridMaterial":642324,"minStandardMaterial":783686}

dist/preview release/viewer/babylon.module.d.ts

@@ -21690,6 +21690,10 @@ declare module "babylonjs/Materials/shadowDepthWrapper" {
         private _meshes;
         /** @hidden */
         _matriceNames: any;
+        /** Gets the standalone status of the wrapper */
+        get standalone(): boolean;
+        /** Gets the base material the wrapper is built upon */
+        get baseMaterial(): Material;
         /**
          * Instantiate a new shadow depth wrapper.
          * It works by injecting some specific code in the vertex/fragment shaders of the base material and is used by a shadow generator to
@@ -58104,11 +58108,13 @@ declare module "babylonjs/Physics/Plugins/oimoJSPlugin" {
     import { PhysicsRaycastResult } from "babylonjs/Physics/physicsRaycastResult";
     /** @hidden */
     export class OimoJSPlugin implements IPhysicsEnginePlugin {
+        private _useDeltaForWorldStep;
         world: any;
         name: string;
         BJSOIMO: any;
         private _raycastResult;
-        constructor(iterations?: number, oimoInjection?: any);
+        private _fixedTimeStep;
+        constructor(_useDeltaForWorldStep?: boolean, iterations?: number, oimoInjection?: any);
         setGravity(gravity: Vector3): void;
         setTimeStep(timeStep: number): void;
         getTimeStep(): number;
@@ -95463,6 +95469,10 @@ declare module BABYLON {
         private _meshes;
         /** @hidden */
         _matriceNames: any;
+        /** Gets the standalone status of the wrapper */
+        get standalone(): boolean;
+        /** Gets the base material the wrapper is built upon */
+        get baseMaterial(): Material;
         /**
          * Instantiate a new shadow depth wrapper.
          * It works by injecting some specific code in the vertex/fragment shaders of the base material and is used by a shadow generator to
@@ -130019,11 +130029,13 @@ declare module BABYLON {
 declare module BABYLON {
     /** @hidden */
     export class OimoJSPlugin implements IPhysicsEnginePlugin {
+        private _useDeltaForWorldStep;
         world: any;
         name: string;
         BJSOIMO: any;
         private _raycastResult;
-        constructor(iterations?: number, oimoInjection?: any);
+        private _fixedTimeStep;
+        constructor(_useDeltaForWorldStep?: boolean, iterations?: number, oimoInjection?: any);
         setGravity(gravity: Vector3): void;
         setTimeStep(timeStep: number): void;
         getTimeStep(): number;

dist/preview release/what's new.md

@@ -9,7 +9,7 @@
 
 ### General
 
-- Refactored React refs from old string API to React.createRef() API ([Kyle Belfort](https://github.com/belfortk)
+- Refactored React refs from old string API to React.createRef() API ([belfortk](https://github.com/belfortk)
 
 - Scale on one axis for `BoundingBoxGizmo` ([cedricguillemet](https://github.com/cedricguillemet))
 
@@ -23,8 +23,8 @@
 
 ### NME
 
-- Frames are now resizable from the corners ([Kyle Belfort](https://github.com/belfortk)
-- Can now rename and re-order frame inputs and outputs ([Kyle Belfort](https://github.com/belfortk)
+- Frames are now resizable from the corners ([belfortk](https://github.com/belfortk)
+- Can now rename and re-order frame inputs and outputs ([belfortk](https://github.com/belfortk)
 
 ### Inspector
 
@@ -43,6 +43,7 @@
 
 ### Physics
 
+- Fixed time steps or delta time with sub time step for Oimo.js and Cannon.js ([cedricguillemet](https://github.com/cedricguillemet))
 - Ammo.js IDL exposed property update and raycast vehicle stablization support ([MackeyK24](https://github.com/MackeyK24))
 - Recast.js plugin nav mesh and crowd agent to ref performance optimizations. ([MackeyK24](https://github.com/MackeyK24))
 
@@ -72,6 +73,7 @@
 - Implemented the new WebXR HitTest API ([#7364](https://github.com/BabylonJS/Babylon.js/issues/7364)) ([RaananW](https://github.com/RaananW))
 - Playground doesn't update FPS when in XR in main and frame ([#7875](https://github.com/BabylonJS/Babylon.js/issues/7875)) ([RaananW](https://github.com/RaananW))
 - Added support for teleportation using pointer events ([RaananW](https://github.com/RaananW))
+- AR reference space type recommendation changed to 'unbounded' ([#7959](https://github.com/BabylonJS/Babylon.js/issues/7959)) ([RaananW](https://github.com/RaananW))
 
 ### Collisions
 
@@ -90,7 +92,7 @@
 - Fix infinite loop in `GlowLayer.unReferenceMeshFromUsingItsOwnMaterial` ([Popov72](https://github.com/Popov72)
 - Fix picking issue in the Solid Particle System when MultiMaterial is enabled ([jerome](https://github.com/jbousquie))
 - `QuadraticErrorSimplification` was not exported ([RaananW](https://github.com/Raananw)
-- Fix NME Frames bug where collapsing and moving a frame removed the nodes inside ([Kyle Belfort](https://github.com/belfortk)
+- Fix NME Frames bug where collapsing and moving a frame removed the nodes inside ([belfortk](https://github.com/belfortk)
 - Fix moving / disappearing controls when freezing/unfreezing the ScrollViewer ([Popov72](https://github.com/Popov72)
 - Fix: when using instances, master mesh (if displayed) does not have correct instance buffer values ([Popov72](https://github.com/Popov72)
 - Exit XR will only trigger only if state is IN_XR ([RaananW](https://github.com/RaananW))
@@ -117,7 +119,10 @@
 - Fixed error when downloading async createScene function in playground ([#7926](https://github.com/BabylonJS/Babylon.js/issues/7926)) ([RaananW](https://github.com/RaananW))
 - Fix issue where ThinEngine.prototype.createDynamicEngine is undefined when using VideoTexture with es6 packages ([rvadhavk](https://github.com/rvadhavk))
 - Fix [issue](https://forum.babylonjs.com/t/virtualjoystick-needs-to-set-style-touch-action-none-explicitly/9562) that canvas for `VirtualJoystick` does not have `touch-action: "none"` set by default ([joergplewe](https://github.com/joergplewe))
-- Fix [issue](https://github.com/BabylonJS/Babylon.js/issues/7943) that prevented user from re-loading custom meshes
+- Fix [issue](https://github.com/BabylonJS/Babylon.js/issues/7943) that prevented user from re-loading custom meshes([belfortk](https://github.com/belfortk))
+- Fix bug in NME where collapsed frames didn't redraw output links to outside nodes([belfortk](https://github.com/belfortk))
+- Fix bug in NME where links were not redrawn after moving frame port ([belfortk](https://github.com/belfortk))
+- Fix bugs in NME that were causing inconsistent behavior displaying Move Node Up and Down buttons on frame ports([belfortk](https://github.com/belfortk))
 
 ## Breaking changes
 

materialsLibrary/src/custom/customMaterial.ts

@@ -142,9 +142,12 @@ export class CustomMaterial extends StandardMaterial {
             .replace('#define CUSTOM_VERTEX_MAIN_BEGIN', (this.CustomParts.Vertex_MainBegin ? this.CustomParts.Vertex_MainBegin : ""))
             .replace('#define CUSTOM_VERTEX_UPDATE_POSITION', (this.CustomParts.Vertex_Before_PositionUpdated ? this.CustomParts.Vertex_Before_PositionUpdated : ""))
             .replace('#define CUSTOM_VERTEX_UPDATE_NORMAL', (this.CustomParts.Vertex_Before_NormalUpdated ? this.CustomParts.Vertex_Before_NormalUpdated : ""))
-            .replace('#define CUSTOM_VERTEX_UPDATE_WORLDPOS', (this.CustomParts.Vertex_After_WorldPosComputed ? this.CustomParts.Vertex_After_WorldPosComputed : ""))
             .replace('#define CUSTOM_VERTEX_MAIN_END', (this.CustomParts.Vertex_MainEnd ? this.CustomParts.Vertex_MainEnd : ""));
 
+        if (this.CustomParts.Vertex_After_WorldPosComputed) {
+            Effect.ShadersStore[name + "VertexShader"] = Effect.ShadersStore[name + "VertexShader"].replace('#define CUSTOM_VERTEX_UPDATE_WORLDPOS', this.CustomParts.Vertex_After_WorldPosComputed);
+        }
+
         Effect.ShadersStore[name + "PixelShader"] = this.FragmentShader
             .replace('#define CUSTOM_FRAGMENT_BEGIN', (this.CustomParts.Fragment_Begin ? this.CustomParts.Fragment_Begin : ""))
             .replace('#define CUSTOM_FRAGMENT_MAIN_BEGIN', (this.CustomParts.Fragment_MainBegin ? this.CustomParts.Fragment_MainBegin : ""))

materialsLibrary/src/custom/pbrCustomMaterial.ts

@@ -138,9 +138,12 @@ export class PBRCustomMaterial extends PBRMaterial {
             .replace('#define CUSTOM_VERTEX_MAIN_BEGIN', (this.CustomParts.Vertex_MainBegin ? this.CustomParts.Vertex_MainBegin : ""))
             .replace('#define CUSTOM_VERTEX_UPDATE_POSITION', (this.CustomParts.Vertex_Before_PositionUpdated ? this.CustomParts.Vertex_Before_PositionUpdated : ""))
             .replace('#define CUSTOM_VERTEX_UPDATE_NORMAL', (this.CustomParts.Vertex_Before_NormalUpdated ? this.CustomParts.Vertex_Before_NormalUpdated : ""))
-            .replace('#define CUSTOM_VERTEX_UPDATE_WORLDPOS', (this.CustomParts.Vertex_After_WorldPosComputed ? this.CustomParts.Vertex_After_WorldPosComputed : ""))
             .replace('#define CUSTOM_VERTEX_MAIN_END', (this.CustomParts.Vertex_MainEnd ? this.CustomParts.Vertex_MainEnd : ""));
 
+        if (this.CustomParts.Vertex_After_WorldPosComputed) {
+            Effect.ShadersStore[name + "VertexShader"] = Effect.ShadersStore[name + "VertexShader"].replace('#define CUSTOM_VERTEX_UPDATE_WORLDPOS', this.CustomParts.Vertex_After_WorldPosComputed);
+        }
+
         Effect.ShadersStore[name + "PixelShader"] = this.FragmentShader
             .replace('#define CUSTOM_FRAGMENT_BEGIN', (this.CustomParts.Fragment_Begin ? this.CustomParts.Fragment_Begin : ""))
             .replace('#define CUSTOM_FRAGMENT_MAIN_BEGIN', (this.CustomParts.Fragment_MainBegin ? this.CustomParts.Fragment_MainBegin : ""))

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -26,8 +26,9 @@ import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponen
 import { Vector3LineComponent } from '../../sharedComponents/vector3LineComponent';
 import { Vector4LineComponent } from '../../sharedComponents/vector4LineComponent';
 import { Observer } from 'babylonjs/Misc/observable';
-import { FrameNodePort } from '../../diagram/frameNodePort';
 import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
+import { FrameNodePort } from '../../diagram/frameNodePort';
+import { isFramePortData } from '../../diagram/graphCanvas';
 require("./propertyTab.scss");
 
 interface IPropertyTabComponentProps {
@@ -49,8 +50,8 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                 this.setState({ currentNode: selection, currentFrame: null, currentFrameNodePort: null });
             } else if (selection instanceof GraphFrame) {
                 this.setState({ currentNode: null, currentFrame: selection, currentFrameNodePort: null });
-            } else if(selection instanceof FrameNodePort) {
-                this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: selection });
+            } else if(isFramePortData(selection)) {
+                this.setState({ currentNode: null, currentFrame: selection.frame, currentFrameNodePort: selection.port });
             } else {
                 this.setState({ currentNode: null, currentFrame: null, currentFrameNodePort: null });
             }
@@ -243,16 +244,16 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                 </div>
             );
         }
-
-        if (this.state.currentFrame) {
+        
+        if (this.state.currentFrameNodePort && this.state.currentFrame) {
             return (
-                <FramePropertyTabComponent globalState={this.props.globalState} frame={this.state.currentFrame}/>
+                <FrameNodePortPropertyTabComponent globalState={this.props.globalState} frame={this.state.currentFrame} frameNodePort={this.state.currentFrameNodePort}/>
             );
         }
 
-        if (this.state.currentFrameNodePort) {
+        if (this.state.currentFrame) {
             return (
-                <FrameNodePortPropertyTabComponent globalState={this.props.globalState} frameNodePort={this.state.currentFrameNodePort}/>
+                <FramePropertyTabComponent globalState={this.props.globalState} frame={this.state.currentFrame}/>
             );
         }
 

nodeEditor/src/diagram/frameNodePort.ts

@@ -6,22 +6,18 @@ import { IDisplayManager } from './display/displayManager';
 import { Observable } from 'babylonjs/Misc/observable';
 import { Nullable } from 'babylonjs/types';
 import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
+import { FramePortData, isFramePortData } from './graphCanvas';
 
 export class FrameNodePort extends NodePort {
-    private _onFramePortMoveUpObservable = new Observable<FrameNodePort>();
-    private _onFramePortMoveDownObservable = new Observable<FrameNodePort>();
-    private _onFramePortPositionChangedObservable = new Observable<FramePortPosition>();
     private _portLabel: Element;
+    private _parentFrameId: number;
     private _isInput: boolean;
     private _framePortPosition: FramePortPosition
-    private _framePortId: Nullable<number>;
+    private _framePortId: number;
+    private _onFramePortPositionChangedObservable = new Observable<FrameNodePort>();
 
-    public get onFramePortMoveUpObservable() {
-        return this._onFramePortMoveUpObservable;
-    }
-
-    public get onFramePortMoveDownObservable() {
-        return this._onFramePortMoveDownObservable;
+    public get parentFrameId () {
+        return this._parentFrameId;
     }
 
     public get onFramePortPositionChangedObservable() {
@@ -50,18 +46,20 @@ export class FrameNodePort extends NodePort {
 
     public set framePortPosition(position: FramePortPosition) {
         this._framePortPosition = position;
-        this.onFramePortPositionChangedObservable.notifyObservers(position);
+        console.log(this.onFramePortPositionChangedObservable.observers);
+        this.onFramePortPositionChangedObservable.notifyObservers(this);
     }
 
-    public constructor(portContainer: HTMLElement, public connectionPoint: NodeMaterialConnectionPoint, public node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number) {
+    public constructor(portContainer: HTMLElement, public connectionPoint: NodeMaterialConnectionPoint, public node: GraphNode, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number) {
         super(portContainer, connectionPoint,node, globalState);
 
+        this._parentFrameId = parentFrameId;
         this._portLabel = portContainer.children[0];
         this._isInput = isInput;
         this._framePortId = framePortId;
 
         this._onSelectionChangedObserver = this._globalState.onSelectionChangedObservable.add((selection) => {
-            if (selection === this) {
+            if (isFramePortData(selection) && (selection as FramePortData).port === this) {
                 this._img.classList.add("selected");
             } else {
                 this._img.classList.remove("selected");
@@ -72,7 +70,7 @@ export class FrameNodePort extends NodePort {
     }
 
     public static CreateFrameNodePortElement(connectionPoint: NodeMaterialConnectionPoint, node: GraphNode, root: HTMLElement, 
-        displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number) {
+        displayManager: Nullable<IDisplayManager>, globalState: GlobalState, isInput: boolean, framePortId: number, parentFrameId: number) {
         let portContainer = root.ownerDocument!.createElement("div");
         let block = connectionPoint.ownerBlock;
 
@@ -89,7 +87,7 @@ export class FrameNodePort extends NodePort {
             portContainer.appendChild(portLabel);
         }
 
-        return new FrameNodePort(portContainer, connectionPoint, node, globalState, isInput, framePortId);
+        return new FrameNodePort(portContainer, connectionPoint, node, globalState, isInput, framePortId, parentFrameId);
     }
 
 } 

nodeEditor/src/diagram/graphCanvas.tsx

@@ -22,6 +22,18 @@ export interface IGraphCanvasComponentProps {
     globalState: GlobalState
 }
 
+export type FramePortData = {
+    frame: GraphFrame,
+    port: FrameNodePort
+}
+
+export const isFramePortData = (variableToCheck: any): variableToCheck is FramePortData => {
+    if (variableToCheck) {
+        return (variableToCheck as FramePortData).port !== undefined;
+    }
+    else return false;
+}
+
 export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentProps> {
     private readonly MinZoom = 0.1;
     private readonly MaxZoom = 4;
@@ -186,12 +198,16 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                     } else {                    
                         this._selectedNodes = [selection];
                     }
-                }
-                else {
+                } else if(selection instanceof NodePort){
                     this._selectedNodes = [];
                     this._selectedFrame = null;
                     this._selectedLink = null;
                     this._selectedPort = selection;
+                } else {
+                    this._selectedNodes = [];
+                    this._selectedFrame = null;
+                    this._selectedLink = null;
+                    this._selectedPort = selection.port;
                 }
             }
         });
@@ -599,8 +615,16 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
                 this.processCandidatePort();          
                 this.props.globalState.onCandidateLinkMoved.notifyObservers(null);
             } else { // is a click event on NodePort
-                if(this._candidateLink.portA instanceof FrameNodePort) { //only on Frame Ports
-                    this.props.globalState.onSelectionChangedObservable.notifyObservers(this._candidateLink.portA);
+                if(this._candidateLink.portA instanceof FrameNodePort) { //only on Frame Node Ports
+                    const port = this._candidateLink.portA;
+                    const frame = this.frames.find((frame: GraphFrame) => frame.id === port.parentFrameId);
+                    if (frame) {
+                        const data: FramePortData = {
+                            frame,
+                            port
+                        }
+                        this.props.globalState.onSelectionChangedObservable.notifyObservers(data);
+                    }
                 }
             }
             this._candidateLink.dispose();

nodeEditor/src/diagram/graphFrame.ts

@@ -1,5 +1,5 @@
 import { GraphNode } from './graphNode';
-import { GraphCanvasComponent } from './graphCanvas';
+import { GraphCanvasComponent, FramePortData } from './graphCanvas';
 import { Nullable } from 'babylonjs/types';
 import { Observer, Observable } from 'babylonjs/Misc/observable';
 import { NodeLink } from './nodeLink';
@@ -51,7 +51,7 @@ export class GraphFrame {
     private _ownerCanvas: GraphCanvasComponent;
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame | NodePort>>>;
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;
     private _onGraphNodeRemovalObserver: Nullable<Observer<GraphNode>>; 
     private _isCollapsed = false;
     private _frameInPorts: FrameNodePort[] = [];
@@ -80,18 +80,11 @@ export class GraphFrame {
     }
 
     private _createInputPort(port: NodePort, node: GraphNode) {
-        let localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, node, this._inputPortContainer, null, this._ownerCanvas.globalState, true, GraphFrame._FramePortCounter++)
+        let localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, node, this._inputPortContainer, null, this._ownerCanvas.globalState, true, GraphFrame._FramePortCounter++, this.id);
         this._frameInPorts.push(localPort);
 
         port.delegatedPort = localPort;
         this._controlledPorts.push(port);
-        localPort.onFramePortMoveUpObservable.add((nodePort: FrameNodePort) => {
-                this.moveFramePortUp(nodePort);
-        });
-
-        localPort.onFramePortMoveDownObservable.add((nodePort: FrameNodePort) => {
-                this.moveFramePortDown(nodePort);
-        })
     }
 
     public set isCollapsed(value: boolean) {
@@ -120,38 +113,25 @@ export class GraphFrame {
 
                                 if (!portAdded) {
                                     portAdded = true;
-                                    localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, link.nodeB!, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++);
+                                    localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, link.nodeB!, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++, this.id);
                                     this._frameOutPorts.push(localPort);
 
-                                    localPort.onFramePortMoveUpObservable.add((nodePort: FrameNodePort) => {
-                                            this.moveFramePortUp(nodePort);
-                                    });
-                            
-                                    localPort.onFramePortMoveDownObservable.add((nodePort: FrameNodePort) => {
-                                            this.moveFramePortDown(nodePort);
-                                    })
+                                    link.isVisible = true;
+
                                 } else {
                                     localPort = this.ports.filter(p => p.connectionPoint === port.connectionPoint)[0];
                                 }
 
                                 port.delegatedPort = localPort;
                                 this._controlledPorts.push(port);
-                                link.isVisible = false;
                             }
                         }
                     } else {
-                        let localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, node, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++)
+                        let localPort = FrameNodePort.CreateFrameNodePortElement(port.connectionPoint, node, this._outputPortContainer, null, this._ownerCanvas.globalState, false, GraphFrame._FramePortCounter++, this.id);
                         this._frameOutPorts.push(localPort);
                         port.delegatedPort = localPort;
                         this._controlledPorts.push(port);
 
-                        localPort.onFramePortMoveUpObservable.add((nodePort: FrameNodePort) => {
-                                this.moveFramePortUp(nodePort);
-                        });
-                
-                        localPort.onFramePortMoveDownObservable.add((nodePort: FrameNodePort) => {
-                                this.moveFramePortDown(nodePort);
-                        });
                     }
                 }
 
@@ -169,25 +149,37 @@ export class GraphFrame {
                 }
             }
 
-            for(let i = 0; i < this._frameInPorts.length; i++) {
-                const port = this._frameInPorts[i];
-                if(i === 0){
-                    port.framePortPosition = FramePortPosition.Top;
-                } else if(i === this._frameInPorts.length -1){
-                    port.framePortPosition = FramePortPosition.Bottom;
-                } else {
-                    port.framePortPosition = FramePortPosition.Middle;
+            // mark FrameInPorts with position
+            if(this._frameInPorts.length == 2){
+                this._frameInPorts[0].framePortPosition = FramePortPosition.Top;
+                this._frameInPorts[1].framePortPosition = FramePortPosition.Bottom;
+            } else {
+                for(let i = 0; i < this._frameInPorts.length; i++) {
+                    const port = this._frameInPorts[i];
+                    if(i === 0){
+                        port.framePortPosition = FramePortPosition.Top;
+                    } else if(i === this._frameInPorts.length -1){
+                        port.framePortPosition = FramePortPosition.Bottom;
+                    } else {
+                        port.framePortPosition = FramePortPosition.Middle;
+                    }
                 }
             }
 
-            for(let i = 0; i < this._frameOutPorts.length; i++) {
-                const port = this._frameOutPorts[i];
-                if(i === 0){
-                    port.framePortPosition = FramePortPosition.Top
-                } else if(i === this._frameInPorts.length -1){
-                    port.framePortPosition = FramePortPosition.Bottom
-                } else {
-                    port.framePortPosition = FramePortPosition.Middle
+            // mark FrameOutPorts with position
+            if(this._frameOutPorts.length == 2){
+                this._frameOutPorts[0].framePortPosition = FramePortPosition.Top;
+                this._frameOutPorts[1].framePortPosition = FramePortPosition.Bottom;
+            } else {
+                for(let i = 0; i < this._frameOutPorts.length; i++) {
+                    const port = this._frameOutPorts[i];
+                    if(i === 0){
+                        port.framePortPosition = FramePortPosition.Top
+                    } else if(i === this._frameInPorts.length -1){
+                        port.framePortPosition = FramePortPosition.Bottom
+                    } else {
+                        port.framePortPosition = FramePortPosition.Middle
+                    }
                 }
             }
 
@@ -617,24 +609,25 @@ export class GraphFrame {
         evt.stopPropagation();
     }
 
-    private moveFramePortUp(nodePort: FrameNodePort){
+    public moveFramePortUp(nodePort: FrameNodePort){
+        let elementsArray: ChildNode[];
         if(nodePort.isInput) {
             if(this._inputPortContainer.children.length < 2) {
                 return;
             }
-            const elementsArray = Array.from(this._inputPortContainer.childNodes);
-            this._movePortUp(elementsArray, nodePort);
+            elementsArray = Array.from(this._inputPortContainer.childNodes);
+            this._movePortUp(elementsArray, nodePort, this._frameInPorts);
         } else {
             if(this._outputPortContainer.children.length < 2) {
                 return;
             }
-            const elementsArray = Array.from(this._outputPortContainer.childNodes);
-            this._movePortUp(elementsArray, nodePort);
+            elementsArray = Array.from(this._outputPortContainer.childNodes);
+            this._movePortUp(elementsArray, nodePort, this._frameOutPorts);
         }
-
+        this.ports.forEach((framePort: FrameNodePort) => framePort.node._refreshLinks());
     }
 
-    private _movePortUp(elementsArray: ChildNode[], nodePort: FrameNodePort) {
+    private _movePortUp(elementsArray: ChildNode[], nodePort: FrameNodePort, framePortList: FrameNodePort[]) {
         // update UI
         const indexInElementArray = (elementsArray as HTMLElement[]).findIndex(elem => elem.dataset.framePortId === `${nodePort.framePortId}`)
         if(indexInElementArray === 0){
@@ -645,34 +638,47 @@ export class GraphFrame {
         firstPortElement.parentElement?.insertBefore(secondPortElement, firstPortElement);
 
         // update Frame Port Container
-        const indexInContainer = this._frameInPorts.findIndex(framePort => framePort === nodePort);
-        [this._frameInPorts[indexInContainer -1], this._frameInPorts[indexInContainer]] = [this._frameInPorts[indexInContainer], this._frameInPorts[indexInContainer -1]]; // swap idicies
+        const indexInContainer = framePortList.findIndex(framePort => framePort === nodePort);
+        [framePortList[indexInContainer -1], framePortList[indexInContainer]] = [framePortList[indexInContainer], framePortList[indexInContainer -1]]; // swap idicies
         
-        // notify nodePort if it is now at Top (indexInElementArray === 1)
-        if (indexInElementArray === 1) {
-            nodePort.onFramePortPositionChangedObservable.notifyObservers(FramePortPosition.Top);
+        //special case framePortList.length == 2
+        if(framePortList.length == 2) {
+            framePortList[1].framePortPosition = FramePortPosition.Bottom;
+            framePortList[0].framePortPosition = FramePortPosition.Top;
         } else {
-            nodePort.onFramePortPositionChangedObservable.notifyObservers(FramePortPosition.Middle);
+            // notify nodePort if it is now at Top (indexInElementArray === 1)
+            if (indexInElementArray === 1) {
+                framePortList[1].framePortPosition = FramePortPosition.Middle;
+                framePortList[0].framePortPosition = FramePortPosition.Top;
+            } else if(indexInContainer === elementsArray.length-1) {
+                framePortList[framePortList.length -1].framePortPosition = FramePortPosition.Bottom;
+                framePortList[framePortList.length -2].framePortPosition = FramePortPosition.Middle;
+            } else {
+                nodePort.framePortPosition = FramePortPosition.Middle;
+            }
         }
     }
     
-    private moveFramePortDown(nodePort: FrameNodePort){
+    public moveFramePortDown(nodePort: FrameNodePort){
+        let elementsArray: ChildNode[];
         if(nodePort.isInput) {
             if(this._inputPortContainer.children.length < 2) {
                 return;
             }
-            const elementsArray = Array.from(this._inputPortContainer.childNodes);
-            this._movePortDown(elementsArray, nodePort);
+            elementsArray = Array.from(this._inputPortContainer.childNodes);
+            this._movePortDown(elementsArray, nodePort, this._frameInPorts);
         } else {
             if(this._outputPortContainer.children.length < 2) {
                 return;
             }
-            const elementsArray = Array.from(this._outputPortContainer.childNodes);
-            this._movePortDown(elementsArray, nodePort);
+            elementsArray = Array.from(this._outputPortContainer.childNodes);
+            this._movePortDown(elementsArray, nodePort, this._frameOutPorts);
         }
+
+        this.ports.forEach((framePort: FrameNodePort) => framePort.node._refreshLinks());
     }
 
-    private _movePortDown(elementsArray: ChildNode[], nodePort: FrameNodePort) {
+    private _movePortDown(elementsArray: ChildNode[], nodePort: FrameNodePort, framePortList: FrameNodePort[]) {
         // update UI
         const indexInElementArray = (elementsArray as HTMLElement[]).findIndex(elem => elem.dataset.framePortId === `${nodePort.framePortId}`)
         if(indexInElementArray === elementsArray.length -1){
@@ -683,16 +689,24 @@ export class GraphFrame {
         firstPort.parentElement?.insertBefore(secondPort, firstPort);
 
         // update Frame Port Container
-        const indexInContainer = this._frameInPorts.findIndex(framePort => framePort === nodePort);
-        [this._frameInPorts[indexInContainer], this._frameInPorts[indexInContainer + 1]] = [this._frameInPorts[indexInContainer + 1], this._frameInPorts[indexInContainer]]; // swap idicies
+        const indexInContainer = framePortList.findIndex(framePort => framePort === nodePort);
+        [framePortList[indexInContainer], framePortList[indexInContainer + 1]] = [framePortList[indexInContainer + 1], framePortList[indexInContainer]]; // swap idicies
 
         // notify nodePort if it is now at bottom (indexInContainer === elementsArray.length-2)
-        if(indexInContainer === elementsArray.length-2) {
-            nodePort.onFramePortPositionChangedObservable.notifyObservers(FramePortPosition.Bottom);
+        if(framePortList.length == 2) {
+            framePortList[0].framePortPosition = FramePortPosition.Top;
+            framePortList[1].framePortPosition = FramePortPosition.Bottom;
         } else {
-            nodePort.onFramePortPositionChangedObservable.notifyObservers(FramePortPosition.Middle);
-        }
-
+            if(indexInContainer === elementsArray.length-2) {
+                framePortList[elementsArray.length-2].framePortPosition = FramePortPosition.Middle;
+                framePortList[elementsArray.length-1].framePortPosition = FramePortPosition.Bottom;
+            } else if(indexInContainer === 0){
+                framePortList[0].framePortPosition = FramePortPosition.Top;
+                framePortList[1].framePortPosition = FramePortPosition.Middle;
+            } else {
+                nodePort.framePortPosition = FramePortPosition.Middle;
+            }
+         }
     }
 
     private initResizing = (evt: PointerEvent) => {

nodeEditor/src/diagram/graphNode.ts

@@ -3,7 +3,7 @@ import { GlobalState } from '../globalState';
 import { Nullable } from 'babylonjs/types';
 import { Observer } from 'babylonjs/Misc/observable';
 import { NodeMaterialConnectionPoint } from 'babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint';
-import { GraphCanvasComponent } from './graphCanvas';
+import { GraphCanvasComponent, FramePortData } from './graphCanvas';
 import { PropertyLedger } from './propertyLedger';
 import * as React from 'react';
 import { GenericPropertyTabComponent } from './properties/genericNodePropertyComponent';
@@ -31,7 +31,7 @@ export class GraphNode {
     private _mouseStartPointX: Nullable<number> = null;
     private _mouseStartPointY: Nullable<number> = null    
     private _globalState: GlobalState;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame | NodePort>>>;   
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;  
     private _onSelectionBoxMovedObserver: Nullable<Observer<ClientRect | DOMRect>>;  
     private _onFrameCreatedObserver: Nullable<Observer<GraphFrame>>; 
     private _onUpdateRequiredObserver: Nullable<Observer<void>>;  

nodeEditor/src/diagram/nodeLink.ts

@@ -1,4 +1,4 @@
-import { GraphCanvasComponent } from './graphCanvas';
+import { GraphCanvasComponent, FramePortData } from './graphCanvas';
 import { GraphNode } from './graphNode';
 import { NodePort } from './nodePort';
 import { Nullable } from 'babylonjs/types';
@@ -14,7 +14,7 @@ export class NodeLink {
     private _nodeB?: GraphNode;
     private _path: SVGPathElement;
     private _selectionPath: SVGPathElement;
-    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame | NodePort>>>;
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;  
     private _isVisible = true;
 
     public onDisposedObservable = new Observable<NodeLink>();

nodeEditor/src/diagram/nodePort.ts

@@ -10,13 +10,14 @@ import { GraphNode } from './graphNode';
 import { NodeLink } from './nodeLink';
 import { GraphFrame } from './graphFrame';
 import { FrameNodePort } from './frameNodePort';
+import { FramePortData } from './graphCanvas';
 
 export class NodePort {
     protected _element: HTMLDivElement;
     protected _img: HTMLImageElement;
     protected _globalState: GlobalState;
     protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
-    protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FrameNodePort>>>;  
+    protected _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | GraphNode | NodeLink | NodePort | FramePortData>>>;  
     
     public delegatedPort: Nullable<FrameNodePort> = null;
 

nodeEditor/src/diagram/properties/frameNodePortPropertyComponent.tsx

@@ -4,56 +4,75 @@ import { LineContainerComponent } from '../../sharedComponents/lineContainerComp
 import { GlobalState } from '../../globalState';
 import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 import { ButtonLineComponent } from '../../sharedComponents/buttonLineComponent';
-import { FramePortPosition } from '../graphFrame';
+import { FramePortPosition, GraphFrame } from '../graphFrame';
 import { Nullable } from 'babylonjs/types';
 import { Observer } from 'babylonjs/Misc/observable';
 import { FrameNodePort } from '../frameNodePort';
+import { NodePort } from '../nodePort';
+import { GraphNode } from '../graphNode';
+import { NodeLink } from '../nodeLink';
+import { FramePortData, isFramePortData } from '../graphCanvas';
 
 export interface IFrameNodePortPropertyTabComponentProps {
     globalState: GlobalState
     frameNodePort: FrameNodePort;
+    frame: GraphFrame;
 }
 
-export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, {framePortPosition: FramePortPosition}> {    
-    private _onFramePortPositionChangedObserver: Nullable<Observer<FramePortPosition>>;
+export class FrameNodePortPropertyTabComponent extends React.Component<IFrameNodePortPropertyTabComponentProps, { port: FrameNodePort }> {
+    private _onFramePortPositionChangedObserver: Nullable<Observer<FrameNodePort>>;
+    private _onSelectionChangedObserver: Nullable<Observer<Nullable<GraphFrame | NodePort | GraphNode | NodeLink | FramePortData>>>;
 
     constructor(props: IFrameNodePortPropertyTabComponentProps) {
         super(props);
         this.state = {
-            framePortPosition: this.props.frameNodePort.framePortPosition
-        };
+            port: this.props.frameNodePort
+        }
 
-        this._onFramePortPositionChangedObserver = this.props.frameNodePort.onFramePortPositionChangedObservable.add((position) => {
-            this.setState({framePortPosition: position})
+        const _this = this;
+        this._onSelectionChangedObserver = this.props.globalState.onSelectionChangedObservable.add((selection) => {
+            if (isFramePortData(selection)) {
+                selection.port.onFramePortPositionChangedObservable.clear();
+                _this._onFramePortPositionChangedObserver = selection.port.onFramePortPositionChangedObservable.add((port: FrameNodePort) => {
+                    _this.setState({ port: port });
+                });
+
+                _this.setState({ port: selection.port });
+            }
+        });
+
+        this._onFramePortPositionChangedObserver = this.props.frameNodePort.onFramePortPositionChangedObservable.add((port: FrameNodePort) => {
+            _this.setState({ port: port });
         });
     }
 
     componentWillUnmount() {
-        this.props.frameNodePort.onFramePortPositionChangedObservable.remove(this._onFramePortPositionChangedObserver)
+        this.props.frameNodePort.onFramePortPositionChangedObservable.remove(this._onFramePortPositionChangedObserver);
+        this.props.globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
     }
 
-    render() {      
+    render() {
         return (
             <div id="propertyTab">
-            <div id="header">
-                <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
-                <div id="title">
-                    NODE MATERIAL EDITOR
+                <div id="header">
+                    <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
+                    <div id="title">
+                        NODE MATERIAL EDITOR
+                </div>
+                </div>
+                <div>
+                    <LineContainerComponent title="GENERAL">
+                        <TextInputLineComponent globalState={this.props.globalState} label="Port Label" propertyName="portLabel" target={this.props.frameNodePort} />
+                        {this.props.frameNodePort.framePortPosition !== FramePortPosition.Top && <ButtonLineComponent label="Move Port Up" onClick={() => {
+                            this.props.frame.moveFramePortUp(this.props.frameNodePort);
+                        }} />}
+
+                        {this.props.frameNodePort.framePortPosition !== FramePortPosition.Bottom && <ButtonLineComponent label="Move Port Down" onClick={() => {
+                            this.props.frame.moveFramePortDown(this.props.frameNodePort);
+                        }} />}
+                    </LineContainerComponent>
                 </div>
             </div>
-            <div>
-                <LineContainerComponent title="GENERAL">
-                    <TextInputLineComponent globalState={this.props.globalState} label="Port Label" propertyName="portLabel" target={this.props.frameNodePort}/>
-                     {this.state.framePortPosition !== FramePortPosition.Top && <ButtonLineComponent label="Move Node Up" onClick={() => {
-                                this.props.frameNodePort.onFramePortMoveUpObservable.notifyObservers(this.props.frameNodePort);
-                            }} />}
-
-                    {this.state.framePortPosition !== FramePortPosition.Bottom && <ButtonLineComponent label="Move Node Down" onClick={() => {
-                                this.props.frameNodePort.onFramePortMoveDownObservable.notifyObservers(this.props.frameNodePort);
-                            }} />}
-                </LineContainerComponent>
-            </div>
-        </div>
         );
     }
 }

nodeEditor/src/globalState.ts

@@ -12,13 +12,14 @@ import { NodePort } from './diagram/nodePort';
 import { NodeLink } from './diagram/nodeLink';
 import { GraphFrame } from './diagram/graphFrame';
 import { FrameNodePort } from './diagram/frameNodePort';
+import { FramePortData } from './diagram/graphCanvas';
 
 export class GlobalState {
     nodeMaterial: NodeMaterial;
     hostElement: HTMLElement;
     hostDocument: HTMLDocument;
     hostWindow: Window;
-    onSelectionChangedObservable = new Observable<Nullable<GraphNode | NodeLink | GraphFrame | NodePort>>();
+    onSelectionChangedObservable = new Observable<Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>>();
     onRebuildRequiredObservable = new Observable<void>();
     onBuiltObservable = new Observable<void>();
     onResetRequiredObservable = new Observable<void>();

src/Lights/Shadows/shadowGenerator.ts

@@ -1074,7 +1074,11 @@ export class ShadowGenerator implements IShadowGenerator {
 
             if (shadowDepthWrapper) {
                 subMesh._effectOverride = effect;
-                material.bindForSubMesh(effectiveMesh.getWorldMatrix(), renderingMesh, subMesh);
+                if (shadowDepthWrapper.standalone) {
+                    shadowDepthWrapper.baseMaterial.bindForSubMesh(effectiveMesh.getWorldMatrix(), renderingMesh, subMesh);
+                } else {
+                    material.bindForSubMesh(effectiveMesh.getWorldMatrix(), renderingMesh, subMesh);
+                }
                 subMesh._effectOverride = null;
             } else {
                 effect.setMatrix("viewProjection", this.getTransformMatrix());

src/Materials/shaderMaterial.ts

@@ -796,7 +796,11 @@ export class ShaderMaterial extends Material {
             }
         }
 
+        const seffect = this._effect;
+
+        this._effect = effect; // make sure the active effect is the right one if there are some observers for onBind that would need to get the current effect
         this._afterBind(mesh);
+        this._effect = seffect;
     }
 
     protected _afterBind(mesh?: Mesh): void {

src/Materials/shadowDepthWrapper.ts

@@ -63,6 +63,16 @@ export class ShadowDepthWrapper {
     /** @hidden */
     public _matriceNames: any;
 
+    /** Gets the standalone status of the wrapper */
+    public get standalone(): boolean {
+        return this._options?.standalone ?? false;
+    }
+
+    /** Gets the base material the wrapper is built upon */
+    public get baseMaterial(): Material {
+        return this._baseMaterial;
+    }
+
     /**
      * Instantiate a new shadow depth wrapper.
      * It works by injecting some specific code in the vertex/fragment shaders of the base material and is used by a shadow generator to
@@ -134,7 +144,7 @@ export class ShadowDepthWrapper {
      * @returns a boolean indicating that the submesh is ready or not
      */
     public isReadyForSubMesh(subMesh: SubMesh, defines: string[], shadowGenerator: ShadowGenerator, useInstances: boolean): boolean {
-        if (this._options?.standalone) {
+        if (this.standalone) {
             // will ensure the effect is (re)created for the base material
             this._baseMaterial.isReadyForSubMesh(subMesh.getMesh(), subMesh, useInstances);
         }
@@ -194,7 +204,7 @@ export class ShadowDepthWrapper {
               fragmentBlockCode = Effect.IncludesShadersStore["shadowMapFragment"];
 
         vertexCode = vertexCode.replace(/void\s+?main/g, Effect.IncludesShadersStore["shadowMapVertexDeclaration"] + "\r\nvoid main");
-        vertexCode = vertexCode.replace(/#define SHADOWDEPTH_NORMALBIAS/g, vertexNormalBiasCode);
+        vertexCode = vertexCode.replace(/#define SHADOWDEPTH_NORMALBIAS|#define CUSTOM_VERTEX_UPDATE_WORLDPOS/g, vertexNormalBiasCode);
 
         if (vertexCode.indexOf("#define SHADOWDEPTH_METRIC") !== -1) {
             vertexCode = vertexCode.replace(/#define SHADOWDEPTH_METRIC/g, vertexMetricCode);
@@ -205,7 +215,7 @@ export class ShadowDepthWrapper {
 
         fragmentCode = fragmentCode.replace(/void\s+?main/g, Effect.IncludesShadersStore["shadowMapFragmentDeclaration"] + "\r\nvoid main");
         if (fragmentCode.indexOf("#define SHADOWDEPTH_FRAGMENT") !== -1) {
-            fragmentCode = vertexCode.replace(/#define SHADOWDEPTH_FRAGMENT/g, fragmentBlockCode);
+            fragmentCode = fragmentCode.replace(/#define SHADOWDEPTH_FRAGMENT/g, fragmentBlockCode);
         } else {
             fragmentCode = fragmentCode.replace(/}\s*$/g, fragmentBlockCode + "\r\n}");
         }

src/Physics/Plugins/cannonJSPlugin.ts

@@ -54,7 +54,7 @@ export class CannonJSPlugin implements IPhysicsEnginePlugin {
     }
 
     public executeStep(delta: number): void {
-        this.world.step(this._fixedTimeStep, this._useDeltaForWorldStep ? delta : 0, 3);
+        this.world.step(this._useDeltaForWorldStep ? delta : this._fixedTimeStep);
         this._removeMarkedPhysicsBodiesFromWorld();
     }
 

src/Physics/Plugins/oimoJSPlugin.ts

@@ -17,8 +17,9 @@ export class OimoJSPlugin implements IPhysicsEnginePlugin {
     public name: string = "OimoJSPlugin";
     public BJSOIMO: any;
     private _raycastResult: PhysicsRaycastResult;
+    private _fixedTimeStep: number = 1 / 60;
 
-    constructor(iterations?: number, oimoInjection = OIMO) {
+    constructor(private _useDeltaForWorldStep: boolean = true, iterations?: number, oimoInjection = OIMO) {
         this.BJSOIMO = oimoInjection;
         this.world = new this.BJSOIMO.World({
             iterations: iterations
@@ -47,6 +48,7 @@ export class OimoJSPlugin implements IPhysicsEnginePlugin {
             impostor.beforeStep();
         });
 
+        this.world.timeStep = this._useDeltaForWorldStep ? delta : this._fixedTimeStep;
         this.world.step();
 
         impostors.forEach((impostor) => {

src/Shaders/ShadersInclude/shadowMapFragment.fx

@@ -20,3 +20,5 @@
 #else
     gl_FragColor = pack(depthSM);
 #endif
+
+    return;

src/XR/webXRExperienceHelper.ts

@@ -101,9 +101,9 @@ export class WebXRExperienceHelper implements IDisposable {
         let sessionCreationOptions: XRSessionInit = {
             optionalFeatures: (referenceSpaceType !== "viewer" && referenceSpaceType !== "local") ? [referenceSpaceType] : []
         };
-        // we currently recommend "local" space in AR
-        if (sessionMode === "immersive-ar" && referenceSpaceType !== "local") {
-            Logger.Warn("We recommend using 'local' reference space type when using 'immersive-ar' session mode");
+        // we currently recommend "unbounded" space in AR (#7959)
+        if (sessionMode === "immersive-ar" && referenceSpaceType !== "unbounded") {
+            Logger.Warn("We recommend using 'unbounded' reference space type when using 'immersive-ar' session mode");
         }
         // make sure that the session mode is supported
         return this.sessionManager.isSessionSupportedAsync(sessionMode).then((supported) => {