Merge pull request #7929 from BabylonJS/master

Nightly

Playground/js/main.js

@@ -72,7 +72,7 @@ compileAndRun = function (parent, fpsLabel) {
                 });
             }
 
-            var zipVariables = "var engine = null;\r\nvar scene = null;\r\n";
+            var zipVariables = "var engine = null;\r\nvar scene = null;\r\nvar sceneToRender = null;\r\n";
             var defaultEngineZip = "var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); }";
 
             if (code.indexOf("createEngine") !== -1) {
@@ -125,11 +125,14 @@ compileAndRun = function (parent, fpsLabel) {
                     return;
                 }
 
+                let sceneToRenderCode = 'sceneToRender = scene';
+
                 // if scene returns a promise avoid checks
                 if (scene.then) {
                     checkCamera = false;
                     checkSceneCount = false;
-                }
+                    sceneToRenderCode = 'scene.then(returnedScene => { sceneToRender = returnedScene; });\r\n';
+                } 
 
                 var createEngineZip = (createEngineFunction === "createEngine") ?
                     zipVariables :
@@ -137,7 +140,8 @@ compileAndRun = function (parent, fpsLabel) {
 
                 parent.zipTool.zipCode =
                     createEngineZip + ";\r\n" +
-                    code;
+                    code + ";\r\n" +
+                    sceneToRenderCode;
             }
 
             engine = engine;

Playground/js/zipTool.js

