DEV Community

Cover image for Creating a 3D config with types
Guillaume Beraudo for Camptocamp Geospatial Solutions

Posted on • Edited on

1

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,
      },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

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.

Your JavaScript stack deserves better infra

Your JavaScript stack deserves better infra

Stop duct-taping user flows together. Manage auth, access, and billing in one simple SDK with Kinde.

Get a free account

Top comments (0)

Pulumi Azure GitHub Image

"Give Pulumi a shot and you will never look back" - Engin

Build and ship infrastructure faster using languages you know and love. Use Pulumi’s open source SDK to provision infrastructure on any cloud, and securely and collaboratively build and manage infrastructure using Pulumi Cloud.

Get Started

👋 Kindness is contagious

Dive into this insightful article, celebrated by the caring DEV Community. Programmers from all walks of life are invited to share and expand our collective wisdom.

A simple thank-you can make someone’s day—drop your kudos in the comments!

On DEV, spreading knowledge paves the way and strengthens our community ties. If this piece helped you, a brief note of appreciation to the author truly counts.

Let’s Go!