Show a wide PLATEAU area with a device profile

Showing a wide area of PLATEAU Taito textured buildings with a device profile that sets the texture size, the detail and the memory budget.

plateau_device_profile.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Show a wide PLATEAU area with a device profile</title>
  <meta property="og:description" content="Showing a wide area of PLATEAU Taito textured buildings with a device profile that sets the texture size, the detail and the memory budget." />
  <script src="./v0.10.7/mapray.min.js"></script>
  <script src="./v0.10.7/maprayui.min.js"></script>
  <link rel="stylesheet" href="./v0.10.7/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: 300px;
        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;
        margin-bottom: 10px;
    }
    .map-overlay-inner fieldset {
        border: none;
        padding: 0;
        margin: 0 0 10px;
    }
    .map-overlay-inner fieldset:last-child {
        margin: 0;
    }
    .map-overlay-inner label {
        display: block;
        font-weight: bold;
        margin: 0 0 5px;
    }
    .map-overlay-inner select, .map-overlay-inner input[type=range] {
        width: 100%;
    }
  </style>
</head>
<body>
<div id="mapray-container"></div>
<div class="map-overlay top">
    <div class="map-overlay-inner">
        <fieldset>
            <label>Device profile</label>
            <select id="profile_select">
                <option value="MINIMAL">MINIMAL (fail-safe)</option>
                <option value="IOS_MOBILE">IOS_MOBILE</option>
                <option value="IPAD_LOW">IPAD_LOW</option>
                <option value="IPAD_STANDARD">IPAD_STANDARD</option>
                <option value="IPAD_HIGH">IPAD_HIGH</option>
                <option value="DESKTOP_STANDARD">DESKTOP_STANDARD</option>
                <option value="DESKTOP_ULTRA">DESKTOP_ULTRA</option>
            </select>
        </fieldset>
        <fieldset>
            <label>Applied to the scene</label>
            <span id="scene_info">-</span>
        </fieldset>
        <fieldset>
            <label>GPU memory</label>
            <span id="gpu_info">-</span>
        </fieldset>
    </div>
</div>
</body>
</html>
<script>
  // Shows a wide area of textured buildings with a device profile, which bundles the texture size, the level of detail and the memory budget.
  // A profile is chosen once for a device, so the page is loaded again with the profile in the address.
  const MIB = 1024 * 1024;
  const profile_name = new URLSearchParams( location.search ).get( "profile" ) ?? "DESKTOP_STANDARD";

  const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
        token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
    });
    // The StandardUIView in the ui package includes mouse-based camera manipulation.
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
    } );
  // High above Ueno in Tokyo JP
  uiviewer.setCameraPosition({
    longitude: 139.77,
    latitude: 35.69,
    height: 2500
  });
  // Senso-ji
  uiviewer.setLookAtPosition({
    longitude: 139.7967,
    latitude: 35.7148,
    height: 0
  });
  // PLATEAU Taito-ku buildings, LOD2 with textures (OGC 3D Tiles 1.1: glTF content with EXT_structural_metadata)
  const provider = new mapray.StandardTiles3DProvider({
    url: "https://assets.cms.plateau.reearth.io/assets/75/76c6bc-df54-4bf4-a869-b513526b5bd2/13106_taito-ku_city_2025_citygml_1_op_bldg_3dtiles_lod2/tileset.json"
  }, {
    // PLATEAU tiles carry no copyright string, so credit the dataset as the PLATEAU terms of use require (Public Data License 1.0, compatible with CC BY 4.0).
    attributions: [ "出典：「3D都市モデル（Project PLATEAU）台東区（2025年度）」（国土交通省）" ]
  });
  const scene = uiviewer.viewer.b3d_collection.createTiles3DScene(provider, {
    show_attributions: true,
    vertical_offset: -37   // ellipsoidal height to elevation (geoid undulation around Tokyo)
  });

  // The profile sets the values of every object in the viewer, the scene included.
  uiviewer.viewer.applyDeviceProfile( mapray.DeviceProfile[profile_name] );
  document.getElementById( 'scene_info' ).textContent =
      "max texture size " + scene.max_texture_size + " px, SSE threshold " + scene.sse_threshold + ", cache limit " +
      ( Number.isFinite( scene.max_cache_bytes ) ? Math.round( scene.max_cache_bytes / MIB ) + " MiB" : "none" ) + ", pixel ratio " + uiviewer.viewer.pixel_ratio;

  function showStatistics() {
      // getGpuResourceInfo() walks the tile tree, so it is polled instead of being called every frame.
      const gpu = scene.getGpuResourceInfo();
      document.getElementById( 'gpu_info' ).textContent =
          "textures " + ( gpu.texture_bytes / MIB ).toFixed( 1 ) + " MiB, buffers " + ( gpu.buffer_bytes / MIB ).toFixed( 1 ) + " MiB";
  }

  const profile_select = document.getElementById( 'profile_select' );
  profile_select.value = profile_name;
  profile_select.addEventListener( 'change', () => { location.search = "?profile=" + profile_select.value; } );
  setInterval( showStatistics, 1000 );
</script>

Info

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