{"id":142060000316,"date":"2021-07-07T08:00:10","date_gmt":"2021-07-07T06:00:10","guid":{"rendered":"https:\/\/sketchfab.com\/blogs\/community\/?p=142060000316"},"modified":"2021-07-08T15:53:52","modified_gmt":"2021-07-08T13:53:52","slug":"api-spotlight-tokyo-time-machine","status":"publish","type":"post","link":"https:\/\/sketchfab.com\/blogs\/community\/api-spotlight-tokyo-time-machine\/","title":{"rendered":"API Spotlight: Tokyo Time Machine"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>One of the sad things about Tokyo is that the city is not precious about its old buildings. Tokyo is in a constant state of flux and it seems like you are never more than a few meters away from a building site. Old and interesting buildings are constantly being torn down. Izakayas, factories, quirky shops, and large family homes being replaced with apartments, malls, and office buildings.<\/p>\n<p>Perhaps it&#8217;s because I used to live in the historic city of York, or maybe I\u2019m just getting old, but this loss of history makes me a little sad.<\/p>\n<p>I\u2019m Matt Hudson (<a href=\"https:\/\/twitter.com\/mechpil0t\" target=\"_blank\" rel=\"nofollow\">@mechpilot<\/a>) and I am an Augmented Reality (AR) engineer working in the Tokyo office of <a href=\"https:\/\/www.thedesignium.com\/\" target=\"_blank\" rel=\"nofollow\">The Designium<\/a>. My main role in the company is creating AR prototypes and I often use models from Sketchfab as placeholder assets in my experiments.<\/p>\n<p>One day while browsing Sketchfab, I found the model of an old coffee shop in Akihabara. The building had amazingly survived World War 2 but had not survived the march of progress.<\/p>\n<div class=\"sketchfab-embed-wrapper\">    <iframe title=\"\u6771\u4eac \u795e\u7530\u5ca9\u672c\u753a \u5317\u539f\u30d3\u30eb \/ Kitahara Building\" class=\"\" width=\"690\" height=\"388\" src=\"https:\/\/sketchfab.com\/models\/7acb353f3fe749c3be5aebd1fde123c1\/embed\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\" xr-spatial-tracking=\"true\" execution-while-out-of-viewport=\"true\" execution-while-not-rendered=\"true\" web-share=\"true\"><\/iframe><\/div>\n<h2>The first prototypes<\/h2>\n<p>This discovery suddenly gave me an urge to see the building in its original location. I created a prototype that used Google Cloud Anchors to relocate the photogrammetry scan next to the river in Akihabara.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/twitter.com\/hashtag\/AR?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#AR<\/a> ghosts of old tokyo ?<br \/>restoring an old coffee shop using <a href=\"https:\/\/twitter.com\/hashtag\/GoogleCloudAnchors?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#GoogleCloudAnchors<\/a><a href=\"https:\/\/twitter.com\/hashtag\/madewithunity?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#madewithunity<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/designium?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#designium<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/AugmentedReality?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#AugmentedReality<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/Photogrammetry?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#Photogrammetry<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/GoogleDevelopers?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#GoogleDevelopers<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/GoogleCloud?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#GoogleCloud<\/a> <a href=\"https:\/\/t.co\/8awZ2lcIC0\" target=\"_blank\" rel=\"nofollow\">pic.twitter.com\/8awZ2lcIC0<\/a><\/p>\n<p>&mdash; mechpil0t (@mechpil0t) <a href=\"https:\/\/twitter.com\/mechpil0t\/status\/1325611089841725440?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">November 9, 2020<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>The prototype, while very simple and a little janky, worked well and made me want to try more. To achieve this, I contacted the very talented creator of the scan who seems to share my passion for old buildings: <a href=\"https:\/\/twitter.com\/tasklong\" target=\"_blank\" rel=\"nofollow\">masanaga<\/a>.<\/p>\n<p>    <iframe title=\"tasklong\" class=\"\" width=\"690\" height=\"388\" src=\"https:\/\/sketchfab.com\/playlists\/embed?user=c40d928160854dc0b5fd3bf9b87d8aaf\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\" xr-spatial-tracking=\"true\" execution-while-out-of-viewport=\"true\" execution-while-not-rendered=\"true\" web-share=\"true\"><\/iframe><\/p>\n<p style=\"font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;\">    by <a href=\"https:\/\/sketchfab.com\/tasklong?utm_campaign=c40d928160854dc0b5fd3bf9b87d8aaf&#038;utm_medium=embed&#038;utm_source=oembed\" target=\"_blank\" style=\"font-weight: bold; color: #1CAAD9;\">masanaga<\/a>    on <a href=\"https:\/\/sketchfab.com?utm_campaign=c40d928160854dc0b5fd3bf9b87d8aaf&#038;utm_medium=embed&#038;utm_source=oembed\" target=\"_blank\" style=\"font-weight: bold; color: #1CAAD9;\">Sketchfab<\/a><\/p>\n<p>With his permission, I made a number of other AR restoration prototypes using his photogrammetry scans. I used Unity and the visual positioning solution \u2018<a href=\"https:\/\/immersal.com\/\" target=\"_blank\" rel=\"nofollow\">Immersal\u2019 <\/a>to create various new prototypes for both smartphone and <a href=\"https:\/\/www.nreal.ai\/\" target=\"_blank\" rel=\"nofollow\">Nreal <\/a>devices. I called them \u201cTokyo Time Machine\u201d.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\">\n<p lang=\"ja\" dir=\"ltr\">\u3055\u304f\u3089\u3093\u307c (Cherry) near Ikegami Station, restored with the <a href=\"https:\/\/twitter.com\/hashtag\/Tokyo?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#Tokyo<\/a> Time Machine using <a href=\"https:\/\/twitter.com\/hashtag\/AugmentedReality?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#AugmentedReality<\/a> and amazing <a href=\"https:\/\/twitter.com\/hashtag\/Photogrammetry?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#Photogrammetry<\/a> by <a href=\"https:\/\/twitter.com\/tasklong?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">@tasklong<\/a><a href=\"https:\/\/twitter.com\/hashtag\/madewithunity?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#madewithunity<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/designium?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#designium<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/AR?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#AR<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/history?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#history<\/a> <a href=\"https:\/\/t.co\/ge0wId1zBd\" target=\"_blank\" rel=\"nofollow\">pic.twitter.com\/ge0wId1zBd<\/a><\/p>\n<p>&mdash; mechpil0t (@mechpil0t) <a href=\"https:\/\/twitter.com\/mechpil0t\/status\/1386919607131279362?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">April 27, 2021<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<h2>Sketchfab API<\/h2>\n<p>While these prototypes all worked well, they all required that the model be downloaded and imported into Unity before building the application. This limited the scalability of the concept and so I decided to implement a way to download models on-demand using the Sketchfab API.<\/p>\n<p>To begin with, I made sure I could successfully download and import Sketchfab models into Unity, at runtime, on mobile devices. Here, I download and import one of my own photogrammetry scans to be viewed on Nreal.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">from browser to <a href=\"https:\/\/twitter.com\/hashtag\/AR?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#AR<\/a> ?<\/p>\n<p>a runtime <a href=\"https:\/\/twitter.com\/hashtag\/Sketchfab?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#Sketchfab<\/a> downloader\/importer for <a href=\"https:\/\/twitter.com\/hashtag\/unity3d?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#unity3d<\/a> running on <a href=\"https:\/\/twitter.com\/hashtag\/nreal?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#nreal<\/a> ?\ufe0f <a href=\"https:\/\/twitter.com\/hashtag\/AugmentedReality?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#AugmentedReality<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/designium?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#designium<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/Photogrammetry?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#Photogrammetry<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/madewithunity?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#madewithunity<\/a> <a href=\"https:\/\/t.co\/mxMM97SxtK\" target=\"_blank\" rel=\"nofollow\">pic.twitter.com\/mxMM97SxtK<\/a><\/p>\n<p>&mdash; mechpil0t (@mechpil0t) <a href=\"https:\/\/twitter.com\/mechpil0t\/status\/1382594324777488384?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">April 15, 2021<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>After this successful test, I then created a system that would automatically load a Sketchfab model based on the location of the user. The locations of the user would be checked against a list of available historical models, and, if the user was close enough to the model, would be downloaded and imported into Unity at runtime.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/twitter.com\/hashtag\/sketchfab?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#sketchfab<\/a> to <a href=\"https:\/\/twitter.com\/hashtag\/AR?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#AR<\/a> version 2<\/p>\n<p>1. GPS is used to find the closest <a href=\"https:\/\/twitter.com\/hashtag\/Immersal?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#Immersal<\/a> map<br \/>2. the map ID is used to automatically load the <a href=\"https:\/\/twitter.com\/hashtag\/sketchfab?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#sketchfab<\/a> model URL<br \/>3. once downloaded the model is automatically aligned<a href=\"https:\/\/twitter.com\/hashtag\/AugmentedReality?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#AugmentedReality<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/designium?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#designium<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/Photogrammetry?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#Photogrammetry<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/madewithunity?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">#madewithunity<\/a> <a href=\"https:\/\/t.co\/j16DMfERM4\" target=\"_blank\" rel=\"nofollow\">pic.twitter.com\/j16DMfERM4<\/a><\/p>\n<p>&mdash; mechpil0t (@mechpil0t) <a href=\"https:\/\/twitter.com\/mechpil0t\/status\/1388449910010249225?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"nofollow\">May 1, 2021<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>This was achieved by creating my own online database that stored the model\u2019s Sketchfab ID (UID) and the GPS coordinates of the model\u2019s location. First, this database was queried to find the closest coordinates, which were then used to make the Sketchfab API call.<\/p>\n<p>For this prototype, I used another location in Akihabara where an historic Izakaya, the Kanda Shokudou Diner, had been recently torn down.<\/p>\n<div class=\"sketchfab-embed-wrapper\">    <iframe title=\"\u6771\u4eac \u79cb\u8449\u539f \u304b\u3093\u3060\u98df\u5802 \/ Kanda Shokudou Diner\" class=\"\" width=\"690\" height=\"388\" src=\"https:\/\/sketchfab.com\/models\/5911f03b5dca481482caa1393ea4c289\/embed\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\" xr-spatial-tracking=\"true\" execution-while-out-of-viewport=\"true\" execution-while-not-rendered=\"true\" web-share=\"true\"><\/iframe><\/div>\n<h2>Conclusions<\/h2>\n<p>Photogrammetry is the best form of digital preservation we currently have for 3D objects, and in this context, AR can be seen as a form of digital restoration. I feel that the digital preservation of our cities is an important next step in heritage conservation. Hopefully, one day using AR we might be able to access the \u201cversion history\u201d of a city and I am grateful that Sketchfab is providing the tools to make this kind of prototyping more streamlined.<\/p>\n<p>At the moment the apps described in this post are internal prototypes and so are not available to the public. However, development is ongoing and I hope to add a map-based search function in the next stage to improve UX and allow users to more easily see what models are available in their area.<\/p>\n<p>&nbsp;<\/p>\n<a href=\"https:\/\/sketchfab.com\/blogs\/community\/category\/community-story\/api-spotlight\/\"  target=\"_blank\"   class=\"sf-button\"><button class=\"button btn-large\nbutton-blue\">Explore other API Projects<\/button><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Augmented Reality Engineer Matt Hudson discusses how he uses AR and Sketchfab&#8217;s API to layer 3D scans of old buildings over Tokyo&#8217;s updated cityscape.<\/p>\n","protected":false},"author":23,"featured_media":142060000318,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[617],"tags":[35,246,1094,1089],"class_list":["post-142060000316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-api-spotlight","tag-api","tag-ar","tag-geolocation","tag-viewer-api-uses"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2021\/07\/kanda_shokudou_diner.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/142060000316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/comments?post=142060000316"}],"version-history":[{"count":2,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/142060000316\/revisions"}],"predecessor-version":[{"id":142060000322,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/142060000316\/revisions\/142060000322"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/media\/142060000318"}],"wp:attachment":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/media?parent=142060000316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/categories?post=142060000316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/tags?post=142060000316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}