@@ -165,7 +165,7 @@ class ZipTool {
 
         this.addContentToZip(zip,
             "index.html",
-            "zipContent/index.html",
+            "/zipContent/index.html",
             this.zipCode,
             false,
             function () {

Playground/zipContent/index.html

@@ -46,8 +46,8 @@
 ####INJECT####
 
         engine.runRenderLoop(function () {
-            if (scene) {
-                scene.render();
+            if (sceneToRender) {
+                sceneToRender.render();
             }
         });
 

dist/preview release/babylon.d.ts

@@ -285,6 +285,11 @@ declare module BABYLON {
          */
         static IsNavigatorAvailable(): boolean;
         /**
+         * Check if the document object exists
+         * @returns true if the document object exists
+         */
+        static IsDocumentAvailable(): boolean;
+        /**
          * Extracts text content from a DOM element hierarchy
          * @param element defines the root element
          * @returns a string

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

@@ -286,6 +286,11 @@ declare module "babylonjs/Misc/domManagement" {
          */
         static IsNavigatorAvailable(): boolean;
         /**
+         * Check if the document object exists
+         * @returns true if the document object exists
+         */
+        static IsDocumentAvailable(): boolean;
+        /**
          * Extracts text content from a DOM element hierarchy
          * @param element defines the root element
          * @returns a string
@@ -74562,6 +74567,11 @@ declare module BABYLON {
          */
         static IsNavigatorAvailable(): boolean;
         /**
+         * Check if the document object exists
+         * @returns true if the document object exists
+         */
+        static IsDocumentAvailable(): boolean;
+        /**
          * Extracts text content from a DOM element hierarchy
          * @param element defines the root element
          * @returns a string

dist/preview release/documentation.d.ts

@@ -285,6 +285,11 @@ declare module BABYLON {
          */
         static IsNavigatorAvailable(): boolean;
         /**
+         * Check if the document object exists
+         * @returns true if the document object exists
+         */
+        static IsDocumentAvailable(): boolean;
+        /**
          * Extracts text content from a DOM element hierarchy
          * @param element defines the root element
          * @returns a string

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

@@ -286,6 +286,11 @@ declare module "babylonjs/Misc/domManagement" {
          */
         static IsNavigatorAvailable(): boolean;
         /**
+         * Check if the document object exists
+         * @returns true if the document object exists
+         */
+        static IsDocumentAvailable(): boolean;
+        /**
          * Extracts text content from a DOM element hierarchy
          * @param element defines the root element
          * @returns a string
@@ -74562,6 +74567,11 @@ declare module BABYLON {
          */
         static IsNavigatorAvailable(): boolean;
         /**
+         * Check if the document object exists
+         * @returns true if the document object exists
+         */
+        static IsDocumentAvailable(): boolean;
+        /**
          * Extracts text content from a DOM element hierarchy
          * @param element defines the root element
          * @returns a string

dist/preview release/what's new.md

@@ -65,6 +65,7 @@
 - Added optional ray and mesh selection predicates to `WebXRControllerPointerSelection` ([Exolun](https://github.com/Exolun))
 - 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))
 
 ### Collisions
 
@@ -102,6 +103,8 @@
 - Fix `CustomMaterial` and `PBRCustomMaterial` not setting uniforms / samplers / attributes ([Popov72](https://github.com/Popov72)
 - Fix bug in NME where deleting a node from a frame would not remove its ports on the outside of a frame
 - Fix mesh winding order inversion when merging meshes with overridden side orientation ([drigax](https://github.com/Drigax))
+- Fixed a rendering issue with GearVR in WebXR mode ([RaananW](https://github.com/RaananW))
+- Fixed error when downloading async createScene function in playground ([#7926](https://github.com/BabylonJS/Babylon.js/issues/7926)) ([RaananW](https://github.com/RaananW))
 
 ## Breaking changes
 

nodeEditor/src/diagram/graphCanvas.scss

@@ -33,8 +33,7 @@
         }
 
         img.selected {
-            margin: 3px 1px 0 4px;
-            box-shadow: 0 0 0 4px;
+            box-shadow: 0 0 0 2px;
             border-radius: 50%;
         }
         

nodeEditor/src/diagram/graphFrame.ts

@@ -181,7 +181,7 @@ export class GraphFrame {
             }
 
             for(let i = 0; i < this._frameOutPorts.length; i++) {
-                const port = this._frameInPorts[i];
+                const port = this._frameOutPorts[i];
                 if(i === 0){
                     port.framePortPosition = FramePortPosition.Top
                 } else if(i === this._frameInPorts.length -1){

src/Engines/engine.ts

@@ -1885,19 +1885,23 @@ export class Engine extends ThinEngine {
         if (DomManagement.IsWindowObjectExist()) {
             window.removeEventListener("blur", this._onBlur);
             window.removeEventListener("focus", this._onFocus);
+
             if (this._renderingCanvas) {
                 this._renderingCanvas.removeEventListener("focus", this._onCanvasFocus);
                 this._renderingCanvas.removeEventListener("blur", this._onCanvasBlur);
                 this._renderingCanvas.removeEventListener("pointerout", this._onCanvasPointerOut);
             }
-            document.removeEventListener("fullscreenchange", this._onFullscreenChange);
-            document.removeEventListener("mozfullscreenchange", this._onFullscreenChange);
-            document.removeEventListener("webkitfullscreenchange", this._onFullscreenChange);
-            document.removeEventListener("msfullscreenchange", this._onFullscreenChange);
-            document.removeEventListener("pointerlockchange", this._onPointerLockChange);
-            document.removeEventListener("mspointerlockchange", this._onPointerLockChange);
-            document.removeEventListener("mozpointerlockchange", this._onPointerLockChange);
-            document.removeEventListener("webkitpointerlockchange", this._onPointerLockChange);
+
+            if (DomManagement.IsDocumentAvailable()) {
+                document.removeEventListener("fullscreenchange", this._onFullscreenChange);
+                document.removeEventListener("mozfullscreenchange", this._onFullscreenChange);
+                document.removeEventListener("webkitfullscreenchange", this._onFullscreenChange);
+                document.removeEventListener("msfullscreenchange", this._onFullscreenChange);
+                document.removeEventListener("pointerlockchange", this._onPointerLockChange);
+                document.removeEventListener("mspointerlockchange", this._onPointerLockChange);
+                document.removeEventListener("mozpointerlockchange", this._onPointerLockChange);
+                document.removeEventListener("webkitpointerlockchange", this._onPointerLockChange);
+            }
         }
 
         super.dispose();

src/Misc/domManagement.ts

@@ -20,6 +20,14 @@ export class DomManagement {
     }
 
     /**
+     * Check if the document object exists
+     * @returns true if the document object exists
+     */
+    public static IsDocumentAvailable(): boolean {
+        return (typeof document) !== "undefined";
+    }
+
+    /**
      * Extracts text content from a DOM element hierarchy
      * @param element defines the root element
      * @returns a string

src/XR/features/WebXRControllerPointerSelection.ts

@@ -306,6 +306,7 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
         let downTriggered = false;
         controllerData.onFrameObserver = this._xrSessionManager.onXRFrameObservable.add(() => {
             if (!controllerData.pick) { return; }
+            controllerData.laserPointer.material!.alpha = 0;
             discMesh.isVisible = false;
             if (controllerData.pick.hit) {
                 if (!this._pickingMoved(oldPick, controllerData.pick)) {
@@ -502,8 +503,9 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
         if (oldPick.pickedMesh !== newPick.pickedMesh) { return true; }
         oldPick.pickedPoint?.subtractToRef(newPick.pickedPoint, this._tmpVectorForPickCompare);
         this._tmpVectorForPickCompare.set(Math.abs(this._tmpVectorForPickCompare.x), Math.abs(this._tmpVectorForPickCompare.y), Math.abs(this._tmpVectorForPickCompare.z));
-        const delta = (this._options.gazeModePointerMovedFactor || 1) * 0.01 / newPick.distance;
+        const delta = (this._options.gazeModePointerMovedFactor || 1) * 0.01 * newPick.distance;
         const length = this._tmpVectorForPickCompare.length();
+        console.log(delta, length, newPick.distance);
         if (length > delta) { return true; }
         return false;
     }

src/XR/features/WebXRControllerTeleportation.ts

@@ -24,6 +24,7 @@ import { WebXRAbstractFeature } from './WebXRAbstractFeature';
 import { Color3 } from '../../Maths/math.color';
 import { Scene } from '../../scene';
 import { UtilityLayerRenderer } from '../../Rendering/utilityLayerRenderer';
+import { PointerEventTypes } from '../../Events/pointerEvents';
 
 /**
  * The options container for the teleportation module
@@ -405,116 +406,143 @@ export class WebXRMotionControllerTeleportation extends WebXRAbstractFeature {
             }
         };
         const controllerData = this._controllers[xrController.uniqueId];
-        // motion controller support
-        xrController.onMotionControllerInitObservable.addOnce(() => {
-            if (xrController.motionController) {
-                const movementController = xrController.motionController.getComponentOfType(WebXRControllerComponent.THUMBSTICK_TYPE) || xrController.motionController.getComponentOfType(WebXRControllerComponent.TOUCHPAD_TYPE);
+        if (controllerData.xrController.inputSource.targetRayMode === 'tracked-pointer') {
+            // motion controller support
+            xrController.onMotionControllerInitObservable.addOnce(() => {
+                if (xrController.motionController) {
+                    const movementController = xrController.motionController.getComponentOfType(WebXRControllerComponent.THUMBSTICK_TYPE) || xrController.motionController.getComponentOfType(WebXRControllerComponent.TOUCHPAD_TYPE);
                 if (!movementController || this._options.useMainComponentOnly) {
-                    // use trigger to move on long press
-                    const mainComponent = xrController.motionController.getMainComponent();
-                    if (!mainComponent) {
-                        return;
-                    }
-                    controllerData.onButtonChangedObserver = mainComponent.onButtonStateChangedObservable.add(() => {
-                        // did "pressed" changed?
-                        if (mainComponent.changes.pressed) {
-                            if (mainComponent.changes.pressed.current) {
-                                // simulate "forward" thumbstick push
+                        // use trigger to move on long press
+                        const mainComponent = xrController.motionController.getMainComponent();
+                        if (!mainComponent) {
+                            return;
+                        }
+                        controllerData.onButtonChangedObserver = mainComponent.onButtonStateChangedObservable.add(() => {
+                            // did "pressed" changed?
+                            if (mainComponent.changes.pressed) {
+                                if (mainComponent.changes.pressed.current) {
+                                    // simulate "forward" thumbstick push
+                                    controllerData.teleportationState.forward = true;
+                                    this._currentTeleportationControllerId = controllerData.xrController.uniqueId;
+                                    controllerData.teleportationState.baseRotation = this._options.xrInput.xrCamera.rotationQuaternion.toEulerAngles().y;
+                                    controllerData.teleportationState.currentRotation = 0;
+                                    const timeToSelect = this._options.timeToTeleport || 3000;
+                                    let timer = 0;
+                                    const observer = this._xrSessionManager.onXRFrameObservable.add(() => {
+                                        if (!mainComponent.pressed) {
+                                            this._xrSessionManager.onXRFrameObservable.remove(observer);
+                                            return;
+                                        }
+                                        timer += this._xrSessionManager.scene.getEngine().getDeltaTime();
+                                        if (timer >= timeToSelect && this._currentTeleportationControllerId === controllerData.xrController.uniqueId && controllerData.teleportationState.forward) {
+                                            this._teleportForward(xrController.uniqueId);
+                                        }
+
+                                        // failsafe
+                                        if (timer >= timeToSelect) {
+                                            this._xrSessionManager.onXRFrameObservable.remove(observer);
+                                        }
+                                    });
+                                } else {
+                                    controllerData.teleportationState.forward = false;
+                                    this._currentTeleportationControllerId = "";
+                                }
+                            }
+                        });
+                    } else {
+                        controllerData.onButtonChangedObserver = movementController.onButtonStateChangedObservable.add(() => {
+                            if (this._currentTeleportationControllerId === controllerData.xrController.uniqueId && controllerData.teleportationState.forward && !movementController.touched) {
+                                this._teleportForward(xrController.uniqueId);
+                            }
+                        });
+                        // use thumbstick (or touchpad if thumbstick not available)
+                        controllerData.onAxisChangedObserver = movementController.onAxisValueChangedObservable.add((axesData) => {
+                            if (axesData.y <= 0.7 && controllerData.teleportationState.backwards) {
+                                //if (this._currentTeleportationControllerId === controllerData.xrController.uniqueId) {
+                                controllerData.teleportationState.backwards = false;
+                                //this._currentTeleportationControllerId = "";
+                                //}
+                            }
+                            if (axesData.y > 0.7 && !controllerData.teleportationState.forward && this.backwardsMovementEnabled && !this.snapPointsOnly) {
+                                // teleport backwards
+                                if (!controllerData.teleportationState.backwards) {
+                                    controllerData.teleportationState.backwards = true;
+                                    // teleport backwards ONCE
+                                    this._tmpVector.set(0, 0, this.backwardsTeleportationDistance!);
+                                    this._tmpVector.rotateByQuaternionToRef(this._options.xrInput.xrCamera.rotationQuaternion!, this._tmpVector);
+                                    this._tmpVector.addInPlace(this._options.xrInput.xrCamera.position);
+                                    this._options.xrInput.xrCamera.position.subtractToRef(this._tmpVector, this._tmpVector);
+                                    this._tmpRay.origin.copyFrom(this._tmpVector);
+                                    this._tmpRay.direction.set(0, -1, 0);
+                                    let pick = this._xrSessionManager.scene.pickWithRay(this._tmpRay, (o) => {
+                                        return this._floorMeshes.indexOf(o) !== -1;
+                                    });
+
+                                    // pick must exist, but stay safe
+                                    if (pick && pick.pickedPoint) {
+                                        // Teleport the users feet to where they targeted
+                                        this._options.xrInput.xrCamera.position.addInPlace(pick.pickedPoint);
+                                    }
+                                }
+                            }
+                            if (axesData.y < -0.7 && !this._currentTeleportationControllerId && !controllerData.teleportationState.rotating) {
                                 controllerData.teleportationState.forward = true;
                                 this._currentTeleportationControllerId = controllerData.xrController.uniqueId;
                                 controllerData.teleportationState.baseRotation = this._options.xrInput.xrCamera.rotationQuaternion.toEulerAngles().y;
-                                controllerData.teleportationState.currentRotation = 0;
-                                const timeToSelect = this._options.timeToTeleport || 3000;
-                                let timer = 0;
-                                const observer = this._xrSessionManager.onXRFrameObservable.add(() => {
-                                    if (!mainComponent.pressed) {
-                                        this._xrSessionManager.onXRFrameObservable.remove(observer);
-                                        return;
+                            }
+                            if (axesData.x) {
+                                if (!controllerData.teleportationState.forward) {
+                                    if (!controllerData.teleportationState.rotating && Math.abs(axesData.x) > 0.7) {
+                                        // rotate in the right direction positive is right
+                                        controllerData.teleportationState.rotating = true;
+                                        const rotation = this.rotationAngle * (axesData.x > 0 ? 1 : -1);
+                                        this._options.xrInput.xrCamera.rotationQuaternion.multiplyInPlace(Quaternion.FromEulerAngles(0, rotation, 0));
                                     }
-                                    timer += this._xrSessionManager.scene.getEngine().getDeltaTime();
-                                    if (timer >= timeToSelect && this._currentTeleportationControllerId === controllerData.xrController.uniqueId && controllerData.teleportationState.forward) {
-                                        this._teleportForward(xrController.uniqueId);
+                                } else {
+                                    if (this._currentTeleportationControllerId === controllerData.xrController.uniqueId) {
+                                        // set the rotation of the forward movement
+                                        if (this.rotationEnabled) {
+                                            setTimeout(() => {
+                                                controllerData.teleportationState.currentRotation = Math.atan2(axesData.x, -axesData.y);
+                                            });
+                                        } else {
+                                            controllerData.teleportationState.currentRotation = 0;
+                                        }
                                     }
-
-                                    // failsafe
-                                    if (timer >= timeToSelect) {
-                                        this._xrSessionManager.onXRFrameObservable.remove(observer);
-                                    }
-                                });
+                                }
                             } else {
-                                controllerData.teleportationState.forward = false;
-                                this._currentTeleportationControllerId = "";
+                                controllerData.teleportationState.rotating = false;
                             }
-                        }
-                    });
-                } else {
-                    controllerData.onButtonChangedObserver = movementController.onButtonStateChangedObservable.add(() => {
-                        if (this._currentTeleportationControllerId === controllerData.xrController.uniqueId && controllerData.teleportationState.forward && !movementController.touched) {
-                            this._teleportForward(xrController.uniqueId);
-                        }
-                    });
-                    // use thumbstick (or touchpad if thumbstick not available)
-                    controllerData.onAxisChangedObserver = movementController.onAxisValueChangedObservable.add((axesData) => {
-                        if (axesData.y <= 0.7 && controllerData.teleportationState.backwards) {
-                            //if (this._currentTeleportationControllerId === controllerData.xrController.uniqueId) {
-                            controllerData.teleportationState.backwards = false;
-                            //this._currentTeleportationControllerId = "";
-                            //}
-                        }
-                        if (axesData.y > 0.7 && !controllerData.teleportationState.forward && this.backwardsMovementEnabled && !this.snapPointsOnly) {
-                            // teleport backwards
-                            if (!controllerData.teleportationState.backwards) {
-                                controllerData.teleportationState.backwards = true;
-                                // teleport backwards ONCE
-                                this._tmpVector.set(0, 0, this.backwardsTeleportationDistance!);
-                                this._tmpVector.rotateByQuaternionToRef(this._options.xrInput.xrCamera.rotationQuaternion!, this._tmpVector);
-                                this._tmpVector.addInPlace(this._options.xrInput.xrCamera.position);
-                                this._options.xrInput.xrCamera.position.subtractToRef(this._tmpVector, this._tmpVector);
-                                this._tmpRay.origin.copyFrom(this._tmpVector);
-                                this._tmpRay.direction.set(0, -1, 0);
-                                let pick = this._xrSessionManager.scene.pickWithRay(this._tmpRay, (o) => {
-                                    return this._floorMeshes.indexOf(o) !== -1;
-                                });
-
-                                // pick must exist, but stay safe
-                                if (pick && pick.pickedPoint) {
-                                    // Teleport the users feet to where they targeted
-                                    this._options.xrInput.xrCamera.position.addInPlace(pick.pickedPoint);
-                                }
+                        });
+                    }
+                }
+            });
+        } else {
+
+            this._xrSessionManager.scene.onPointerObservable.add((pointerInfo) => {
+                if (pointerInfo.type === PointerEventTypes.POINTERDOWN) {
+                    controllerData.teleportationState.forward = true;
+                        this._currentTeleportationControllerId = controllerData.xrController.uniqueId;
+                        controllerData.teleportationState.baseRotation = this._options.xrInput.xrCamera.rotationQuaternion.toEulerAngles().y;
+                        controllerData.teleportationState.currentRotation = 0;
+                        const timeToSelect = this._options.timeToTeleport || 3000;
+                        let timer = 0;
+                        const observer = this._xrSessionManager.onXRFrameObservable.add(() => {
+                            timer += this._xrSessionManager.scene.getEngine().getDeltaTime();
+                            if (timer >= timeToSelect && this._currentTeleportationControllerId === controllerData.xrController.uniqueId && controllerData.teleportationState.forward) {
+                                this._teleportForward(xrController.uniqueId);
                             }
-                        }
-                        if (axesData.y < -0.7 && !this._currentTeleportationControllerId && !controllerData.teleportationState.rotating) {
-                            controllerData.teleportationState.forward = true;
-                            this._currentTeleportationControllerId = controllerData.xrController.uniqueId;
-                            controllerData.teleportationState.baseRotation = this._options.xrInput.xrCamera.rotationQuaternion.toEulerAngles().y;
-                        }
-                        if (axesData.x) {
-                            if (!controllerData.teleportationState.forward) {
-                                if (!controllerData.teleportationState.rotating && Math.abs(axesData.x) > 0.7) {
-                                    // rotate in the right direction positive is right
-                                    controllerData.teleportationState.rotating = true;
-                                    const rotation = this.rotationAngle * (axesData.x > 0 ? 1 : -1);
-                                    this._options.xrInput.xrCamera.rotationQuaternion.multiplyInPlace(Quaternion.FromEulerAngles(0, rotation, 0));
-                                }
-                            } else {
-                                if (this._currentTeleportationControllerId === controllerData.xrController.uniqueId) {
-                                    // set the rotation of the forward movement
-                                    if (this.rotationEnabled) {
-                                        setTimeout(() => {
-                                            controllerData.teleportationState.currentRotation = Math.atan2(axesData.x, -axesData.y);
-                                        });
-                                    } else {
-                                        controllerData.teleportationState.currentRotation = 0;
-                                    }
-                                }
+
+                            if (timer >= timeToSelect) {
+                                this._xrSessionManager.onXRFrameObservable.remove(observer);
                             }
-                        } else {
-                            controllerData.teleportationState.rotating = false;
-                        }
-                    });
+                        });
+                } else if (pointerInfo.type === PointerEventTypes.POINTERUP) {
+                    controllerData.teleportationState.forward = false;
+                    this._currentTeleportationControllerId = "";
                 }
-            }
-        });
+            });
+        }
     }
 
     private _createDefaultTargetMesh() {

src/scene.ts

@@ -3980,7 +3980,9 @@ export class Scene extends AbstractScene implements IAnimatable {
 
         // Restore back buffer
         this.activeCamera = currentActiveCamera;
-        this._bindFrameBuffer();
+        if (this._activeCamera && this._activeCamera.cameraRigMode !== Camera.RIG_MODE_CUSTOM) {
+            this._bindFrameBuffer();
+        }
         this.onAfterRenderTargetsRenderObservable.notifyObservers(this);
 
         for (let step of this._beforeClearStage) {