Merge pull request #3322 from RaananW/viewer-fixes

Viewer fixes and NPM preparations

Viewer/assets/templates/default/loadingScreen.html

@@ -3,6 +3,7 @@
 
     loading-screen {
         position: absolute;
+        left: 0;
         z-index: 100;
         opacity: 1;
         pointer-events: none;

Viewer/package.json

@@ -36,9 +36,6 @@
     "dependencies": {
         "babylonjs": "^3.1.0-beta6",
         "babylonjs-loaders": "^3.1.0-beta6",
-        "babylonjs-materials": "^3.1.0-beta6",
-        "babylonjs-post-process": "^3.1.0-beta6",
-        "babylonjs-procedural-textures": "^3.1.0-beta6",
         "deepmerge": "^2.0.1",
         "es6-promise": "^4.1.1",
         "handlebars": "^4.0.11"

Viewer/src/configuration/configuration.ts

@@ -98,6 +98,7 @@ export interface ViewerConfiguration {
         size?: number;
         receiveShadows?: boolean;
         shadowOnly?: boolean;
+        mirror?: boolean;
         material?: {
             [propName: string]: any;
         }

Viewer/src/index.ts

@@ -13,13 +13,12 @@ import { AbstractViewer } from './viewer/viewer';
 // load babylon and needed modules.
 import 'babylonjs';
 import 'babylonjs-loaders';
-import 'babylonjs-materials';
 import '../assets/pep.min';
 
 import { InitTags } from './initializer';
 
 // promise polyfill, if needed!
-global.Promise = Promise || require('es6-promise').Promise;
+global.Promise = typeof Promise === 'undefined' ? require('es6-promise').Promise : Promise;
 
 export let disableInit: boolean = false;
 document.addEventListener("DOMContentLoaded", function (event) {

Viewer/src/viewer/defaultViewer.ts

@@ -3,11 +3,9 @@
 import { ViewerConfiguration } from './../configuration/configuration';
 import { Template } from './../templateManager';
 import { AbstractViewer } from './viewer';
-import { ShadowGenerator, Observable, ShadowLight, CubeTexture, BouncingBehavior, FramingBehavior, Behavior, Light, Engine, Scene, AutoRotationBehavior, AbstractMesh, Quaternion, StandardMaterial, ArcRotateCamera, ImageProcessingConfiguration, Color3, Vector3, SceneLoader, Mesh, HemisphericLight } from 'babylonjs';
+import { MirrorTexture, Plane, ShadowGenerator, Texture, BackgroundMaterial, Observable, ShadowLight, CubeTexture, BouncingBehavior, FramingBehavior, Behavior, Light, Engine, Scene, AutoRotationBehavior, AbstractMesh, Quaternion, StandardMaterial, ArcRotateCamera, ImageProcessingConfiguration, Color3, Vector3, SceneLoader, Mesh, HemisphericLight } from 'babylonjs';
 import { CameraBehavior } from '../interfaces';
 
-import { ShadowOnlyMaterial } from 'babylonjs-materials';
-
 export class DefaultViewer extends AbstractViewer {
 
     public camera: ArcRotateCamera;
@@ -158,7 +156,7 @@ export class DefaultViewer extends AbstractViewer {
         this.setupCamera(meshes);
         this.setupLights(meshes);
 
-        return this.initEnvironment();
+        return this.initEnvironment(meshes);
     }
 
     private setModelMetaData() {
@@ -190,7 +188,7 @@ export class DefaultViewer extends AbstractViewer {
 
     }
 
-    public initEnvironment(): Promise<Scene> {
+    public initEnvironment(focusMeshes: Array<AbstractMesh> = []): Promise<Scene> {
         if (this.configuration.skybox) {
             // Define a general environment textue
             let texture;
@@ -215,17 +213,62 @@ export class DefaultViewer extends AbstractViewer {
                 }
 
                 this.extendClassWithConfig(box, this.configuration.skybox);
+
+                box && focusMeshes.push(box);
             }
         }
 
         if (this.configuration.ground) {
             let groundConfig = (typeof this.configuration.ground === 'boolean') ? {} : this.configuration.ground;
 
-            var ground = Mesh.CreateGround('ground', groundConfig.size || 1000, groundConfig.size || 1000, 8, this.scene);
+            let groundSize = groundConfig.size || (this.configuration.skybox && this.configuration.skybox.scale) || 3000;
+
+            let ground = Mesh.CreatePlane("BackgroundPlane", groundSize, this.scene);
+            let backgroundMaterial = new BackgroundMaterial('groundmat', this.scene);
+            ground.rotation.x = Math.PI / 2; // Face up by default.
+            ground.receiveShadows = groundConfig.receiveShadows || false;
+
+            // default values
+            backgroundMaterial.alpha = 0.9;
+            backgroundMaterial.alphaMode = Engine.ALPHA_PREMULTIPLIED_PORTERDUFF;
+            backgroundMaterial.shadowLevel = 0.5;
+            backgroundMaterial.primaryLevel = 1;
+            backgroundMaterial.primaryColor = new Color3(0.2, 0.2, 0.3).toLinearSpace().scale(3);
+            backgroundMaterial.secondaryLevel = 0;
+            backgroundMaterial.tertiaryLevel = 0;
+            backgroundMaterial.useRGBColor = false;
+            backgroundMaterial.enableNoise = true;
+
+            // if config provided, extend the default values
+            if (groundConfig.material) {
+                this.extendClassWithConfig(ground, ground.material);
+            }
+
+            ground.material = backgroundMaterial;
             if (this.configuration.ground === true || groundConfig.shadowOnly) {
-                ground.material = new ShadowOnlyMaterial('groundmat', this.scene);
+                // shadow only:
+                ground.receiveShadows = true;
+                const diffuseTexture = new Texture("https://assets.babylonjs.com/environments/backgroundGround.png", this.scene);
+                diffuseTexture.gammaSpace = false;
+                diffuseTexture.hasAlpha = true;
+                backgroundMaterial.diffuseTexture = diffuseTexture;
+            } else if (groundConfig.mirror) {
+                var mirror = new MirrorTexture("mirror", 512, this.scene);
+                mirror.mirrorPlane = new Plane(0, -1, 0, 0);
+                mirror.renderList = mirror.renderList || [];
+                focusMeshes.length && focusMeshes.forEach(m => {
+                    m && mirror.renderList && mirror.renderList.push(m);
+                });
+
+                backgroundMaterial.reflectionTexture = mirror;
             } else {
-                ground.material = new StandardMaterial('groundmat', this.scene);
+                if (groundConfig.material) {
+                    if (groundConfig.material.diffuseTexture) {
+                        const diffuseTexture = new Texture(groundConfig.material.diffuseTexture, this.scene);
+                        backgroundMaterial.diffuseTexture = diffuseTexture;
+                    }
+                }
+                // ground.material = new StandardMaterial('groundmat', this.scene);
             }
             //default configuration
             if (this.configuration.ground === true) {
@@ -235,6 +278,8 @@ export class DefaultViewer extends AbstractViewer {
             }
 
 
+
+
             this.extendClassWithConfig(ground, groundConfig);
         }
 

Viewer/tsconfig-gulp.json

@@ -24,9 +24,6 @@
             "babylonjs": [
                 "../dist/preview release/babylon.max.js"
             ],
-            "babylonjs-materials": [
-                "../dist/preview release/materialsLibrary/babylonjs.materials.js"
-            ],
             "babylonjs-loaders": [
                 "../dist/preview release/loaders/babylonjs.loaders.js"
             ]

Viewer/tsconfig.json

@@ -20,8 +20,7 @@
         "types": [
             "node",
             "babylonjs",
-            "babylonjs-loaders",
-            "babylonjs-materials"
+            "babylonjs-loaders"
         ]
     }
 }

dist/preview release/viewer/package.json

@@ -0,0 +1,32 @@
+{
+    "author": {
+        "name": "Raanan Weber"
+    },
+    "name": "babylonjs-viewer",
+    "description": "A simple-to-use viewer based on BabylonJS to display 3D elements natively",
+    "version": "3.1.0-beta6",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/BabylonJS/Babylon.js.git"
+    },
+    "main": "babylon.viewer.js",
+    "files": [
+        "babylon.viewer.js",
+        "readme.md",
+        "package.json"
+    ],
+    "keywords": [
+        "3D",
+        "javascript",
+        "html5",
+        "webgl",
+        "viewer"
+    ],
+    "license": "Apache-2.0",
+    "peerDependencies": {
+        "babylonjs": ">=3.1.0-alpha"
+    },
+    "engines": {
+        "node": "*"
+    }
+}

dist/preview release/viewer/readme.md

@@ -0,0 +1,56 @@
+Babylon.js Viewer
+=====================
+
+Babylon's viewer is a wrapper around Babylon, that automatically initializes the needed components in order to display a loaded model. It is easy to use, and require no coding at all.
+
+The viewer automatically interacts with the DOM, searching for HTML elements named `babylon`. It will then automatically read the configuration from the DOM element and will create a scene for it.
+
+for basic and advanced usage instructions please read the doc at https://doc.babylonjs.com/extensions/the_babylon_viewer
+
+The source code can be found at https://github.com/BabylonJS/Babylon.js/tree/master/Viewer
+
+# Basic usage
+
+to create a simple viewer add the following code to your HTML>
+
+```HTML
+<babylon model="https://playground.babylonjs.com/scenes/Rabbit.babylon"></babylon>
+<script src="https://viewer.babylonjs.com/viewer.min.js"></script>
+```
+
+Make sure to size the babylon HTML tag. For example:
+
+```css
+babylon {
+    max-width: 800px;
+    max-height: 500px;
+    width: 100%;
+    height: 600px;
+}
+```
+
+# Installation instructions
+
+## CDN
+
+Compiled js files (minified) are offered on our public CDN here:
+
+* https://viewer.babylonjs.com/serializers/viewer.min.js
+
+## NPM
+
+To install using npm :
+
+```
+npm install --save babylonjs-viewer
+```
+
+Afterwards it can be imported to the project using:
+
+```
+import from 'babylonjs-viewer';
+```
+
+This will enable the BabylonViewer namespace.
+
+Using webpack to package your project will use the minified js file.