3D タイル レンダラを使用する

Photorealistic 3D Tiles は OGC 標準の glTF 形式です。つまり、OGC 3D Tiles 仕様をサポートする任意のレンダラを使用して 3D 可視化を構築できます。たとえば、Cesium は 3D 可視化をレンダリングするための基本的なオープンソース ライブラリです。

CesiumJS を使用する

CesiumJS は、ウェブでの 3D 可視化用のオープンソースの JavaScript ライブラリです。CesiumJS の使用方法の詳細については、CesiumJS について学習するをご覧ください。

ユーザー コントロール

CesiumJS タイル レンダラには、標準のユーザー コントロールが用意されています。

アクション 説明
パンビュー 左クリック + ドラッグ
ズーム表示 右クリックしてドラッグする、またはマウスホイールをスクロールする
ビューを回転する Ctrl キーを押しながら左クリックまたは右クリックしてドラッグする、または中ボタンを押しながらドラッグする

ベスト プラクティス

CesiumJS 3D の読み込み時間を短縮する方法はいくつかあります。例:

  • レンダリング HTML に次のステートメントを追加して、同時リクエストを有効にします。

    Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = <REQUEST_COUNT>

    REQUEST_COUNT が大きいほど、タイルの読み込みが速くなります。ただし、REQUEST_COUNT が 10 を超え、キャッシュが無効になっている Chrome ブラウザで読み込みを行うと、Chrome の既知の問題が発生する可能性があります。ほとんどのユースケースでは、パフォーマンスを最適化するために REQUEST_COUNT を 18 にすることをおすすめします。

  • 詳細レベルのスキップを可能にします。詳細については、こちらのCesium に関する問題をご覧ください。

showCreditsOnScreen: true を有効にして、データ属性が適切に表示されるようにします。詳細については、ポリシーをご覧ください。

レンダリングの指標

フレームレートを確認するには、requestAnimationFrame メソッドが 1 秒間に何回呼び出されるかを確認します。

フレーム レイテンシの計算方法については、PerformanceDisplay クラスをご覧ください。

CesiumJS レンダラの例

ルート タイルセットの URL を指定するだけで、Map Tiles API の 3D タイルで CesiumJS レンダラを使用できます。

簡単な例

次の例では、CesiumJS レンダラを初期化し、ルートタイルセットを読み込みます。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>CesiumJS 3D Tiles Simple Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
  <link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>

    // Enable simultaneous requests.
    Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

    // Create the viewer.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: false,
      baseLayerPicker: false,
      geocoder: false,
      globe: false,
      // https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/#enabling-request-render-mode
      requestRenderMode: true,
    });

    // Add 3D Tiles tileset.
    const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
      url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
      // This property is needed to appropriately display attributions
      // as required.
      showCreditsOnScreen: true,
    }));
  </script>
</body>

requestRenderMode の詳細については、リクエスト レンダリング モードを有効にするをご覧ください。

HTML ページは次のようにレンダリングされます。

Places API の統合

CesiumJS と Places API を使用して、詳細情報を取得できます。Autocomplete ウィジェットを使用すると、プレイスのビューポートにジャンプできます。この例では、こちらの手順で有効にする Places Autocomplete API と、こちらの手順で有効にする Maps JavaScript API を使用します。

