この夏、サム・ラーナー氏が作成した「River Runnerマップ」に驚かされたので、サム氏にどのようにしてこの没入型3Dマップを構築したかを詳しく教えてもらいました。

以下、私＝サム氏

数センチ離れて落ちた2つの雨粒が、何千マイルも離れてしまうことがあるのを知っていますか？この現象に興味を持った私は、水文学や流域のデータを利用して、2つの雨粒の分かれ道を視覚化しました。

‍

雨粒の経路

USGS（アメリカ地質調査所）の水データチームの素晴らしい研究のおかげで、米国内のあらゆる小川、河川の流れのパターンを追跡することが可能になりました。これをきっかけに、プロジェクトの新たなビジョンが生まれました。自分の家の裏庭から海までの水の流れをたどることができたらどうだろう？そして、水が流れるすべての流域やコミュニティを視覚化することで、私たちの行動が下流の人々に与える影響を明らかにすることができるのではないか？

USGSのNLDI APIのデータは、プロジェクトの中核となる流路の経路データを提供し、NHDPlusデータの「Value-Added Attributes」は、川の流れを構成する流路の本川の名前を提供しています。しかし、これらのデータにアクセスし、簡単にナビゲートできるようなインターフェースをデザインすることは別の課題であり、そこでMapboxの出番となったのです。

‍

3Dジャーニー

地図上にプロットされた流線を見るだけではなく、雨粒が道中で触れる場所や地形をよりよく理解するために、ユーザーがその下流の経路を見ることができるようにしたいと思いました。以前のプロジェクトでMapboxのヒルシェーディング（陰影起伏）機能をいくつか使ったことがあったので、地形の感覚を得ることは簡単だと思っていました。しかし、このプロジェクトを始めるまで知らなかったのは、Mapboxの3D機能とFreeCamera APIがどれほどパワフルで簡単に使えるようになったかということです。

たった20行のコードで、地平線上のスカイレイヤーを含む3Dタイルレイヤーを地図に追加することができました。

export const addTopoLayer = ({ map }) => {
   map.addSource("mapbox-dem", {
       type: "raster-dem",
       url: "mapbox://mapbox.mapbox-terrain-dem-v1",
       tileSize: 512,
       maxzoom: 14,
   });
 
   // add the DEM source as a terrain layer with exaggerated height
   map.setTerrain({ source: "mapbox-dem", exaggeration: 1.7 });
 
   map.addLayer({
       id: "sky",
       type: "sky",
       paint: {
           "sky-type": "atmosphere",
           "sky-atmosphere-sun": [0.0, 0.0],
           "sky-atmosphere-sun-intensity": 15,
       },
   });
};

これで、ビジュアライゼーションのベースができあがりました。

Mapbox FreeCamera APIでは、Mapboxカメラの位置を細かく制御することができます。これは、計算されたUSGSデータから得られた流路をトレースするために必要でした。私がすべきことは、USGSデータを返し、それを座標の配列に処理し、そのパスに沿ってカメラを点から点へ、目的地に着くまで移動させるだけでした。簡単でしょう？しかし実はそうでもありません。プロジェクトの初期段階では、信じられないほどのカメラの揺れがありました（乗り物酔いしやすい人は、上記リンクをクリックしない方がいいかもしれません）。このツールを使えるようにするためには、いくつかの重要な課題がありました

‍

‍補間とスムージング

FreeCamera APIは、3D空間での「カメラ」の位置や向きを非常にシンプルにしてくれます。流路の座標の配列があれば、単純に最初の座標にカメラを置き、下流の座標にカメラを向け、turfjsのalongメソッドを使ってそれらを前方に進めることができると考えました。しかし残念なことに、川のカーブのため、方向音痴の旅になってしまうのです。

そこで、私はカメラが辿るべき経路を人工的に滑らかにしました。座標群の位置を平均化することで、小さな曲がり角の影響を少なくしました。カメラはこの経路をたどるように設定し、元の平滑化されていない経路は、閲覧者が追跡できるように青い線としてプロットしました。

