{"id":3064,"date":"2019-08-17T16:09:47","date_gmt":"2019-08-17T21:09:47","guid":{"rendered":"http:\/\/www.jhclaura.com\/?p=3064"},"modified":"2020-10-11T15:49:53","modified_gmt":"2020-10-11T20:49:53","slug":"david-bowie-is","status":"publish","type":"post","link":"http:\/\/www.jhclaura.com\/david-bowie-is\/","title":{"rendered":"David Bowie Is &#8211; AR Exhibition"},"content":{"rendered":"<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/03\/16x9-1024x576.jpg\" alt=\"\" class=\"wp-image-2863\" width=\"512\" height=\"288\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/03\/16x9-1024x576.jpg 1024w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/03\/16x9-300x169.jpg 300w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/03\/16x9-768x432.jpg 768w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/03\/16x9-400x225.jpg 400w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/03\/16x9-210x118.jpg 210w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/03\/16x9.jpg 1200w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n<p><a rel=\"noreferrer noopener\" aria-label=\"David Bowie Is - AR Exhibition (opens in a new tab)\" href=\"https:\/\/davidbowieisreal.com\/\" target=\"_blank\">David Bowie Is &#8211; AR Exhibition<\/a>, is an AR project by The David Bowie Archive, Sony Music Entertainment (Japan) Inc. and Planeta. In this post, I jotted down some of my development as Lead Developer, under Director Nick Dangerfield, Art Direction Seth Tillett, and Tech Director Dan Brewster.<\/p>\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/IMG_7817.png\" alt=\"\" class=\"wp-image-3104\" width=\"514\" height=\"289\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/IMG_7817.png 1000w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/IMG_7817-300x169.png 300w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/IMG_7817-768x432.png 768w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/IMG_7817-400x225.png 400w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/IMG_7817-210x118.png 210w\" sizes=\"(max-width: 514px) 100vw, 514px\" \/><\/figure>\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p class=\"has-medium-font-size\"><strong>Paper Interaction<\/strong><\/p>\n<p>The irl exhibition has a lot of 2D materials, and for browsing them in a mobile app, there is a subtle balance we want to maintain, a balance between <strong>efficiency<\/strong> and <strong>AR-ness<\/strong>. We tried several ways, shuffle, fade in\/out, but ultimately it feels the most natural to see them laying or leaning on some sort of surface. <\/p>\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-image-fill\" style=\"grid-template-columns:64% auto\">\n<figure class=\"wp-block-media-text__media\" style=\"background-image:url(http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_move.jpg);background-position:50% 50%\"><img loading=\"lazy\" width=\"900\" height=\"506\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_move.jpg\" alt=\"\" class=\"wp-image-3099\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_move.jpg 900w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_move-300x169.jpg 300w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_move-768x432.jpg 768w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_move-400x225.jpg 400w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_move-210x118.jpg 210w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<div class=\"wp-block-media-text__content\">\n<p>And just like how you would expect and do in real life, we made the 2D materials move with your fingertip. <\/p>\n<\/div>\n<\/div>\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper.mp4\"><\/video><\/figure>\n<p class=\"has-text-align-center\">The effect especially works great on small paper cutout.<br \/>(<em>Note<\/em> &#8211; all videos in the post are direct screen recordings on my old iPhone6s)<\/p>\n<p>And as a tabletop AR, some 2D artifacts need to be stacked in order for all to fit in, thus we need to a way to shuffle them. <\/p>\n<div class=\"wp-block-media-text alignwide is-image-fill\" style=\"grid-template-columns:68% auto\">\n<figure class=\"wp-block-media-text__media\" style=\"background-image:url(http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_stack-1.jpg);background-position:50% 50%\"><img loading=\"lazy\" width=\"900\" height=\"506\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_stack-1.jpg\" alt=\"\" class=\"wp-image-3094\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_stack-1.jpg 900w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_stack-1-300x169.jpg 300w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_stack-1-768x432.jpg 768w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_stack-1-400x225.jpg 400w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/paper_stack-1-210x118.jpg 210w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<div class=\"wp-block-media-text__content\">\n<p>After testing, we found out that, bringing the &#8220;focus&#8221; artifact to the front of the stack after being sent back, feels the most natural and intuitive.<\/p>\n<\/div>\n<\/div>\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/sort.mov\"><\/video><\/figure>\n<p class=\"has-text-align-center\">Paper stack shuffle.<\/p>\n<div style=\"height:38px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p class=\"has-medium-font-size\"><strong>Scene Changes Mask<\/strong><\/p>\n<p>To pack the whole physical show into a tabletop AR mobile app, it is important to find a way to navigate the rich contents.<\/p>\n<blockquote style=\"text-align:center\" class=\"wp-block-quote is-style-large\">\n<p style=\"font-family: Helvetica; font-size: 1.1em; margin-bottom:0px\"> It includes over 400 high resolution captures of David Bowie\u2019s costumes, sketches, handwritten lyrics, notes, music videos and original works of art are presented in striking arrangements and immersive settings, as well as dozens of never before seen items, including archival videos, drawings, photographs, and notes.<\/p>\n<p><cite style=\"font-size: 0.6em\"><a href=\"https:\/\/davidbowieisreal.com\/\">davidbowieisreal.com<\/a><\/cite><\/p><\/blockquote>\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-center is-image-fill\" style=\"grid-template-columns:65% auto\">\n<figure class=\"wp-block-media-text__media\" style=\"background-image:url(http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/menu.jpg);background-position:51% 52%\"><img loading=\"lazy\" width=\"900\" height=\"506\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/menu.jpg\" alt=\"\" class=\"wp-image-3098\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/menu.jpg 900w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/menu-300x169.jpg 300w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/menu-768x432.jpg 768w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/menu-400x225.jpg 400w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/menu-210x118.jpg 210w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<div class=\"wp-block-media-text__content\">\n<p>Within the show, we decided to condense each section into a digestible <em>Diorama<\/em>, and make them navigable through a map.<\/p>\n<p>And within each diorama, we need to make some sub-scene changes as well to accommodate all the contents.<\/p>\n<\/div>\n<\/div>\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-image-fill\" style=\"grid-template-columns:65% auto\">\n<figure class=\"wp-block-media-text__media\" style=\"background-image:url(http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/slider_mask.jpg);background-position:50% 50%\"><img loading=\"lazy\" width=\"900\" height=\"506\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/slider_mask.jpg\" alt=\"\" class=\"wp-image-3097\" srcset=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/slider_mask.jpg 900w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/slider_mask-300x169.jpg 300w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/slider_mask-768x432.jpg 768w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/slider_mask-400x225.jpg 400w, http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/slider_mask-210x118.jpg 210w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<div class=\"wp-block-media-text__content\">\n<p>For this, I used a lot of invisible 3D mask.<\/p>\n<p>The mask uses depth buffer to occlude and prevent the contents from being shown. It is a simple but effective graphic trick, and more can be found <a rel=\"noreferrer noopener\" href=\"http:\/\/wiki.unity3d.com\/index.php?title=DepthMask\" target=\"_blank\">here<\/a>. <\/p>\n<\/div>\n<\/div>\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/hunger.mp4\"><\/video><\/figure>\n<p class=\"has-text-align-center\">For example in <em>Hunger City<\/em>, two masks are places on the sides of the stage, to hide the off-stage contents.<\/p>\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p class=\"has-medium-font-size\"><strong>Scene Making<\/strong><\/p>\n<p>Under the guidance of Director and Art Director and with feedback from the whole development team, I build the AR scenes including: Early Influences, Space Oddity, Cultural Influences, Songwriting, Recording, Characters, Collaborations, Life On Mars, Ziggy Stardust, Hunger City, Stage and Screen, New York, and Black &amp; White Years. Below are the in-app screen recording of some of those scenes.<\/p>\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/early.mp4\"><\/video><\/figure>\n<p class=\"has-text-align-center\">Early Influences<\/p>\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/hunger_transition.mp4\"><\/video><\/figure>\n<p class=\"has-text-align-center\">Hunger City<\/p>\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/bnw.mp4\"><\/video><\/figure>\n<p class=\"has-text-align-center\">Black and White Years<\/p>\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/s_n_s.mp4\"><\/video><\/figure>\n<p class=\"has-text-align-center\">Stage and Screen<\/p>\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/ny.mp4\"><\/video><\/figure>\n<p class=\"has-text-align-center\">New York<\/p>\n<figure class=\"wp-block-video aligncenter\"><video autoplay loop muted style=\"height:600px\" src=\"http:\/\/www.jhclaura.com\/wp-content\/uploads\/2019\/08\/ziggy_.mp4\"><\/video><\/figure>\n<p class=\"has-text-align-center\">Ziggy Stardust<\/p>\n","protected":false},"excerpt":{"rendered":"<p>David Bowie Is &#8211; AR Exhibition, is an AR project by The David Bowie Archive, Sony Music Entertainment (Japan) Inc. and Planeta. In this post, I jotted down some of&#8230; <a class=\"read-more\" href=\"http:\/\/www.jhclaura.com\/david-bowie-is\/\">Read The Rest &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[127,188],"tags":[308,326,325,190],"_links":{"self":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts\/3064"}],"collection":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/comments?post=3064"}],"version-history":[{"count":10,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts\/3064\/revisions"}],"predecessor-version":[{"id":3120,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/posts\/3064\/revisions\/3120"}],"wp:attachment":[{"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/media?parent=3064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/categories?post=3064"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jhclaura.com\/wp-json\/wp\/v2\/tags?post=3064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}