Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

dist/preview release/gui/package.json

@@ -15,6 +15,7 @@
         "babylon.gui.min.js",
         "babylon.gui.d.ts",
         "babylon.gui.module.d.ts",
+        "readme.md",
         "package.json"
     ],
     "typings": "babylon.gui.module.d.ts",

dist/preview release/gui/readme.md

@@ -0,0 +1,41 @@
+Babylon.js GUI module
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/overviews/gui
+
+# Installation instructions
+
+## CDN
+
+Compiled js files (minified and source) are offered on our public CDN here:
+
+* https://preview.babylonjs.com/gui/babylon.gui.js
+* https://preview.babylonjs.com/gui/babylon.gui.min.js
+
+## NPM
+
+To install using npm :
+
+```
+npm install --save babylonjs babylonjs-gui
+```
+
+If using TypeScript, the typing needs to be added to tsconfig.json:
+
+```
+    ....
+    "types": [
+        "babylonjs",
+        "babylonjs-gui",
+        "angularFTW"
+    ],
+    ....
+```
+
+Afterwards it can be imported to the project using:
+
+```
+import * as GUI from 'babylonjs-gui';
+```
+
+Using webpack to package your project will use the minified js file.

dist/preview release/loaders/package.json

@@ -14,6 +14,7 @@
         "babylonjs.loaders.js",
         "babylonjs.loaders.min.js",
         "babylonjs.loaders.module.d.ts",
+        "readme.md",
         "package.json"
     ],
     "typings": "babylonjs.loaders.module.d.ts",

dist/preview release/loaders/readme.md

@@ -0,0 +1,44 @@
+Babylon.js Loaders module
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/extensions and choose "loaders".
+
+# Installation instructions
+
+## CDN
+
+Compiled js files (minified and source) are offered on our public CDN here:
+
+* https://preview.babylonjs.com/loaders/babylonjs.loaders.js
+* https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js
+
+## NPM
+
+To install using npm :
+
+```
+npm install --save babylonjs babylonjs-loaders
+```
+
+If using TypeScript, the typing needs to be added to tsconfig.json:
+
+```
+    ....
+    "types": [
+        "babylonjs",
+        "babylonjs-loaders",
+        ""
+    ],
+    ....
+```
+
+Afterwards it can be imported to the project using:
+
+```
+import * as BABYLON from 'babylonjs';
+import from 'babylonjs-loaders';
+```
+
+This will extend Babylon's namespace with the loaders available.
+
+Using webpack to package your project will use the minified js file.

dist/preview release/materialsLibrary/package.json

@@ -14,6 +14,7 @@
         "babylonjs.materials.js",
         "babylonjs.materials.min.js",
         "babylonjs.materials.module.d.ts",
+        "readme.md",
         "package.json"
     ],
     "typings": "babylonjs.materials.module.d.ts",

dist/preview release/materialsLibrary/readme.md

@@ -0,0 +1,51 @@
+Babylon.js Materials Library
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/extensions and choose "materials library".
+
+# Installation instructions
+
+## CDN
+
+Compiled js files (minified and source) are offered on our public CDN here:
+
+* https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.js
+* https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js
+
+## NPM
+
+To install using npm :
+
+```
+npm install --save babylonjs babylonjs-materials
+```
+
+If using TypeScript, the typing needs to be added to tsconfig.json:
+
+```
+    ....
+    "types": [
+        "babylonjs",
+        "babylonjs-materials",
+        "oneMoreDependencyThatIReallyNeed"
+    ],
+    ....
+```
+
+Afterwards it can be imported to the project using:
+
+```
+import * as BABYLON from 'babylonjs';
+import from 'babylonjs-materials';
+```
+
+This will extend Babylon's namespace with the materials available:
+
+```
+// Some awesome code
+let skyMaterial = new BABYLON.SkyMaterial("skyMaterial", scene);
+skyMaterial.backFaceCulling = false;
+// Some more awesome code
+```
+
+Using webpack to package your project will use the minified js file.

dist/preview release/postProcessesLibrary/package.json

@@ -14,6 +14,7 @@
         "babylonjs.postProcess.js",
         "babylonjs.postProcess.min.js",
         "babylonjs.postProcess.module.d.ts",
+        "readme.md",
         "package.json"
     ],
     "typings": "babylonjs.postProcess.module.d.ts",

dist/preview release/postProcessesLibrary/readme.md

@@ -0,0 +1,51 @@
+Babylon.js Post Processes Library
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/extensions and choose "post process library".
+
+# Installation instructions
+
+## CDN
+
+Compiled js files (minified and source) are offered on our public CDN here:
+
+* https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.js
+* https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js
+
+## NPM
+
+To install using npm :
+
+```
+npm install --save babylonjs babylonjs-post-process
+```
+
+If using TypeScript, the typing needs to be added to tsconfig.json:
+
+```
+    ....
+    "types": [
+        "babylonjs",
+        "babylonjs-post-process",
+        "oneMoreDependencyThatIReallyNeed"
+    ],
+    ....
+```
+
+Afterwards it can be imported to the project using:
+
+```
+import * as BABYLON from 'babylonjs';
+import from 'babylonjs-post-process';
+```
+
+This will extend Babylon's namespace with the post processes available:
+
+```
+// Some awesome code
+// Creates the post process
+let postProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera);
+// Some more awesome code
+```
+
+Using webpack to package your project will use the minified js file.