<!DOCTYPE html>
<head>
 <meta charset="utf-8" />
 <title>CesiumJS 3D Tiles Places API Integration Demo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
 <link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
 <label for="pacViewPlace">Go to a place: </label>
 <input
   type="text"
   id="pacViewPlace"
   name="pacViewPlace"
   placeholder="Enter a location..."
   style="width: 300px"
 />
 <div id="cesiumContainer"></div>
 <script>
   // Enable simultaneous requests.
   Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

   // Create the viewer.
   const viewer = new Cesium.Viewer("cesiumContainer", {
     imageryProvider: false,
     baseLayerPicker: false,
     requestRenderMode: true,
     geocoder: false,
     globe: false,
   });

   // Add 3D Tiles tileset.
   const tileset = viewer.scene.primitives.add(
     new Cesium.Cesium3DTileset({
       url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
       // This property is required to display attributions as required.
       showCreditsOnScreen: true,
     })
   );

   const zoomToViewport = (viewport) => {
     viewer.entities.add({
       polyline: {
         positions: Cesium.Cartesian3.fromDegreesArray([
           viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
           viewport.getSouthWest().lng(), viewport.getNorthEast().lat(),
           viewport.getSouthWest().lng(), viewport.getSouthWest().lat(),
           viewport.getNorthEast().lng(), viewport.getSouthWest().lat(),
           viewport.getNorthEast().lng(), viewport.getNorthEast().lat(),
         ]),
         width: 10,
         clampToGround: true,
         material: Cesium.Color.RED,
       },
     });
     viewer.flyTo(viewer.entities);
   };

   function initAutocomplete() {
     const autocomplete = new google.maps.places.Autocomplete(
       document.getElementById("pacViewPlace"),
       {
         fields: [
           "geometry",
           "name",
         ],
       }
     );
     autocomplete.addListener("place_changed", () => {
       viewer.entities.removeAll();
       const place = autocomplete.getPlace();
       if (!place.geometry || !place.geometry.viewport) {
         window.alert("No viewport for input: " + place.name);
         return;
       }
       zoomToViewport(place.geometry.viewport);
     });
   }
 </script>
 <script
   async=""
   src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
 ></script>
</body>

回転するドローンビュー

カメラを制御して、タイルセットにアニメーションを付けることができます。このアニメーションを Places API と Elevation API と組み合わせると、任意のスポットのインタラクティブなドローン飛行をシミュレートできます。

このコードサンプルは、Autocomplete ウィジェットで選択した場所の周辺をジャンプします。

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>CesiumJS 3D Tiles Rotating Drone View Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
  <link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <label for="pacViewPlace">Go to a place: </label>
  <input type="text" id="pacViewPlace" name="pacViewPlace" placeholder="Enter a location..." style="width: 300px" />
  <div id="cesiumContainer"></div>
  <script>
    // Enable simultaneous requests.
    Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

    // Create the viewer and remove unneeded options.
    const viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: false,
      baseLayerPicker: false,
      homeButton: false,
      fullscreenButton: false,
      navigationHelpButton: false,
      vrButton: false,
      sceneModePicker: false,
      geocoder: false,
      globe: false,
      infobox: false,
      selectionIndicator: false,
      timeline: false,
      projectionPicker: false,
      clockViewModel: null,
      animation: false,
      requestRenderMode: true,
    });

    // Add 3D Tile set.
    const tileset = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",
        // This property is required to display attributions.
        showCreditsOnScreen: true,
      })
    );

    // Point the camera at a location and elevation, at a viewport-appropriate distance.
    function pointCameraAt(location, viewport, elevation) {
      const distance = Cesium.Cartesian3.distance(
        Cesium.Cartesian3.fromDegrees(
          viewport.getSouthWest().lng(), viewport.getSouthWest().lat(), elevation),
        Cesium.Cartesian3.fromDegrees(
          viewport.getNorthEast().lng(), viewport.getNorthEast().lat(), elevation)
      ) / 2;
      const target = new Cesium.Cartesian3.fromDegrees(location.lng(), location.lat(), elevation);
      const pitch = -Math.PI / 4;
      const heading = 0;
      viewer.camera.lookAt(target, new Cesium.HeadingPitchRange(heading, pitch, distance));
    }

    // Rotate the camera around a location and elevation, at a viewport-appropriate distance.
    let unsubscribe = null;
    function rotateCameraAround(location, viewport, elevation) {
      if(unsubscribe) unsubscribe();
      pointCameraAt(location, viewport, elevation);
      unsubscribe = viewer.clock.onTick.addEventListener(() => {
        viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z);
      });
    }

    function initAutocomplete() {
      const autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("pacViewPlace"), {
          fields: [
            "geometry",
            "name",
          ],
        }
      );
      
      autocomplete.addListener("place_changed", async () => {
        const place = autocomplete.getPlace();
        
        if (!(place.geometry && place.geometry.viewport && place.geometry.location)) {
          window.alert(`Insufficient geometry data for place: ${place.name}`);
          return;
        }
        // Get place elevation using the ElevationService.
        const elevatorService = new google.maps.ElevationService();
        const elevationResponse =  await elevatorService.getElevationForLocations({
          locations: [place.geometry.location],
        });

        if(!(elevationResponse.results && elevationResponse.results.length)){
          window.alert(`Insufficient elevation data for place: ${place.name}`);
          return;
        }
        const elevation = elevationResponse.results[0].elevation || 10;

        rotateCameraAround(
          place.geometry.location,
          place.geometry.viewport,
          elevation
        );
      });
    }
  </script>
  <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"></script>
