Merge pull request #9628 from BabylonJS/master

5.0.0-alpha.5

dist/preview release/babylon.d.ts

@@ -13576,6 +13576,8 @@ declare module BABYLON {
         _outputs: NodeMaterialConnectionPoint[];
         /** @hidden */
         _preparationId: number;
+        /** @hidden */
+        readonly _originalTargetIsNeutral: boolean;
         /**
          * Gets the name of the block
          */

dist/preview release/babylon.max.js

@@ -43342,20 +43342,10 @@ var NativeEngine = /** @class */ (function (_super) {
     };
     NativeEngine.prototype.clear = function (color, backBuffer, depth, stencil) {
         if (stencil === void 0) { stencil = false; }
-        var mode = 0;
-        if (backBuffer && color) {
-            this._native.clearColor(color.r, color.g, color.b, color.a !== undefined ? color.a : 1.0);
-            mode |= this._native.CLEAR_FLAG_COLOR;
-        }
-        if (depth) {
-            this._native.clearDepth(1.0);
-            mode |= this._native.CLEAR_FLAG_DEPTH;
-        }
-        if (stencil) {
-            this._native.clearStencil(0);
-            mode |= this._native.CLEAR_FLAG_STENCIL;
+        if (this.useReverseDepthBuffer) {
+            throw new Error("reverse depth buffer is not currently implemented");
         }
-        this._native.clear(mode);
+        this._native.clear(backBuffer ? color : null, depth ? 1.0 : undefined, stencil ? 0 : undefined);
     };
     NativeEngine.prototype.createIndexBuffer = function (indices, updateable) {
         var data = this._normalizeIndexData(indices);
@@ -45718,12 +45708,7 @@ var ThinEngine = /** @class */ (function () {
             this._currentBufferPointers[i] = new BufferPointer();
         }
         // Shader processor
-        if (this.webGLVersion > 1) {
-            this._shaderProcessor = new _WebGL_webGL2ShaderProcessors__WEBPACK_IMPORTED_MODULE_12__["WebGL2ShaderProcessor"]();
-        }
-        else {
-            this._shaderProcessor = new _WebGL_webGLShaderProcessors__WEBPACK_IMPORTED_MODULE_11__["WebGLShaderProcessor"]();
-        }
+        this._shaderProcessor = this._getShaderProcessor();
         // Detect if we are running on a faulty buggy OS.
         this._badOS = /iPad/i.test(navigator.userAgent) || /iPhone/i.test(navigator.userAgent);
         // Starting with iOS 14, we can trust the browser
@@ -45744,7 +45729,7 @@ var ThinEngine = /** @class */ (function () {
          */
         // Not mixed with Version for tooling purpose.
         get: function () {
-            return "babylonjs@5.0.0-alpha.4";
+            return "babylonjs@5.0.0-alpha.5";
         },
         enumerable: false,
         configurable: true
@@ -45754,7 +45739,7 @@ var ThinEngine = /** @class */ (function () {
          * Returns the current version of the framework
          */
         get: function () {
-            return "5.0.0-alpha.4";
+            return "5.0.0-alpha.5";
         },
         enumerable: false,
         configurable: true
@@ -45986,18 +45971,13 @@ var ThinEngine = /** @class */ (function () {
      */
     ThinEngine.prototype._sharedInit = function (canvas, doNotHandleTouchAction, audioEngine) {
         this._renderingCanvas = canvas;
-        // Shader processor
-        this._shaderProcessor = this._getShaderProcessor();
     };
     /**
      * Gets a shader processor implementation fitting with the current engine type.
      * @returns The shader processor implementation.
      */
     ThinEngine.prototype._getShaderProcessor = function () {
-        if (this.webGLVersion > 1) {
-            return new _WebGL_webGL2ShaderProcessors__WEBPACK_IMPORTED_MODULE_12__["WebGL2ShaderProcessor"]();
-        }
-        return null;
+        return (this.webGLVersion > 1 ? new _WebGL_webGL2ShaderProcessors__WEBPACK_IMPORTED_MODULE_12__["WebGL2ShaderProcessor"]() : new _WebGL_webGLShaderProcessors__WEBPACK_IMPORTED_MODULE_11__["WebGLShaderProcessor"]());
     };
     /** @hidden */
     ThinEngine.prototype._getShaderProcessingContext = function () {
@@ -91629,6 +91609,7 @@ var NodeMaterialBlock = /** @class */ (function () {
         /** Gets or sets a boolean indicating that this input can be edited from a collapsed frame*/
         this.visibleOnFrame = false;
         this._target = target;
+        this._originalTargetIsNeutral = target === _Enums_nodeMaterialBlockTargets__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockTargets"].Neutral;
         this._isFinalMerger = isFinalMerger;
         this._isInput = isInput;
         this._name = name;
@@ -92226,6 +92207,7 @@ var NodeMaterialBlock = /** @class */ (function () {
         serializationObject.comments = this.comments;
         serializationObject.visibleInInspector = this.visibleInInspector;
         serializationObject.visibleOnFrame = this.visibleOnFrame;
+        serializationObject.target = this.target;
         serializationObject.inputs = [];
         serializationObject.outputs = [];
         for (var _i = 0, _a = this.inputs; _i < _a.length; _i++) {
@@ -92240,10 +92222,12 @@ var NodeMaterialBlock = /** @class */ (function () {
     };
     /** @hidden */
     NodeMaterialBlock.prototype._deserialize = function (serializationObject, scene, rootUrl) {
+        var _a;
         this.name = serializationObject.name;
         this.comments = serializationObject.comments;
         this.visibleInInspector = !!serializationObject.visibleInInspector;
         this.visibleOnFrame = !!serializationObject.visibleOnFrame;
+        this._target = (_a = serializationObject.target) !== null && _a !== void 0 ? _a : this.target;
         this._deserializePortDisplayNamesAndExposedOnFrame(serializationObject);
     };
     NodeMaterialBlock.prototype._deserializePortDisplayNamesAndExposedOnFrame = function (serializationObject) {
@@ -202600,6 +202584,10 @@ var WebXRControllerPointerSelection = /** @class */ (function (_super) {
         discMesh.parent = controllerData.selectionMesh;
         var timer = 0;
         var downTriggered = false;
+        var pointerEventInit = {
+            pointerId: controllerData.id,
+            pointerType: "xr",
+        };
         controllerData.onFrameObserver = this._xrSessionManager.onXRFrameObservable.add(function () {
             if (!controllerData.pick) {
                 return;
@@ -202613,11 +202601,11 @@ var WebXRControllerPointerSelection = /** @class */ (function (_super) {
                     }
                     timer += _this._scene.getEngine().getDeltaTime();
                     if (timer >= timeToSelect) {
-                        _this._scene.simulatePointerDown(controllerData.pick, { pointerId: controllerData.id });
+                        _this._scene.simulatePointerDown(controllerData.pick, pointerEventInit);
                         downTriggered = true;
                         // pointer up right after down, if disable on touch out
                         if (_this._options.disablePointerUpOnTouchOut) {
-                            _this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                            _this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                         }
                         discMesh.isVisible = false;
                     }
@@ -202629,7 +202617,7 @@ var WebXRControllerPointerSelection = /** @class */ (function (_super) {
                 else {
                     if (downTriggered) {
                         if (!_this._options.disablePointerUpOnTouchOut) {
-                            _this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                            _this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                         }
                     }
                     downTriggered = false;
@@ -202640,7 +202628,7 @@ var WebXRControllerPointerSelection = /** @class */ (function (_super) {
                 downTriggered = false;
                 timer = 0;
             }
-            _this._scene.simulatePointerMove(controllerData.pick, { pointerId: controllerData.id });
+            _this._scene.simulatePointerMove(controllerData.pick, pointerEventInit);
             oldPick = controllerData.pick;
         });
         if (this._options.renderingGroupId !== undefined) {
@@ -202649,7 +202637,7 @@ var WebXRControllerPointerSelection = /** @class */ (function (_super) {
         if (xrController) {
             xrController.onDisposeObservable.addOnce(function () {
                 if (controllerData.pick && !_this._options.disablePointerUpOnTouchOut && downTriggered) {
-                    _this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                    _this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                 }
                 discMesh.dispose();
             });
@@ -202659,24 +202647,28 @@ var WebXRControllerPointerSelection = /** @class */ (function (_super) {
         var _this = this;
         var controllerData = this._controllers[xrController.uniqueId];
         var downTriggered = false;
+        var pointerEventInit = {
+            pointerId: controllerData.id,
+            pointerType: "xr",
+        };
         controllerData.onFrameObserver = this._xrSessionManager.onXRFrameObservable.add(function () {
             if (!controllerData.pick || (_this._options.disablePointerUpOnTouchOut && downTriggered)) {
                 return;
             }
             if (!downTriggered) {
-                _this._scene.simulatePointerDown(controllerData.pick, { pointerId: controllerData.id });
+                _this._scene.simulatePointerDown(controllerData.pick, pointerEventInit);
                 downTriggered = true;
                 if (_this._options.disablePointerUpOnTouchOut) {
-                    _this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                    _this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                 }
             }
             else {
-                _this._scene.simulatePointerMove(controllerData.pick, { pointerId: controllerData.id });
+                _this._scene.simulatePointerMove(controllerData.pick, pointerEventInit);
             }
         });
         xrController.onDisposeObservable.addOnce(function () {
             if (controllerData.pick && downTriggered && !_this._options.disablePointerUpOnTouchOut) {
-                _this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                _this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
             }
         });
     };
@@ -202686,11 +202678,15 @@ var WebXRControllerPointerSelection = /** @class */ (function (_super) {
         if (this._options.forceGazeMode) {
             return this._attachGazeMode(xrController);
         }
+        var pointerEventInit = {
+            pointerId: controllerData.id,
+            pointerType: "xr",
+        };
         controllerData.onFrameObserver = this._xrSessionManager.onXRFrameObservable.add(function () {
             controllerData.laserPointer.material.disableLighting = _this.disablePointerLighting;
             controllerData.selectionMesh.material.disableLighting = _this.disableSelectionMeshLighting;
             if (controllerData.pick) {
-                _this._scene.simulatePointerMove(controllerData.pick, { pointerId: controllerData.id });
+                _this._scene.simulatePointerMove(controllerData.pick, pointerEventInit);
             }
         });
         if (xrController.inputSource.gamepad) {
@@ -202707,12 +202703,12 @@ var WebXRControllerPointerSelection = /** @class */ (function (_super) {
                         if (controllerData.pick) {
                             if (_this._options.enablePointerSelectionOnAllControllers || xrController.uniqueId === _this._attachedController) {
                                 if (pressed) {
-                                    _this._scene.simulatePointerDown(controllerData.pick, { pointerId: controllerData.id });
+                                    _this._scene.simulatePointerDown(controllerData.pick, pointerEventInit);
                                     controllerData.selectionMesh.material.emissiveColor = _this.selectionMeshPickedColor;
                                     controllerData.laserPointer.material.emissiveColor = _this.laserPointerPickedColor;
                                 }
                                 else {
-                                    _this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                                    _this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                                     controllerData.selectionMesh.material.emissiveColor = _this.selectionMeshDefaultColor;
                                     controllerData.laserPointer.material.emissiveColor = _this.laserPointerDefaultColor;
                                 }
@@ -202739,14 +202735,14 @@ var WebXRControllerPointerSelection = /** @class */ (function (_super) {
             // use the select and squeeze events
             var selectStartListener = function (event) {
                 if (controllerData.xrController && event.inputSource === controllerData.xrController.inputSource && controllerData.pick) {
-                    _this._scene.simulatePointerDown(controllerData.pick, { pointerId: controllerData.id });
+                    _this._scene.simulatePointerDown(controllerData.pick, pointerEventInit);
                     controllerData.selectionMesh.material.emissiveColor = _this.selectionMeshPickedColor;
                     controllerData.laserPointer.material.emissiveColor = _this.laserPointerPickedColor;
                 }
             };
             var selectEndListener = function (event) {
                 if (controllerData.xrController && event.inputSource === controllerData.xrController.inputSource && controllerData.pick) {
-                    _this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                    _this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                     controllerData.selectionMesh.material.emissiveColor = _this.selectionMeshDefaultColor;
                     controllerData.laserPointer.material.emissiveColor = _this.laserPointerDefaultColor;
                 }

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

@@ -13903,6 +13903,8 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlock" {
         _outputs: NodeMaterialConnectionPoint[];
         /** @hidden */
         _preparationId: number;
+        /** @hidden */
+        readonly _originalTargetIsNeutral: boolean;
         /**
          * Gets the name of the block
          */
@@ -98485,6 +98487,8 @@ declare module BABYLON {
         _outputs: NodeMaterialConnectionPoint[];
         /** @hidden */
         _preparationId: number;
+        /** @hidden */
+        readonly _originalTargetIsNeutral: boolean;
         /**
          * Gets the name of the block
          */

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.4"
+        "babylonjs": "5.0.0-alpha.5"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.4",
-        "babylonjs-gui": "5.0.0-alpha.4",
-        "babylonjs-loaders": "5.0.0-alpha.4",
-        "babylonjs-materials": "5.0.0-alpha.4",
-        "babylonjs-serializers": "5.0.0-alpha.4",
-        "babylonjs-gltf2interface": "5.0.0-alpha.4"
+        "babylonjs": "5.0.0-alpha.5",
+        "babylonjs-gui": "5.0.0-alpha.5",
+        "babylonjs-loaders": "5.0.0-alpha.5",
+        "babylonjs-materials": "5.0.0-alpha.5",
+        "babylonjs-serializers": "5.0.0-alpha.5",
+        "babylonjs-gltf2interface": "5.0.0-alpha.5"
     },
     "peerDependencies": {
         "@types/react": ">=16.7.3",

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "5.0.0-alpha.4",
-        "babylonjs": "5.0.0-alpha.4"
+        "babylonjs-gltf2interface": "5.0.0-alpha.5",
+        "babylonjs": "5.0.0-alpha.5"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.4"
+        "babylonjs": "5.0.0-alpha.5"
     },
     "engines": {
         "node": "*"

dist/preview release/nodeEditor/babylon.nodeEditor.max.js

@@ -61363,14 +61363,13 @@ var GeneralPropertyTabComponent = /** @class */ (function (_super) {
                             }
                             return true;
                         } }),
-                (this.props.block.target === babylonjs_Materials_Node_nodeMaterialDecorator__WEBPACK_IMPORTED_MODULE_10__["NodeMaterialBlockTargets"].Neutral || this.props.block._modifiedTarget) &&
+                (this.props.block._originalTargetIsNeutral) &&
                     react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__["OptionsLineComponent"], { label: "Target", options: targetOptions, target: this.props.block, propertyName: "target", onSelect: function (value) {
-                            _this.props.block._modifiedTarget = true;
                             _this.forceUpdate();
                             _this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                             _this.props.globalState.onRebuildRequiredObservable.notifyObservers();
                         } }),
-                (this.props.block.target !== babylonjs_Materials_Node_nodeMaterialDecorator__WEBPACK_IMPORTED_MODULE_10__["NodeMaterialBlockTargets"].Neutral && !this.props.block._modifiedTarget) &&
+                (!this.props.block._originalTargetIsNeutral) &&
                     react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Type", value: babylonjs_Materials_Node_nodeMaterialDecorator__WEBPACK_IMPORTED_MODULE_10__["NodeMaterialBlockTargets"][this.props.block.target] }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Type", value: this.props.block.getClassName() }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { globalState: this.props.globalState, label: "Comments", propertyName: "comments", target: this.props.block, onChange: function () { return _this.props.globalState.onUpdateRequiredObservable.notifyObservers(); } }))));

dist/preview release/nodeEditor/package.json

@@ -4,14 +4,14 @@
     },
     "name": "babylonjs-node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.4"
+        "babylonjs": "5.0.0-alpha.5"
     },
     "files": [
         "babylon.nodeEditor.max.js.map",

dist/preview release/package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.4"
+        "babylonjs": "5.0.0-alpha.5"
     },
     "engines": {
         "node": "*"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.4"
+        "babylonjs": "5.0.0-alpha.5"
     },
     "engines": {
         "node": "*"

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.4",
-        "babylonjs-gltf2interface": "5.0.0-alpha.4"
+        "babylonjs": "5.0.0-alpha.5",
+        "babylonjs-gltf2interface": "5.0.0-alpha.5"
     },
     "engines": {
         "node": "*"

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

@@ -13903,6 +13903,8 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlock" {
         _outputs: NodeMaterialConnectionPoint[];
         /** @hidden */
         _preparationId: number;
+        /** @hidden */
+        readonly _originalTargetIsNeutral: boolean;
         /**
          * Gets the name of the block
          */
@@ -98485,6 +98487,8 @@ declare module BABYLON {
         _outputs: NodeMaterialConnectionPoint[];
         /** @hidden */
         _preparationId: number;
+        /** @hidden */
+        readonly _originalTargetIsNeutral: boolean;
         /**
          * Gets the name of the block
          */

dist/preview release/what's new.md

@@ -56,6 +56,7 @@
 - A browser error preventing the emulator to render scene is now correctly dealt with ([RaananW](https://github.com/RaananW))
 - Added a way to extend the XRSessionInit Object from inside of a feature ([RaananW](https://github.com/RaananW))
 - Added image tracking feature ([RaananW](https://github.com/RaananW))
+- Pointer Events of WebXR controllers have pointerType `xr` ([RaananW](https://github.com/RaananW))
 
 ## Bugs
 

nodeEditor/src/diagram/properties/genericNodePropertyComponent.tsx

@@ -57,9 +57,8 @@ export class GeneralPropertyTabComponent extends React.Component<IPropertyCompon
                             }} />
                     }
                     {
-                        (this.props.block.target === NodeMaterialBlockTargets.Neutral || (this.props.block as any)._modifiedTarget) &&
+                        (this.props.block._originalTargetIsNeutral) &&
                         <OptionsLineComponent label="Target" options={targetOptions} target={this.props.block} propertyName="target" onSelect={(value: any) => {
-                            (this.props.block as any)._modifiedTarget = true;
                             this.forceUpdate();
 
                             this.props.globalState.onUpdateRequiredObservable.notifyObservers();
@@ -67,7 +66,7 @@ export class GeneralPropertyTabComponent extends React.Component<IPropertyCompon
                         }} />
                     }
                     {
-                        (this.props.block.target !== NodeMaterialBlockTargets.Neutral && !(this.props.block as any)._modifiedTarget) &&
+                        (!this.props.block._originalTargetIsNeutral) &&
                         <TextLineComponent label="Type" value={NodeMaterialBlockTargets[this.props.block.target]} />
                     }
                     <TextLineComponent label="Type" value={this.props.block.getClassName()} />

package.json

@@ -7,7 +7,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

src/Engines/nativeEngine.ts

@@ -50,10 +50,6 @@ interface INativeEngine {
     readonly DEPTH_TEST_NEVER: number;
     readonly DEPTH_TEST_ALWAYS: number;
 
-    readonly CLEAR_FLAG_COLOR: number;
-    readonly CLEAR_FLAG_DEPTH: number;
-    readonly CLEAR_FLAG_STENCIL: number;
-
     readonly ADDRESS_MODE_WRAP: number;
     readonly ADDRESS_MODE_MIRROR: number;
     readonly ADDRESS_MODE_CLAMP: number;
@@ -155,10 +151,7 @@ interface INativeEngine {
     drawIndexed(fillMode: number, indexStart: number, indexCount: number): void;
     draw(fillMode: number, vertexStart: number, vertexCount: number): void;
 
-    clear(flags: number): void;
-    clearColor(r: number, g: number, b: number, a: number): void;
-    clearDepth(depth: number): void;
-    clearStencil(stencil: number): void;
+    clear(color: Nullable<IColor4Like>, depth?: number, stencil?: number): void;
 
     getRenderWidth(): number;
     getRenderHeight(): number;
@@ -909,20 +902,11 @@ export class NativeEngine extends Engine {
     }
 
     public clear(color: Nullable<IColor4Like>, backBuffer: boolean, depth: boolean, stencil: boolean = false): void {
-        var mode = 0;
-        if (backBuffer && color) {
-            this._native.clearColor(color.r, color.g, color.b, color.a !== undefined ? color.a : 1.0);
-            mode |= this._native.CLEAR_FLAG_COLOR;
-        }
-        if (depth) {
-            this._native.clearDepth(1.0);
-            mode |= this._native.CLEAR_FLAG_DEPTH;
+        if (this.useReverseDepthBuffer) {
+            throw new Error("reverse depth buffer is not currently implemented");
         }
-        if (stencil) {
-            this._native.clearStencil(0);
-            mode |= this._native.CLEAR_FLAG_STENCIL;
-        }
-        this._native.clear(mode);
+
+        this._native.clear(backBuffer ? color : null, depth ? 1.0 : undefined, stencil ? 0 : undefined);
     }
 
     public createIndexBuffer(indices: IndicesArray, updateable?: boolean): NativeDataBuffer {

src/Engines/thinEngine.ts

@@ -167,14 +167,14 @@ export class ThinEngine {
      */
     // Not mixed with Version for tooling purpose.
     public static get NpmPackage(): string {
-        return "babylonjs@5.0.0-alpha.4";
+        return "babylonjs@5.0.0-alpha.5";
     }
 
     /**
      * Returns the current version of the framework
      */
     public static get Version(): string {
-        return "5.0.0-alpha.4";
+        return "5.0.0-alpha.5";
     }
 
     /**
@@ -761,11 +761,7 @@ export class ThinEngine {
         }
 
         // Shader processor
-        if (this.webGLVersion > 1) {
-            this._shaderProcessor = new WebGL2ShaderProcessor();
-        } else {
-            this._shaderProcessor = new WebGLShaderProcessor();
-        }
+        this._shaderProcessor = this._getShaderProcessor();
 
         // Detect if we are running on a faulty buggy OS.
         this._badOS = /iPad/i.test(navigator.userAgent) || /iPhone/i.test(navigator.userAgent);
@@ -812,9 +808,6 @@ export class ThinEngine {
      */
     protected _sharedInit(canvas: HTMLCanvasElement, doNotHandleTouchAction: boolean, audioEngine: boolean) {
         this._renderingCanvas = canvas;
-
-        // Shader processor
-        this._shaderProcessor = this._getShaderProcessor();
     }
 
     /**
@@ -822,10 +815,7 @@ export class ThinEngine {
      * @returns The shader processor implementation.
      */
     protected _getShaderProcessor(): Nullable<IShaderProcessor> {
-        if (this.webGLVersion > 1) {
-            return new WebGL2ShaderProcessor();
-        }
-        return null;
+        return (this.webGLVersion > 1 ? new WebGL2ShaderProcessor() : new WebGLShaderProcessor());
     }
 
     /** @hidden */

src/Materials/Node/nodeMaterialBlock.ts

@@ -40,6 +40,9 @@ export class NodeMaterialBlock {
     /** @hidden */
     public _preparationId: number;
 
+    /** @hidden */
+    public readonly _originalTargetIsNeutral: boolean;
+
     /**
      * Gets the name of the block
      */
@@ -172,6 +175,7 @@ export class NodeMaterialBlock {
     public constructor(name: string, target = NodeMaterialBlockTargets.Vertex, isFinalMerger = false, isInput = false) {
 
         this._target = target;
+        this._originalTargetIsNeutral = target === NodeMaterialBlockTargets.Neutral;
         this._isFinalMerger = isFinalMerger;
         this._isInput = isInput;
         this._name = name;
@@ -716,6 +720,7 @@ export class NodeMaterialBlock {
         serializationObject.comments = this.comments;
         serializationObject.visibleInInspector = this.visibleInInspector;
         serializationObject.visibleOnFrame = this.visibleOnFrame;
+        serializationObject.target = this.target;
 
         serializationObject.inputs = [];
         serializationObject.outputs = [];
@@ -737,6 +742,7 @@ export class NodeMaterialBlock {
         this.comments = serializationObject.comments;
         this.visibleInInspector = !!serializationObject.visibleInInspector;
         this.visibleOnFrame = !!serializationObject.visibleOnFrame;
+        this._target = serializationObject.target ?? this.target;
         this._deserializePortDisplayNamesAndExposedOnFrame(serializationObject);
     }
 

src/XR/features/WebXRControllerPointerSelection.ts

@@ -420,6 +420,10 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
         discMesh.parent = controllerData.selectionMesh;
         let timer = 0;
         let downTriggered = false;
+        const pointerEventInit: PointerEventInit = {
+            pointerId: controllerData.id,
+            pointerType: "xr",
+        };
         controllerData.onFrameObserver = this._xrSessionManager.onXRFrameObservable.add(() => {
             if (!controllerData.pick) {
                 return;
@@ -434,11 +438,11 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
 
                     timer += this._scene.getEngine().getDeltaTime();
                     if (timer >= timeToSelect) {
-                        this._scene.simulatePointerDown(controllerData.pick, { pointerId: controllerData.id });
+                        this._scene.simulatePointerDown(controllerData.pick, pointerEventInit);
                         downTriggered = true;
                         // pointer up right after down, if disable on touch out
                         if (this._options.disablePointerUpOnTouchOut) {
-                            this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                            this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                         }
                         discMesh.isVisible = false;
                     } else {
@@ -448,7 +452,7 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
                 } else {
                     if (downTriggered) {
                         if (!this._options.disablePointerUpOnTouchOut) {
-                            this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                            this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                         }
                     }
                     downTriggered = false;
@@ -459,7 +463,7 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
                 timer = 0;
             }
 
-            this._scene.simulatePointerMove(controllerData.pick, { pointerId: controllerData.id });
+            this._scene.simulatePointerMove(controllerData.pick, pointerEventInit);
 
             oldPick = controllerData.pick;
         });
@@ -470,7 +474,7 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
         if (xrController) {
             xrController.onDisposeObservable.addOnce(() => {
                 if (controllerData.pick && !this._options.disablePointerUpOnTouchOut && downTriggered) {
-                    this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                    this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                 }
                 discMesh.dispose();
             });
@@ -480,23 +484,27 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
     private _attachScreenRayMode(xrController: WebXRInputSource) {
         const controllerData = this._controllers[xrController.uniqueId];
         let downTriggered = false;
+        const pointerEventInit: PointerEventInit = {
+            pointerId: controllerData.id,
+            pointerType: "xr",
+        };
         controllerData.onFrameObserver = this._xrSessionManager.onXRFrameObservable.add(() => {
             if (!controllerData.pick || (this._options.disablePointerUpOnTouchOut && downTriggered)) {
                 return;
             }
             if (!downTriggered) {
-                this._scene.simulatePointerDown(controllerData.pick, { pointerId: controllerData.id });
+                this._scene.simulatePointerDown(controllerData.pick, pointerEventInit);
                 downTriggered = true;
                 if (this._options.disablePointerUpOnTouchOut) {
-                    this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                    this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                 }
             } else {
-                this._scene.simulatePointerMove(controllerData.pick, { pointerId: controllerData.id });
+                this._scene.simulatePointerMove(controllerData.pick, pointerEventInit);
             }
         });
         xrController.onDisposeObservable.addOnce(() => {
             if (controllerData.pick && downTriggered && !this._options.disablePointerUpOnTouchOut) {
-                this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
             }
         });
     }
@@ -506,12 +514,16 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
         if (this._options.forceGazeMode) {
             return this._attachGazeMode(xrController);
         }
+        const pointerEventInit: PointerEventInit = {
+            pointerId: controllerData.id,
+            pointerType: "xr",
+        };
         controllerData.onFrameObserver = this._xrSessionManager.onXRFrameObservable.add(() => {
             (<StandardMaterial>controllerData.laserPointer.material).disableLighting = this.disablePointerLighting;
             (<StandardMaterial>controllerData.selectionMesh.material).disableLighting = this.disableSelectionMeshLighting;
 
             if (controllerData.pick) {
-                this._scene.simulatePointerMove(controllerData.pick, { pointerId: controllerData.id });
+                this._scene.simulatePointerMove(controllerData.pick, pointerEventInit);
             }
         });
         if (xrController.inputSource.gamepad) {
@@ -529,11 +541,11 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
                         if (controllerData.pick) {
                             if (this._options.enablePointerSelectionOnAllControllers || xrController.uniqueId === this._attachedController) {
                                 if (pressed) {
-                                    this._scene.simulatePointerDown(controllerData.pick, { pointerId: controllerData.id });
+                                    this._scene.simulatePointerDown(controllerData.pick, pointerEventInit);
                                     (<StandardMaterial>controllerData.selectionMesh.material).emissiveColor = this.selectionMeshPickedColor;
                                     (<StandardMaterial>controllerData.laserPointer.material).emissiveColor = this.laserPointerPickedColor;
                                 } else {
-                                    this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                                    this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                                     (<StandardMaterial>controllerData.selectionMesh.material).emissiveColor = this.selectionMeshDefaultColor;
                                     (<StandardMaterial>controllerData.laserPointer.material).emissiveColor = this.laserPointerDefaultColor;
                                 }
@@ -556,7 +568,7 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
             // use the select and squeeze events
             const selectStartListener = (event: XRInputSourceEvent) => {
                 if (controllerData.xrController && event.inputSource === controllerData.xrController.inputSource && controllerData.pick) {
-                    this._scene.simulatePointerDown(controllerData.pick, { pointerId: controllerData.id });
+                    this._scene.simulatePointerDown(controllerData.pick, pointerEventInit);
                     (<StandardMaterial>controllerData.selectionMesh.material).emissiveColor = this.selectionMeshPickedColor;
                     (<StandardMaterial>controllerData.laserPointer.material).emissiveColor = this.laserPointerPickedColor;
                 }
@@ -564,7 +576,7 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
 
             const selectEndListener = (event: XRInputSourceEvent) => {
                 if (controllerData.xrController && event.inputSource === controllerData.xrController.inputSource && controllerData.pick) {
-                    this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
+                    this._scene.simulatePointerUp(controllerData.pick, pointerEventInit);
                     (<StandardMaterial>controllerData.selectionMesh.material).emissiveColor = this.selectionMeshDefaultColor;
                     (<StandardMaterial>controllerData.laserPointer.material).emissiveColor = this.laserPointerDefaultColor;
                 }