dist/preview release/proceduralTexturesLibrary/package.json

@@ -14,6 +14,7 @@
         "babylonjs.proceduralTextures.js",
         "babylonjs.proceduralTextures.min.js",
         "babylonjs.proceduralTextures.module.d.ts",
+        "readme.md",
         "package.json"
     ],
     "typings": "babylonjs.proceduralTextures.module.d.ts",

dist/preview release/proceduralTexturesLibrary/readme.md

@@ -0,0 +1,53 @@
+Babylon.js Procedural Textures Library
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/extensions and choose "procedural textures library".
+
+# Installation instructions
+
+## CDN
+
+Compiled js files (minified and source) are offered on our public CDN here:
+
+* https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.js
+* https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js
+
+## NPM
+
+To install using npm :
+
+```
+npm install --save babylonjs babylonjs-procedural-textures
+```
+
+If using TypeScript, the typing needs to be added to tsconfig.json:
+
+```
+    ....
+    "types": [
+        "babylonjs",
+        "babylonjs-procedural-textures",
+        "oneMoreDependencyThatIReallyNeed"
+    ],
+    ....
+```
+
+Afterwards it can be imported to the project using:
+
+```
+import * as BABYLON from 'babylonjs';
+import from 'babylonjs-procedural-textures';
+```
+
+This will extend Babylon's namespace with the procedural textures available:
+
+```
+// Some awesome code
+var fireMaterial = new BABYLON.StandardMaterial("fontainSculptur2", scene);
+var fireTexture = new BABYLON.FireProceduralTexture("fire", 256, scene);
+fireMaterial.diffuseTexture = fireTexture;
+fireMaterial.opacityTexture = fireTexture;
+// Some more awesome code
+```
+
+Using webpack to package your project will use the minified js file.

dist/preview release/serializers/package.json

@@ -14,6 +14,7 @@
         "babylonjs.serializers.js",
         "babylonjs.serializers.min.js",
         "babylonjs.serializers.module.d.ts",
+        "readme.md",
         "package.json"
     ],
     "typings": "babylonjs.serializers.module.d.ts",

dist/preview release/serializers/readme.md

@@ -0,0 +1,42 @@
+Babylon.js Serializers
+=====================
+
+# Installation instructions
+
+## CDN
+
+Compiled js files (minified and source) are offered on our public CDN here:
+
+* https://preview.babylonjs.com/serializers/babylonjs.serializers.js
+* https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.serializers.min.js
+
+## NPM
+
+To install using npm :
+
+```
+npm install --save babylonjs babylonjs-serializers
+```
+
+If using TypeScript, the typing needs to be added to tsconfig.json:
+
+```
+    ....
+    "types": [
+        "babylonjs",
+        "babylonjs-serializers",
+        "oneMoreDependencyThatIReallyNeed"
+    ],
+    ....
+```
+
+Afterwards it can be imported to the project using:
+
+```
+import * as BABYLON from 'babylonjs';
+import from 'babylonjs-serializers';
+```
+
+This will extend Babylon's namespace with the serializers currently available.
+
+Using webpack to package your project will use the minified js file.

inspector/sass/_detailPanel.scss

@@ -6,6 +6,10 @@
   color:$color;
   font-family: $font;
 
