Merge remote-tracking branch 'BabylonJS/master' into navbar-plugin-system

Viewer/assets/templates/default/navbar.html

@@ -162,6 +162,16 @@
         content: "\F766";
     }
 
+    viewer.in-vr .vr-icon:after {
+        font-size: 16px;
+        content: "\E7F4";
+    }
+
+    .vr-icon:after {
+        font-size: 16px;
+        content: "\F119";
+    }
+
     .progress-control {
         display: flex;
         flex: 1;
@@ -493,7 +503,7 @@
     </div>
     {{/unless}}
     <div class="default-control">
-        {{#unless hideHdButton}}
+        {{#unless hideHd}}
         <button class="hd-button hd-button" title="{{text.hdButton}}">
             {{#if hdEnabled}}
             <span class="icon sd-icon"></span>
@@ -501,7 +511,11 @@
             <span class="icon hd-icon"></span>
             {{/if}}
         </button>
-        {{/unless}} {{#unless hideHelp}}
+        {{/unless}} {{#unless hideVr}}
+        <button class="vr vr-button" title="{{text.vrButton}}">
+            <span class="icon vr-icon"></span>
+        </button>
+        {{/unless}}{{#unless hideHelp}}
         <button class="help help-button" title="{{text.helpButton}}">
             <span class="icon help-icon"></span>
         </button>

Viewer/src/configuration/configuration.ts

@@ -1,5 +1,5 @@
 import { EngineOptions, IGlowLayerOptions, DepthOfFieldEffectBlurLevel } from 'babylonjs';
-import { IObserversConfiguration, IModelConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ICameraConfiguration, ISkyboxConfiguration, IGroundConfiguration, ILightConfiguration, IDefaultRenderingPipelineConfiguration, ITemplateConfiguration } from './interfaces';
+import { IVRConfiguration, IObserversConfiguration, IModelConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ICameraConfiguration, ISkyboxConfiguration, IGroundConfiguration, ILightConfiguration, IDefaultRenderingPipelineConfiguration, ITemplateConfiguration } from './interfaces';
 
 export function getConfigurationKey(key: string, configObject: any) {
     let splits = key.split('.');
@@ -80,6 +80,8 @@ export interface ViewerConfiguration {
         [propName: string]: boolean | undefined;
     };
 
+    vr?: IVRConfiguration;
+
     // features that are being tested.
     // those features' syntax will change and move out! 
     // Don't use in production (or be ready to make the changes :) )

Viewer/src/configuration/interfaces/index.ts

@@ -10,4 +10,5 @@ export * from './observersConfiguration';
 export * from './sceneConfiguration';
 export * from './sceneOptimizerConfiguration';
 export * from './skyboxConfiguration';
-export * from './templateConfiguration';
+export * from './templateConfiguration';
+export * from './vrConfiguration';

Viewer/src/configuration/interfaces/vrConfiguration.ts

@@ -0,0 +1,10 @@
+import { VRExperienceHelperOptions } from "babylonjs";
+
+export interface IVRConfiguration {
+    disabled?: boolean;
+    objectScaleFactor?: number;
+    disableInteractions?: boolean;
+    disableTeleportation?: boolean;
+    overrideFloorMeshName?: string;
+    vrOptions?: VRExperienceHelperOptions;
+}

Viewer/src/configuration/types/default.ts

@@ -49,12 +49,14 @@ export let defaultConfiguration: ViewerConfiguration = {
                 logoText: 'BabylonJS',
                 logoLink: 'https://babylonjs.com',
                 hideHelp: true,
-                hideHdButton: true,
+                hideHd: true,
+                hideVr: true,
                 disableOnFullscreen: false,
                 text: {
                     hdButton: "Toggle HD",
                     fullscreenButton: "Fullscreen",
-                    helpButton: "Help"
+                    helpButton: "Help",
+                    vrButton: "Toggle VR"
                 }
             },
             events: {

Viewer/src/viewer/defaultViewer.ts

@@ -205,6 +205,9 @@ export class DefaultViewer extends AbstractViewer {
             case "hd-button":
                 this.toggleHD();
                 break;
+            case "vr-button":
+                this.toggleVR();
+                break;
             default:
                 return;
         }
@@ -330,6 +333,21 @@ export class DefaultViewer extends AbstractViewer {
         }
     }
 
+    public toggleVR() {
+        super.toggleVR();
+
+        let viewerTemplate = this.templateManager.getTemplate('viewer');
+        let viewerElement = viewerTemplate && viewerTemplate.parent;
+
+        if (viewerElement) {
+            if (this._vrToggled) {
+                viewerElement.classList.add("in-vr");
+            } else {
+                viewerElement.classList.remove("in-vr");
+            }
+        }
+    }
+
     /**
      * Toggle fullscreen of the entire viewer
      */

dist/preview release/what's new.md

@@ -74,6 +74,7 @@
 - New lab feature - global light rotation [#4347](https://github.com/BabylonJS/Babylon.js/issues/4347) ([RaananW](https://github.com/RaananW))
 - New NPM package - babylonjs-viewer-assets, to separate the binary assets and the code of the viewer ([RaananW](https://github.com/RaananW))
 - A new HD-Toggler button allows setting a better hardware scaling rate ([RaananW](https://github.com/RaananW))
+- An initial support for WebVR is implemented ([RaananW](https://github.com/RaananW))
 - It is now possible to choose the element that goes fullscreen in the default viewer ([RaananW](https://github.com/RaananW))
 
 ### Documentation

src/Engine/babylon.nullEngine.ts

@@ -397,6 +397,10 @@
             return vbo;
         }
 
+        public updateDynamicTexture(texture: Nullable<InternalTexture>, canvas: HTMLCanvasElement, invertY: boolean, premulAlpha: boolean = false, format?: number): void {
+
+        }
+
         public updateDynamicIndexBuffer(indexBuffer: WebGLBuffer, indices: IndicesArray, offset: number = 0): void {
         }