const pathSmoother = (coordinateSet, smoothingCoefficient = 1) => {
   const setLength = coordinateSet.length;
   const smoothedCoordinatePath = coordinateSet.map(
       (coordinate, index) => {
           const coordinateGroup = coordinateSet.slice(
               Math.max(0, index - smoothingCoefficient),
               index + 1 + smoothingCoefficient
           );
           const lng =
               coordinateGroup
                   .map((d) => d[0])
                   .reduce((a, b) => a + b, 0) / coordinateGroup.length;
           const lat =
               coordinateGroup
                   .map((d) => d[1])
                   .reduce((a, b) => a + b, 0) / coordinateGroup.length;
 
           return [lng, lat];
       }
   );
 
   return smoothedCoordinatePath;
};

‍

スピード、ピッチ、ズーム

川沿いの道を走るスピードは、バランスが難しいと思っていました。ミシシッピ川の下流でツールが動くのを20分も見ていたい人はいないでしょうが、あまりにも早く動くと吐き気がします。Mapboxカメラが流路の座標を通過する速度をコントロールするのは簡単でしたが、本当の速度と、カメラの高度やピッチの影響を受ける知覚的な速度の違いはすぐに明らかになりました。（このあと説明します。）

この現象を理解するためには、時速500マイルで飛行している飛行機の中を想像してみてください。何千フィートもの高さから地平線を眺めていると、自分がどれだけ速く移動しているかほとんど気づかないかもしれません。地上から真下を見ていると、目がくらむような速さで移動しているように感じるでしょう。地上からの距離と見下ろす角度の両方が、移動の速さの感覚に影響を与えるのです。速度、カメラの仰角、カメラのピッチのバランスを取るのに苦労したのは、この点です。

快適に視聴できるカメラピッチ（約70度）と、適度な長さで走れるベーススピード（約4km/秒）を見つけるまで、試行錯誤することにしました。そして、カメラの高さを調整して、知覚的な速度がちょうど良くなるようにしました。高校の三角法の教科書を読み直して、カメラの仰角とピッチを利用して、目標地点からカメラを正しく戻すことができました。

このプロジェクトの一貫したフィードバックは、川下りの際にユーザーがカメラをどれだけコントロールできるかということでした。私は再生コントロールを提供することに満足していましたが、速度、高度、ピッチの相互作用が、ユーザーに悲惨な体験（乗り物酔い）の機会を与えるため、これらの要素に対するユーザーのコントロールに何らかの制約を設けた方が良いと考えました。最終的にはズームコントロールのようなものを提供しましたが、知覚的な速度を適度に保つためにカメラの速度に固定されています。また、パススムーサーと連動しており、高速になるほどスムーズでより近似したパスを生成して、吐き気を防ぐようにしています。

‍

高度

多くのツールと同様に、カメラの位置をコントロールできるようになった代償として、今まで意識していなかった効果の一部が失われてしまっていました。カメラの高度を手動で設定する機能は、私が作りたかった機能には欠かせないものでしたが、流路が山から海面に向かって下っていくと、カメラの高度は変わらないのに地面が遠くなってしまうという、意図しない効果がありました。

カメラと地面の距離を一定に保つために、queryTerrainElevationメソッドを使ってルート上の標高をサンプリングしました。その標高の配列をanimate関数に渡すと、サンプリングした標高を補間して、カメラの標高を地面から一定の距離に保つことができます。

‍‍

流域に命を吹き込む

このプロジェクトを開始して以来、多くの人から、流路をこのように視覚化して見たことで、流域の概念や川や流れの相互関係がよく理解できたという声を聞きました。このような理解によって、より水域の保護を強く求め、水域に何が捨てられ、何が持ち出されているのかをさらに意識するようになって欲しいと願っています。私たちは、他の多くの人々の上流に住んでいます。

このプロジェクトは、Mapbox、USGSの水チーム、GeoconnexやNLDI APIを開発したチームのおかげで成り立っています。特に、USGSのデイブ・ブロジェット氏には感謝しています。これらの人々は、River Runnerで使用されているデータ製品をグローバルに拡張するために、現在多くの作業を行っています。

‍

イノベーションを共有してくれてありがとうございました。River Runnerやその他のプロジェクトについて、サム氏と連絡を取りたい方は、Mapboxまでご連絡ください。

科学コミュニケーション、環境保護、その他のポジティブな影響のためのツールを作っている方は、いつでもご連絡ください。今すぐワンクリックでMapbox 3D地形を使い始めることができます。