Creating a 3D config with types

Good config system is not easy

We are building the NGV, a framework to create 3d applications, powered by the CesiumJS library.

How to design the configuration (file) mechanism?

• how to type it?
• how to anticipate / detect harmful changes in CesiumJS?
• how to avoid writing tons of code?

JSON is not easily typed

JSON is simple and flexible, but has no typing information.
Sure it is possible to join a JSON schema file, but that needs to be taken care of and checked. Ex, with additional tooling like typescript-json-schema or ts-json-schema-generator.

It is also not standard yet to import JSON.

Typescript as config file

Typescript allows to write typed JSON, out of the box. Here is an example of config file in typescript that exports a typed JSON config:

import type {IPermitsConfig} from './ingv-config-permits.js';

export const config: IPermitsConfig = {
  // the supported languages
  languages: ['de', 'fr', 'en', 'it'],
  app: {
    cesiumContext: {
      // the catalogs, containing declarations of all existing layers
      // WMTS, 3d-tiles, gLTF models, terrain, ...
      catalogs: {
        '@demo': '../../catalogs/demoCatalog.json',
        '@cesium': '../../catalogs/cesiumCatalog.json',
        '@geoadmin': '../../catalogs/geoadminCatalog.json',
      },
      layers: {
        // tilesets: ['@cesium/googlePhotorealistic'],
        models: ['@demo/sofa', '@demo/thatopensmall'],
        imageries: ['@geoadmin/pixel-karte-farbe'],
        // terrain: '@geoadmin/terrain',
      },
      // the default position of the camera
      camera: {
        position: [6.628484, 46.5, 100],
        orientation: {
          heading: 0,
          pitch: -30.0,
        },
      },
      layerOptions: {},
      widgetOptions: {
        scene3DOnly: true,
      },
      globeOptions: {
        depthTestAgainstTerrain: true,
      },
    },
  },
};

Beyond static JSON

For a configuration defined at compile time, using typescript is straightforward and guarantees typing in the long run. That said, we are not limited to serializable structures: if we want we can as well make use of the dynamic nature of javascript by using functions, for example.