Skip to main content

3D scene scattering fog settings

It can simulate the effect of atmospheric scattering fog in reality and improve the realism of the scene.

show
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scattering fog</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,
      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) {
          
          //Initialize the scattering fog and add it to the scene
          let pvFog = mapmost.PostProcessStageLibrary.initScatterFog(map);
          map.addPostProcess(pvFog);

          let fog = {
            "maxDis": 1143.7,
            "fogIndensity": 1,
            "fogColor": [
              255,
              255,
              255
            ],
            "yellow": [
              255,
              255,
              255
            ],
            "enabled": true,
          }
          
          // sun position
          pvFog.sunDir = [1, 0.5, 0.0]
          let guiFog = gui.addFolder('scattering fog');

          //maximum distance
          guiFog.add(fog, "maxDis").min(0).max(3000).step(0.1).onChange(function (value) {
            pvFog.maxDis = value;
          });

          // Scattered fog intensity
          guiFog.add(fog, "fogIndensity").min(0).max(10).step(0.1).onChange(function (value) {
            pvFog.fogIndensity = value;
          });

          // color of fog
          guiFog.addColor(fog, 'fogColor').onChange(function (value) {
            pvFog.fogColor = [value[0] / 255, value[1] / 255, value[2] / 255];
          });

          // scattering color
          guiFog.addColor(fog, 'yellow').onChange(function (value) {
            pvFog.yellow = [value[0] / 255, value[1] / 255, value[2] / 255];
          });

          // Turn on/off scattering fog
          guiFog.add(fog, "enabled").onChange(function (value) {
            pvFog.enabled = value;
          });
        }
      };
      map.addLayer(options_obj);
    });
  </script>
</body>
</html>