Switch atmosphere preset

Start with the default atmosphere and switch between the built-in look presets

switch_atmosphere_preset.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Switch atmosphere preset</title>
  <meta property="og:description" content="Start with the default atmosphere and switch between the built-in look presets" />
  <script src="./v0.10.6/mapray.min.js"></script>
  <script src="./v0.10.6/maprayui.min.js"></script>
  <link rel="stylesheet" href="./v0.10.6/mapray.css">
  <style>
    body {margin: 0; padding: 0;}
    html, body, div#mapray-container { height: 100%; }
    .map-overlay {
      font: 12px/20px "Robot", sans-serif;
      position: absolute;
      width: 220px;
      top: 0;
      left: 0;
      padding: 10px;
    }
    .map-overlay .map-overlay-inner {
      background-color: #fff;
      color: #000;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      border-radius: 3px;
      padding: 10px;
    }
    .map-overlay-inner label {
      display: block;
      font-weight: bold;
      margin: 0 0 5px;
    }
    .map-overlay-inner select {
      width: 100%;
    }
    .map-overlay-inner p {
      margin: 8px 0 0;
      color: #555;
    }
  </style>
</head>

<body>
  <div id="mapray-container"></div>
  <div class="map-overlay">
    <div class="map-overlay-inner">
      <label for="Preset">Atmosphere preset</label>
      <select id="Preset" name="Preset"></select>
      <p id="Info"></p>
    </div>
  </div>
</body>
</html>

<script>
  const cloudApi = new mapray.cloud.CloudApiV2({
    tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
    token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
  });

  // The viewer starts with the engine default look (equivalent to the
  // "filmic-physical" preset, with the quality preset left at "medium").
  const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
    dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() ),
    atmosphere: new mapray.Atmosphere()
  } );

  uiviewer.setCameraPosition({ longitude: 137.693861815529, latitude: 36.30821404038031, height: 3300 });
  uiviewer.setLookAtPosition({ longitude: 137.65906432922944, latitude: 36.294572127536995, height: 2800 });

  const atmosphere = uiviewer.viewer.atmosphere;

  // mapray.Atmosphere.PRESETS is the single source of truth for the preset values.
  const select = document.getElementById( "Preset" );
  for ( const name of Object.values( mapray.Atmosphere.Preset ) ) {
    const option = document.createElement( "option" );
    option.value = name;
    option.textContent = name;
    select.appendChild( option );
  }
  select.value = mapray.Atmosphere.Preset.FILMIC_PHYSICAL;

  function showInfo() {
    const values = mapray.Atmosphere.PRESETS[select.value];
    // The tonemap curve lives on the viewer's render effects.
    const tonemap = uiviewer.viewer.render_effects.tonemap_mode;
    document.getElementById( "Info" ).textContent =
      `tonemap: ${tonemap} / quality: ${atmosphere.quality} / mie g: ${values.mie_g}`;
  }

  select.addEventListener( "change", () => {
    // applyPreset() drives the public setters, so every look parameter
    // (including the tonemap curve) is replaced at once. The rendering
    // quality is a separate axis and is left untouched.
    atmosphere.applyPreset( select.value );
    showInfo();
  } );

  showInfo();
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudのアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。