ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 1 Constructing a Digital City on a Web-3D Platform: Simultaneous and consistent generation of metadata and tile data from a multi-source raw dataset Toshikazu SETO (CSIS, University of Tokyo) Yoshihide Sekimoto (IIS, University of Tokyo) Kosuke ASAHI（AIGID) Takahiro ENDO (AIGID)

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 2 Background: Smart City, Platform Urbanism… • the relationship between “platforms” and urban space and society is impossible to ignore (Barns, 2020). • “into the pockets of urbanites (urban life)” via networked devices and data • How people will participate in smart cities and platforms

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 4 Related Studies: Urban Future Planning around Digital Twin 4 Dembski, F.; Wössner, U.; Letzgus, M.; Ruddat, M.; Yamu, C. Urban Digital Twins for Smart Cities and Citizens: The Case Study of Herrenberg, Germany. Sustainability 2020, 12, 2307. Kilsedar, C.E.; Brovelli, M.A. Multidimensional Visualization and Processing of Big Open Urban Geospatial Data on the Web. ISPRS Int. J. Geo-Inf. 2020, 9, 434.

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 5 Purposes & Objectives: Constructing a Digital City on a Web-3D Platform • Increasing access to data for the citizens who are not specialized in GIS • Everything manipulation is web browser based. • Display it as fast as possible and use it in other areas • Developed on open source software basis • In this study, we propose a method for seamlessly analyzing the raw data of urban models on the web. • This platform can be applied to urban spaces of varying scales by focusing on techniques for visualizing the administrative data generated in a city.

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 6 In Japanese local government open data case… Open Data

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 7 Study Area: Susono City in Shizuoka Pref. https://global.toyota/jp/newsroom/corporate/31170943.html Mt. Fuji • Area total: 138.12 km2 • Population: Total 50,916 – aged 65 and over: 26.8% • Toyota has announced that, starting two years from now, it will develop “Woven City” into a former factory site. • Mayor announced the concept of the “Susono Digital Creative City” in March 2020.

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 8 The Use Cases for Developing Digital Cities • Think deeply about local issues using data in Digital Susono Research Group since 2019 • The topics are public facilities, public transportation, urban planning/optimization, industry & tourism, and road management. Issues Target Task Public facilities A state of mind that citizens can use with confidence. The public facilities management debate is not deep enough. Public transport ation With no one bothering to use bus routes to get around. Bus ridership is low, and at this rate, the bus route cannot be maintained. Urban planning Improving the station area's foothold and the state of interaction between the various generations. Directing and consolidating urban functions and residential areas, which are daily life service facilities. Industry and tourism Regardless of size, the industry as a whole is capable of leading the region. No consideration has been given to addressing the impact of Waven City once it is built. Road managem ent Accidents among road facility users are now preventable. Difficulty in ascertaining the appropriate timing for the repair and replacement of road facilities.

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 9 Launched of Digital City Platform for Local City Susono City Area︓ 138.4 km² Pop.︓ 51,000 Nanto City Area︓ 668.6 km² Pop.︓ 48,000 https://www.digitalsmartcity.jp/susono-city/ https://www.digitalsmartcity.jp/nanto-city/

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 10 The Overview of Architectures for Constructing Digital City Platform WebGL JavaScript Browser Mapbox GL JS Deck.GL layer (Icon) layer (3DTiles) layer (GeoJSON) layer Basemap (tilesets) vue.js three.js luma.gl UI loaders.gl data layer (Trips)

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 11 Mapbox GL JS (3-Clause BSD license): Mapbox C++ based JavaScript Library

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 12 Deck.gl (MIT License): Uber Technologies WebGL-powered framework for visual exploratory data analysis of large datasets http://deck.gl/#/examples/overview

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 13 List of Dataset for constructing Digital Susono Data type Dataset File format Files (Unit) Total size Background data Aerial photo GeoTIFF 257 13.4 GB Building shape ESRI Shape 1 1.98 GB Point cloud data Point cloud data (in Shizuoka prefecture) LAS 5 12.01 GB Feature data Facility CSV 7 50 KB Road network ESRI Shape 2 1.1 MB Road image ESRI Shape 2 100 KB Railway GeoJSON 2 810 KB Urban planning ESRI Shape 8 635 KB Administrative boundary ESRI Shape 1 470 KB Disaster mitigation zoning ESRI Shape 21 2.1 MB Flowing data Bus route and bus stop GTFS 14 200 KB Business transaction CSV 3 560 KB People flow CSV 2 149.8 MB

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 14 Background data: building shape and aerial photos Building shape file (.shp) from Zenrin transform binary vector tile Aerial photo file (.tiff) from Susono transform raster tile

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 15 Flowing data: people flow, GTFS bus stop & route and business transaction people flow data Community bus: bus-stop and route

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 16 3D Point cloud data (in Shizuoka prefecture) name X, Y, Z Points Original File size (MB) 3D tiles file size (MB) Place A (28-D0201-01) 22,854,836 594.2 344.1 Place B (29-K2452-01) 2,141,686 55.7 34.7 Place C (28-K2450-01) 2,301,317 59.8 32.3 Place D (Kakegawa Castle) 192,366,079 6,540.0 64.3 Place E (Nirayama Reverberatory Furnaces) 182,440,910 4,740.0 82.9 Shizuoka Point Cloud DB (PCDB) All data has licensed under CC BY 4.0

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 17 Nirayama Reverberatory Furnaces (LAS) 4.7GB (transform 3D tiles 82.9MB)

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 18 Data preparation and Transformation Input 3D Point cloud data Input Flowing data Input POI data Input Feature data Input Building data Aerial photo Convert Tileset data Zoom 11-18 Convert JSON data Zoom 11-18 Convert GeoJSON data Zoom 12-18 Zoom 14-18 Zoom level of Map layers output output output Icon GeoJSON Trips Tileset Tippecanoe gdal2tiles pdal + py3dtiles Optimizing the displayed zoom level

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 19 0 0.5 1 1.5 2 2.5 3 3.5 4 Facility R oad network R oad im age R ailway U rban plannnig Adm inistrative boundary D isaster m itigation zoning G TFS: bus route and bus stop G TFS: m oving sam ple Business transaction Volume (MB) Before After The results of data transfer/size-reduced GeoJSON or JSON format

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 20 0 10 20 30 40 50 60 0 2000 4000 6000 8000 10000 12000 14000 Aerial photo Building shape Point cloud data Minutes Volume (MB) Before After Transform The results of data transfer/size-reduced vector/raster tiles or 3dtiles format Hardware environment used for the dataset transfer experiments as follows: CPU Core: i7-9700k @3.60 GHz, Memory: 32 GB OS: Windows 10 Subsystem for Linux (Ubuntu 18.04)

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 21 WebGL JavaScript Browser Mapbox GL JS deck.gl layer (Icon) layer (3DTiles) layer (GeoJSON) layer Basemap (tilesets) vue.js three.js luma.gl UI loaders.gl data layer (Trips) Ortho|Light|Dark|Simple Basemap Digital Susono Aerial photos Buildings Urban Planning Facilities Educational AED Tourism Railway Lines Station Bus Residential Area Iwanami Zone Susono Zone 2016 Version 2019 Version Zenrin Data GSI Maps Powered by AIGID

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 22 WebGL JavaScript Browser Mapbox GL JS deck.gl layer (Icon) layer (3DTiles) layer (GeoJSON) layer Basemap (tilesets) vue.js three.js luma.gl UI loaders.gl data layer (Trips) Dynamic data and point clouds are loaded by adding layers. Display of the time counter

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 23 Increasing the zoom level also displays data with a large number of points Multi-layered display of hazard maps (disaster prevention data) Road management: Bridge and People Flow Data Community bus GTFS Data

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 24 Demo: hazard map + people flow data (sample)

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 25 Optimizing the display speed on the browser • Firefox v.67.04 • Front page（Zoom16): memory usage: 180Mb CPU usage:10% • Adding dynamic data – People flow: 20-30Mb – Point cloud data: 100Mb – Memory usage: +60-120Mb – CPU usage :20-30% – GPU usage : 30%

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 26 Conclusions 1. Developed an efficient way to convert and integrate 13 types of data. 2. Considered the architectural design for unified visualization 3. Developed the necessary functions, after which we reduced the data capacity, memory, and CPU usage on the browser. 1. we found that the types and volumes of data related to digital cities have various formats. However, there are three significant patterns (GeoJSON, JSON, and Tileset) that allow for easy integration of data. 2. we determined that it is possible to combine Mapbox GL JS and Deck.GL to create multiple dynamic visualizations with patterns. 3. we mainly used the first display and a web browser. The performance was measured for point cloud and human flow animations. The memory usage and caches did not increase, and it was found that the load was constant.

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 27 Future works • Optimized display of point cloud data – point clouds have a different angle of view and scale that are suitable for display on a 3D map. Because the data volumes are different, they should be defined using bounding boxes. • To practical use of this platform in real disaster prevention, urban and land optimization “planning” – Almost visualization using the data accumulated in the past. Towards data-driven participatory consensus building. • Enriching the digital twin environment – the fusion of BIM data, including the attributes and structures within the building, and the challenge of large- scale flow data, such as sensing data, necessitates.

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 28 Thank you! tosseto@csis.u-tokyo.ac.jp http://researchmap.jp/tosseto https://speakerdeck.com/tosseto

ARICʼ20 Seto, et al. (CSIS, the University of Tokyo) 33 Demonstration 1: zoning + bus operation