+  .details {
+      padding-left: 5px;
+  }
+
   // Common defintion between header row and detail row
   .base-row {      
     display:flex;
@@ -107,6 +111,7 @@
   // The div displaying a color
   .color-element {
       @extend .element-viewer;
+      top: 2px;
   }
 
   // The div displaying a texture element

inspector/src/gui/ColorPickerElement.ts

@@ -13,7 +13,6 @@ module INSPECTOR {
             let scheduler = Scheduler.getInstance();
             this._div.className = 'color-element';
             this._div.style.backgroundColor = this._toRgba(color);
-            this._div.style.top = "5px";
             this.pline = propertyLine;
 
             this._input = Helpers.CreateInput();  
@@ -24,8 +23,11 @@ module INSPECTOR {
             this._input.value = color.toHexString();
             
             this._input.addEventListener('input', (e) => {
-                console.log('Color', this._input.value, this.pline)
-                this.pline.validateInput(BABYLON.Color3.FromHexString(this._input.value));
+                let color = BABYLON.Color3.FromHexString(this._input.value);
+                color.r = parseFloat(color.r.toPrecision(2));
+                color.g = parseFloat(color.g.toPrecision(2));
+                color.b = parseFloat(color.b.toPrecision(2));
+                this.pline.validateInput(color);
                 scheduler.pause = false;
             });
             

inspector/src/tabs/TextureTab.ts

@@ -35,7 +35,6 @@ module INSPECTOR {
         }
 
         public update(_items?: Array<TreeItem>) {
-
             let items;
             if (_items) {
                 items = _items;
@@ -78,16 +77,14 @@ module INSPECTOR {
             Helpers.CleanDiv(this._imagePanel);
             // Get the texture object
             let texture = item.adapter.object;
-
             let imgs: HTMLImageElement[] = [];
             let img = Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement;
             imgs.push(img);
-            
             //Create five other images elements
             for(let i = 0; i<5; i++){
                 imgs.push(Helpers.CreateElement('img', 'texture-image', this._imagePanel) as HTMLImageElement);
             }
-
+            
             if (texture instanceof BABYLON.MapTexture) {
                 // instance of Map texture
                 texture.bindTextureForPosSize(new BABYLON.Vector2(0, 0), new BABYLON.Size(texture.getSize().width, texture.getSize().height), false);
@@ -111,7 +108,7 @@ module INSPECTOR {
                 // To display the texture after rendering
                 screenShotTexture.onAfterRenderObservable.add((faceIndex: number) => {
                     BABYLON.Tools.DumpFramebuffer(size.width, size.height, engine,  
-                        (data) => imgs[faceIndex].src = data, "image/png");
+                        (data) => imgs[faceIndex].src = data);
                 });
 
                 // Render the texture
@@ -120,22 +117,58 @@ module INSPECTOR {
                 screenShotTexture.render();
                 screenShotTexture.dispose();
             }else if(texture instanceof BABYLON.CubeTexture){
+                // Cannot open correctly DDS File
                 // Display all textures of the CubeTexture
-                let i: number = 0;
-                for(let filename of (texture as BABYLON.CubeTexture)['_files']){
-                    imgs[i].src = filename;
-                    i++;
-                }
-            }
-             else if (texture.url) {
-                // If an url is present, the texture is an image
-                img.src = texture.url;
+                let pixels = texture.readPixels();
+                let canvas = document.createElement('canvas');
+                canvas.id = "MyCanvas";
+                img.parentElement.appendChild(canvas);
+                let ctx = canvas.getContext('2d');
+                let size = texture.getSize();
+                
+                let tmp = pixels.buffer.slice(0, size.height * size.width * 4);
+                let u = new Uint8ClampedArray(tmp)
 
-            } else if (texture['_canvas']) {
+                let colors = new ImageData(size.width * 6, size.height);
+                
+                colors.data.set(u);
+                let imgData = ctx.createImageData(size.width * 6, size.height);
+                
+                imgData.data.set(u);
+                
+                // let data = imgData.data;
+
+                // for(let i = 0, len = size.height * size.width; i < len; i++) {
+                //     data[i] = pixels[i];
+                // }
+                ctx.putImageData(imgData,0 ,0);
+                // let i: number = 0;
+                // for(let filename of (texture as BABYLON.CubeTexture)['_files']){
+                //     imgs[i].src = filename;
+                //     i++;
+                // }
+            }
+            else if (texture['_canvas']) {
                 // Dynamic texture
                 let base64Image = texture['_canvas'].toDataURL("image/png");
                 img.src = base64Image;
-            } 
+            } else if (texture.url) {
+                let pixels = texture.readPixels();
+                let canvas = document.createElement('canvas');
+                canvas.id = "MyCanvas";
+                img.parentElement.appendChild(canvas);
+                let ctx = canvas.getContext('2d');
+                let size = texture.getSize();
+
+                let imgData = ctx.createImageData(size.width, size.height);
+
+                imgData.data.set(pixels);
+
+                ctx.putImageData(imgData, 0, 0);
+                // If an url is present, the texture is an image
+                // img.src = texture.url;
+
+            }
 
         }
 

readme.md

@@ -22,6 +22,39 @@ For preview release you can use the following ones:
 
 Additional references can be found on https://preview.babylonjs.com/xxx where xxx is the folder structure you can find in the /dist/preview release folder like https://preview.babylonjs.com/gui/babylon.gui.min.js
 
+## NPM
+
+BabylonJS and its modules are published on NPM with full typing support. To install use
+
+```
+npm install babylonjs --save
+```
+
+This will allow you to import BabylonJS entirely using:
+
+```
+import * as BABYLON from 'babylonjs';
+```
+
+or individual classes using:
+
+```
+import { Scene, Engine } from 'babylonjs';
+```
+
+If using TypeScript, don't forget to add 'babylonjs' to 'types' in tsconfig.json:
+
+```
+    ....
+    "types": [
+        "babylonjs",
+        "anotherAwesomeDependency"
+    ],
+    ....
+```
+
+To add a module install the respected package. A list of extra packages and their installation instructions can be found on [babylonjs' user at npm](https://www.npmjs.com/~babylonjs).
+
 ## Preview release
 
 **3.1-alpha** can be found [here](https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview%20release).

src/Cameras/VR/babylon.webVRCamera.ts

@@ -113,7 +113,8 @@ module BABYLON {
                 }
             });
 
-            this._frameData = new VRFrameData();
+            if (typeof(VRFrameData) !== "undefined")
+                this._frameData = new VRFrameData();
 
             /**
              * The idea behind the following lines: