{"id":1190,"date":"2021-12-26T14:20:26","date_gmt":"2021-12-26T14:20:26","guid":{"rendered":"http:\/\/mobilearlab.bxmc.poly.edu\/?p=1190"},"modified":"2022-01-13T20:31:15","modified_gmt":"2022-01-13T20:31:15","slug":"lens-studio-segmentation-guide-tutorial-2021-mobile-ar-lab-nyu","status":"publish","type":"post","link":"https:\/\/mobilearlab.bxmc.poly.edu\/?p=1190","title":{"rendered":"Lens Studio Segmentation Guide Tutorial 2021 &#8212; Mobile AR Lab @ NYU"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Lens Studio  Segmentation Guide Tutorial 2021 -- Mobile AR Lab @ NYU\" width=\"525\" height=\"394\" src=\"https:\/\/www.youtube.com\/embed\/hhur3ez3_Vc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Lens Studio Segmentation Guide<\/strong><\/h1>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/Q8tVX4Ckdnkp9Aa8kLzzmenj9xfAHUi7taz4ebHPJRTcNiMtmHHHNuc9ZkcsK42bMR5KpVLblDqEueKsGOmDe8RhugerwmoR0McnwltT3uWmtEdlqIKcjGmG9ivbfivKAiPgv7Bp\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/BHsk6IOsyOYcYyBU-8wxip1DZEJIhhLsY5AhGdlJ74FK6-N2cl5ag0z7Kp5dWNn33VTWcDEgb2xZVa9sqAS9bNVIs5rSm6XCHzGaOXSWSwuyl9ifVZeM6cUyAOeFALEsWIk5w6OE\" alt=\"\"\/><\/figure>\n\n\n\n<p>Lens Studio segmentation textures can isolate specific elements that your camera sees and render them out as a new texture to be used elsewhere in your Lens.<br><br>To get and set a specific piece of what the camera sees, follow these steps.<br><br><strong>Step 1: Add Screen Image &amp; Duplicate Camera<\/strong><strong><br><\/strong><strong><br><\/strong>Open a New Project in <a href=\"https:\/\/lensstudio.snapchat.com\/?utm_medium=cpc&amp;utm_source=google&amp;utm_campaign=3Q_Google_Search_Beta_Brand_US&amp;utm_term=lens%20studio%20snapchat%20download&amp;utm_device=c&amp;gclid=EAIaIQobChMIs9fB3KOE9AIVDqbICh1nlAmEEAAYASAAEgLpkPD_BwE\">Lens Studio<\/a>.<br><br>In the Objects panel, click + to add a new <strong>Screen Image<\/strong>. Set the image component stretch mode to <strong>Stretch<\/strong> in the Inspector.<br><br>Next, right click and <strong>duplicate the camera<\/strong>. <strong>Turn it off<\/strong> for now.<br><br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/vxZsfoRNj8y4fvi_0aNMDrZaXUSv5OIkmIOdvMRcoPahMM-eLL6kxL3Tz09__CmYZ9k21KrFBw8eoQMMAch_SuTl7S0Ol2y5QwWMSpPQITvjLEXkiQT4QuGpJ4k9eVGRED-BtHMh\" width=\"624\" height=\"609\">Make sure to switch the Stretch Mode to fit on the image component in the inspector!<br><br><br><\/p>\n\n\n\n<p><strong>Step 2: Add Resources<\/strong><strong><br><\/strong><strong><br><\/strong>Navigate to the Resource panel and add 3 new resources. <strong>Right click -&gt; Add New<\/strong> or click + and start typing to search.<br><br>1: Segmentation Texture ( 10 options )<br>2: An Unlit material<br>3: A new Render Target<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/cQx77GFkDoogMGoDEsAzDhoJetQT-rN2GBBn3nYISt1OBaNOYAgkkp7H0-gAdih2eyngLAo3D1eyn6ZorrnZPgAfE4nUJlUvaTHLYhKbNJ9YxObwN6Y_qqh1N-sIoL27JC0qQb1s\" width=\"517\" height=\"674\"><br><br><\/p>\n\n\n\n<p><strong>Step 3: Set Material Specifications<\/strong><strong><br><\/strong><strong><br><\/strong>Select the Unlit material and view its components in the Inspector pane.<br><br>\u2022 In the<strong> Color Mask<\/strong> component, switch on the <strong><em>Alpha<\/em><\/strong> Channel.<br>\u2022 Switch the <strong>Blend Mode<\/strong> to <strong><em>Normal<\/em><\/strong>.<br>\u2022 Toggle the <strong>Opacity Texture<\/strong><strong><br><\/strong>\u2022 Set the Opacity Texture by dragging on the <strong><em>Segmentation Texture<\/em><\/strong> from the Resources pane.<br>\u2022 Select the <strong>Screen Image<\/strong> in the Objects pane and assign the <strong><em>Unlit materia<\/em><\/strong><strong>l<\/strong> to the <strong>Screen Image\u2018s<\/strong> Material.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/mLJP1UUQk_UXOBCHSqeqE3CnxxThJVLalLSVTpVUlpTmoi3TLfgFY67DNEMmLWpSCajfNYDvAx9wG7HQOTVYL3QRAWhyOjaCUDbd5kVyShkp0iEkB6dfcMiax9qZv_utzTAehMSQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>You will now see a white, alpha channel mask updating over the area defined by the segmentation texture.<br><br><br>Back in the Resources pane, drag the <strong><em>Device Camera Texture<\/em><\/strong> to the <strong>Screen Image<\/strong> component\u2019s Texture, replacing the white texture with what the camera sees.<br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/cWSM4WyWRC4kim_Mw62fLCVB0Q2aV14K28TMDhm8GVwIm0ltjkZscdf95i01wny87vwWnpFCx3PLiPjee8zq_r73qcwnLiwmEzFHmNVJC1ymWDQnp3fVwW2XQ47j32ZdxQTKpZDI\" width=\"624\" height=\"351\"><\/p>\n\n\n\n<p><strong>Step 4: Setting up the Render Target<\/strong><strong><br><\/strong><strong><br><\/strong>Now it\u2019s time to render that alpha information out to a new texture that we can manipulate however we please.<br><br>Open the<em> <\/em><strong><em>Render Target 2<\/em><\/strong> located in the Resources Pane.<br><br><br><br><br><br><br><br><br><br>Navigate to the Inspector to modify the <strong><em>Render Target 2<\/em><\/strong>\u2018s properties.<br><br>\u2022 Set <strong>Clear Color<\/strong> to <strong><em>Color<\/em><\/strong><em>.<\/em><em><br><\/em>\u2022 Open the <strong>Color<\/strong> Box and drag <strong><em>Opacity<\/em><\/strong> to 0%.<br>\u2022 In the Objects pane, select the <strong>Orthographic Camera<\/strong> and navigate to the Inspector.<br>\u2022 Set the<strong> Render Target<\/strong> to <strong><em>Render Target 2<\/em><\/strong><strong> <\/strong>by dragging it in from the Resources pane.<br><br><strong>Step 5: Setting up the Segmentation Layer<\/strong><strong><br><\/strong><strong><br><\/strong>\u2022 Select the <strong>Orthographic Camera<\/strong> in the Objects Panel.<br>\u2022 In the Inspector\u2019s Camera component, click the <strong>Layers<\/strong> box, then <strong>+ Add New Layer<\/strong>.<br>\u2022 In the same window, click to activate the new, yellow <strong><em>Layer 1<\/em><\/strong> and deactivate the green <strong><em>Orthographic Layer<\/em><\/strong> by clicking it off. Then click out to close the Layers window.<br>\u2022 Back in the Objects pane, select the<strong> Orthographic Camera\u2019s <\/strong><strong><em>Screen Image 0<\/em><\/strong>, and in the upper right of the Inspector pane, you can see that the <strong>Screen Image<\/strong>\u2018s layer is still set to <em>Orthographic.<\/em> Switch it to the newly created <strong><em>Layer 1<\/em><\/strong>.<br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/vXwvjYExo2xC1j-X-7GfV4JpL2JERDj0oIb1-hJqzJdjwG8W1eXXVwIjvedhIe9JMRxN8i0tPanGPyIM4wlBsFZhC9rMLCLou9UIiZbTbfpwXd4_Bt5kfw9QkPzbNShX2pO9xHBL\" width=\"624\" height=\"351\"><\/p>\n\n\n\n<p><strong>Step 6: Reactivate Duplicate Camera\/Assign Segmentation to Screen Image Texture.<\/strong><strong><br><\/strong><strong><br><\/strong>Now you can reactivate your <strong>Orthographic Camera 2<\/strong>.<br><br>\u2022 Reactivate the <strong>Orthographic Camera 2<\/strong> that you created in <strong>Step 1<\/strong>.<br>\u2022 Click the disclosure box next to <strong>Orthographic Camera 2<\/strong> to open the<strong> <\/strong><strong><em>Full Frame Region 0<\/em><\/strong> and locate the <strong><em>Screen Image 0<\/em><\/strong>.<br>\u2022 From the Resources pane, drag the <strong><em>Render Target 2<\/em><\/strong> to the <strong>Screen Image 0<\/strong>\u2018s Texture.<br><br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/ek9d8eqdd3kUvVrk8DC5MmXqEeLaTrqqHJMeOCjv59Ji3Dnc5J0t07u2ExLuzj4-sZ4Cansl84mk5USiHtRHElRJpW0kLSh52st7rlSy-aUVpRsGDDO0VxNe_nWh5McLCLIfVvjk\" width=\"624\" height=\"624\"><br><br>Now you can use the <strong>Screen Image<\/strong> to display just the area of segmentation. Try using the Tween Manager and making lots of duplicates for neat effects. The Segmentation Texture can also be used as a texture in Particle systems.<\/p>\n\n\n\n<p>taught by Christopher Strawley<\/p>\n\n\n<p><a href=\"http:\/\/mobilearlab.bxmc.poly.edu\/wp-content\/uploads\/2021\/12\/Lens-Studio-Segmentation-Guide.pdf\">Lens Studio Segmentation Guide<\/a><\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lens Studio Segmentation Guide Lens Studio segmentation textures can isolate specific elements that your camera sees and render them out as a new texture to be used elsewhere in your Lens. To get and set a specific piece of what the camera sees, follow these steps. Step 1: Add Screen Image &amp; Duplicate CameraOpen a &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/mobilearlab.bxmc.poly.edu\/?p=1190\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Lens Studio Segmentation Guide Tutorial 2021 &#8212; Mobile AR Lab @ NYU&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1190","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=\/wp\/v2\/posts\/1190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1190"}],"version-history":[{"count":2,"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=\/wp\/v2\/posts\/1190\/revisions"}],"predecessor-version":[{"id":1208,"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=\/wp\/v2\/posts\/1190\/revisions\/1208"}],"wp:attachment":[{"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobilearlab.bxmc.poly.edu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}