</body>

ポリラインとラベルを描画する

このコードサンプルは、地図にポリラインとラベルを追加する方法を示しています。ポリラインを地図に追加すると、運転ルートや徒歩ルート、敷地境界線、運転時間と徒歩の所要時間を計算できます。シーンを実際にレンダリングせずに属性を取得することもできます。

ユーザーを地域のキュレートされたツアーに案内したり、現在販売中の近隣の物件を表示したり、ビルボードなどの 3D オブジェクトをシーンに追加したりできます。

ルートを要約し、表示した宿泊施設を一覧表示して、これらの詳細を仮想オブジェクトに表示できます。

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>CesiumJS 3D Tiles Polyline and Label Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
  <link 
    href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css"
    rel="stylesheet"
  />
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Enable simultaneous requests.
    Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;

    // Create the viewer.
    const viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: false,
      baseLayerPicker: false,
      requestRenderMode: true,
      geocoder: false,
      globe: false,
    });

    // Add 3D Tiles tileset.
    const tileset = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY",

        // This property is required to display attributions as required.
        showCreditsOnScreen: true,
      })
    );

    // Draws a circle at the position, and a line from the previous position.
    const drawPointAndLine = (position, prevPosition) => {
      viewer.entities.removeAll();
      if (prevPosition) {
        viewer.entities.add({
          polyline: {
            positions: [prevPosition, position],
            width: 3,
            material: Cesium.Color.WHITE,
            clampToGround: true,
            classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
          },
        });
      }
      viewer.entities.add({
        position: position,
        ellipsoid: {
          radii: new Cesium.Cartesian3(1, 1, 1),
          material: Cesium.Color.RED,
        },
      });
    };

    // Compute, draw, and display the position's height relative to the previous position.
    var prevPosition;
    const processHeights = (newPosition) => {
      drawPointAndLine(newPosition, prevPosition);

      const newHeight = Cesium.Cartographic.fromCartesian(newPosition).height;
      let labelText = "Current altitude (meters above sea level):\n\t" + newHeight;
      if (prevPosition) {
        const prevHeight =
          Cesium.Cartographic.fromCartesian(prevPosition).height;
        labelText += "\nHeight from previous point (meters):\n\t" + Math.abs(newHeight - prevHeight);
      }
      viewer.entities.add({
        position: newPosition,
        label: {
          text: labelText,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          pixelOffset: new Cesium.Cartesian2(0, -10),
          showBackground: true,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        }
      });

      prevPosition = newPosition;
    };

    const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (event) {
      const earthPosition = viewer.scene.pickPosition(event.position);
      if (Cesium.defined(earthPosition)) {
        processHeights(earthPosition);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  </script>
</body>

カメラの軌道

Cesium では、建物との衝突を避けるため、特定の地点を中心にカメラを回転させることができます。または、カメラが建物内を移動するときに建物を透明にすることもできます。

まず、カメラを 1 つのポイントに固定してから、カメラ オービットを作ってアセットを紹介します。これは、このコードサンプルに示すように、カメラの lookAtTransform 関数とイベント リスナーを使用して行えます。

// Lock the camera onto a point.
const center = Cesium.Cartesian3.fromRadians(
  2.4213211833389243,
  0.6171926869414084,
  3626.0426275055174
);

const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

viewer.scene.camera.lookAtTransform(
  transform,
  new Cesium.HeadingPitchRange(0, -Math.PI / 8, 2900)
);

// Orbit around this point.
viewer.clock.onTick.addEventListener(function (clock) {
  viewer.scene.camera.rotateRight(0.005);
});

カメラの操作について詳しくは、カメラを操作するをご覧ください。

Cesium for Unreal を使用する

3D Tiles API で Cesium for Unreal プラグインを使用する手順は次のとおりです。

  1. Cesium for Unreal プラグインをインストールします。

  2. 新しい Unreal プロジェクトを作成します。

  3. Google Photorealistic 3D Tiles API に接続します。

    1. メニューから [Cesium] > [Cesium] を選択して Cesium ウィンドウを開きます。

    2. [空の 3D タイル タイルセット] を選択します。

    3. [ワールド アウトライナー] で、この Cesium3DTileset を選択して [詳細] パネルを開きます。

    4. [ソース] を [Cesium Ion から] から [URL から] に変更します。

    5. URL を Google 3D Tiles の URL に設定します。

    https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
    1. [画面にクレジットを表示] を有効にして、クレジットを適切に表示します。

  4. これにより、ワールドが読み込まれます。任意の LatLng に移動するには、[Outliner] パネルで [CesiumGeoreference] アイテムを選択し、[Details] パネルで [Origin Latitude/Longitude/Height] を編集します。

Cesium for Unity を使用する

Cesium for Unity でフォトリアルなタイルを利用する手順は次のとおりです。

  1. 新しい Unity プロジェクトを作成します。

  2. [Package Manager] セクション（[Editor] > [Project Settings]）で、新しいスコープ付きレジストリを追加します。

    • 名前: Cesium

    • URL: https://unity.pkg.cesium.com

    • スコープ: com.cesium.unity

  3. Cesium for Unity パッケージをインストールします。

  4. Google Photorealistic 3D Tiles API に接続します。

    1. メニューから [Cesium] > [Cesium] を選択して、Cesium ウィンドウを開きます。

    2. [空の 3D タイル タイルシット] をクリックします。

    3. 左側のパネルの [ソース] の [タイルシートのソース] オプションで、[Cesium Ion から] ではなく [URL から] を選択します。

    4. URL を Google 3D Tiles の URL に設定します。

    https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY
    1. [画面にクレジットを表示] を有効にして、クレジットを適切に表示します。

  5. これにより、ワールドが読み込まれます。任意の LatLng に移動するには、[Scene Hierarchy] で [CesiumGeoreference] アイテムを選択し、[Inspector] でオリジンの緯度 / 経度 / 高さを編集します。

deck.gl を使用する

deck.gl は、WebGL をベースとしたオープンソースの JavaScript フレームワークで、高パフォーマンスの大規模なデータ可視化を実現します。

アトリビューション

タイル gltf asset から copyright フィールドを抽出し、レンダリングされたビューに表示して、データの帰属を正しく表示します。詳細については、データのアトリビューションを表示するをご覧ください。

deck.gl レンダラのサンプル

簡単な例

次の例では、deck.gl レンダラを初期化してから、3D で場所を読み込みます。コードで、YOUR_API_KEY を実際の API キーに置き換えてください。

<!DOCTYPE html>
<html>
 <head>
   <title>deck.gl Photorealistic 3D Tiles example</title>
   <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
   <style>
     body { margin: 0; padding: 0;}
     #map { position: absolute; top: 0;bottom: 0;width: 100%;}
     #credits { position: absolute; bottom: 0; right: 0; padding: 2px; font-size: 15px; color: white;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
   </style>
 </head>

 <body>
   <div id="map"></div>
   <div id="credits"></div>
   <script>
     const GOOGLE_API_KEY = YOUR_API_KEY;
     const TILESET_URL = `https://tile.googleapis.com/v1/3dtiles/root.json`;
     const creditsElement = document.getElementById('credits');
     new deck.DeckGL({
       container: 'map',
       initialViewState: {
         latitude: 50.0890,
         longitude: 14.4196,
         zoom: 16,
         bearing: 90,
         pitch: 60,
         height: 200
       },
       controller: {minZoom: 8},
       layers: [
         new deck.Tile3DLayer({
           id: 'google-3d-tiles',
           data: TILESET_URL,
           loadOptions: {
            fetch: {
              headers: {
                'X-GOOG-API-KEY': GOOGLE_API_KEY
              }
            }
          },
           onTilesetLoad: tileset3d => {
             tileset3d.options.onTraversalComplete = selectedTiles => {
               const credits = new Set();
               selectedTiles.forEach(tile => {
                 const {copyright} = tile.content.gltf.asset;
                 copyright.split(';').forEach(credits.add, credits);
                 creditsElement.innerHTML = [...credits].join('; ');
               });
               return selectedTiles;
             }
           }
         })
       ]
     });
   </script>
 </body>
</html>

Google Photorealistic 3D Tiles 上の 2D レイヤを可視化する

deck.gl の TerrainExtension は、2D データを 3D サーフェスにレンダリングします。たとえば、建物の敷地の GeoJSON を Photorealistic 3D Tiles ジオメトリの上にドレープできます。

次の例では、Photorealistic 3D Tiles のサーフェスに適合したポリゴンを使用して、建物のレイヤが可視化されます。

<!DOCTYPE html>
<html>
 <head>
   <title>Google 3D tiles example</title>
   <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
   <style>
     body { margin: 0; padding: 0;}
     #map { position: absolute; top: 0;bottom: 0;width: 100%;}
     #credits { position: absolute; bottom: 0; right: 0; padding: 2px; font-size: 15px; color: white;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
   </style>
 </head>

 <body>
   <div id="map"></div>
   <div id="credits"></div>
   <script>
     const GOOGLE_API_KEY = YOUR_API_KEY;
     const TILESET_URL = `https://tile.googleapis.com/v1/3dtiles/root.json`;
     const BUILDINGS_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson'
     const creditsElement = document.getElementById('credits');
     const deckgl = new deck.DeckGL({
       container: 'map',
       initialViewState: {
         latitude: 50.0890,
         longitude: 14.4196,
         zoom: 16,
         bearing: 90,
         pitch: 60,
         height: 200
       },
       controller: true,
       layers: [
         new deck.Tile3DLayer({
           id: 'google-3d-tiles',
           data: TILESET_URL,
           loadOptions: {
            fetch: {
              headers: {
                'X-GOOG-API-KEY': GOOGLE_API_KEY
              }
            }
          },
          onTilesetLoad: tileset3d => {
             tileset3d.options.onTraversalComplete = selectedTiles => {
               const credits = new Set();
               selectedTiles.forEach(tile => {
                 const {copyright} = tile.content.gltf.asset;
                 copyright.split(';').forEach(credits.add, credits);
                 creditsElement.innerHTML = [...credits].join('; ');
               });
               return selectedTiles;
             }
           },
           operation: 'terrain+draw'
         }),
         new deck.GeoJsonLayer({
           id: 'buildings',
           // This dataset is created by CARTO, using other Open Datasets available. More info at: https://3dtiles.carto.com/#about.
           data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson',
           stroked: false,
           filled: true,
           getFillColor: ({properties}) => {
             const {tpp} = properties;
             // quantiles break
             if (tpp < 0.6249)
               return [254, 246, 181]
             else if (tpp < 0.6780)
               return [255, 194, 133]
             else if (tpp < 0.8594)
               return [250, 138, 118]
             return [225, 83, 131]
           },
           opacity: 0.2,
           extensions: [new deck._TerrainExtension()]
         })
       ]
     });
   </script>
 </body>
</html>