Configuring the Experience

The Pictofit Web SDK allows you to load an entire scene based on a configuration file. This makes it very easy to define a 3D scene with arbitrary content. For every asset generated through our Pictofit Content Service, a configuration file is provided as well. This allows for easy loading of the assets with just a few lines of code. But you can also write your own config files or extend the ones provided by us to customise your 3D scene without having to write code. This section explains how this can be done. For further details on the used babylon.js classes, please see the respective reference (links are provided).

Config File Structure

This snippet shows an example configuration to give you the basic idea of the structure. The configuration files are in the .json format and very easy to understand and to write.

Each file starts with a version entry which should be set to 2. We also support legacy configuration file formats meaning your old config files will still work with newer versions of the SDK. The next root entry in the configuration is the scenenode which defines the content of the scene. The following sections describe the possible elements in more detail.

JSON

{
  "version" : 2,
  "scene" : {
    "materials": [
    ],
    "nodes" : [
      {
        "name" : "MyMesh",
        "type" : "Mesh",
        "uri" : "mesh.obj",
        "material" : {
          "name" : "MyMesh-material",
          "type" : "StandardMaterial",
          "emissiveColor" : [1, 1, 1],
          "diffuseTexture" : {
            "uri" : "texture.jpg"
          },
          "disableLighting" : true
        }
      },
      {
        "name" : "Orbit",
        "type" : "ArcRotateCamera",
        "target" : "MyMesh",
        "useAutoRotationBehavior" : true
      }
    ]
  }
}

Scene

This property contains all elements which are actually part of the scene. The main entry is the nodes section. It describes the actual scene graph. Or in other words: All elements that actually part (and visible in one way or another) of your scene. The defaultEnvironment section allows you to define basic properties like the color or a skybox in a handy way. Finally, the materials section can be used to define the respective entities in a global way so that they can be referenced by elements in the scene. The environmentTexture properties allows you to define a texture that is then used by all PBR materials by default. This is handy since you usually want to use the same texture for all of them.

JSON

{
  "clearColor" : [number, number ,number],
  "environmentTexture" : CubeTexture,
  "defaultEnvironment" : DefaultEnvironment,
  "materials" : [ Material ],
  "nodes" : [ Node ]
}

Default Environment

This property is a a helper to define commonly used elements like a ground plane, a skybox or a general color scheme. This simply speeds up the process of setting up a scene.

JSON

{
    "createGround" : boolean,
    "createSkybox" : boolean,
    "mainColor" : [ number, number, number ],
    "groundSize" : number,
    "skyboxSize" : number,
    "skyboxColor" : [ number, number, number ],
    "groundColor" : [ number, number, number ],
    "groundShadowLevel" : number
}

babylon.js reference: https://doc.babylonjs.com/typedoc/classes/babylon.environmenthelper