CzmlFirstPersonPlayer

• CZMLファイルを一人称視点で再生します。
• 道案内用途など、主に歩行者からの視点での表示を目的にしています。

道にそって移動するCZMLファイルの作成方法

ブラウザだけで作成可能:

• OpenStreetMapデータから道路ネットワークデータを作成して (Appendix B)
• その道路ネットワークデータを使って、地図上で指定した出発地と目的地間の経路を見つけて、道路上を移動するCZMLを作成 (Appendix A)

Example

PLATEAUの3Dタイル

CZML.First.Person.Player.mp4

(PLATEAUのテクスチャ付きの建築物の3Dタイルは、 建築物モデル（千代田区）を 手元にダウンロードした上で、http://localhost:8000から取得する形で表示しています。)

テクスチャ無しの建築物モデルでの表示例: https://deton.github.io/CzmlFirstPersonPlayer/?czmlurl=https://deton.github.io/CzmlFirstPersonPlayer/sample.czml

Google Photorealistic 3D Tiles

https://deton.github.io/CzmlFirstPersonPlayer/?tileset=google3dtile&czmlurl=https://deton.github.io/CzmlFirstPersonPlayer/sample.czml

ZENRIN City Asset Series

(ZENRIN City Asset SeriesのJapanese Otaku CityのFBXを3D Tilesに変換して使用。Appendix C)

URL Parameters

• czmlurl: 読み込むCZMLファイルのURL。
• viewrect: 初期表示領域(west,south,east,north)
  • (default): 139.7688,35.6970,139.7761,35.703
• tileset: 3D tileset URL
  • none: 読み込まない。
  • google3dtile: Google Photorealistic 3D tileset
  • それ以外の場合: 3D tileset URL。複数回指定した場合は全て読み込む。
  • (default): https://assets.cms.plateau.reearth.io/assets/aa/ecf312-95c2-4e24-8351-642f27e447b6/13100_tokyo23-ku_2022_3dtiles_1_1_op_bldg_13101_chiyoda-ku_lod1/tileset.json
  • (備考): この他、CZMLファイル内で指定したtilesetも読み込まれます。
• height: terrainからの視点の高さ。CZML内のmodel.heightReferenceがCLAMPで始まる場合、terrainに対してこの固定値を足した値を視点の高さとして使う。
  • (default): 2
  • (備考): (JavaScript ConsoleでHEIGHT_OFFSETを変更することで調整可能)
• minimap: minimap zoom level. 負の値の場合はminimapを非表示
  • (default): 17

URL Parameter Example

• PLATEAU配信サービス: https://deton.github.io/CzmlFirstPersonPlayer/?tileset=https://assets.cms.plateau.reearth.io/assets/e3/b36cac-6c5e-430c-8366-f43e8efcf146/13100_tokyo23-ku_2022_3dtiles_1_1_op_bldg_13113_shibuya-ku_lod1/tileset.json&czmlurl=https://gist.githubusercontent.com/deton/c030eae2af830364580727a291913f8e/raw/4b580611bf0ca785830ba483d32085a2dbe8b0aa/path-shibuya.czml
• Google Photorealistic 3D tileset: https://deton.github.io/CzmlFirstPersonPlayer/?tileset=google3dtile&czmlurl=https://gist.githubusercontent.com/deton/c030eae2af830364580727a291913f8e/raw/4b580611bf0ca785830ba483d32085a2dbe8b0aa/path-shibuya.czml

建物の3Dタイル

• PLATEAU配信サービス
  • (表示に時間がかかったり、テクスチャが表示されなかったりする場合は、3D都市モデル（Project PLATEAU）ポータルサイトから3D Tilesのzipをダウンロード・展開して、localhostのhttp serverから取得する形にすると良いかもしれません。)
  • (PLATEAU VIEWで見ると、歩道橋などは橋梁モデル(LOD2)に含まれている場合があるようです。)

CZML内で表示に影響する要素

• 位置は、czml[1].positionのcartographicDegreesのみ対応(cartesian等には未対応)。
• czml[1].model.heightReference
  • CLAMPで始まる場合: terrainに対して、上記HEIGHT_OFFSET固定値を足した値を視点の高さとして使う。
  • RELATIVEで始まる場合: terrainに対してCZML内の高さを足した値を視点の高さとして使う。
  • NONEまたは指定無しの場合: CZML内の高さを絶対値として使う。(ellipsoidからの高さ)

備考

• 再生開始後はドラッグ等によるCamera操作が効かなくなります。
  • 再生を中止して、Camera操作を有効にするには、JavaScript ConsoleでstopPlayAndEnableCameraControl();

Appendix A: 道路上を移動するCZMLを作成

• Load the network.geojson and export CZML using geojson-path-finder
  • 使用する道路ネットワークデータは、Appendix Bの方法で作成。
    • (または、オープンデータの歩行空間ネットワークデータ(GeoJSON)が使えるかもしれません。)
  • Example: https://deton.github.io/geojson-path-finder/?networkjson=https://gist.githubusercontent.com/deton/c030eae2af830364580727a291913f8e/raw/f1ab3e649e2bde20c6be67ec5be2d3c0f467e040/network-shibuya.geojson&waypointLatLng=35.6590,139.7011&waypointLatLng=35.65956,139.6998&waypointLatLng=35.6601,139.6956
  • 備考: 地表に表示される移動経路の線を、polylineとしてCZMLに入れて生成しています。
    • 非表示にしたい場合は、CZMLからpolylineを削除するか、"show": falseを追加してください。
    • 移動経路のpolylineは"clampToGround": trueで表示しているので、橋の下を通る場合など、橋の上に線が表示されます。地表の高さで線を表示するデータを作る場合は、CzmlFirstPersonPlayerのJavaScript Consoleでconsole.log(updatePathHeightFromTerrain(czml[2].polyline.positions.cartographicDegrees));

Appendix B: 道路ネットワークデータをOpenStreetMapデータから作成

• Generate network.geojson
  • Example: https://deton.github.io/GraphFromOSM/?bbox=139.69543755054477,35.65887407735725,139.7011882066727,35.66062621586084

Appendix C: ZENRIN City Asset SeriesのJapanese Otaku CityのFBXを3D Tilesに変換して使用

• FBXをFBX2glTFでglbに変換。(Textures/等のファイル群をfbxファイルと同じ場所に集めて実行)
• Cesium ionにUploadして緯度経度高さとscaleを決定。
• ローカルでtileset.jsonを作る場合は、 3d-tiles-toolsで、 npx 3d-tiles-tools createTilesetJson -i PQ_Remake_AKIHABARA.glb -o tileset.json --cartographicPositionDegrees 139.77024 35.69602 38
  • 表示させてみると小さいのでscaleを100にするため、(3d-tiles-toolsのソースを参考に)以下で調べたtransform値で、tileset.jsonのroot.transformを更新。

  var transform = bldg3dtiles.get(0).root.transform;
  var scale = 100;
  var modelMatrix = Cesium.Matrix4.multiplyByUniformScale(transform, scale, new Cesium.Matrix4());
  console.log(Cesium.Matrix4.toArray(modelMatrix));

  • creditは後から追加。 viewer.creditDisplay.addStaticCredit(new Cesium.Credit('3D city model by ©ZENRIN', true));