Skip to main content

3D scene color adjustment

You can set the saturation, brightness, contrast and gamma values ​​of the scene.

show
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color adjustment</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
  <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
  <script src='./dat.gui.js'></script>
</head>
<body>
  <div id='map'></div>
  <script>
    var gui = new dat.GUI();
    var map = new mapmost.Map({
      style: "<your style url>",
      container: 'map',
      center: [120.67617982483154, 31.317070971395978],
      zoom: 16.011081413474614,
      bearing: -128.8049986576308,
      pitch: 82,
      sky: "light",
      userId: '***', // Authorization code
    });

    map.on("load", function () {
      let models_obj = [
        "<your model url>"
      ].map(item => ({
        type: 'glb',
        url: item,
      }));

      let options_obj = {
        id: 'model_id',
        type: 'model',
        models: models_obj,
        center: [120.7461498, 31.3307914, 0.2],
        project: "3857",
        callback: function (group, layer) {

          // Color adjustment
          let pvBHD = mapmost.PostProcessStageLibrary.initColorAdjust(map);
          //Add to scene
          map.addPostProcess(pvBHD);

          let colorAdjust = {
            "saturation": 1,
            "lightness": 1,
            "contrast": 0,
            "gamma": 1,
            "enabled": true,
          }

          let guiColor = gui.addFolder('Color adjustment');

          // saturation
          guiColor.add(colorAdjust, "saturation").min(-1).max(1).step(0.1).onChange(function (value) {
            pvBHD.saturation = value;
          });

          // brightness
          guiColor.add(colorAdjust, "lightness").min(0).max(1).step(0.1).onChange(function (value) {
            pvBHD.lightness = value;
          });

          // contrast
          guiColor.add(colorAdjust, "contrast").min(-1).max(1).step(0.1).onChange(function (value) {
            pvBHD.contrast = value;
          });

          //gamma value
          guiColor.add(colorAdjust, "gamma").min(0).max(20).step(0.1).onChange(function (value) {
            pvBHD.gamma = value;
          });

          // Turn on/off color adjustment
          guiColor.add(colorAdjust, "enabled").onChange(function (value) {
            pvBHD.enabled = value;
          });
        }
      };
      map.addLayer(options_obj);
    });
  </script>
</body>
</html>