merged with master

.gitignore

@@ -24,6 +24,7 @@ postProcessLibrary/src/**/*.js
 canvas2D/src/**/*.js
 inspector/src/**/*.js
 serializers/src/**/*.js
+gui/src/**/*.js
 
 # Build results
 [Dd]ebug/

.vscode/settings.json

@@ -9,7 +9,6 @@
         "**/.vs": true,        
         "**/.tempChromeProfileForDebug": true,
         "**/node_modules": true,
-        "**/dist": true,
         "**/temp": true,
         "**/.temp": true,
         "**/*.d.ts": true,

Exporters/Blender/src/babylon-js/__init__.py

@@ -1,7 +1,7 @@
 bl_info = {
     'name': 'Babylon.js',
     'author': 'David Catuhe, Jeff Palmer',
-    'version': (5, 2, 1),
+    'version': (5, 3, -1),
     'blender': (2, 76, 0),
     'location': 'File > Export > Babylon.js (.babylon)',
     'description': 'Export Babylon.js scenes (.babylon)',
@@ -24,6 +24,7 @@ if "bpy" in locals():
     imp.reload(material)
     imp.reload(mesh)
     imp.reload(package_level)
+    imp.reload(shape_key_group)
     imp.reload(sound)
     imp.reload(world)
 else:
@@ -38,6 +39,7 @@ else:
     from . import material
     from . import mesh
     from . import package_level
+    from . import shape_key_group
     from . import sound
     from . import world
 

Exporters/Blender/src/babylon-js/camera.py

@@ -11,7 +11,7 @@ import mathutils
 ARC_ROTATE_CAM = 'ArcRotateCamera'
 DEV_ORIENT_CAM = 'DeviceOrientationCamera'
 FOLLOW_CAM = 'FollowCamera'
-FREE_CAM = 'FreeCamera'
+UNIVERSAL_CAM = 'UniversalCamera'
 GAMEPAD_CAM = 'GamepadCamera'
 TOUCH_CAM = 'TouchCamera'
 V_JOYSTICKS_CAM = 'VirtualJoysticksCamera'
@@ -61,7 +61,7 @@ class Camera(FCurveAnimatable):
 
         if self.CameraType == ARC_ROTATE_CAM or self.CameraType == FOLLOW_CAM:
             if not hasattr(self, 'lockedTargetId'):
-                Logger.warn('Camera type with manditory target specified, but no target to track set.  Ignored', 2)
+                Logger.warn('Camera type with mandatory target specified, but no target to track set.  Ignored', 2)
                 self.fatalProblem = True
 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     def update_for_target_attributes(self, meshesAndNodes):
@@ -146,14 +146,14 @@ bpy.types.Camera.CameraType = bpy.props.EnumProperty(
              (V_JOYSTICKS_CAM        , 'Virtual Joysticks'       , 'Use Virtual Joysticks Camera'),
              (TOUCH_CAM              , 'Touch'                   , 'Use Touch Camera'),
              (GAMEPAD_CAM            , 'Gamepad'                 , 'Use Gamepad Camera'),
-             (FREE_CAM               , 'Free'                    , 'Use Free Camera'),
+             (UNIVERSAL_CAM          , 'Universal'               , 'Use Universal Camera'),
              (FOLLOW_CAM             , 'Follow'                  , 'Use Follow Camera'),
              (DEV_ORIENT_CAM         , 'Device Orientation'      , 'Use Device Orientation Camera'),
              (ARC_ROTATE_CAM         , 'Arc Rotate'              , 'Use Arc Rotate Camera'),
              (VR_DEV_ORIENT_FREE_CAM , 'VR Dev Orientation Free' , 'Use VR Dev Orientation Free Camera'),
              (WEB_VR_FREE_CAM        , 'Web VR Free'             , 'Use Web VR Free Camera')
             ),
-    default = FREE_CAM
+    default = UNIVERSAL_CAM
 )
 bpy.types.Camera.checkCollisions = bpy.props.BoolProperty(
     name='Check Collisions',
@@ -175,7 +175,7 @@ bpy.types.Camera.Camera3DRig = bpy.props.EnumProperty(
     description='',
     items = (
              (RIG_MODE_NONE                             , 'None'                  , 'No 3D effects'),
-             (RIG_MODE_STEREOSCOPIC_ANAGLYPH            , 'Anaaglph'              , 'Stereoscopic Anagylph'),
+             (RIG_MODE_STEREOSCOPIC_ANAGLYPH            , 'Anaglyph'              , 'Stereoscopic Anagylph'),
              (RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL , 'side-by-side Parallel' , 'Stereoscopic side-by-side parallel'),
              (RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_CROSSEYED, 'side-by-side crosseyed', 'Stereoscopic side-by-side crosseyed'),
              (RIG_MODE_STEREOSCOPIC_OVERUNDER           , 'over-under'            , 'Stereoscopic over-under'),

Exporters/Blender/src/babylon-js/exporter_settings_panel.py

@@ -18,6 +18,11 @@ class ExporterSettingsPanel(bpy.types.Panel):
         description='Use face normals on all meshes.  Increases vertices.',
         default = False,
         )
+    bpy.types.Scene.force64Kmeshes = bpy.props.BoolProperty(
+        name='Force 64k per Mesh Vertex Limit',
+        description='When true, break up meshes with > 64k vertices for older\nhardware.  No effect when no qualifying meshes.',
+        default = True,
+        )
     bpy.types.Scene.attachedSound = bpy.props.StringProperty(
         name='Sound',
         description='',
@@ -55,6 +60,7 @@ class ExporterSettingsPanel(bpy.types.Panel):
         scene = context.scene
         layout.prop(scene, 'export_onlySelectedLayer')
         layout.prop(scene, 'export_flatshadeScene')
+        layout.prop(scene, 'force64Kmeshes')
         layout.prop(scene, 'ignoreIKBones')
 
         box = layout.box()

Exporters/Blender/src/babylon-js/json_exporter.py

@@ -30,7 +30,7 @@ class JsonExporter:
             if bpy.ops.object.mode_set.poll():
                 bpy.ops.object.mode_set(mode = 'OBJECT')
 
-            # assign texture location, purely temporary if inlining
+            # assign texture location, purely temporary if in-lining
             self.textureDir = path.dirname(filepath)
             if not scene.inlineTextures:
                 self.textureDir = path.join(self.textureDir, scene.textureDir)
@@ -45,7 +45,6 @@ class JsonExporter:
             Logger.log('inline textures:  ' + format_bool(scene.inlineTextures), 2)
             if not scene.inlineTextures:
                 Logger.log('texture directory:  ' + self.textureDir, 2)
-                
             self.world = World(scene)
 
             bpy.ops.screen.animation_cancel()
@@ -63,6 +62,7 @@ class JsonExporter:
             self.skeletons = []
             skeletonId = 0
             self.meshesAndNodes = []
+            self.morphTargetMngrs = []
             self.materials = []
             self.multiMaterials = []
             self.sounds = []
@@ -99,7 +99,7 @@ class JsonExporter:
                     while True and self.isInSelectedLayer(object, scene):
                         mesh = Mesh(object, scene, nextStartFace, forcedParent, nameID, self)
                         if mesh.hasUnappliedTransforms and hasattr(mesh, 'skeletonWeights'):
-                            self.fatalError = 'Mesh: ' + mesh.name + ' has unapplied transformations.  This will never work for a mesh with an armature.  Export cancelled'
+                            self.fatalError = 'Mesh: ' + mesh.name + ' has un-applied transformations.  This will never work for a mesh with an armature.  Export cancelled'
                             Logger.log(self.fatalError)
                             return
 
@@ -107,6 +107,8 @@ class JsonExporter:
                         
                         if hasattr(mesh, 'instances'):
                             self.meshesAndNodes.append(mesh)
+                            if hasattr(mesh, 'morphTargetManagerId'):
+                                self.morphTargetMngrs.append(mesh)
                         else:
                             break
 
@@ -210,6 +212,17 @@ class JsonExporter:
             mesh.to_scene_file(file_handler)
         file_handler.write(']')
 
+        # Morph targets
+        file_handler.write(',\n"morphTargetManagers":[')
+        first = True
+        for mesh in self.morphTargetMngrs:
+            if first != True:
+                file_handler.write(',')
+
+            first = False
+            mesh.write_morphing_file(file_handler)
+        file_handler.write(']')
+
         # Cameras
         file_handler.write(',\n"cameras":[')
         first = True

Exporters/Blender/src/babylon-js/light_shadow.py

@@ -16,8 +16,8 @@ HEMI_LIGHT = 3
 NO_SHADOWS = 'NONE'
 STD_SHADOWS = 'STD'
 POISSON_SHADOWS = 'POISSON'
-VARIANCE_SHADOWS = 'VARIANCE'
-BLUR_VARIANCE_SHADOWS = 'BLUR_VARIANCE'
+ESM_SHADOWS = 'ESM'
+BLUR_ESM_SHADOWS = 'BLUR_ESM'
 #===============================================================================
 class Light(FCurveAnimatable):
     def __init__(self, light, meshesAndNodes):
@@ -114,12 +114,12 @@ class ShadowGenerator:
         self.mapSize = lamp.data.shadowMapSize
         self.shadowBias = lamp.data.shadowBias
 
-        if lamp.data.shadowMap == VARIANCE_SHADOWS:
-            self.useVarianceShadowMap = True
+        if lamp.data.shadowMap == ESM_SHADOWS:
+            self.useExponentialShadowMap = True
         elif lamp.data.shadowMap == POISSON_SHADOWS:
             self.usePoissonSampling = True
-        elif lamp.data.shadowMap == BLUR_VARIANCE_SHADOWS:
-            self.useBlurVarianceShadowMap = True
+        elif lamp.data.shadowMap == BLUR_ESM_SHADOWS:
+            self.useBlurExponentialShadowMap = True
             self.shadowBlurScale = lamp.data.shadowBlurScale
             self.shadowBlurBoxOffset = lamp.data.shadowBlurBoxOffset
 
@@ -135,12 +135,12 @@ class ShadowGenerator:
         write_string(file_handler, 'lightId', self.lightId)
         write_float(file_handler, 'bias', self.shadowBias)
 
-        if hasattr(self, 'useVarianceShadowMap') :
-            write_bool(file_handler, 'useVarianceShadowMap', self.useVarianceShadowMap)
+        if hasattr(self, 'useExponentialShadowMap') :
+            write_bool(file_handler, 'useExponentialShadowMap', self.useExponentialShadowMap)
         elif hasattr(self, 'usePoissonSampling'):
             write_bool(file_handler, 'usePoissonSampling', self.usePoissonSampling)
-        elif hasattr(self, 'useBlurVarianceShadowMap'):
-            write_bool(file_handler, 'useBlurVarianceShadowMap', self.useBlurVarianceShadowMap)
+        elif hasattr(self, 'useBlurExponentialShadowMap'):
+            write_bool(file_handler, 'useBlurExponentialShadowMap', self.useBlurExponentialShadowMap)
             write_int(file_handler, 'blurScale', self.shadowBlurScale)
             write_int(file_handler, 'blurBoxOffset', self.shadowBlurBoxOffset)
 
@@ -167,8 +167,8 @@ bpy.types.Lamp.shadowMap = bpy.props.EnumProperty(
     items = ((NO_SHADOWS           , 'None'         , 'No Shadow Maps'),
              (STD_SHADOWS          , 'Standard'     , 'Use Standard Shadow Maps'),
              (POISSON_SHADOWS      , 'Poisson'      , 'Use Poisson Sampling'),
-             (VARIANCE_SHADOWS     , 'Variance'     , 'Use Variance Shadow Maps'),
-             (BLUR_VARIANCE_SHADOWS, 'Blur Variance', 'Use Blur Variance Shadow Maps')
+             (ESM_SHADOWS          , 'ESM'          , 'Use Exponential Shadow Maps'),
+             (BLUR_ESM_SHADOWS     , 'Blur ESM'     , 'Use Blur Exponential Shadow Maps')
             ),
     default = NO_SHADOWS
 )
@@ -186,13 +186,13 @@ bpy.types.Lamp.shadowBias = bpy.props.FloatProperty(
 
 bpy.types.Lamp.shadowBlurScale = bpy.props.IntProperty(
     name='Blur Scale',
-    description='',
+    description='Setting when using a Blur Variance shadow map',
     default = 2
 )
 
 bpy.types.Lamp.shadowBlurBoxOffset = bpy.props.IntProperty(
     name='Blur Box Offset',
-    description='',
+    description='Setting when using a Blur Variance shadow map',
     default = 0
 )
 #===============================================================================
@@ -211,12 +211,24 @@ class LightPanel(bpy.types.Panel):
         ob = context.object
         layout = self.layout
         layout.prop(ob.data, 'shadowMap')
-        layout.prop(ob.data, 'shadowMapSize')
-        layout.prop(ob.data, 'shadowBias')
+
+        usingShadows =  ob.data.shadowMap != NO_SHADOWS
+        row = layout.row()
+        row.enabled = usingShadows
+        row.prop(ob.data, 'shadowMapSize')
+        
+        row = layout.row()
+        row.enabled = usingShadows
+        row.prop(ob.data, 'shadowBias')
 
         box = layout.box()
-        box.label(text="Blur Variance Shadows")
-        box.prop(ob.data, 'shadowBlurScale')
-        box.prop(ob.data, 'shadowBlurBoxOffset')
+        box.label(text="Blur ESM Shadows")
+        usingBlur = ob.data.shadowMap == BLUR_ESM_SHADOWS
+        row = box.row()
+        row.enabled = usingBlur
+        row.prop(ob.data, 'shadowBlurScale')
+        row = box.row()
+        row.enabled = usingBlur
+        row.prop(ob.data, 'shadowBlurBoxOffset')
 
         layout.prop(ob.data, 'autoAnimate')

Exporters/Blender/src/babylon-js/logger.py

@@ -53,4 +53,5 @@ class Logger:
             Logger.instance.log_handler.write('\t')
 
         Logger.instance.log_handler.write(msg)
+        print(msg) # for debugging / running Blender fron console
         if not noNewLine: Logger.instance.log_handler.write('\n')

Exporters/Blender/src/babylon-js/material.py

@@ -187,7 +187,7 @@ class BakingRecipe:
 
         # accumulators set by Blender Game
         self.backFaceCulling = True  # used only when baking
-        self.isBillboard = len(mesh.material_slots) == 1 and mesh.material_slots[0].material.game_settings.face_orientation == 'BILLBOARD'
+        self.isBillboard = len(mesh.material_slots) == 1 and mesh.material_slots[0] is not None and mesh.material_slots[0].material.game_settings.face_orientation == 'BILLBOARD'
 
         # Cycles specific, need to get the node trees of each material
         self.nodeTrees = []

Exporters/Blender/src/babylon-js/mesh.py

@@ -4,16 +4,18 @@ from .package_level import *
 from .f_curve_animatable import *
 from .armature import *
 from .material import *
+from .shape_key_group import *
 
 import bpy
 import math
 from mathutils import Vector
+from random import randint
 import shutil
 
 # output related constants
 MAX_VERTEX_ELEMENTS = 65535
 MAX_VERTEX_ELEMENTS_32Bit = 16777216
-COMPRESS_MATRIX_INDICES = True # this is True for .babylon exporter & False for TOB
+COMPRESS_MATRIX_INDICES = True
 
 # used in Mesh & Node constructors, defined in BABYLON.AbstractMesh
 BILLBOARDMODE_NONE = 0
@@ -31,6 +33,8 @@ CAPSULE_IMPOSTER = 5
 CONE_IMPOSTER = 6
 CYLINDER_IMPOSTER = 7
 CONVEX_HULL_IMPOSTER = 8
+
+SHAPE_KEY_GROUPS_ALLOWED = False
 #===============================================================================
 class Mesh(FCurveAnimatable):
     def __init__(self, object, scene, startFace, forcedParent, nameID, exporter):
@@ -141,7 +145,7 @@ class Mesh(FCurveAnimatable):
             self.physicsRestitution = object.rigid_body.restitution
 
         # process all of the materials required
-        maxVerts = MAX_VERTEX_ELEMENTS # change for multi-materials
+        maxVerts = MAX_VERTEX_ELEMENTS if scene.force64Kmeshes else MAX_VERTEX_ELEMENTS_32Bit # change for multi-materials or shapekeys
         recipe = BakingRecipe(object)
         self.billboardMode = BILLBOARDMODE_ALL if recipe.isBillboard else BILLBOARDMODE_NONE
 
@@ -212,6 +216,19 @@ class Mesh(FCurveAnimatable):
             totalInfluencers = 0
             highestInfluenceObserved = 0
 
+        hasShapeKeys = False
+        if object.data.shape_keys:
+            for block in object.data.shape_keys.key_blocks:
+                if (block.name == 'Basis'):
+                    hasShapeKeys = True
+                    keyOrderMap = []
+                    basis = block
+                    maxVerts = MAX_VERTEX_ELEMENTS_32Bit
+                    break
+
+            if not hasShapeKeys:
+                Logger.warn('Basis key missing, shape-key processing NOT performed', 2)
+
         # used tracking of vertices as they are received
         alreadySavedVertices = []
         vertices_Normals = []
@@ -370,6 +387,9 @@ class Mesh(FCurveAnimatable):
                             weightsPerVertex.append(matricesWeights)
                             indicesPerVertex.append(matricesIndices)
 
+                        if hasShapeKeys:
+                            keyOrderMap.append([vertex_index, len(self.positions)]) # use len positions before it is append to convert from 1 to 0 origin
+
                         vertices_indices[vertex_index].append(index)
 
                         self.positions.append(position)
@@ -381,7 +401,7 @@ class Mesh(FCurveAnimatable):
             self.subMeshes.append(SubMesh(materialIndex, subMeshVerticesStart, subMeshIndexStart, verticesCount - subMeshVerticesStart, indicesCount - subMeshIndexStart))
 
         if verticesCount > MAX_VERTEX_ELEMENTS:
-            Logger.warn('Due to multi-materials / Shapekeys & this meshes size, 32bit indices must be used.  This may not run on all hardware.', 2)
+            Logger.warn('Due to multi-materials, Shapekeys, or exporter settings & this meshes size, 32bit indices must be used.  This may not run on all hardware.', 2)
 
         BakedMaterial.meshBakingClean(object)
 
@@ -411,11 +431,57 @@ class Mesh(FCurveAnimatable):
         numZeroAreaFaces = self.find_zero_area_faces()
         if numZeroAreaFaces > 0:
             Logger.warn('# of 0 area faces found:  ' + str(numZeroAreaFaces), 2)
+
+        # shape keys for mesh
+        if hasShapeKeys:
+            Mesh.sort(keyOrderMap)
+            self.rawShapeKeys = []
+            self.morphTargetManagerId = randint(0, 1000000) # not used for TOB implementation
+            groupNames = []
+            Logger.log('Shape Keys:', 2)
+
+            # process the keys in the .blend
+            for block in object.data.shape_keys.key_blocks:
+                # perform name format validation, before processing
+                keyName = block.name
+
+                # the Basis shape key is a member of all groups, processed in 2nd pass
+                if keyName == 'Basis': continue
+
+                if keyName.find('-') <= 0 and SHAPE_KEY_GROUPS_ALLOWED:
+                    if object.data.defaultShapeKeyGroup != DEFAULT_SHAPE_KEY_GROUP:
+                        keyName = object.data.defaultShapeKeyGroup + '-' + keyName
+                    else: continue
+                
+                group = None
+                state = keyName
+                if SHAPE_KEY_GROUPS_ALLOWED:
+                    temp = keyName.upper().partition('-')
+                    group = temp[0]
+                    state = temp[2]
+                self.rawShapeKeys.append(RawShapeKey(block, group, state, keyOrderMap, basis))
+
+                if SHAPE_KEY_GROUPS_ALLOWED:
+                    # check for a new group, add to groupNames if so
+                    newGroup = True
+                    for group in groupNames:
+                        if temp[0] == group:
+                            newGroup = False
+                            break
+                    if newGroup:
+                       groupNames.append(temp[0])
+
+            # process into ShapeKeyGroups, when rawShapeKeys found and groups allowed (implied)
+            if len(groupNames) > 0:
+                self.shapeKeyGroups = []
+                basis = RawShapeKey(basis, None, 'BASIS', keyOrderMap, basis)
+                for group in groupNames:
+                    self.shapeKeyGroups.append(ShapeKeyGroup(group,self.rawShapeKeys, basis.vertices))
 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     def find_zero_area_faces(self):
         nFaces = int(len(self.indices) / 3)
         nZeroAreaFaces = 0
-        for f in range(0, nFaces):
+        for f in range(nFaces):
             faceOffset = f * 3
             p1 = self.positions[self.indices[faceOffset    ]]
             p2 = self.positions[self.indices[faceOffset + 1]]
@@ -426,6 +492,19 @@ class Mesh(FCurveAnimatable):
         return nZeroAreaFaces
 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     @staticmethod
+    # ShapeKeyGroup depends on AffectedIndices being in asending order, so sort it, probably nothing to do
+    def sort(keyOrderMap):
+        notSorted = True
+        while(notSorted):
+            notSorted = False
+            for idx in range(1, len(keyOrderMap)):
+                if keyOrderMap[idx - 1][1] > keyOrderMap[idx][1]:
+                    tmp = keyOrderMap[idx]
+                    keyOrderMap[idx    ] = keyOrderMap[idx - 1]
+                    keyOrderMap[idx - 1] = tmp
+                    notSorted = True
+# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    @staticmethod
     def mesh_triangulate(mesh):
         try:
             import bmesh
@@ -596,11 +675,29 @@ class Mesh(FCurveAnimatable):
 
             first = False
         file_handler.write(']')
+        
+        # Shape Keys
+        if hasattr(self, 'morphTargetManagerId'):
+            write_int(file_handler, 'morphTargetManagerId', self.morphTargetManagerId)
 
         # Close mesh
         file_handler.write('}\n')
         self.alreadyExported = True
 #===============================================================================
+    def write_morphing_file(self, file_handler):
+        first = True
+        file_handler.write('{')
+        write_int(file_handler, 'id', self.morphTargetManagerId, True)
+        file_handler.write('\n,"targets":[')
+        for key in self.rawShapeKeys:
+            if first == False:
+                file_handler.write(',')
+
+            key.to_scene_file(file_handler)
+
+            first = False
+        file_handler.write(']}')
+#===============================================================================
 class MeshInstance:
      def __init__(self, instancedMesh, rotation, rotationQuaternion):
         self.name = instancedMesh.name

Exporters/Blender/src/babylon-js/package_level.py

@@ -19,7 +19,10 @@ def format_exporter_version(bl_info = None):
     if bl_info is None:
         bl_info = get_bl_info()
     exporterVersion = bl_info['version']
-    return str(exporterVersion[0]) + '.' + str(exporterVersion[1]) +  '.' + str(exporterVersion[2])
+    if exporterVersion[2] >= 0:
+        return str(exporterVersion[0]) + '.' + str(exporterVersion[1]) +  '.' + str(exporterVersion[2])
+    else:
+        return str(exporterVersion[0]) + '.' + str(exporterVersion[1]) +  '-beta'
 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 def blenderMajorMinorVersion():
     # in form of '2.77 (sub 0)'
@@ -123,16 +126,18 @@ def format_matrix4(matrix):
 def format_array3(array):
     return format_f(array[0]) + ',' + format_f(array[1]) + ',' + format_f(array[2])
 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-def format_array(array, indent = ''):
+def format_array(array, indent = '', beginIdx = 0, firstNotIncludedIdx = -1):
     ret = ''
     first = True
     nOnLine = 0
-    for element in array:
+    
+    endIdx = len(array) if firstNotIncludedIdx == -1 else firstNotIncludedIdx
+    for idx in range(beginIdx, endIdx):
         if (first != True):
             ret +=','
         first = False;
 
-        ret += format_f(element)
+        ret += format_f(array[idx])
         nOnLine += 1
 
         if nOnLine >= VERTEX_OUTPUT_PER_LINE:
@@ -147,7 +152,7 @@ def format_color(color):
 def format_vector(vector, switchYZ = True):
     return format_f(vector.x) + ',' + format_f(vector.z) + ',' + format_f(vector.y) if switchYZ else format_f(vector.x) + ',' + format_f(vector.y) + ',' + format_f(vector.z)
 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-def format_vector_array(vectorArray, indent = ''):
+def format_vector_array(vectorArray, indent = '', switchYZ = True):
     ret = ''
     first = True
     nOnLine = 0
@@ -156,7 +161,7 @@ def format_vector_array(vectorArray, indent = ''):
             ret +=','
         first = False;
 
-        ret += format_vector(vector)
+        ret += format_vector(vector, switchYZ)
         nOnLine += 3
 
         if nOnLine >= VERTEX_OUTPUT_PER_LINE:
@@ -216,6 +221,16 @@ def same_vertex(vertA, vertB):
 
     return True
 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+def similar_vertex(vertA, vertB, tolerance = 0.00015):
+    if vertA is None or vertB is None: return False
+
+    if (abs(vertA.x - vertB.x) > tolerance or
+        abs(vertA.y - vertB.y) > tolerance or
+        abs(vertA.z - vertB.z) > tolerance ):
+        return False
+
+    return True
+# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 def same_array(arrayA, arrayB):
     if(arrayA is None or arrayB is None): return False
     if len(arrayA) != len(arrayB): return False
@@ -241,8 +256,8 @@ def write_color(file_handler, name, color):
 def write_vector(file_handler, name, vector, switchYZ = True):
     file_handler.write(',"' + name + '":[' + format_vector(vector, switchYZ) + ']')
 
-def write_vector_array(file_handler, name, vectorArray):
-    file_handler.write('\n,"' + name + '":[' + format_vector_array(vectorArray) + ']')
+def write_vector_array(file_handler, name, vectorArray, switchYZ = True):
+    file_handler.write('\n,"' + name + '":[' + format_vector_array(vectorArray, '', switchYZ) + ']')
 
 def write_quaternion(file_handler, name, quaternion):
     file_handler.write(',"' + name  +'":[' + format_quaternion(quaternion) + ']')

Exporters/Blender/src/babylon-js/shape_key_group.py

@@ -0,0 +1,104 @@
+from .logger import *
+from .package_level import *
+
+import bpy
+#===============================================================================
+# extract data in Mesh order, no optimization from group analysis yet; mapped into a copy of position
+# 
+class RawShapeKey:
+    def __init__(self, keyBlock, group, state, keyOrderMap, basis):
+        self.group = group
+        self.state = state
+        self.vertices = []
+
+        retSz = len(keyOrderMap)
+        for i in range(retSz):
+            self.vertices.append(None)
+
+        nDifferent = 0
+        for i in range(retSz):
+            pair = keyOrderMap[i]
+            value = keyBlock.data[pair[0]].co
+            self.vertices[pair[1]] = value
+            if not similar_vertex(value, basis.data[pair[0]].co):
+                nDifferent += 1
+
+        # only log when groups / allowVertReduction
+        if state != 'BASIS' and group is not None:
+            Logger.log('shape key "' + group + '-' + state + '":  n verts different from basis: ' + str(nDifferent), 3)
+# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    def to_scene_file(self, file_handler):
+        file_handler.write('{')
+        write_string(file_handler, 'name', self.state, True)
+        write_vector_array(file_handler, 'positions', self.vertices)
+        write_int(file_handler, 'influence', 0)
+        file_handler.write('}')
+#===============================================================================
+class ShapeKeyGroup:
+    def __init__(self, group, rawShapeKeys, basisVerts):
+        self.group = group
+        self.basisVerts = basisVerts
+        self.stateNames = []
+        self.stateVertices = []
+        self.affectedIndices = []
+
+        nRawKeys = len(rawShapeKeys)
+        nSize = len(self.basisVerts)
+
+        sameForAll = []
+        for i in range(nSize):
+            sameForAll.append(True)
+
+        # first pass to determine which vertices are not the same across all members of a group & also Basis
+        for i in range(nSize):
+            for key in rawShapeKeys:
+                # no need for more checking once 1 difference is found
+                if not sameForAll[i]:
+                    break;
+
+                # skip key if not member of the current group being processed
+                if group != key.group:
+                    continue;
+
+                # check vertex not different from Basis
+                if not similar_vertex(key.vertices[i],  self.basisVerts[i]):
+                    sameForAll[i] = False
+                    break;
+
+        affectedWholeVertices = []
+
+        # pass to convert sameForAll into self.affectedIndices, build 'BASIS' state at the same time
+        for i in range(nSize):
+            if not sameForAll[i]:
+                affectedWholeVertices.append(i)
+                self.affectedIndices.append(i * 3 + 0)
+                self.affectedIndices.append(i * 3 + 1)
+                self.affectedIndices.append(i * 3 + 2)
+
+        Logger.log('Shape-key group, ' + group + ', # of affected vertices: '+ str(len(affectedWholeVertices)) + ', out of ' + str(nSize), 2)
+
+        # pass to convert rawShapeKeys in this group, to stateVertices of only affected indices
+        for key in rawShapeKeys:
+            if group != key.group:
+                continue;
+
+            affectedVertices = []
+            for idx in affectedWholeVertices:
+                # clone vert, so key can be deleted in pass 1, and not affect pass2
+                # encode as a difference to basis, so more compact
+                vert = key.vertices[idx].copy()
+                vert.x -= self.basisVerts[idx].x
+                vert.y -= self.basisVerts[idx].y
+                vert.z -= self.basisVerts[idx].z
+                affectedVertices.append(vert)
+
+            self.stateNames.append(key.state)
+            self.stateVertices.append(affectedVertices)
+# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    def to_script_file(self, file_handler, var, indent):
+        writeInt32Array(file_handler, '_i', indent, self.affectedIndices, True)
+        file_handler.write(indent  + 'shapeKeyGroup = new QI.ShapeKeyGroup(' + var + ', "' + self.group + '", _i);\n')
+
+        for state_idx in range(len(self.stateVertices)):
+            writeFloat32Array(file_handler, '_i', indent, self.stateVertices[state_idx], True)
+            file_handler.write(indent  + 'shapeKeyGroup._addShapeKey("' + self.stateNames[state_idx] + '", true, _i);\n')

Playground/css/index.css

@@ -40,7 +40,7 @@ body {
 }
 .wrapper #jsEditor {
     padding-top:5px;
-    height: 100%;
+    height: calc(100% - 10px);
 }
 
 .wrapper #jsEditor.light {
@@ -155,6 +155,7 @@ body {
     left: 0;
     top: 25px;
     min-width: 100%;
+    width: 150px;
     display: none;
 }
 
@@ -203,7 +204,8 @@ body {
     z-index: 10;
     top: 32px;
     width:550px;
-    max-height:350px;
+    max-height:390px;
+    overflow-y: auto;
     right:0;
     position:absolute;
     font-size:0.8em;
@@ -451,32 +453,45 @@ body {
 
 /*Media queries*/
 
-@media (max-width: 1600px) {
-    .desktopOnly {
-        display: none !important;
+@media (min-width: 1475px) {
+    .navBar1600 { display: block; }
+    .navBar1475 { display: none; }
+    .navBar1030 { display: none; }
+    .navBar750 { display: none; }
+
+    .navbar .select .toDisplayBig ul {
+        column-count: 3;
     }
 }
 @media (max-width: 1475px) {
-    .desktopOnly {
-        display: none !important;
-    }
-    .desktopTabletOnly {
-        display: none !important;
+    .navBar1600 { display: none; }
+    .navBar1475 { display: block; }
+    .navBar1030 { display: none; }
+    .navBar750 { display: none; }
+
+    .navbar .select .toDisplayBig ul {
+        column-count: 3;
     }
 }
-@media (max-width: 975px) {
-    .title {
-        display : none !important;
-    }
-    .version {
-        display : none !important;
+@media (max-width: 1030px) {
+    .navBar1600 { display: none; }
+    .navBar1475 { display: none; }
+    .navBar1030 { display: block; }
+    .navBar750 { display: none; }
+
+    .navbar .select .toDisplayBig ul {
+        column-count: 2;
     }
 }
-@media (max-width: 660px) {
+@media (max-width: 750px) {
+    .navBar1600 { display: none; }
+    .navBar1475 { display: none; }
+    .navBar1030 { display: none; }
+    .navBar750 { display: block; }
     .removeOnPhone {
         display : none !important;
     }
-    .category {
-        margin:0 !important;
+    .navbar .select .toDisplayBig ul {
+        column-count: 1;
     }
 }

Playground/debug.html

@@ -16,39 +16,41 @@
     <!--Monaco-->
     <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
     <!-- Babylon.js -->
-    <script src="https://www.babylonjs.com/cannon.js"></script>
-    <script src="https://www.babylonjs.com/Oimo.js"></script>
-    <script src="https://www.babylonjs.com/babylon.max.js"></script>
-    <script src="https://www.babylonjs.com/babylon.canvas2d.js"></script>
-    <script src="https://www.babylonjs.com/babylon.inspector.bundle.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.fireMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.waterMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.lavaMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.normalMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.skyMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.triPlanarMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.terrainMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.gradientMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.furMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.gridMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.shadowOnlyMaterial.min.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.brickProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.cloudProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.fireProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.grassProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.marbleProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.roadProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.starfieldProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.woodProceduralTexture.min.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.asciiArtPostProcess.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.digitalRainPostProcess.min.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.glTFFileLoader.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.objFileLoader.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.stlFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/cannon.js"></script>
+    <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://preview.babylonjs.com/babylon.max.js"></script>    
+    <script src="https://preview.babylonjs.com/canvas2D/babylon.canvas2d.js"></script>
+    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
+
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
 
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
 
@@ -58,7 +60,7 @@
 </head>
 
 <body>
-    <div class="navbar">
+    <div class="navbar navBar1600">
         <div class="title">
             Babylon.js Playground
         </div>
@@ -67,71 +69,268 @@
         </div>
 
         <div class="category">
-            <div class="button run" id="runButton">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+            <div class="button run" id="runButton1600">Run <i class="fa fa-play" aria-hidden="true"></i></div>
         </div>
 
 
         <div class="category">
-            <div class="button" id="newButton">New<i class="fa fa-file" aria-hidden="true"></i></div>
-            <div class="button" id="clearButton">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+            <div class="button" id="newButton1600">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1600">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
         </div>
 
         <div class="category">
-            <div class="button" id="saveButton">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
-            <div class="button" id="zipButton">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+            <div class="button" id="saveButton1600">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1600">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
         </div>
 
-
-        <div class="category desktopOnly">
-            <div class="button select"><span id="currentFontSize">Font: 14</span>
+        <div class="category">
+            <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option" onclick="setFontSize(12);">12</div>
-                    <div class="option" onclick="setFontSize(14);">14</div>
-                    <div class="option" onclick="setFontSize(16);">16</div>
-                    <div class="option" onclick="setFontSize(18);">18</div>
-                    <div class="option" onclick="setFontSize(20);">20</div>
-                    <div class="option" onclick="setFontSize(22);">22</div>
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1600">Dark</div>
+                            <div class="option" id="lightTheme1600">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1600">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1600">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
-            <div class="button select">Theme
+
+            <div class="button uncheck" id="debugButton1600">Debug layer <i class="fa fa-square-o" aria-hidden="true"></i></div>
+            <div class="button" id="metadataButton1600">Metadata</div>
+        </div>
+
+
+
+        <div class="category right">
+            <div class="button select"><span id="currentVersion1600">Version: Latest</span>
                 <div class="toDisplay">
-                    <div class="option" id="darkTheme">Dark</div>
-                    <div class="option" id="lightTheme">Light</div>
+                    <div class="option" onclick="setVersion('latest');">Latest</div>
+                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                </div>
+            </div>
+            <div class="button select"> <span id="currentScript1600">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1600">
+                    </ul>
                 </div>
             </div>
         </div>
-        <div class="category desktopTabletOnly">
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar1475">
+        <div class="title">
+            Babylon.js Playground
+        </div>
+        <div class="version" id="mainTitle">
+            v3.0-alpha
+        </div>
+
+        <div class="category">
+            <div class="button run" id="runButton1475">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1475">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1475">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1475">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1475">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
             <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option" id='safemodeToggle'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
-                    <div class="option checked" id="editorButton">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1475">Dark</div>
+                            <div class="option" id="lightTheme1475">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1475">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id='safemodeToggle1475'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="formatButton1475">Format code</div>
+                    <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton1475">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion1475">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
                     </div>
-                    <div class="option" id="fullscreenButton">Fullscreen</div>
-                    <div class="option" id="metadataButton">Metadata</div>
                 </div>
             </div>
+        </div>
 
-            <div class="button check uncheck" id="debugButton">Debug layer</div>
+        <div class="category right">
+            <div class="button select"> <span id="currentScript1475">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1475">
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar1030">
+        <div class="category">
+            <div class="button run" id="runButton1030">Run <i class="fa fa-play" aria-hidden="true"></i></div>
         </div>
 
 
+        <div class="category">
+            <div class="button" id="newButton1030">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1030">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1030">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1030">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1030">Dark</div>
+                            <div class="option" id="lightTheme1030">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1030">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1030">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="formatButton1030">Format code</div>
+                    <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton1030">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion1030">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <div class="category right">
-            <div class="button select desktopTabletOnly"><span id="currentVersion">Version: Latest</span>
+            <div class="button select"> <span id="currentScript1030">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1030">
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar750">
+        <div class="category">
+            <div class="button select">File
                 <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <div class="option" id="runButton750">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+                    <div class="option" id="newButton750">New <i class="fa fa-file" aria-hidden="true"></i></div>
+                    <div class="option" id="clearButton750">Clear <i class="fa fa-trash" aria-hidden="true"></i></div>
+                    <div class="option" id="saveButton750">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+                    <div class="option" id="zipButton750">Zip <i class="fa fa-download" aria-hidden="true"></i></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme750">Dark</div>
+                            <div class="option" id="lightTheme750">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize750">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle750">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="formatButton750">Format code</div>
+                    <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton750">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion750">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="button select"> <span id="currentScript">Scenes</span>
+        </div>
+
+        <div class="category right">
+            <div class="button select"> <span id="currentScript750">Scenes</span>
                 <div class="toDisplayBig">
-                    <ul id="scriptsList">
+                    <ul id="scriptsList750">
                     </ul>
                 </div>
             </div>
         </div>
         <div class="save-message" id="saveMessage">
-            This PG has no metadata. Click save to add them.
+            This PG has missing metadata. Click save to add them.
         </div>
     </div>
 
@@ -150,11 +349,11 @@
     <div class="navbarBottom">
         <div id="statusBar"></div>
         <div class="links">
+            <div class='link'><a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a></div>
             <div class='link'> <a target='_new' href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></div>
             <div class='link'><a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a></div>
-            <div class='link'><a target='_new' href="https://github.com/BabylonJS/Babylon.js/wiki">Wiki</a></div>
             <div class='link'><a target='_new' href="https://doc.babylonjs.com">Documentation</a></div>
-            <div class='link'><a target='_new' href="https://doc.babylonjs.com/playground">Playground Search</a></div>
+            <div class='link'><a target='_new' href="https://doc.babylonjs.com/playground">Search</a></div>
         </div>
     </div>
 

Playground/frame.html

@@ -5,39 +5,42 @@
     <title>Babylon.js Playground</title>
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <!-- Babylon.js -->
-    <script src="https://www.babylonjs.com/cannon.js"></script>
-    <script src="https://www.babylonjs.com/Oimo.js"></script>
-    <script src="https://www.babylonjs.com/babylon.js"></script>
-    <script src="https://www.babylonjs.com/babylon.canvas2d.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.fireMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.waterMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.lavaMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.normalMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.skyMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.triPlanarMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.terrainMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.gradientMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.furMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.gridMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.shadowOnlyMaterial.min.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.brickProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.cloudProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.fireProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.grassProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.marbleProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.roadProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.starfieldProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.woodProceduralTexture.min.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.asciiArtPostProcess.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.digitalRainPostProcess.min.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.glTFFileLoader.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.objFileLoader.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.stlFileLoader.js"></script>
-
+    <script src="https://preview.babylonjs.com/cannon.js"></script>
+    <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://preview.babylonjs.com/babylon.js"></script>    
+    <script src="https://preview.babylonjs.com/canvas2D/babylon.canvas2d.js"></script>
+    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
+
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
+    
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
     <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
     <link href="frame.css" rel="stylesheet" />

Playground/index-local.html

@@ -24,7 +24,7 @@
 </head>
 
 <body>
-    <div class="navbar">
+    <div class="navbar navBar1600">
         <div class="title">
             Babylon.js Playground
         </div>
@@ -33,71 +33,268 @@
         </div>
 
         <div class="category">
-            <div class="button run" id="runButton">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+            <div class="button run" id="runButton1600">Run <i class="fa fa-play" aria-hidden="true"></i></div>
         </div>
 
 
         <div class="category">
-            <div class="button" id="newButton">New<i class="fa fa-file" aria-hidden="true"></i></div>
-            <div class="button" id="clearButton">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+            <div class="button" id="newButton1600">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1600">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
         </div>
 
         <div class="category">
-            <div class="button" id="saveButton">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
-            <div class="button" id="zipButton">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+            <div class="button" id="saveButton1600">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1600">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
         </div>
 
-
-        <div class="category desktopOnly">
-            <div class="button select"><span id="currentFontSize">Font: 14</span>
+        <div class="category">
+            <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option" onclick="setFontSize(12);">12</div>
-                    <div class="option" onclick="setFontSize(14);">14</div>
-                    <div class="option" onclick="setFontSize(16);">16</div>
-                    <div class="option" onclick="setFontSize(18);">18</div>
-                    <div class="option" onclick="setFontSize(20);">20</div>
-                    <div class="option" onclick="setFontSize(22);">22</div>
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1600">Dark</div>
+                            <div class="option" id="lightTheme1600">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1600">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1600">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
-            <div class="button select">Theme
+
+            <div class="button uncheck" id="debugButton1600">Debug layer <i class="fa fa-square-o" aria-hidden="true"></i></div>
+            <div class="button" id="metadataButton1600">Metadata</div>
+        </div>
+
+
+
+        <div class="category right">
+            <div class="button select"><span id="currentVersion1600">Version: Latest</span>
                 <div class="toDisplay">
-                    <div class="option" id="darkTheme">Dark</div>
-                    <div class="option" id="lightTheme">Light</div>
+                    <div class="option" onclick="setVersion('latest');">Latest</div>
+                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                </div>
+            </div>
+            <div class="button select"> <span id="currentScript1600">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1600">
+                    </ul>
                 </div>
             </div>
         </div>
-        <div class="category desktopTabletOnly">
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar1475">
+        <div class="title">
+            Babylon.js Playground
+        </div>
+        <div class="version" id="mainTitle">
+            v3.0-alpha
+        </div>
+
+        <div class="category">
+            <div class="button run" id="runButton1475">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1475">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1475">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1475">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1475">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
             <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option" id='safemodeToggle'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
-                    <div class="option checked" id="editorButton">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1475">Dark</div>
+                            <div class="option" id="lightTheme1475">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1475">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id='safemodeToggle1475'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="formatButton1475">Format code</div>
+                    <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton1475">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion1475">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
                     </div>
-                    <div class="option" id="fullscreenButton">Fullscreen</div>
-                    <div class="option" id="metadataButton">Metadata</div>
                 </div>
             </div>
+        </div>
 
-            <div class="button check uncheck" id="debugButton">Debug layer</div>
+        <div class="category right">
+            <div class="button select"> <span id="currentScript1475">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1475">
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar1030">
+        <div class="category">
+            <div class="button run" id="runButton1030">Run <i class="fa fa-play" aria-hidden="true"></i></div>
         </div>
 
 
+        <div class="category">
+            <div class="button" id="newButton1030">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1030">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1030">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1030">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1030">Dark</div>
+                            <div class="option" id="lightTheme1030">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1030">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1030">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="formatButton1030">Format code</div>
+                    <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton1030">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion1030">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <div class="category right">
-            <div class="button select desktopTabletOnly"><span id="currentVersion">Version: Latest</span>
+            <div class="button select"> <span id="currentScript1030">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1030">
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar750">
+        <div class="category">
+            <div class="button select">File
                 <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <div class="option" id="runButton750">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+                    <div class="option" id="newButton750">New <i class="fa fa-file" aria-hidden="true"></i></div>
+                    <div class="option" id="clearButton750">Clear <i class="fa fa-trash" aria-hidden="true"></i></div>
+                    <div class="option" id="saveButton750">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+                    <div class="option" id="zipButton750">Zip <i class="fa fa-download" aria-hidden="true"></i></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme750">Dark</div>
+                            <div class="option" id="lightTheme750">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize750">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle750">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="formatButton750">Format code</div>
+                    <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton750">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion750">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="button select"> <span id="currentScript">Scenes</span>
+        </div>
+
+        <div class="category right">
+            <div class="button select"> <span id="currentScript750">Scenes</span>
                 <div class="toDisplayBig">
-                    <ul id="scriptsList">
+                    <ul id="scriptsList750">
                     </ul>
                 </div>
             </div>
         </div>
         <div class="save-message" id="saveMessage">
-            This PG has no metadata. Click save to add them.
+            This PG has missing metadata. Click save to add them.
         </div>
     </div>
 
@@ -116,11 +313,11 @@
     <div class="navbarBottom">
         <div id="statusBar"></div>
         <div class="links">
+            <div class='link'><a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a></div>
             <div class='link'> <a target='_new' href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></div>
             <div class='link'><a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a></div>
-            <div class='link'><a target='_new' href="https://github.com/BabylonJS/Babylon.js/wiki">Wiki</a></div>
             <div class='link'><a target='_new' href="https://doc.babylonjs.com">Documentation</a></div>
-            <div class='link'><a target='_new' href="https://doc.babylonjs.com/playground">Playground Search</a></div>
+            <div class='link'><a target='_new' href="https://doc.babylonjs.com/playground">Search</a></div>
         </div>
     </div>
 

Playground/index.html

@@ -16,39 +16,41 @@
     <!--Monaco-->
     <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
     <!-- Babylon.js -->
-    <script src="https://www.babylonjs.com/cannon.js"></script>
-    <script src="https://www.babylonjs.com/Oimo.js"></script>
-    <script src="https://www.babylonjs.com/babylon.js"></script>
-    <script src="https://www.babylonjs.com/babylon.canvas2d.js"></script>
-    <script src="https://www.babylonjs.com/babylon.inspector.bundle.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.fireMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.waterMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.lavaMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.normalMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.skyMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.triPlanarMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.terrainMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.gradientMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.furMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.gridMaterial.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.shadowOnlyMaterial.min.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.brickProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.cloudProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.fireProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.grassProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.marbleProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.roadProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.starfieldProceduralTexture.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.woodProceduralTexture.min.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.asciiArtPostProcess.min.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.digitalRainPostProcess.min.js"></script>
-
-    <script src="https://www.babylonjs.com/lib/babylon.glTFFileLoader.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.objFileLoader.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.stlFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/cannon.js"></script>
+    <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://preview.babylonjs.com/babylon.js"></script>    
+    <script src="https://preview.babylonjs.com/canvas2D/babylon.canvas2d.js"></script>
+    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
+
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
 
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
 
@@ -57,7 +59,7 @@
 </head>
 
 <body>
-    <div class="navbar">
+    <div class="navbar navBar1600">
         <div class="title">
             Babylon.js Playground
         </div>
@@ -66,51 +68,105 @@
         </div>
 
         <div class="category">
-            <div class="button run" id="runButton">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+            <div class="button run" id="runButton1600">Run <i class="fa fa-play" aria-hidden="true"></i></div>
         </div>
 
 
         <div class="category">
-            <div class="button" id="newButton">New<i class="fa fa-file" aria-hidden="true"></i></div>
-            <div class="button removeOnPhone" id="clearButton">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+            <div class="button" id="newButton1600">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1600">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
         </div>
 
         <div class="category">
-            <div class="button" id="saveButton">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
-            <div class="button removeOnPhone" id="zipButton">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+            <div class="button" id="saveButton1600">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1600">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
         </div>
 
-
-        <!--<div class="category desktopOnly">-->
-
-        <!--<div class="button select"><span id="currentFontSize">Font: 14</span>
+        <div class="category">
+            <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option" onclick="setFontSize(12);">12</div>
-                    <div class="option" onclick="setFontSize(14);">14</div>
-                    <div class="option" onclick="setFontSize(16);">16</div>
-                    <div class="option" onclick="setFontSize(18);">18</div>
-                    <div class="option" onclick="setFontSize(20);">20</div>
-                    <div class="option" onclick="setFontSize(22);">22</div>
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1600">Dark</div>
+                            <div class="option" id="lightTheme1600">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1600">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1600">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="formatButton1600">Format code</div>
                 </div>
-            </div>-->
+            </div>
+
+            <div class="button uncheck" id="debugButton1600">Debug layer <i class="fa fa-square-o" aria-hidden="true"></i></div>
+            <div class="button" id="metadataButton1600">Metadata</div>
+        </div>
+
+
 
-        <!--<div class="button select">Theme
+        <div class="category right">
+            <div class="button select"><span id="currentVersion1600">Version: Latest</span>
                 <div class="toDisplay">
-                    <div class="option" id="darkTheme">Dark</div>
-                    <div class="option" id="lightTheme">Light</div>
+                    <div class="option" onclick="setVersion('latest');">Latest</div>
+                    <div class="option" onclick="setVersion('2.5');">2.5</div>
                 </div>
-            </div>-->
-        <!--</div>-->
-        <div class="category desktopTabletOnly">
+            </div>
+            <div class="button select"> <span id="currentScript1600">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1600">
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar1475">
+        <div class="title">
+            Babylon.js Playground
+        </div>
+        <div class="version" id="mainTitle">
+            v3.0-alpha
+        </div>
+
+        <div class="category">
+            <div class="button run" id="runButton1475">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1475">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1475">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1475">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1475">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
             <div class="button select">Settings
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme">Dark</div>
-                            <div class="option" id="lightTheme">Light</div>
+                            <div class="option" id="darkTheme1475">Dark</div>
+                            <div class="option" id="lightTheme1475">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect"><span id="currentFontSize">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><span id="currentFontSize1475">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setFontSize(12);">12</div>
                             <div class="option" onclick="setFontSize(14);">14</div>
@@ -120,36 +176,160 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id='safemodeToggle'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
-                    <div class="option checked" id="editorButton">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    <div class="option" id='safemodeToggle1475'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="formatButton1475">Format code</div>
+                    <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton1475">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion1475">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
                     </div>
-                    <div class="option" id="fullscreenButton">Fullscreen</div>
-                    <div class="option" id="formatButton">Format code</div>
                 </div>
             </div>
+        </div>
 
-            <div class="button check uncheck" id="debugButton">Debug layer</div>
-            <div class="button" id="metadataButton">Metadata</div>
+        <div class="category right">
+            <div class="button select"> <span id="currentScript1475">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1475">
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
         </div>
+    </div>
 
+    <div class="navbar navBar1030">
+        <div class="category">
+            <div class="button run" id="runButton1030">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+        </div>
 
 
+        <div class="category">
+            <div class="button" id="newButton1030">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1030">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1030">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1030">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1030">Dark</div>
+                            <div class="option" id="lightTheme1030">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1030">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1030">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="formatButton1030">Format code</div>
+                    <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton1030">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion1030">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="category right">
-            <div class="button select desktopTabletOnly"><span id="currentVersion">Version: Latest</span>
+            <div class="button select"> <span id="currentScript1030">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1030">
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar750">
+        <div class="category">
+            <div class="button select">File
                 <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <div class="option" id="runButton750">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+                    <div class="option" id="newButton750">New <i class="fa fa-file" aria-hidden="true"></i></div>
+                    <div class="option" id="clearButton750">Clear <i class="fa fa-trash" aria-hidden="true"></i></div>
+                    <div class="option" id="saveButton750">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+                    <div class="option" id="zipButton750">Zip <i class="fa fa-download" aria-hidden="true"></i></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme750">Dark</div>
+                            <div class="option" id="lightTheme750">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize750">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle750">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="formatButton750">Format code</div>
+                    <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton750">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion750">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="button select"> <span id="currentScript">Scenes</span>
+        </div>
+
+        <div class="category right">
+            <div class="button select"> <span id="currentScript750">Scenes</span>
                 <div class="toDisplayBig">
-                    <ul id="scriptsList">
+                    <ul id="scriptsList750">
                     </ul>
                 </div>
             </div>
         </div>
         <div class="save-message" id="saveMessage">
-            This PG has no metadata. Click save to add them.
+            This PG has missing metadata. Click save to add them.
         </div>
     </div>
 

Playground/index2_5.html

@@ -31,80 +31,277 @@
 </head>
 
 <body>
-    <div class="navbar">
+    <div class="navbar navBar1600">
         <div class="title">
             Babylon.js Playground
         </div>
         <div class="version" id="mainTitle">
-            v3.0-alpha
+            2.5
         </div>
 
         <div class="category">
-            <div class="button run" id="runButton">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+            <div class="button run" id="runButton1600">Run <i class="fa fa-play" aria-hidden="true"></i></div>
         </div>
 
 
         <div class="category">
-            <div class="button" id="newButton">New<i class="fa fa-file" aria-hidden="true"></i></div>
-            <div class="button" id="clearButton">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+            <div class="button" id="newButton1600">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1600">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
         </div>
 
         <div class="category">
-            <div class="button" id="saveButton">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
-            <div class="button" id="zipButton">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+            <div class="button" id="saveButton1600">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1600">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
         </div>
 
-
-        <div class="category desktopOnly">
-            <div class="button select"><span id="currentFontSize">Font: 14</span>
+        <div class="category">
+            <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option" onclick="setFontSize(12);">12</div>
-                    <div class="option" onclick="setFontSize(14);">14</div>
-                    <div class="option" onclick="setFontSize(16);">16</div>
-                    <div class="option" onclick="setFontSize(18);">18</div>
-                    <div class="option" onclick="setFontSize(20);">20</div>
-                    <div class="option" onclick="setFontSize(22);">22</div>
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1600">Dark</div>
+                            <div class="option" id="lightTheme1600">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1600">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1600">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
-            <div class="button select">Theme
+
+            <div class="button uncheck" id="debugButton1600">Debug layer <i class="fa fa-square-o" aria-hidden="true"></i></div>
+            <div class="button" id="metadataButton1600">Metadata</div>
+        </div>
+
+
+
+        <div class="category right">
+            <div class="button select"><span id="currentVersion1600">Version: Latest</span>
                 <div class="toDisplay">
-                    <div class="option" id="darkTheme">Dark</div>
-                    <div class="option" id="lightTheme">Light</div>
+                    <div class="option" onclick="setVersion('latest');">Latest</div>
+                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                </div>
+            </div>
+            <div class="button select"> <span id="currentScript1600">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1600">
+                    </ul>
                 </div>
             </div>
         </div>
-        <div class="category desktopTabletOnly">
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar1475">
+        <div class="title">
+            Babylon.js Playground
+        </div>
+        <div class="version" id="mainTitle">
+            2.5
+        </div>
+
+        <div class="category">
+            <div class="button run" id="runButton1475">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+        </div>
+
+
+        <div class="category">
+            <div class="button" id="newButton1475">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1475">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1475">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1475">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
             <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option" id='safemodeToggle'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
-                    <div class="option checked" id="editorButton">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1475">Dark</div>
+                            <div class="option" id="lightTheme1475">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1475">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id='safemodeToggle1475'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="formatButton1475">Format code</div>
+                    <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton1475">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion1475">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
                     </div>
-                    <div class="option" id="fullscreenButton">Fullscreen</div>
-                    <div class="option" id="metadataButton">Metadata</div>
                 </div>
             </div>
+        </div>
 
-            <div class="button check uncheck" id="debugButton">Debug layer</div>
+        <div class="category right">
+            <div class="button select"> <span id="currentScript1475">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1475">
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
         </div>
+    </div>
 
+    <div class="navbar navBar1030">
+        <div class="category">
+            <div class="button run" id="runButton1030">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+        </div>
 
 
+        <div class="category">
+            <div class="button" id="newButton1030">New<i class="fa fa-file" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="clearButton1030">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button" id="saveButton1030">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+            <div class="button removeOnPhone" id="zipButton1030">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme1030">Dark</div>
+                            <div class="option" id="lightTheme1030">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize1030">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle1030">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="formatButton1030">Format code</div>
+                    <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton1030">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion1030">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="category right">
-            <div class="button select desktopTabletOnly"><span id="currentVersion">Version: Latest</span>
+            <div class="button select"> <span id="currentScript1030">Scenes</span>
+                <div class="toDisplayBig">
+                    <ul id="scriptsList1030">
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="save-message" id="saveMessage">
+            This PG has missing metadata. Click save to add them.
+        </div>
+    </div>
+
+    <div class="navbar navBar750">
+        <div class="category">
+            <div class="button select">File
                 <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <div class="option" id="runButton750">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+                    <div class="option" id="newButton750">New <i class="fa fa-file" aria-hidden="true"></i></div>
+                    <div class="option" id="clearButton750">Clear <i class="fa fa-trash" aria-hidden="true"></i></div>
+                    <div class="option" id="saveButton750">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
+                    <div class="option" id="zipButton750">Zip <i class="fa fa-download" aria-hidden="true"></i></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category">
+            <div class="button select">Settings
+                <div class="toDisplay">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="darkTheme750">Dark</div>
+                            <div class="option" id="lightTheme750">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect"><span id="currentFontSize750">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option" id="safemodeToggle750">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="formatButton750">Format code</div>
+                    <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
+                    <div class="option" id="metadataButton750">Metadata</div>
+                    <div class="option subSelect"><span id="currentVersion750">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" onclick="setVersion('latest');">Latest</div>
+                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="button select"> <span id="currentScript">Scenes</span>
+        </div>
+
+        <div class="category right">
+            <div class="button select"> <span id="currentScript750">Scenes</span>
                 <div class="toDisplayBig">
-                    <ul id="scriptsList">
+                    <ul id="scriptsList750">
                     </ul>
                 </div>
             </div>
         </div>
         <div class="save-message" id="saveMessage">
-            This PG has no metadata. Click save to add them.
+            This PG has missing metadata. Click save to add them.
         </div>
     </div>
 
@@ -123,11 +320,11 @@
     <div class="navbarBottom">
         <div id="statusBar"></div>
         <div class="links">
+            <div class='link'><a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a></div>
             <div class='link'> <a target='_new' href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></div>
             <div class='link'><a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a></div>
-            <div class='link'><a target='_new' href="https://github.com/BabylonJS/Babylon.js/wiki">Wiki</a></div>
             <div class='link'><a target='_new' href="https://doc.babylonjs.com">Documentation</a></div>
-            <div class='link'><a target='_new' href="https://doc.babylonjs.com/playground">Playground Search</a></div>
+            <div class='link'><a target='_new' href="https://doc.babylonjs.com/playground">Search</a></div>
         </div>
     </div>
 
@@ -136,12 +333,15 @@
             <label for="saveFormTitle">TITLE</label>
             <div class="separator"></div>
             <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
             <label for="saveFormDescription">DESCRIPTION</label>
             <div class="separator"></div>
             <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
             <label for="saveFormTags">TAGS (separated by comma)</label>
             <div class="separator"></div>
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
             <div class="save-form-buttons" id="saveFormButtons">
 
                 <div id="saveFormButtonOk" class="button">OK</div>

Playground/js/actions.js

@@ -80,13 +80,4 @@
         })
 
     }
-
-    document.querySelector('#safemodeToggle').addEventListener('click', function () {
-        this.classList.toggle('checked');
-        if (this.classList.contains('checked')) {
-            this.innerHTML = 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>';
-        } else {
-            this.innerHTML = 'Safe mode <i class="fa fa-square-o" aria-hidden="true"></i>';
-        }
-    })
 })();

Playground/js/index.js

@@ -1,5 +1,29 @@
 var jsEditor;
 (function () {
+
+    var multipleSize = [1600, 1475, 1030, 750];
+    var setToMultipleID = function (id, thingToDo, param) {
+        multipleSize.forEach(function (size) {
+
+            if (thingToDo == "innerHTML") {
+                document.getElementById(id + size).innerHTML = param
+            }
+            else if (thingToDo == "click") {
+                document.getElementById(id + size).addEventListener("click", param);
+            }
+            else if (thingToDo == "addClass") {
+                document.getElementById(id + size).classList.add(param);
+            }
+            else if (thingToDo == "removeClass") {
+                document.getElementById(id + size).classList.remove(param);
+            }
+            else if (thingToDo == "display") {
+                document.getElementById(id + size).style.display = param;
+            }
+        });
+    };
+
+
     var fontSize = 14;
 
     var splitInstance = Split(['#jsEditor', '#canvasZone']);
@@ -19,16 +43,20 @@
     var run = function () {
         var blockEditorChange = false;
 
-        jsEditor.onKeyDown(function (evt) {
-        });
-
-        jsEditor.onKeyUp(function (evt) {
+        var markDirty = function () {
             if (blockEditorChange) {
                 return;
             }
 
-            document.getElementById("currentScript").innerHTML = "Custom";
-            document.getElementById('safemodeToggle').classList.add('checked');
+
+            setToMultipleID("currentScript", "innerHTML", "Custom");
+            setToMultipleID("safemodeToggle", "addClass", "checked");
+
+            setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
+        }
+
+        jsEditor.onKeyUp(function (evt) {
+            markDirty();
         });
 
         var snippetUrl = "https://babylonjs-api2.azurewebsites.net/snippets";
@@ -42,15 +70,15 @@
         var zipCode;
         BABYLON.Engine.ShadersRepository = "/src/Shaders/";
 
-        var currentVersionElement = document.getElementById("currentVersion");
+        var currentVersionElement = document.getElementById("currentVersion1600");
 
         if (currentVersionElement) {
             switch (BABYLON.Engine.Version) {
                 case "2.5":
-                    currentVersionElement.innerHTML = "Version: " + BABYLON.Engine.Version;
+                    setToMultipleID("currentVersion", "innerHTML", "Version: " + BABYLON.Engine.Version);
                     break;
                 default:
-                    currentVersionElement.innerHTML = "Version: Latest";
+                    setToMultipleID("currentVersion", "innerHTML", "Version: Latest");
                     break;
             }
         }
@@ -70,7 +98,7 @@
                         blockEditorChange = false;
                         compileAndRun();
 
-                        document.getElementById("currentScript").innerHTML = title;
+                        setToMultipleID("currentScript", "innerHTML", title);
 
                         currentSnippetToken = null;
                     }
@@ -102,20 +130,25 @@
                 if (xhr.readyState === 4) {
                     if (xhr.status === 200) {
                         scripts = xhr.responseText.split("\n");
-                        var ul = document.getElementById("scriptsList");
-                        var index;
-                        for (index = 0; index < scripts.length; index++) {
-                            var option = document.createElement("li");
-                            var a = document.createElement("a");
-                            a.href = "#";
-                            a.innerHTML = (index + 1) + " - " + scripts[index];
-                            a.scriptLinkIndex = index + 1;
-                            a.onclick = onScriptClick;
-                            option.scriptLinkIndex = index + 1;
-                            option.onclick = onScriptClick;
-
-                            option.appendChild(a);
-                            ul.appendChild(option);
+
+                        for (var i = 0; i < multipleSize.length; i++) {
+                            var ul = document.getElementById("scriptsList" + multipleSize[i]);
+
+                            var index;
+                            for (index = 0; index < scripts.length; index++) {
+                                var option = document.createElement("li");
+                                var a = document.createElement("a");
+                                a.href = "#";
+                                a.innerHTML = (index + 1) + " - " + scripts[index];
+                                a.scriptLinkIndex = index + 1;
+                                a.onclick = onScriptClick;
+                                option.scriptLinkIndex = index + 1;
+                                option.onclick = onScriptClick;
+
+                                option.appendChild(a);
+
+                                ul.appendChild(option);
+                            }
                         }
 
                         if (!location.hash) {
@@ -149,8 +182,6 @@
                         }
                         var mq = window.matchMedia("(max-width: 850px)");
                         mq.addListener(removeEditorForSmallScreen);
-
-
                     }
                 }
             };
@@ -234,7 +265,6 @@
             document.getElementById("saveFormButtons").style.display = "block";
             document.getElementById("saveFormButtonOk").style.display = "inline-block";
             document.getElementById("saveMessage").style.display = "block";
-            // document.getElementById("metadataButton").style.display = "none";
         };
         showNoMetadata();
         document.getElementById("saveMessage").style.display = "none";
@@ -245,7 +275,7 @@
             document.getElementById("saveFormTags").readOnly = true;
             document.getElementById("saveFormButtonOk").style.display = "none";
             document.getElementById("saveMessage").style.display = "none";
-            document.getElementById("metadataButton").style.display = "inline-block";
+            setToMultipleID("metadataButton", "display", "inline-block");
         };
 
         compileAndRun = function () {
@@ -389,6 +419,7 @@
         }
 
         var addTexturesToZip = function (zip, index, textures, folder, then) {
+
             if (index === textures.length) {
                 then();
                 return;
@@ -421,20 +452,26 @@
             if (textures[index].video) {
                 url = textures[index].video.currentSrc;
             } else {
-                url = textures[index].name;
+                // url = textures[index].name;
+                url = textures[index].url;
             }
 
-            var name = url.substr(url.lastIndexOf("/") + 1);
-
+            var name = textures[index].name;
+            // var name = url.substr(url.lastIndexOf("/") + 1);
 
-            addContentToZip(folder,
-                name,
-                url,
-                null,
-                true,
-                function () {
-                    addTexturesToZip(zip, index + 1, textures, folder, then);
-                });
+            if (url != null) {
+                addContentToZip(folder,
+                    name,
+                    url,
+                    null,
+                    true,
+                    function () {
+                        addTexturesToZip(zip, index + 1, textures, folder, then);
+                    });
+            }
+            else {
+                addTexturesToZip(zip, index + 1, textures, folder, then);
+            }
         }
 
         var addImportedFilesToZip = function (zip, index, importedFiles, folder, then) {
@@ -519,10 +556,26 @@
         setFontSize = function (size) {
             fontSize = size;
             document.querySelector(".view-lines").style.fontSize = size + "px";
-            document.getElementById("currentFontSize").innerHTML = "Font: " + size;
+            setToMultipleID("currentFontSize", "innerHTML", "Font: " + size);
         };
 
         // Fullscreen
+        document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function () {
+            if(document.webkitIsFullScreen) goFullPage();
+            else exitFullPage();
+        }, false);
+
+        var goFullPage = function () {
+            var canvasElement = document.getElementById("renderCanvas");
+            canvasElement.style.position = "absolute";
+            canvasElement.style.top = 0;
+            canvasElement.style.left = 0;
+            canvasElement.style.zIndex = 100;
+        }
+        var exitFullPage = function () {
+            document.getElementById("renderCanvas").style.position = "relative";
+            document.getElementById("renderCanvas").style.zIndex = 0;
+        }
         var goFullscreen = function () {
             if (engine) {
                 engine.switchFullscreen(true);
@@ -530,18 +583,18 @@
         }
 
         var toggleEditor = function () {
-            var editorButton = document.getElementById("editorButton");
+            var editorButton = document.getElementById("editorButton1600");
             var scene = engine.scenes[0];
 
             // If the editor is present
             if (editorButton.classList.contains('checked')) {
-                editorButton.classList.remove('checked');
+                setToMultipleID("editorButton", "removeClass", 'checked');
                 splitInstance.collapse(0);
-                editorButton.innerHTML = 'Editor <i class="fa fa-square-o" aria-hidden="true"></i>';
+                setToMultipleID("editorButton", "innerHTML", 'Editor <i class="fa fa-square-o" aria-hidden="true"></i>');
             } else {
-                editorButton.classList.add('checked');
+                setToMultipleID("editorButton", "addClass", 'checked');
                 splitInstance.setSizes([50, 50]);  // Reset
-                editorButton.innerHTML = 'Editor <i class="fa fa-check-square" aria-hidden="true"></i>';
+                setToMultipleID("editorButton", "innerHTML", 'Editor <i class="fa fa-check-square" aria-hidden="true"></i>');
             }
             engine.resize();
 
@@ -581,6 +634,10 @@
             jsEditor.setValue(oldCode);
             setFontSize(fontSize);
 
+            jsEditor.onKeyUp(function (evt) {
+                markDirty();
+            });
+
             for (var index = 0; index < elementToTheme.length; index++) {
                 var obj = elementToTheme[index];
                 let domObjArr = document.querySelectorAll(obj);
@@ -597,22 +654,22 @@
         }
 
         var toggleDebug = function () {
-            var debugButton = document.getElementById("debugButton");
+            var debugButton = document.getElementById("debugButton1600");
             var scene = engine.scenes[0];
 
             if (debugButton.classList.contains('uncheck')) {
-                debugButton.classList.remove('uncheck');
+                setToMultipleID("debugButton", "removeClass", 'uncheck');
+                setToMultipleID("debugButton", "innerHTML", 'Debug layer<i class="fa fa-check-square" aria-hidden="true"></i>');
                 scene.debugLayer.show();
             } else {
-                debugButton.classList.add('uncheck');
+                setToMultipleID("debugButton", "addClass", 'uncheck');
+                setToMultipleID("debugButton", "innerHTML", 'Debug layer<i class="fa fa-square-o" aria-hidden="true"></i>');
                 scene.debugLayer.hide();
             }
         }
 
         var toggleMetadata = function () {
-            // var metadataButton = document.getElementById("metadataButton");
             var scene = engine.scenes[0];
-            // metadataButton.classList.add('checked');
             document.getElementById("saveLayer").style.display = "block";
         }
 
@@ -620,26 +677,10 @@
             jsEditor.getAction('editor.action.format').run();
         }
 
-        // UI
-        document.getElementById("runButton").addEventListener("click", compileAndRun);
-        document.getElementById("zipButton").addEventListener("click", getZip);
-        document.getElementById("fullscreenButton").addEventListener("click", goFullscreen);
-        document.getElementById("newButton").addEventListener("click", createNewScript);
-        document.getElementById("clearButton").addEventListener("click", clear);
-        document.getElementById("editorButton").addEventListener("click", toggleEditor);
-        document.getElementById("debugButton").addEventListener("click", toggleDebug);
-        document.getElementById("metadataButton").addEventListener("click", toggleMetadata);
-        document.getElementById("darkTheme").addEventListener("click", toggleTheme.bind(this, 'dark'));
-        document.getElementById("lightTheme").addEventListener("click", toggleTheme.bind(this, 'light'));
-        document.getElementById("formatButton").addEventListener("click", formatCode);
-
-        // Restore theme
-        var theme = localStorage.getItem("bjs-playground-theme") || 'light';
-        toggleTheme(theme);
 
         //Navigation Overwrites
         var exitPrompt = function (e) {
-            var safeToggle = document.getElementById("safemodeToggle");
+            var safeToggle = document.getElementById("safemodeToggle1600");
             if (safeToggle.classList.contains('checked')) {
                 e = e || window.event;
                 var message =
@@ -699,7 +740,7 @@
             xmlHttp.send(JSON.stringify(dataToSend));
         }
 
-        document.getElementById("saveButton").addEventListener("click", function () {
+        var askForSave = function () {
             if (currentSnippetTitle == null
                 || currentSnippetDescription == null
                 || currentSnippetTags == null) {
@@ -709,7 +750,7 @@
             else {
                 save();
             }
-        });
+        };
         document.getElementById("saveFormButtonOk").addEventListener("click", function () {
             document.getElementById("saveLayer").style.display = "none";
             save();
@@ -785,7 +826,7 @@
                                     blockEditorChange = false;
                                     compileAndRun();
 
-                                    document.getElementById("currentScript").innerHTML = "Custom";
+                                    setToMultipleID("currentScript", "innerHTML", "Custom");
                                 } else if (firstTime) {
                                     location.href = location.href.replace(location.hash, "");
                                     if (scripts) {
@@ -811,6 +852,47 @@
         }
 
         checkHash(true);
+
+
+        // ---------- UI
+
+        // Run
+        setToMultipleID("runButton", "click", compileAndRun);
+        // New
+        setToMultipleID("newButton", "click", createNewScript);
+        // Clear 
+        setToMultipleID("clearButton", "click", clear);
+        // Save
+        setToMultipleID("saveButton", "click", askForSave);
+        // Zip
+        setToMultipleID("zipButton", "click", getZip);
+        // Themes
+        setToMultipleID("darkTheme", "click", toggleTheme.bind(this, 'dark'));
+        setToMultipleID("lightTheme", "click", toggleTheme.bind(this, 'light'));
+        // Safe mode
+        setToMultipleID("safemodeToggle", 'click', function () {
+            document.getElementById("safemodeToggle1600").classList.toggle('checked');
+            if (document.getElementById("safemodeToggle1600").classList.contains('checked')) {
+                setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
+            } else {
+                setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-square-o" aria-hidden="true"></i>');
+            }
+        });
+        // Editor
+        setToMultipleID("editorButton", "click", toggleEditor);
+        // FullScreen
+        setToMultipleID("fullscreenButton", "click", goFullscreen);
+        // Format
+        setToMultipleID("formatButton", "click", formatCode);
+        // Debug
+        setToMultipleID("debugButton", "click", toggleDebug);
+        // Metadata
+        setToMultipleID("metadataButton", "click", toggleMetadata);
+
+
+        // Restore theme
+        var theme = localStorage.getItem("bjs-playground-theme") || 'light';
+        toggleTheme(theme);
     }
 
     // Monaco

Playground/test.html

@@ -51,5 +51,5 @@
     </div>
 </div>
 <div class="save-message" id="saveMessage">
-    This PG has no metadata. Click save to add them.
+    This PG has missing metadata. Click save to add them.
 </div>

Playground/textures/DemageFont.fnt

@@ -0,0 +1,20 @@
+info face="Arial" size=32 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1 outline=0
+common lineHeight=32 base=26 scaleW=128 scaleH=128 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0
+page id=0 file="DemageFont.png"
+chars count=16
+char id=45   x=62    y=93    width=28    height=30    xoffset=0     yoffset=0     xadvance=28    page=0  chnl=15
+char id=48   x=0     y=0     width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=49   x=91    y=93    width=22    height=30    xoffset=0     yoffset=0     xadvance=22    page=0  chnl=15
+char id=50   x=31    y=0     width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=51   x=62    y=0     width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=52   x=93    y=0     width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=53   x=0     y=31    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=54   x=31    y=31    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=55   x=62    y=31    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=56   x=93    y=31    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=57   x=0     y=62    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=68   x=31    y=62    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=69   x=62    y=62    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=70   x=93    y=62    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=71   x=0     y=93    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15
+char id=74   x=31    y=93    width=30    height=30    xoffset=0     yoffset=0     xadvance=30    page=0  chnl=15

Tools/Gulp/config.json

@@ -6,6 +6,7 @@
         "declarationFilename": "babylon.d.ts",
         "declarationModuleFilename": "babylon.module.d.ts",
         "outputDirectory": "../../dist/preview release",
+        "outputCustomConfigurationsDirectory": "../../dist/preview release/customConfigurations",
         "srcOutputDirectory": "../../src/",
         "currentConfig": "all"
     },
@@ -21,7 +22,12 @@
                 "mapTexture", "dynamicFloatArray", "serialization", "probes", "layer"
         ],
         "minimal": ["standardMaterial", "freeCamera", "hemisphericLight"],
-        "minimalWithBuilder": ["meshBuilder", "standardMaterial", "freeCamera", "hemisphericLight"]
+        "minimalWithBuilder": ["meshBuilder", "standardMaterial", "freeCamera", "hemisphericLight"],
+        "minimalViewer": [
+                "meshBuilder", "animations", "arcRotateCamera", "additionalTextures", "textureFormats", "debug",
+                "multiMaterial"
+        ],
+        "distributed": ["minimalViewer"]
     },
     "workloads" :
     {
@@ -413,15 +419,23 @@
                 "core"
             ]
         },
+        "stringDictionary" : 
+        {
+            "files": [
+                "../../src/Tools/babylon.stringDictionary.js"
+            ],
+            "dependUpon" : [
+                "core"
+            ]
+        },
         "userData" : 
         {
             "files": [
-                "../../src/Tools/babylon.stringDictionary.js",
                 "../../src/Tools/babylon.tags.js",
                 "../../src/Tools/babylon.andOrNotEvaluator.js"
             ],
             "dependUpon" : [
-                "core"
+                "core", "stringDictionary"
             ]
         },
         "offline" : 
@@ -710,7 +724,11 @@
             ],
             "dependUpon" : [
                 "shaderMaterial",
-                "additionalMeshes"
+                "additionalMeshes",
+                "standardMaterial", 
+                "stringDictionary", 
+                "dynamicFloatArray",
+                "actions"
             ],
             "shaders" : [
                 "color.vertex",
@@ -876,6 +894,10 @@
             ],
             "dependUpon" : [
                 "core"
+            ],
+            "shaders" : [
+                "layer.vertex",
+                "layer.fragment"
             ]
         }
     },
@@ -901,7 +923,8 @@
         "proceduralTexturesLibrary",
         "loaders",
         "serializers",
-        "inspector"
+        "inspector",
+        "gui"
     ],
     "materialsLibrary": {
         "libraries": [
@@ -1228,6 +1251,28 @@
             "distOutputDirectory": "/serializers/"
         }
     },
+    "gui": {
+        "libraries": [
+            {
+                "files": [
+                    "../../gui/src/advancedDynamicTexture.ts",
+                    "../../gui/src/measure.ts",
+                    "../../gui/src/valueAndUnit.ts",
+                    "../../gui/src/controls/control.ts",
+                    "../../gui/src/controls/container.ts",
+                    "../../gui/src/controls/rectangle.ts",
+                    "../../gui/src/controls/textBlock.ts",
+                    "../../gui/src/controls/image.ts",
+                    "../../gui/src/controls/button.ts"
+                ],
+                "output": "babylon.gui.js"
+            }
+        ],
+        "build": {
+            "srcOutputDirectory": "../../gui/",
+            "distOutputDirectory": "/gui/"
+        }
+    },    
     "canvas2D": {
         "libraries": [
             {

Tools/Gulp/gulpfile.js

@@ -59,7 +59,7 @@ var externalTsConfig = {
 
 function processDependency(kind, dependency, filesToLoad) {
     if (dependency.dependUpon) {
-        for (var i = 0; i < dependency.dependUpon.length; i++ ) {
+        for (var i = 0; i < dependency.dependUpon.length; i++) {
             var dependencyName = dependency.dependUpon[i];
             var parent = config.workloads[dependencyName];
             processDependency(kind, parent, filesToLoad);
@@ -71,7 +71,7 @@ function processDependency(kind, dependency, filesToLoad) {
         return;
     }
 
-    for (var i = 0; i< content.length; i++) {
+    for (var i = 0; i < content.length; i++) {
         var file = content[i];
 
         if (filesToLoad.indexOf(file) === -1) {
@@ -129,18 +129,18 @@ gulp.task("includeShaders", function (cb) {
         pipe(uncommentShader()).
         pipe(srcToVariable({
             variableName: "BABYLON.Effect.IncludesShadersStore", asMap: true, namingCallback: includeShadersName
-    }));
+        }));
     cb();
 });
 
 gulp.task("shaders", ["includeShaders"], function (cb) {
     var filesToProcess = determineFilesToProcess("shaders");
     shadersStream = gulp.src(filesToProcess).
-        pipe(expect.real({ errorOnFailure: true}, filesToProcess)).
+        pipe(expect.real({ errorOnFailure: true }, filesToProcess)).
         pipe(uncommentShader()).
         pipe(srcToVariable({
             variableName: "BABYLON.Effect.ShadersStore", asMap: true, namingCallback: shadersName
-    }));
+        }));
     cb();
 });
 
@@ -162,12 +162,12 @@ gulp.task("workers", function (cb) {
 gulp.task("buildWorker", ["workers", "shaders"], function () {
     var filesToProcess = determineFilesToProcess("files");
     return merge2(
-        gulp.src(filesToProcess).        
+        gulp.src(filesToProcess).
             pipe(expect.real({ errorOnFailure: true }, filesToProcess)),
         shadersStream,
         includeShadersStream,
         workersStream
-        )
+    )
         .pipe(concat(config.build.minWorkerFilename))
         .pipe(cleants())
         .pipe(replace(extendsSearchRegex, ""))
@@ -181,11 +181,11 @@ gulp.task("buildWorker", ["workers", "shaders"], function () {
 gulp.task("build", ["shaders"], function () {
     var filesToProcess = determineFilesToProcess("files");
     return merge2(
-        gulp.src(filesToProcess).        
+        gulp.src(filesToProcess).
             pipe(expect.real({ errorOnFailure: true }, filesToProcess)),
         shadersStream,
         includeShadersStream
-        )
+    )
         .pipe(concat(config.build.filename))
         .pipe(cleants())
         .pipe(replace(extendsSearchRegex, ""))
@@ -228,11 +228,11 @@ gulp.task('typescript-compile', function () {
             .pipe(addDtsExport("BABYLON"))
             .pipe(gulp.dest(config.build.outputDirectory)),
         tsResult.js
-            .pipe(sourcemaps.write("./", 
+            .pipe(sourcemaps.write("./",
                 {
-                    includeContent:false, 
+                    includeContent: false,
                     sourceRoot: (filePath) => {
-                        return ''; 
+                        return '';
                     }
                 }))
             .pipe(gulp.dest(config.build.srcOutputDirectory))
@@ -242,31 +242,31 @@ gulp.task('typescript-compile', function () {
 /**
  * Helper methods to build external library (mat, post processes, ...).
  */
-var buildExternalLibraries = function(settings) {
+var buildExternalLibraries = function (settings) {
     var tasks = settings.libraries.map(function (library) {
-        return buildExternalLibrary(library, settings, false); 
+        return buildExternalLibrary(library, settings, false);
     });
 
     return merge2(tasks);
 }
 
-var buildExternalLibrary= function(library, settings, watch) {
-    var tsProcess = gulp.src(library.files, {base: settings.build.srcOutputDirectory})
+var buildExternalLibrary = function (library, settings, watch) {
+    var tsProcess = gulp.src(library.files, { base: settings.build.srcOutputDirectory })
         .pipe(sourcemaps.init())
         .pipe(typescript(externalTsConfig));
 
-    var shader = gulp.src(library.shaderFiles || [], {base: settings.build.srcOutputDirectory} )
-            .pipe(uncommentShader())            
-            .pipe(appendSrcToVariable("BABYLON.Effect.ShadersStore", shadersName, library.output + '.fx'))
-            .pipe(gulp.dest(settings.build.srcOutputDirectory));
+    var shader = gulp.src(library.shaderFiles || [], { base: settings.build.srcOutputDirectory })
+        .pipe(uncommentShader())
+        .pipe(appendSrcToVariable("BABYLON.Effect.ShadersStore", shadersName, library.output + '.fx'))
+        .pipe(gulp.dest(settings.build.srcOutputDirectory));
 
     var dev = tsProcess.js.pipe(sourcemaps.write("./", {
-        includeContent:false, 
+        includeContent: false,
         sourceRoot: (filePath) => {
-            return ''; 
+            return '';
         }
     }))
-    .pipe(gulp.dest(settings.build.srcOutputDirectory));
+        .pipe(gulp.dest(settings.build.srcOutputDirectory));
 
     var outputDirectory = config.build.outputDirectory + settings.build.distOutputDirectory;
     var css = gulp.src(library.sassFiles || [])
@@ -275,29 +275,29 @@ var buildExternalLibrary= function(library, settings, watch) {
         .pipe(gulp.dest(outputDirectory));
 
     if (watch) {
-        return merge2([shader, dev, css]);    
+        return merge2([shader, dev, css]);
     }
     else {
         var code = merge2([tsProcess.js, shader])
-                .pipe(concat(library.output))
-                .pipe(gulp.dest(outputDirectory))
-                .pipe(cleants())
-                .pipe(replace(extendsSearchRegex, ""))
-                .pipe(replace(decorateSearchRegex, ""))
-                .pipe(rename({extname: ".min.js"}))
-                .pipe(uglify())
-                .pipe(optimisejs())
-                .pipe(gulp.dest(outputDirectory));
-        
+            .pipe(concat(library.output))
+            .pipe(gulp.dest(outputDirectory))
+            .pipe(cleants())
+            .pipe(replace(extendsSearchRegex, ""))
+            .pipe(replace(decorateSearchRegex, ""))
+            .pipe(rename({ extname: ".min.js" }))
+            .pipe(uglify())
+            .pipe(optimisejs())
+            .pipe(gulp.dest(outputDirectory));
+
         var dts = tsProcess.dts
-                .pipe(concat(library.output))
-                .pipe(rename({extname: ".d.ts"}))
-                .pipe(gulp.dest(outputDirectory));
+            .pipe(concat(library.output))
+            .pipe(rename({ extname: ".d.ts" }))
+            .pipe(gulp.dest(outputDirectory));
 
-        var waitAll =  merge2([dev, code, css, dts]);
+        var waitAll = merge2([dev, code, css, dts]);
 
         if (library.webpack) {
-            return waitAll.on('end', function() {
+            return waitAll.on('end', function () {
                 webpack(require(library.webpack))
                     .pipe(rename(library.output.replace(".js", ".bundle.js")))
                     .pipe(gulp.dest(outputDirectory))
@@ -312,7 +312,7 @@ var buildExternalLibrary= function(library, settings, watch) {
 /**
  * The default task, concat and min the main BJS files.
  */
-gulp.task('default', function (cb) {
+gulp.task("default", function (cb) {
     runSequence("buildWorker", "build", cb);
 });
 
@@ -336,6 +336,21 @@ gulp.task("typescript-libraries", config.modules, function () {
 });
 
 /**
+ * Dynamic custom configurations.
+ */
+config.buildConfigurations.distributed.map(function (customConfiguration) {
+    gulp.task(customConfiguration, function (cb) {
+        config.build.currentConfig = customConfiguration;
+        config.build.outputDirectory = config.build.outputCustomConfigurationsDirectory + "/" + customConfiguration;
+        runSequence("typescript-compile", "build", cb);
+    });
+});
+
+gulp.task("typescript-customConfigurations", function (cb) {
+    runSequence(config.buildConfigurations.distributed, cb);
+});
+
+/**
  * Do it all.
  */
 gulp.task("typescript-all", function (cb) {
@@ -348,26 +363,26 @@ gulp.task("typescript-all", function (cb) {
 gulp.task('watch', [], function () {
     var tasks = [gulp.watch(config.typescript, ['typescript-compile'])];
 
-    config.modules.map(function (module) { 
-        config[module].libraries.map(function (library) {            
-            tasks.push(gulp.watch(library.files, function() { 
+    config.modules.map(function (module) {
+        config[module].libraries.map(function (library) {
+            tasks.push(gulp.watch(library.files, function () {
                 console.log(library.output);
                 return buildExternalLibrary(library, config[module], true)
-                .pipe(debug()); 
+                    .pipe(debug());
             }));
-            tasks.push(gulp.watch(library.shaderFiles, function() { 
+            tasks.push(gulp.watch(library.shaderFiles, function () {
                 console.log(library.output);
                 return buildExternalLibrary(library, config[module], true)
-                .pipe(debug()) 
+                    .pipe(debug())
             }));
-            tasks.push(gulp.watch(library.sassFiles, function() { 
+            tasks.push(gulp.watch(library.sassFiles, function () {
                 console.log(library.output);
                 return buildExternalLibrary(library, config[module], true)
-                .pipe(debug()) 
+                    .pipe(debug())
             }));
-        }); 
+        });
     });
-    
+
     return tasks;
 });
 
@@ -384,9 +399,9 @@ gulp.task('deployLocalDev', function () {
  */
 gulp.task('webserver', function () {
     gulp.src('../../.').pipe(webserver({
-      port: 1338,
-      livereload: false
-    }));
+        port: 1338,
+        livereload: false
+        }));
 });
 
 /**
@@ -396,14 +411,14 @@ gulp.task('run', ['watch', 'webserver'], function () {
 });
 
 
-gulp.task("zip-blender" , function() {
+gulp.task("zip-blender", function () {
     return gulp.src('../../Exporters/Blender/src/**')
-    .pipe(zip('Blender2Babylon-5.2.zip'))
-    .pipe(gulp.dest('../../Exporters/Blender'));
+        .pipe(zip('Blender2Babylon-5.3.zip'))
+        .pipe(gulp.dest('../../Exporters/Blender'));
 });
 
 gulp.task('clean-JS-MAP', function () {
-	  return del([
-		  '../../src/**/*.js.map','../../src/**/*.js'
-	  ], {force: true});
-	});
+    return del([
+        '../../src/**/*.js.map', '../../src/**/*.js'
+    ], { force: true });
+});

Tools/Npm/package.json

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

dist/materialsLibrary/babylon.customMaterial.d.ts

@@ -0,0 +1,16 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class CustomShaderHelper {
+    }
+    interface ICustomMaterialBuilder {
+        (builder: CustomShaderHelper, name: string, mainPart: string, diffusePart: string, vertexPositionPart: string): string;
+    }
+    class CustomMaterial extends StandardMaterial {
+        builder: ICustomMaterialBuilder;
+        private _mainPart;
+        private _diffusePart;
+        private _vertexPositionPart;
+        constructor(name: string, builder: ICustomMaterialBuilder, scene: Scene);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+    }
+}

dist/materialsLibrary/babylon.customMaterial.js

@@ -0,0 +1,403 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var BABYLON;
+(function (BABYLON) {
+    var CustomShaderHelper = (function () {
+        function CustomShaderHelper() {
+        }
+        return CustomShaderHelper;
+    }());
+    BABYLON.CustomShaderHelper = CustomShaderHelper;
+    var CustomMaterial = (function (_super) {
+        __extends(CustomMaterial, _super);
+        function CustomMaterial(name, builder, scene) {
+            var _this = _super.call(this, name, scene) || this;
+            _this._mainPart = 'void main(void) {';
+            _this._diffusePart = 'vec3 diffuseColor=vDiffuseColor.rgb;';
+            _this._vertexPositionPart = 'gl_Position=viewProjection*finalWorld*vec4(position,1.0);';
+            _this.builder = builder;
+            return _this;
+        }
+        CustomMaterial.prototype.isReady = function (mesh, useInstances) {
+            if (this.isFrozen) {
+                if (this._wasPreviouslyReady) {
+                    return true;
+                }
+            }
+            var scene = this.getScene();
+            var engine = scene.getEngine();
+            var needUVs = false;
+            var needNormals = false;
+            this._defines.reset();
+            // Lights
+            if (scene.lightsEnabled && !this.disableLighting) {
+                needNormals = BABYLON.MaterialHelper.PrepareDefinesForLights(scene, mesh, this._defines, this.maxSimultaneousLights);
+            }
+            if (!this.checkReadyOnEveryCall) {
+                if (this._renderId === scene.getRenderId()) {
+                    if (this._checkCache(scene, mesh, useInstances)) {
+                        return true;
+                    }
+                }
+            }
+            // Textures
+            if (scene.texturesEnabled) {
+                if (this.diffuseTexture && BABYLON.StandardMaterial.DiffuseTextureEnabled) {
+                    if (!this.diffuseTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.DIFFUSE = true;
+                    }
+                }
+                if (this.ambientTexture && BABYLON.StandardMaterial.AmbientTextureEnabled) {
+                    if (!this.ambientTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.AMBIENT = true;
+                    }
+                }
+                if (this.opacityTexture && BABYLON.StandardMaterial.OpacityTextureEnabled) {
+                    if (!this.opacityTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.OPACITY = true;
+                        if (this.opacityTexture.getAlphaFromRGB) {
+                            this._defines.OPACITYRGB = true;
+                        }
+                    }
+                }
+                if (this.reflectionTexture && BABYLON.StandardMaterial.ReflectionTextureEnabled) {
+                    if (!this.reflectionTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needNormals = true;
+                        this._defines.REFLECTION = true;
+                        if (this.roughness > 0) {
+                            this._defines.ROUGHNESS = true;
+                        }
+                        if (this.useReflectionOverAlpha) {
+                            this._defines.REFLECTIONOVERALPHA = true;
+                        }
+                        if (this.reflectionTexture.coordinatesMode === BABYLON.Texture.INVCUBIC_MODE) {
+                            this._defines.INVERTCUBICMAP = true;
+                        }
+                        this._defines.REFLECTIONMAP_3D = this.reflectionTexture.isCube;
+                        switch (this.reflectionTexture.coordinatesMode) {
+                            case BABYLON.Texture.CUBIC_MODE:
+                            case BABYLON.Texture.INVCUBIC_MODE:
+                                this._defines.REFLECTIONMAP_CUBIC = true;
+                                break;
+                            case BABYLON.Texture.EXPLICIT_MODE:
+                                this._defines.REFLECTIONMAP_EXPLICIT = true;
+                                break;
+                            case BABYLON.Texture.PLANAR_MODE:
+                                this._defines.REFLECTIONMAP_PLANAR = true;
+                                break;
+                            case BABYLON.Texture.PROJECTION_MODE:
+                                this._defines.REFLECTIONMAP_PROJECTION = true;
+                                break;
+                            case BABYLON.Texture.SKYBOX_MODE:
+                                this._defines.REFLECTIONMAP_SKYBOX = true;
+                                break;
+                            case BABYLON.Texture.SPHERICAL_MODE:
+                                this._defines.REFLECTIONMAP_SPHERICAL = true;
+                                break;
+                            case BABYLON.Texture.EQUIRECTANGULAR_MODE:
+                                this._defines.REFLECTIONMAP_EQUIRECTANGULAR = true;
+                                break;
+                            case BABYLON.Texture.FIXED_EQUIRECTANGULAR_MODE:
+                                this._defines.REFLECTIONMAP_EQUIRECTANGULAR_FIXED = true;
+                                break;
+                        }
+                    }
+                }
+                if (this.emissiveTexture && BABYLON.StandardMaterial.EmissiveTextureEnabled) {
+                    if (!this.emissiveTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.EMISSIVE = true;
+                    }
+                }
+                if (this.lightmapTexture && BABYLON.StandardMaterial.LightmapTextureEnabled) {
+                    if (!this.lightmapTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.LIGHTMAP = true;
+                        this._defines.USELIGHTMAPASSHADOWMAP = this.useLightmapAsShadowmap;
+                    }
+                }
+                if (this.specularTexture && BABYLON.StandardMaterial.SpecularTextureEnabled) {
+                    if (!this.specularTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.SPECULAR = true;
+                        this._defines.GLOSSINESS = this.useGlossinessFromSpecularMapAlpha;
+                    }
+                }
+                if (scene.getEngine().getCaps().standardDerivatives && this.bumpTexture && BABYLON.StandardMaterial.BumpTextureEnabled) {
+                    if (!this.bumpTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.BUMP = true;
+                        if (this.useParallax) {
+                            this._defines.PARALLAX = true;
+                            if (this.useParallaxOcclusion) {
+                                this._defines.PARALLAXOCCLUSION = true;
+                            }
+                        }
+                        if (this.invertNormalMapX) {
+                            this._defines.INVERTNORMALMAPX = true;
+                        }
+                        if (this.invertNormalMapY) {
+                            this._defines.INVERTNORMALMAPY = true;
+                        }
+                        if (scene._mirroredCameraPosition) {
+                            this._defines.INVERTNORMALMAPX = !this._defines.INVERTNORMALMAPX;
+                            this._defines.INVERTNORMALMAPY = !this._defines.INVERTNORMALMAPY;
+                        }
+                    }
+                }
+                if (this.refractionTexture && BABYLON.StandardMaterial.RefractionTextureEnabled) {
+                    if (!this.refractionTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.REFRACTION = true;
+                        this._defines.REFRACTIONMAP_3D = this.refractionTexture.isCube;
+                    }
+                }
+                if (this.cameraColorGradingTexture && BABYLON.StandardMaterial.ColorGradingTextureEnabled) {
+                    if (!this.cameraColorGradingTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        this._defines.CAMERACOLORGRADING = true;
+                    }
+                }
+            }
+            // Effect
+            if (scene.clipPlane) {
+                this._defines.CLIPPLANE = true;
+            }
+            if (engine.getAlphaTesting()) {
+                this._defines.ALPHATEST = true;
+            }
+            if (this._shouldUseAlphaFromDiffuseTexture()) {
+                this._defines.ALPHAFROMDIFFUSE = true;
+            }
+            if (this.useEmissiveAsIllumination) {
+                this._defines.EMISSIVEASILLUMINATION = true;
+            }
+            if (this.linkEmissiveWithDiffuse) {
+                this._defines.LINKEMISSIVEWITHDIFFUSE = true;
+            }
+            if (this.useLogarithmicDepth) {
+                this._defines.LOGARITHMICDEPTH = true;
+            }
+            if (this.cameraColorCurves) {
+                this._defines.CAMERACOLORCURVES = true;
+            }
+            // Point size
+            if (this.pointsCloud || scene.forcePointsCloud) {
+                this._defines.POINTSIZE = true;
+            }
+            // Fog
+            if (scene.fogEnabled && mesh && mesh.applyFog && scene.fogMode !== BABYLON.Scene.FOGMODE_NONE && this.fogEnabled) {
+                this._defines.FOG = true;
+            }
+            if (BABYLON.StandardMaterial.FresnelEnabled) {
+                // Fresnel
+                if (this.diffuseFresnelParameters && this.diffuseFresnelParameters.isEnabled ||
+                    this.opacityFresnelParameters && this.opacityFresnelParameters.isEnabled ||
+                    this.emissiveFresnelParameters && this.emissiveFresnelParameters.isEnabled ||
+                    this.refractionFresnelParameters && this.refractionFresnelParameters.isEnabled ||
+                    this.reflectionFresnelParameters && this.reflectionFresnelParameters.isEnabled) {
+                    if (this.diffuseFresnelParameters && this.diffuseFresnelParameters.isEnabled) {
+                        this._defines.DIFFUSEFRESNEL = true;
+                    }
+                    if (this.opacityFresnelParameters && this.opacityFresnelParameters.isEnabled) {
+                        this._defines.OPACITYFRESNEL = true;
+                    }
+                    if (this.reflectionFresnelParameters && this.reflectionFresnelParameters.isEnabled) {
+                        this._defines.REFLECTIONFRESNEL = true;
+                        if (this.useReflectionFresnelFromSpecular) {
+                            this._defines.REFLECTIONFRESNELFROMSPECULAR = true;
+                        }
+                    }
+                    if (this.refractionFresnelParameters && this.refractionFresnelParameters.isEnabled) {
+                        this._defines.REFRACTIONFRESNEL = true;
+                    }
+                    if (this.emissiveFresnelParameters && this.emissiveFresnelParameters.isEnabled) {
+                        this._defines.EMISSIVEFRESNEL = true;
+                    }
+                    needNormals = true;
+                    this._defines.FRESNEL = true;
+                }
+            }
+            if (this._defines.SPECULARTERM && this.useSpecularOverAlpha) {
+                this._defines.SPECULAROVERALPHA = true;
+            }
+            // Attribs
+            if (mesh) {
+                if (needNormals && mesh.isVerticesDataPresent(BABYLON.VertexBuffer.NormalKind)) {
+                    this._defines.NORMAL = true;
+                }
+                if (needUVs) {
+                    if (mesh.isVerticesDataPresent(BABYLON.VertexBuffer.UVKind)) {
+                        this._defines.UV1 = true;
+                    }
+                    if (mesh.isVerticesDataPresent(BABYLON.VertexBuffer.UV2Kind)) {
+                        this._defines.UV2 = true;
+                    }
+                }
+                if (mesh.useVertexColors && mesh.isVerticesDataPresent(BABYLON.VertexBuffer.ColorKind)) {
+                    this._defines.VERTEXCOLOR = true;
+                    if (mesh.hasVertexAlpha) {
+                        this._defines.VERTEXALPHA = true;
+                    }
+                }
+                if (mesh.useBones && mesh.computeBonesUsingShaders) {
+                    this._defines.NUM_BONE_INFLUENCERS = mesh.numBoneInfluencers;
+                    this._defines.BonesPerMesh = (mesh.skeleton.bones.length + 1);
+                }
+                // Instances
+                if (useInstances) {
+                    this._defines.INSTANCES = true;
+                }
+            }
+            // Get correct effect      
+            if (!this._defines.isEqual(this._cachedDefines)) {
+                this._defines.cloneTo(this._cachedDefines);
+                scene.resetCachedMaterial();
+                // Fallbacks
+                var fallbacks = new BABYLON.EffectFallbacks();
+                if (this._defines.REFLECTION) {
+                    fallbacks.addFallback(0, "REFLECTION");
+                }
+                if (this._defines.SPECULAR) {
+                    fallbacks.addFallback(0, "SPECULAR");
+                }
+                if (this._defines.BUMP) {
+                    fallbacks.addFallback(0, "BUMP");
+                }
+                if (this._defines.PARALLAX) {
+                    fallbacks.addFallback(1, "PARALLAX");
+                }
+                if (this._defines.PARALLAXOCCLUSION) {
+                    fallbacks.addFallback(0, "PARALLAXOCCLUSION");
+                }
+                if (this._defines.SPECULAROVERALPHA) {
+                    fallbacks.addFallback(0, "SPECULAROVERALPHA");
+                }
+                if (this._defines.FOG) {
+                    fallbacks.addFallback(1, "FOG");
+                }
+                if (this._defines.POINTSIZE) {
+                    fallbacks.addFallback(0, "POINTSIZE");
+                }
+                if (this._defines.LOGARITHMICDEPTH) {
+                    fallbacks.addFallback(0, "LOGARITHMICDEPTH");
+                }
+                BABYLON.MaterialHelper.HandleFallbacksForShadows(this._defines, fallbacks, this.maxSimultaneousLights);
+                if (this._defines.SPECULARTERM) {
+                    fallbacks.addFallback(0, "SPECULARTERM");
+                }
+                if (this._defines.DIFFUSEFRESNEL) {
+                    fallbacks.addFallback(1, "DIFFUSEFRESNEL");
+                }
+                if (this._defines.OPACITYFRESNEL) {
+                    fallbacks.addFallback(2, "OPACITYFRESNEL");
+                }
+                if (this._defines.REFLECTIONFRESNEL) {
+                    fallbacks.addFallback(3, "REFLECTIONFRESNEL");
+                }
+                if (this._defines.EMISSIVEFRESNEL) {
+                    fallbacks.addFallback(4, "EMISSIVEFRESNEL");
+                }
+                if (this._defines.FRESNEL) {
+                    fallbacks.addFallback(4, "FRESNEL");
+                }
+                //Attributes
+                var attribs = [BABYLON.VertexBuffer.PositionKind];
+                if (this._defines.NORMAL) {
+                    attribs.push(BABYLON.VertexBuffer.NormalKind);
+                }
+                if (this._defines.UV1) {
+                    attribs.push(BABYLON.VertexBuffer.UVKind);
+                }
+                if (this._defines.UV2) {
+                    attribs.push(BABYLON.VertexBuffer.UV2Kind);
+                }
+                if (this._defines.VERTEXCOLOR) {
+                    attribs.push(BABYLON.VertexBuffer.ColorKind);
+                }
+                BABYLON.MaterialHelper.PrepareAttributesForBones(attribs, mesh, this._defines, fallbacks);
+                BABYLON.MaterialHelper.PrepareAttributesForInstances(attribs, this._defines);
+                var shaderName = "default";
+                if (this.builder) {
+                    shaderName = this.builder(new CustomShaderHelper(), shaderName, this._mainPart, this._diffusePart, this._vertexPositionPart);
+                }
+                var join = this._defines.toString();
+                var uniforms = ["world", "view", "viewProjection", "vEyePosition", "vLightsType", "vAmbientColor", "vDiffuseColor", "vSpecularColor", "vEmissiveColor",
+                    "vFogInfos", "vFogColor", "pointSize",
+                    "vDiffuseInfos", "vAmbientInfos", "vOpacityInfos", "vReflectionInfos", "vEmissiveInfos", "vSpecularInfos", "vBumpInfos", "vLightmapInfos", "vRefractionInfos",
+                    "mBones",
+                    "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix", "refractionMatrix",
+                    "depthValues",
+                    "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor", "refractionLeftColor", "refractionRightColor",
+                    "logarithmicDepthConstant"
+                ];
+                var samplers = ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionCubeSampler", "refraction2DSampler"];
+                if (this._defines.CAMERACOLORCURVES) {
+                    BABYLON.ColorCurves.PrepareUniforms(uniforms);
+                }
+                if (this._defines.CAMERACOLORGRADING) {
+                    BABYLON.ColorGradingTexture.PrepareUniformsAndSamplers(uniforms, samplers);
+                }
+                BABYLON.MaterialHelper.PrepareUniformsAndSamplersList(uniforms, samplers, this._defines, this.maxSimultaneousLights);
+                this._effect = scene.getEngine().createEffect(shaderName, attribs, uniforms, samplers, join, fallbacks, this.onCompiled, this.onError, { maxSimultaneousLights: this.maxSimultaneousLights - 1 });
+            }
+            if (!this._effect.isReady()) {
+                return false;
+            }
+            this._renderId = scene.getRenderId();
+            this._wasPreviouslyReady = true;
+            if (mesh) {
+                if (!mesh._materialDefines) {
+                    mesh._materialDefines = new BABYLON.StandardMaterialDefines();
+                }
+                this._defines.cloneTo(mesh._materialDefines);
+            }
+            return true;
+        };
+        return CustomMaterial;
+    }(BABYLON.StandardMaterial));
+    BABYLON.CustomMaterial = CustomMaterial;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.customMaterial.js.map

dist/materialsLibrary/babylon.fireMaterial.d.ts

@@ -0,0 +1,28 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class FireMaterial extends Material {
+        diffuseTexture: BaseTexture;
+        distortionTexture: BaseTexture;
+        opacityTexture: BaseTexture;
+        diffuseColor: Color3;
+        speed: number;
+        private _scaledDiffuse;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        private _lastTime;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): FireMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): FireMaterial;
+    }
+}

dist/materialsLibrary/babylon.furMaterial.d.ts

@@ -0,0 +1,43 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class FurMaterial extends Material {
+        diffuseTexture: BaseTexture;
+        heightTexture: BaseTexture;
+        diffuseColor: Color3;
+        furLength: number;
+        furAngle: number;
+        furColor: Color3;
+        furOffset: number;
+        furSpacing: number;
+        furGravity: Vector3;
+        furSpeed: number;
+        furDensity: number;
+        furTexture: DynamicTexture;
+        disableLighting: boolean;
+        highLevelFur: boolean;
+        maxSimultaneousLights: number;
+        _meshes: AbstractMesh[];
+        private _worldViewProjectionMatrix;
+        private _renderId;
+        private _furTime;
+        private _defines;
+        private _cachedDefines;
+        constructor(name: string, scene: Scene);
+        furTime: number;
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        updateFur(): void;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): FurMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): FurMaterial;
+        static GenerateTexture(name: string, scene: Scene): DynamicTexture;
+        static FurifyMesh(sourceMesh: Mesh, quality: number): Mesh[];
+    }
+}

dist/materialsLibrary/babylon.gradientMaterial.d.ts

@@ -0,0 +1,30 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class GradientMaterial extends Material {
+        topColor: Color3;
+        topColorAlpha: number;
+        bottomColor: Color3;
+        bottomColorAlpha: number;
+        offset: number;
+        smoothness: number;
+        disableLighting: boolean;
+        private _worldViewProjectionMatrix;
+        private _scaledDiffuse;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): GradientMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): GradientMaterial;
+    }
+}

dist/materialsLibrary/babylon.gridMaterial.d.ts

@@ -0,0 +1,55 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    /**
+     * The grid materials allows you to wrap any shape with a grid.
+     * Colors are customizable.
+     */
+    class GridMaterial extends BABYLON.Material {
+        /**
+         * Main color of the grid (e.g. between lines)
+         */
+        mainColor: Color3;
+        /**
+         * Color of the grid lines.
+         */
+        lineColor: Color3;
+        /**
+         * The scale of the grid compared to unit.
+         */
+        gridRatio: number;
+        /**
+         * The frequency of thicker lines.
+         */
+        majorUnitFrequency: number;
+        /**
+         * The visibility of minor units in the grid.
+         */
+        minorUnitVisibility: number;
+        /**
+         * The grid opacity outside of the lines.
+         */
+        opacity: number;
+        private _gridControl;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        /**
+         * constructor
+         * @param name The name given to the material in order to identify it afterwards.
+         * @param scene The scene the material is used in.
+         */
+        constructor(name: string, scene: Scene);
+        /**
+         * Returns wehter or not the grid requires alpha blending.
+         */
+        needAlphaBlending(): boolean;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): GridMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): GridMaterial;
+    }
+}

dist/materialsLibrary/babylon.lavaMaterial.d.ts

@@ -0,0 +1,34 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class LavaMaterial extends Material {
+        diffuseTexture: BaseTexture;
+        noiseTexture: BaseTexture;
+        fogColor: Color3;
+        speed: number;
+        movingSpeed: number;
+        lowFrequencySpeed: number;
+        fogDensity: number;
+        private _lastTime;
+        diffuseColor: Color3;
+        disableLighting: boolean;
+        maxSimultaneousLights: number;
+        private _worldViewProjectionMatrix;
+        private _scaledDiffuse;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): LavaMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): LavaMaterial;
+    }
+}

dist/materialsLibrary/babylon.normalMaterial.d.ts

@@ -0,0 +1,26 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class NormalMaterial extends Material {
+        diffuseTexture: BaseTexture;
+        diffuseColor: Color3;
+        disableLighting: boolean;
+        private _worldViewProjectionMatrix;
+        private _scaledDiffuse;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): NormalMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): NormalMaterial;
+    }
+}

dist/materialsLibrary/babylon.shadowOnlyMaterial.d.ts

@@ -0,0 +1,21 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class ShadowOnlyMaterial extends Material {
+        private _worldViewProjectionMatrix;
+        private _scaledDiffuse;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        clone(name: string): ShadowOnlyMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): ShadowOnlyMaterial;
+    }
+}

dist/materialsLibrary/babylon.simpleMaterial.d.ts

@@ -0,0 +1,27 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class SimpleMaterial extends Material {
+        diffuseTexture: BaseTexture;
+        diffuseColor: Color3;
+        disableLighting: boolean;
+        maxSimultaneousLights: number;
+        private _worldViewProjectionMatrix;
+        private _scaledDiffuse;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): SimpleMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): SimpleMaterial;
+    }
+}

dist/materialsLibrary/babylon.skyMaterial.d.ts

@@ -0,0 +1,32 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class SkyMaterial extends Material {
+        luminance: number;
+        turbidity: number;
+        rayleigh: number;
+        mieCoefficient: number;
+        mieDirectionalG: number;
+        distance: number;
+        inclination: number;
+        azimuth: number;
+        sunPosition: Vector3;
+        useSunPosition: boolean;
+        private _cameraPosition;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): SkyMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): SkyMaterial;
+    }
+}

dist/materialsLibrary/babylon.terrainMaterial.d.ts

@@ -0,0 +1,34 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class TerrainMaterial extends Material {
+        mixTexture: BaseTexture;
+        diffuseTexture1: Texture;
+        diffuseTexture2: Texture;
+        diffuseTexture3: Texture;
+        bumpTexture1: Texture;
+        bumpTexture2: Texture;
+        bumpTexture3: Texture;
+        diffuseColor: Color3;
+        specularColor: Color3;
+        specularPower: number;
+        disableLighting: boolean;
+        maxSimultaneousLights: number;
+        private _worldViewProjectionMatrix;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): TerrainMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): TerrainMaterial;
+    }
+}

dist/materialsLibrary/babylon.triPlanarMaterial.d.ts

@@ -0,0 +1,35 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class TriPlanarMaterial extends Material {
+        mixTexture: BaseTexture;
+        diffuseTextureX: Texture;
+        diffuseTextureY: Texture;
+        diffuseTextureZ: Texture;
+        normalTextureX: Texture;
+        normalTextureY: Texture;
+        normalTextureZ: Texture;
+        tileSize: number;
+        diffuseColor: Color3;
+        specularColor: Color3;
+        specularPower: number;
+        disableLighting: boolean;
+        maxSimultaneousLights: number;
+        private _worldViewProjectionMatrix;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): TriPlanarMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): TriPlanarMaterial;
+    }
+}