Difference between revisions of "Team:Vilnius-Lithuania/The 6th SynBio Sense"

 
(8 intermediate revisions by the same user not shown)
Line 36: Line 36:
 
                 </p>
 
                 </p>
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
                     However, our focus did not stop with the education of young pupils - the still ongoing pandemic COVID-19 has heavily impacted the way that adults think about life sciences. Due to the interest of how viruses infect people, their testing procedures, and
+
                     However, our focus did not stop with the education of young pupils - the still ongoing COVID-19 pandemic has heavily impacted the way that adults think about life sciences. Due to the interest of how viruses infect people, their testing procedures, and
                     the development of vaccines, we thought that it was important to create a strong base of biology knowledge for <b>all kinds of age groups</b>.
+
                     the development of vaccines, we thought that it was important to create a strong base of biology knowledge for <b>all age groups</b>.
 
                 </p>
 
                 </p>
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
                     Our way to reach this goal was to use up-and-coming technology <b>Augmented Reality (AR)</b>(Fig. 1). Similarly to Virtual Reality (VR), this technology seeks to blur the lines between the digital and physical world<a href="#cit3" class="citation">3</a>.
+
                     Our way of reaching this goal was to use up-and-coming technology <b>Augmented Reality (AR)</b>(Fig. 1). Similarly to Virtual Reality (VR), this technology seeks to blur the lines between the digital and physical world<a href="#cit3" class="citation">3</a>.
 
                     However, instead of creating a separate reality as VR does, Augmented Reality complements our environment - or you could say augments it - by adding digital elements on top of it. Research done in 2019<a href="#cit4" class="citation">4</a>                    has concluded that the usage of AR in mobile applications for learning purposes has increased students' attention span by 30.72% and overall experience by 14.43%.
 
                     However, instead of creating a separate reality as VR does, Augmented Reality complements our environment - or you could say augments it - by adding digital elements on top of it. Research done in 2019<a href="#cit4" class="citation">4</a>                    has concluded that the usage of AR in mobile applications for learning purposes has increased students' attention span by 30.72% and overall experience by 14.43%.
 
                 </p>
 
                 </p>
Line 50: Line 50:
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
 
                     While there are many ways to implement Augmented Reality, for our web application, we chose to use marker-based AR, where with a quick scan of a QR code and a custom-designed marker, you can experience the 6th sense of Synthetic Biology. The main idea
 
                     While there are many ways to implement Augmented Reality, for our web application, we chose to use marker-based AR, where with a quick scan of a QR code and a custom-designed marker, you can experience the 6th sense of Synthetic Biology. The main idea
                     was to create and implement 13 different 3D models that would depict the <b>main themes of life sciences</b>, such as DNA, protein translation, GFP and etc. Each of these models would then be placed in separate
+
                     was to create and implement 13 different 3D models that would depict the <b>main themes of life sciences</b>, such as DNA, protein translation, GFP, etc. Each of these models would then be placed in separate
                     AR scenes that can be opened through
+
                     AR scenes that can be opened in
 
                     <b>3 quick steps</b>, explained later in the ‘Usage’ section. </p>
 
                     <b>3 quick steps</b>, explained later in the ‘Usage’ section. </p>
                 <p class="content-paragraph">The objective was to place these 13 stops with QR codes and AR markers in several cities of Lithuania as well as to collaborate with other iGEM teams and their projects.
+
                 <p class="content-paragraph">The objective was to place these 13 stops with QR codes and AR markers (Fig. 2) in several cities of Lithuania as well as to collaborate with other iGEM teams and their projects.
 
                 </p>
 
                 </p>
 +
<div class="photos-wrapper full-width">
 +
                    <div class="photos photo-grid two-part no-shadow"><img src="https://static.igem.org/mediawiki/2020/6/66/T--Vilnius-Lithuania--ar-gfp.svg"><img src="https://static.igem.org/mediawiki/2020/3/30/T--Vilnius-Lithuania--ar-biobrick.svg"></div>
 +
                </div>
 +
                <p class="photo-desc"><b>Figure 2.</b> QR codes and AR markers on stickers</p>
 
                 <div class="h3">USAGE</div>
 
                 <div class="h3">USAGE</div>
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
 
                     All 13 stops were distributed throughout the most popular city places and each one of them was designed in such a manner that it would be easy to use for everyone who has a <b>smartphone</b> in their pocket. Only three steps are required
 
                     All 13 stops were distributed throughout the most popular city places and each one of them was designed in such a manner that it would be easy to use for everyone who has a <b>smartphone</b> in their pocket. Only three steps are required
                     to be fully immersed into Augmented Reality scene:
+
                     to be fully immersed into Augmented Reality scene (Fig. 3):
 
                 </p>
 
                 </p>
 
                 <ol>
 
                 <ol>
Line 65: Line 69:
 
                     <li>Scan the AR marker.</li>
 
                     <li>Scan the AR marker.</li>
 
                 </ol>
 
                 </ol>
                 <video controls>
+
                 <video controls style="max-height: 400px; margin: 30px 0">
                     <source src="https://static.igem.org/mediawiki/2020/1/1e/T--Vilnius-Lithuania--arvideo.mov" type="video/mov">
+
                     <source src="https://static.igem.org/mediawiki/2020/8/88/T--Vilnius-Lithuania--arvideo.mp4" type="video/mp4">
 
                     Your browser does not support the video tag.
 
                     Your browser does not support the video tag.
 
                   </video>
 
                   </video>
                 <p class="photo-desc"><b>Figure 2.</b>Three easy steps to experience Augmented Reality</p>
+
                 <p class="photo-desc"><b>Figure 3.</b>Three easy steps to experience Augmented Reality</p>
  
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
 
                     When users finish these three steps, they can now examine the model. The next obvious step for us was to write descriptions for each of these models so that the users could also read about what they are seeing. This was also important because studies
 
                     When users finish these three steps, they can now examine the model. The next obvious step for us was to write descriptions for each of these models so that the users could also read about what they are seeing. This was also important because studies
                     have shown that some adults prefer textual information rather than visual<a href="#cit5" class="citation">5</a>. With the aim to attract tourists and locals that do not speak Lithuanian, each description is available
+
                     have shown that some adults prefer textual information rather than visual<a href="#cit5" class="citation">5</a>. With the aim of attracting tourists and locals that do not speak Lithuanian, each description is available
 
                     both in <b>English and Lithuanian languages</b>.
 
                     both in <b>English and Lithuanian languages</b>.
 
                 </p>
 
                 </p>
                <div class="photos-wrapper full-width">
 
                    <div class="photos photo-grid two-part no-shadow"><img src="https://static.igem.org/mediawiki/2020/6/66/T--Vilnius-Lithuania--ar-gfp.svg"><img src="https://static.igem.org/mediawiki/2020/3/30/T--Vilnius-Lithuania--ar-biobrick.svg"></div>
 
                </div>
 
                <p class="photo-desc"><b>Figure 3.</b>QR codes and AR markers on stickers</p>
 
 
                 <div class="h3">ACCESSIBILITY</div>
 
                 <div class="h3">ACCESSIBILITY</div>
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
Line 88: Line 88:
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
 
                     Keeping in mind people with <b>low vision</b> and those who better comprehend auditory information, we included <b>audio recordings</b> about the 3D models in previously mentioned languages. While most of these were recorded by our
 
                     Keeping in mind people with <b>low vision</b> and those who better comprehend auditory information, we included <b>audio recordings</b> about the 3D models in previously mentioned languages. While most of these were recorded by our
                     team member Liepa and instructor Povilas, we also invited some of the most distinguished <b>scientists</b> from Lithuania - <b>dr. Urtė Neniškytė</b>, <b>prof. Aurelija Žvirblienė</b> and <b>dr. Linas Mažutis</b>. They were kind enough
+
                     team member Liepa and instructor Povilas, we also invited some of the most distinguished <b>scientists</b> from Lithuania - <b>dr. Urtė Neniškytė</b>, <b>dr. Linas Mažutis</b> and <b>prof. Aurelija Žvirblienė</b> (Fig. 4). They were kind enough
 
                     to not only help us to record some of these informational texts but also review them and make them even more understandable for the general public.
 
                     to not only help us to record some of these informational texts but also review them and make them even more understandable for the general public.
 
                 </p>
 
                 </p>
Line 99: Line 99:
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
 
                     Although the technology that was used to develop this project is supported by most modern browsers, there are a few exceptions - Google Chrome and Mozilla Firefox on iOS devices. These browsers do not allow camera access, required for marker detection.
 
                     Although the technology that was used to develop this project is supported by most modern browsers, there are a few exceptions - Google Chrome and Mozilla Firefox on iOS devices. These browsers do not allow camera access, required for marker detection.
                     To solve this problem, our solution was to create an additional option for users to analyze these 3D models without Augmented Reality implementation.
+
                     To solve this problem, our solution was to create an additional option (Fig. 5) for users to analyze these 3D models without Augmented Reality implementation.
 
                 </p>
 
                 </p>
 
                 <div class="photos-wrapper full-width">
 
                 <div class="photos-wrapper full-width">
 
                     <div class="photos phone"><img src="https://static.igem.org/mediawiki/2020/c/c2/T--Vilnius-Lithuania--ar-noar.png"><img src="https://static.igem.org/mediawiki/2020/c/cf/T--Vilnius-Lithuania--ar-noar1.png"></div>
 
                     <div class="photos phone"><img src="https://static.igem.org/mediawiki/2020/c/c2/T--Vilnius-Lithuania--ar-noar.png"><img src="https://static.igem.org/mediawiki/2020/c/cf/T--Vilnius-Lithuania--ar-noar1.png"></div>
 
                 </div>
 
                 </div>
                 <p class="photo-desc"><b>Figure 5.</b>Accessibility and different features in our website</p>
+
                 <p class="photo-desc"><b>Figure 5.</b> Accessibility and different features in our website</p>
  
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
                     Another feature that seemed important in the light of the recent pandemic was the ability to examine all the stops <b>without leaving the room</b>. In the main menu, you can find a link that lets you download all markers that can be
+
                     Another feature that seemed important in the light of the recent pandemic was the ability to examine all the stops <b>without leaving the house</b>. In the main menu, you can find a link (Fig. 6) that lets you download all markers that can be
 
                     used in AR scenes (preferably printed out, but not necessary).
 
                     used in AR scenes (preferably printed out, but not necessary).
 
                 </p>
 
                 </p>
Line 113: Line 113:
 
                     <div class="photos phone"><img src="https://static.igem.org/mediawiki/2020/2/26/T--Vilnius-Lithuania--ar-print.png"></div>
 
                     <div class="photos phone"><img src="https://static.igem.org/mediawiki/2020/2/26/T--Vilnius-Lithuania--ar-print.png"></div>
 
                 </div>
 
                 </div>
                 <p class="photo-desc"><b>Figure 6.</b>Feature that lets to examine all the stops without leaving the room</p>
+
                 <p class="photo-desc"><b>Figure 6.</b> Feature that allows the user to examine all the stops without leaving the room</p>
  
 
                 <div class="h3">REALISATION & COLLABORATIONS</div>
 
                 <div class="h3">REALISATION & COLLABORATIONS</div>
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
                     To spread our project as wide as possible, we decided to collaborate with <b>various cities</b> in our home country Lithuania, including densely and sparsely populated areas. It was important for us to collaborate not only with the
+
                     To spread our project as wide as possible, we decided to collaborate with <b>various cities</b> in our home country Lithuania, including densely and sparsely populated areas (Fig. 7). It was important for us to collaborate not only with the
 
                     capital city Vilnius where we are from but also with smaller cities, whose habitants <b>do not have as many choices</b> for cultural and educational resources in their hometowns.
 
                     capital city Vilnius where we are from but also with smaller cities, whose habitants <b>do not have as many choices</b> for cultural and educational resources in their hometowns.
 
                 </p>
 
                 </p>
 
                 <svg id="lt-map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 588.6 419.1" xmlns:v="https://vecta.io/nano"><style><![CDATA[.N{fill:#ffd762}.O{font-family:montserrat-black,sans-serif}.P{fill:#fafafc}.Q{font-size:12px}.R{fill:#ffc43b}.S{font-family:montserrat,sans-serif}.T{font-size:14px}.U{font-size:19px}]]></style><g fill="#6281ef"> <use xlink:href="#B"/> <path d="M588.6 194.5c-1.7 1.6-3.1 3.9-5.1 4.5-6.2 1.8-9.7 5.4-10.4 11.9-.2 1.7-.5 3.3-1 4.9-.8 2.8-2.5 3.7-5.3 2.5-4-1.7-7.6-4.7-12.4-1-1.4 1.1-5-.7-7.6-1.3-7-1.6-10.8 1.3-11.5 8.5-.2 3.1-.9 6.2-1.9 9.1-4.5 11.5-11.5 15.7-23.8 14.3-4.7-.5-8.1.3-9.8 5.3-.7 1.9-2.8 3.3-3.9 5.1-1.3 2.2-3.4 4.8-3.1 6.9.3 3 0 5.3-1.8 7.2-.4.4-.8.7-1.2 1-1 .7-1.6 1.7-1.8 2.9-.1 8-1.2 16.3.2 24 1.6 8.8 1.9 11-5.6 15.9-4.5 2.9-4.7 7.6-4.9 11.9-.1 1.6-.3 3.2-.7 4.8-.7 3-2.2 5.7-4.3 7.8-.6.5-1.1 1.2-1.4 2-.4 3-1.9 6.9-.5 8.7s5.9 2.1 8.4 1.2c4.1-1.5 6.9-2.2 7.9 3.1.1.4.6.8.9 1.1 4.4 4.3 6.2 12.4 3.9 17.8-.3.7-.9 1.8-1.5 1.9-6.2 1.3-12.2 5.7-18.9 2-2.7-1.5-4.9-2.8-2.1-6.5 1.5-2 1.8-5.1 2.6-7.7l1.1-.5c-.9-1.4-1.8-2.7-2.8-4.1-5.9-8.1-5.5-7.6-13.1-1.1-2.5 2.1-7.5 2.3-11.1 1.8-7.1-.9-7-1.2-9.3 5.8-1.1 3.5-2.8 6.7-5 9.6-3 3.9-7.2 5-12.1 3.1-2.6-1.1-5.4-1.7-8.2-1.9-8.4-.3-13.7 7.2-11 15.1.9 2.5 2.1 5.1 2 7.6-.3 2.3-1.6 4.4-3.5 5.8-2.2 1.2-5.3 2-7.5-1.3-.7-1-3-1.3-4.5-1.1-8.7 1.1-14.3 7.3-20.5 12.5-6.4 5.4-13.8 4-17.9-3.3-2.6-4.6-6.1-6.1-10.9-3.6-5.8 3-11.3 4.8-17.5 1.1-.9-.4-1.9-.4-2.9-.1l-23.1 6.4c-5.2 1.5-16.7-5.9-17.4-11.3-.1-.8 0-1.7.4-2.4 5.3-9.5 2-19.1-3-26.4-4-5.8-8.4-13.2-16.9-15.3-2.9-.7-5.6-2.9-8.1-4.8-3-2.2-5.6-4.8-9.8-3.1-.5.2-2.8-1.8-2.8-2.8 0-5.9-5.5-7.2-8.5-10.4-1.8-1.9-5.5-2.6-8.3-2.5-3.1.2-6.1 2.1-10.5 3.7-1.7-3.7-5.2-8.6-6.2-14-1.1-5.9 0-12.2.4-18.4.3-4.9.9-9.8 1.6-14.7.8-5.7 4.2-9.9 8.1-13.9 8-8 7.2-18.7-1.6-25.5-1-.8-1.3-2.3-2.3-3.1-1.9-1.6-3.9-4-6.1-4.2-4.1-.5-5.9-2.6-6.8-6.1-.8-3.2-1.4-6.5-2.4-9.7-1.2-3.7-3.9-5.8-7.7-4.2-6.6 2.7-13.1 1.5-19.7.6-6.8-.9-12.8.3-18.2 4.7-3.2 2.6-6.9 1-7.5-3.6s-2-6.2-6.8-4.3c-1.8.7-4.4-.4-6.5-1.2-1.5-.5-2.7-2.2-4.2-2.6-7.9-2-12.8-8.6-19.5-12.3-2.2-1.1-4.7-1.6-7.2-1.5-4.6.2-7.4-2-9.7-5.7-2-3.4-4-7.8-7.1-9.2-2.4-1.1-6.5 1.9-11 3.5 7.2-6.4-.6-10.9-.7-16.8l-4.1.3c0-.7.2-1.4.5-2 5.6-7.4 3.2-15.1 1.1-22.9l-7.1-25.8c-.4-1.9-1.1-3.8-2-5.6-7.8-12.3-8.5-25.7-6.6-39.7.8-5.9.5-12 .3-18-.1-2.9.9-3.8 3.6-4 9-.7 8.8-.9 11-9.5 2.3-9 7.3-15.2 17-17.7 1.2-.3 2.4-.8 3.5-1.4a72.18 72.18 0 0 0 7.7-5.6c3.7-2.9 7.3-4.9 12.2-4.9a17.83 17.83 0 0 0 7.5-2l32.1-15c2.1-.9 5.7-1 7.4.2 5.5 4 11.3 3 17.3 2.7 5.5-.3 11.1-1 16.4-.3 3.9.6 7.7 2.8 11 5.2 2.6 1.8 4.7 2.8 7.7 1.4 5.2-2.6 10.6-4.8 15.6-7.7 3.7-2.1 6.3-1.7 8.1 2.1 1.2 2.5 1.9 5.5 3.5 7.7 1.8 2.4 4.3 5.8 6.6 5.8 2.9 0 6.6-2.3 8.6-4.7 3.9-4.7 10-7.2 15.8-4.9 3.9 1.5 7.6 3.8 11.6 4.6 3.3.7 7-.1 10.4-.6 2.4-.3 4.7-.9 7-1.4 1.2-.3 2.4-.5 3.6-.7 1-.1 2.8.4 3.1 1.1 2 4.9 5.7 3.2 9.3 2.8 7.8-.9 14.4 2.2 20.7 6.6 3.5 2.5 7.8 4.8 11.9 5.1 3.4.2 7.1-2.4 10.5-4.1s6.4-2.2 9.3.4c7.2 6.6 13.3 4.1 19.9-3.9 5.1-6.2 9.7-12.7 17.8-15.3 1.1-.4 2.2-1.2 3.3-1.2 4.1.3 6.4-1.6 7.1-5.9h1.4c1.4 3.9 3.7 7.7 4.2 11.6 1.3 10.3 8 18.1 12 27.2 1.1 2.5 5.3 4.5 8.4 5.2 7.8 1.9 15.7 3.1 23.6 4.2 6.5.9 13.1 1.7 19.6 2 3.4.2 4.8 1.5 6.2 4.5s3.9 5.5 6 8.1c1.3 1.3 2.6 2.5 4.1 3.7l18.1 16c8.9 8.1 19.2 15 24 26.9 5 12.5 16.4 16.4 27.7 20 6.2 2 8.5 3.8 7.4 10.2-.7 3.5-2.1 6.9-4 10-2.2 3.7-4.7 7-2.4 11.5a3.31 3.31 0 0 1 0 2.4c-2.1 5-4 10.1-6.6 14.8-4 7.3-1.7 10.8 7.8 11.3 5.8.4 11.5.4 17.2 1.2 1.9.3 3.6 2.5 5.5 3.9h0z"/></g><path d="M491.9 374.7c-.3.7-.9 1.8-1.5 1.9-6.2 1.3-12.2 5.7-18.9 2-2.7-1.5-4.9-2.8-2.1-6.5 1.5-2 1.8-5.1 2.6-7.7l1.1-.5c-.9-1.4-1.8-2.7-2.8-4.1-5.9-8.1-5.5-7.6-13.1-1.1-2.5 2.1-7.5 2.3-11.1 1.8-7.1-.9-7-1.2-9.3 5.8-1.1 3.5-2.8 6.7-5 9.6-3 3.9-7.2 5-12.1 3.1-2.6-1.1-5.4-1.7-8.2-1.9-8.4-.3-13.7 7.2-11 15.1.9 2.5 2.1 5.1 2 7.6-.3 2.3-1.6 4.4-3.5 5.8-2.2 1.2-5.3 2-7.5-1.3-.7-1-3-1.3-4.5-1.1-8.7 1.1-14.3 7.3-20.5 12.5-6.4 5.4-13.8 4-17.9-3.3-2.6-4.6-6.1-6.1-10.9-3.6-5.8 3-11.3 4.8-17.5 1.1-.9-.4-1.9-.4-2.9-.1l-23.1 6.4c-5.2 1.5-16.7-5.9-17.4-11.3-.1-.8 0-1.7.4-2.4 5.3-9.5 2-19.1-3-26.4-4-5.8-8.4-13.2-16.9-15.3-2.9-.7-5.6-2.9-8.1-4.8-3-2.2-5.6-4.8-9.8-3.1-.5.2-2.8-1.8-2.8-2.8 0-5.9-5.5-7.2-8.5-10.4-1.8-1.9-5.5-2.6-8.3-2.5-3.1.2-6.1 2.1-10.5 3.7-1.7-3.7-5.2-8.6-6.2-14-1.1-5.9 0-12.2.4-18.4.3-4.9.9-9.8 1.6-14.7.8-5.7 4.2-9.9 8.1-13.9 8-8 7.2-18.7-1.6-25.5-1-.8-1.3-2.3-2.3-3.1-1.9-1.6-3.9-4-6.1-4.2-4.1-.5-5.9-2.6-6.8-6.1-.8-3.2-1.4-6.5-2.4-9.7-1.2-3.7-3.9-5.8-7.7-4.2-6.6 2.7-13.1 1.5-19.7.6-6.8-.9-12.8.3-18.2 4.7-3.2 2.6-6.9 1-7.5-3.6s-2-6.2-6.8-4.3c-1.8.7-4.4-.4-6.5-1.2-1.5-.5-2.7-2.2-4.2-2.6-7.9-2-12.8-8.6-19.5-12.3-2.2-1.1-4.7-1.6-7.2-1.5-4.6.2-7.4-2-9.7-5.7-2-3.4-4-7.8-7.1-9.2-2.4-1.1-6.5 1.9-11 3.5 7.2-6.4-.6-10.9-.7-16.8l-4.1.3c0-.7.2-1.4.5-2 5.6-7.4 3.2-15.1 1.1-22.9l-7.1-25.8c-.4-1.9-1.1-3.8-2-5.6C48.8 110.4 48.1 97 50 83c.8-5.9.5-12 .3-18-.1-2.9.9-3.8 3.6-4 9-.7 8.8-.9 11-9.5 2.3-9 7.3-15.2 17-17.7 1.2-.3 2.4-.8 3.5-1.4a72.18 72.18 0 0 0 7.7-5.6c3.7-2.9 7.3-4.9 12.2-4.9 2.6-.2 5.2-.9 7.6-2.1l32.1-15c2.1-.9 5.7-1 7.4.2 5.5 4 11.3 3 17.3 2.7 5.5-.3 11.1-1 16.4-.3 3.9.6 7.7 2.8 11 5.2 2.6 1.8 4.7 2.8 7.7 1.4 5.2-2.6 10.6-4.8 15.6-7.7 3.7-2.1 6.3-1.7 8.1 2.1 1.2 2.5 1.9 5.5 3.5 7.7 1.8 2.4 4.3 5.8 6.6 5.8 2.9 0 6.6-2.3 8.6-4.7 3.9-4.7 10-7.2 15.8-4.9 3.9 1.5 7.6 3.8 11.6 4.6 3.3.7 7-.1 10.4-.6 2.4-.3 4.7-.9 7-1.4 7.4 8.9 13.2 19 16.9 30 9.7 28.6 5.2 59.9 7.8 90 1.8 21 8.2 43.3 24.9 56.2 19.6 15.2 37.7 15.4 61.8 21.4 17.2 4.4 36.2 12.3 51.4 26.3l36.1 33.4c-.4.4-.8.7-1.2 1-1 .7-1.6 1.7-1.8 2.9-.1 8-1.2 16.3.2 24 1.6 8.8 1.9 11-5.6 15.9-4.5 2.9-4.7 7.6-4.9 11.9-.1 1.6-.3 3.2-.7 4.8-.7 3-2.2 5.7-4.3 7.8-.6.5-1.1 1.2-1.4 2-.4 3-1.9 6.9-.5 8.7s5.9 2.1 8.4 1.2c4.1-1.5 6.9-2.2 7.9 3.1.1.4.6.8.9 1.1 4.6 4.6 6.3 12.7 4 18.1h0z" fill="#4567de"/><g fill="#3356ce"> <use xlink:href="#B"/> <path d="M491.9 374.7c-.3.7-.9 1.8-1.5 1.9-6.2 1.3-12.2 5.7-18.9 2-2.7-1.5-4.9-2.8-2.1-6.5 1.5-2 1.8-5.1 2.6-7.7l1.1-.5c-.9-1.4-1.8-2.7-2.8-4.1-5.9-8.1-5.5-7.6-13.1-1.1-2.5 2.1-7.5 2.3-11.1 1.8-7.1-.9-7-1.2-9.3 5.8-1.1 3.5-2.8 6.7-5 9.6-3 3.9-7.2 5-12.1 3.1-2.6-1.1-5.4-1.7-8.2-1.9-8.4-.3-13.7 7.2-11 15.1.9 2.5 2.1 5.1 2 7.6-.3 2.3-1.6 4.4-3.5 5.8-2.2 1.2-5.3 2-7.5-1.3-.7-1-3-1.3-4.5-1.1-8.7 1.1-14.3 7.3-20.5 12.5-6.4 5.4-13.8 4-17.9-3.3-2.6-4.6-6.1-6.1-10.9-3.6-5.8 3-11.3 4.8-17.5 1.1-.9-.4-1.9-.4-2.9-.1l-23.1 6.4c-5.2 1.5-16.7-5.9-17.4-11.3-.1-.8 0-1.7.4-2.4 5.3-9.5 2-19.1-3-26.4-4-5.8-8.4-13.2-16.9-15.3-2.9-.7-5.6-2.9-8.1-4.8-3-2.2-5.6-4.8-9.8-3.1-.5.2-2.8-1.8-2.8-2.8 0-5.9-5.5-7.2-8.5-10.4-1.8-1.9-5.5-2.6-8.3-2.5-3.1.2-6.1 2.1-10.5 3.7-1.7-3.7-5.2-8.6-6.2-14-1.1-5.9 0-12.2.4-18.4.3-4.9.9-9.8 1.6-14.7.8-5.7 4.2-9.9 8.1-13.9 8-8 7.2-18.7-1.6-25.5-1-.8-1.3-2.3-2.3-3.1-1.9-1.6-3.9-4-6.1-4.2-4.1-.5-5.9-2.6-6.8-6.1-.8-3.2-1.4-6.5-2.4-9.7-1.2-3.7-3.9-5.8-7.7-4.2-6.6 2.7-13.1 1.5-19.7.6-6.8-.9-12.8.3-18.2 4.7-3.2 2.6-6.9 1-7.5-3.6s-2-6.2-6.8-4.3c-1.8.7-4.4-.4-6.5-1.2-1.5-.5-2.7-2.2-4.2-2.6-7.9-2-12.8-8.6-19.5-12.3-2.2-1.1-4.7-1.6-7.2-1.5-4.6.2-7.4-2-9.7-5.7-2-3.4-4-7.8-7.1-9.2-2.4-1.1-6.5 1.9-11 3.5 7.2-6.4-.6-10.9-.7-16.8l-4.1.3c0-.7.2-1.4.5-2 5.6-7.4 3.2-15.1 1.1-22.9l-7.1-25.8c-.4-1.9-1.1-3.8-2-5.6C48.8 110.4 48.1 97 50 83c.8-5.9.5-12 .3-18-.1-2.9.9-3.8 3.6-4 9-.7 8.8-.9 11-9.5 2.3-9 7.3-15.2 17-17.7 1.2-.3 2.4-.8 3.5-1.4 33.8-5.7 68.5 1.4 97.3 19.9 32.1 21.2 53.9 54.8 60.1 92.8 2.6 16.9 2.1 34.1 4.6 51s8.7 34.1 21.9 45c17.5 14.4 42.6 11.2 65 14 29.1 3.6 40.6 9.9 47.9 14.6 17.9 11.5 29.7 23.1 42.1 38.2 9.3 11.4 25.5 16.2 39.2 21.6 4.4 1.5 8.9 2.6 13.4 3.2-.7 3-2.2 5.7-4.3 7.8-.6.5-1.1 1.2-1.4 2-.4 3-1.9 6.9-.5 8.7s5.9 2.1 8.4 1.2c4.1-1.5 6.9-2.2 7.9 3.1.1.4.6.8.9 1.1 4.6 4.6 6.4 12.6 4 18.1h0z"/></g><path d="M54.8 125.4c.4 6.9 1.4 13.8.9 20.6-.4 6.4-3.5 12.7-3.4 19s-2.9 11-4.4 16.4c-1.2 4-4.1 7.5-6.4 11.1-.2.3-1.2.2-3.5.5 14-21.2 17.6-43.8 15.4-67.6h1.4z" fill="#4e6dd9"/><g class="city" id="klp"> <path d="M61.1 113.5l-7.6-9.3c-1.7-2-3.2-4.2-4.6-6.4-4-6.5-2-14.9 4.4-18.9 1.2-.8 2.6-1.3 4-1.7 5.9-1.4 11 .2 14.7 4.8 3.7 4.7 4.3 10 1.3 15.2-2 3.2-4.2 6.4-6.7 9.3-1.6 2.4-3.5 4.6-5.5 7h0z" class="N"/> <text transform="translate(58.574 125.34)" class="O P Q">Klaipėda</text> <circle cx="61.1" cy="90.6" r="11" class="R"/> <g class="popup"> <path d="M115.1 101.6H7.2A7.17 7.17 0 0 1 0 94.4V36.6a7.17 7.17 0 0 1 7.2-7.2H115a7.17 7.17 0 0 1 7.2 7.2v57.8c.1 4-3.2 7.2-7.1 7.2z" class="N"/> <text transform="translate(20.422 48.432)" class="S T">Population:</text> <text transform="translate(25.393 80.213)" class="O U">149 157</text> </g></g><g class="city" id="trg"><path d="M165.3 196l-7.6-9.3c-1.7-2.1-3.2-4.2-4.6-6.4-4-6.5-2-14.9 4.4-18.9 1.2-.8 2.6-1.3 4-1.7 5.9-1.4 11 .2 14.7 4.8s4.3 10 1.3 15.2c-2 3.2-4.2 6.4-6.7 9.3-1.6 2.4-3.6 4.6-5.5 7h0z" class="N"/><text transform="translate(137.494 208.86)" class="O P Q">Tauragė</text><circle cx="165.2" cy="173.1" r="11" class="R"/><g class="popup"><path d="M219.2 184.1H111.4a7.17 7.17 0 0 1-7.2-7.2v-57.8a7.17 7.17 0 0 1 7.2-7.2h107.8a7.17 7.17 0 0 1 7.2 7.2v57.8a7.17 7.17 0 0 1-7.2 7.2z" class="N"/><text transform="translate(124.582 130.962)" class="S T">Population:</text><text transform="translate(136.696 162.743)" class="O U">21 516</text></g></g><g class="city" id="alt"><path d="M333.1 341.7l-7.5-9.3c-1.7-2-3.2-4.2-4.6-6.4-4-6.5-2-14.9 4.4-18.9 1.2-.8 2.6-1.3 4-1.7 5.9-1.4 11 .2 14.7 4.8s4.3 10 1.3 15.2c-2 3.2-4.2 6.4-6.7 9.3-1.7 2.4-3.6 4.6-5.6 7h0z" class="N"/><text transform="translate(313.454 353.92)" class="O P Q">Alytus</text><circle cx="333.2" cy="318.8" r="11" class="R"/><g class="popup"><path d="M387.1 329.8H279.2a7.17 7.17 0 0 1-7.2-7.2v-57.8a7.17 7.17 0 0 1 7.2-7.2H387a7.17 7.17 0 0 1 7.2 7.2v57.8c.1 4-3.1 7.2-7.1 7.2z" class="N"/><text transform="translate(292.446 276.642)" class="S T">Population:</text><text transform="translate(297.948 308.423)" class="O U">49 888</text></g></g><g class="city" id="vln"><path d="M447 290.3l-7.5-9.3c-1.7-2.1-3.2-4.2-4.6-6.4-4-6.5-2-14.9 4.4-18.9 1.2-.8 2.6-1.3 4-1.7 5.9-1.4 11 .2 14.7 4.8 3.7 4.7 4.3 10 1.3 15.2-2 3.2-4.3 6.4-6.7 9.3l-5.6 7z" class="N"/><text transform="translate(425.804 304.84)" class="O P Q">Vilnius</text><circle cx="447" cy="267.4" r="11" class="R"/><g class="popup"><path d="M500.9 278.1H393.1a7.17 7.17 0 0 1-7.2-7.2v-57.8a7.17 7.17 0 0 1 7.2-7.2h107.8a7.17 7.17 0 0 1 7.2 7.2v57.8c0 3.9-3.2 7.2-7.2 7.2z" class="N"/><text transform="translate(406.284 224.902)" class="S T">Population:</text><text transform="translate(409.411 256.683)" class="O U">587 581</text></g></g><defs > <path id="B" d="M55.7 146c-.4 6.4-3.5 12.7-3.4 19s-2.9 11-4.4 16.4c-1.1 4-4.1 7.5-6.4 11.1-.2.3-1.2.2-3.5.5 14-21.2 17.6-43.8 15.4-67.6l1.5.1c.3 6.7 1.3 13.6.8 20.5h0z"/></defs></svg>
 
                 <svg id="lt-map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 588.6 419.1" xmlns:v="https://vecta.io/nano"><style><![CDATA[.N{fill:#ffd762}.O{font-family:montserrat-black,sans-serif}.P{fill:#fafafc}.Q{font-size:12px}.R{fill:#ffc43b}.S{font-family:montserrat,sans-serif}.T{font-size:14px}.U{font-size:19px}]]></style><g fill="#6281ef"> <use xlink:href="#B"/> <path d="M588.6 194.5c-1.7 1.6-3.1 3.9-5.1 4.5-6.2 1.8-9.7 5.4-10.4 11.9-.2 1.7-.5 3.3-1 4.9-.8 2.8-2.5 3.7-5.3 2.5-4-1.7-7.6-4.7-12.4-1-1.4 1.1-5-.7-7.6-1.3-7-1.6-10.8 1.3-11.5 8.5-.2 3.1-.9 6.2-1.9 9.1-4.5 11.5-11.5 15.7-23.8 14.3-4.7-.5-8.1.3-9.8 5.3-.7 1.9-2.8 3.3-3.9 5.1-1.3 2.2-3.4 4.8-3.1 6.9.3 3 0 5.3-1.8 7.2-.4.4-.8.7-1.2 1-1 .7-1.6 1.7-1.8 2.9-.1 8-1.2 16.3.2 24 1.6 8.8 1.9 11-5.6 15.9-4.5 2.9-4.7 7.6-4.9 11.9-.1 1.6-.3 3.2-.7 4.8-.7 3-2.2 5.7-4.3 7.8-.6.5-1.1 1.2-1.4 2-.4 3-1.9 6.9-.5 8.7s5.9 2.1 8.4 1.2c4.1-1.5 6.9-2.2 7.9 3.1.1.4.6.8.9 1.1 4.4 4.3 6.2 12.4 3.9 17.8-.3.7-.9 1.8-1.5 1.9-6.2 1.3-12.2 5.7-18.9 2-2.7-1.5-4.9-2.8-2.1-6.5 1.5-2 1.8-5.1 2.6-7.7l1.1-.5c-.9-1.4-1.8-2.7-2.8-4.1-5.9-8.1-5.5-7.6-13.1-1.1-2.5 2.1-7.5 2.3-11.1 1.8-7.1-.9-7-1.2-9.3 5.8-1.1 3.5-2.8 6.7-5 9.6-3 3.9-7.2 5-12.1 3.1-2.6-1.1-5.4-1.7-8.2-1.9-8.4-.3-13.7 7.2-11 15.1.9 2.5 2.1 5.1 2 7.6-.3 2.3-1.6 4.4-3.5 5.8-2.2 1.2-5.3 2-7.5-1.3-.7-1-3-1.3-4.5-1.1-8.7 1.1-14.3 7.3-20.5 12.5-6.4 5.4-13.8 4-17.9-3.3-2.6-4.6-6.1-6.1-10.9-3.6-5.8 3-11.3 4.8-17.5 1.1-.9-.4-1.9-.4-2.9-.1l-23.1 6.4c-5.2 1.5-16.7-5.9-17.4-11.3-.1-.8 0-1.7.4-2.4 5.3-9.5 2-19.1-3-26.4-4-5.8-8.4-13.2-16.9-15.3-2.9-.7-5.6-2.9-8.1-4.8-3-2.2-5.6-4.8-9.8-3.1-.5.2-2.8-1.8-2.8-2.8 0-5.9-5.5-7.2-8.5-10.4-1.8-1.9-5.5-2.6-8.3-2.5-3.1.2-6.1 2.1-10.5 3.7-1.7-3.7-5.2-8.6-6.2-14-1.1-5.9 0-12.2.4-18.4.3-4.9.9-9.8 1.6-14.7.8-5.7 4.2-9.9 8.1-13.9 8-8 7.2-18.7-1.6-25.5-1-.8-1.3-2.3-2.3-3.1-1.9-1.6-3.9-4-6.1-4.2-4.1-.5-5.9-2.6-6.8-6.1-.8-3.2-1.4-6.5-2.4-9.7-1.2-3.7-3.9-5.8-7.7-4.2-6.6 2.7-13.1 1.5-19.7.6-6.8-.9-12.8.3-18.2 4.7-3.2 2.6-6.9 1-7.5-3.6s-2-6.2-6.8-4.3c-1.8.7-4.4-.4-6.5-1.2-1.5-.5-2.7-2.2-4.2-2.6-7.9-2-12.8-8.6-19.5-12.3-2.2-1.1-4.7-1.6-7.2-1.5-4.6.2-7.4-2-9.7-5.7-2-3.4-4-7.8-7.1-9.2-2.4-1.1-6.5 1.9-11 3.5 7.2-6.4-.6-10.9-.7-16.8l-4.1.3c0-.7.2-1.4.5-2 5.6-7.4 3.2-15.1 1.1-22.9l-7.1-25.8c-.4-1.9-1.1-3.8-2-5.6-7.8-12.3-8.5-25.7-6.6-39.7.8-5.9.5-12 .3-18-.1-2.9.9-3.8 3.6-4 9-.7 8.8-.9 11-9.5 2.3-9 7.3-15.2 17-17.7 1.2-.3 2.4-.8 3.5-1.4a72.18 72.18 0 0 0 7.7-5.6c3.7-2.9 7.3-4.9 12.2-4.9a17.83 17.83 0 0 0 7.5-2l32.1-15c2.1-.9 5.7-1 7.4.2 5.5 4 11.3 3 17.3 2.7 5.5-.3 11.1-1 16.4-.3 3.9.6 7.7 2.8 11 5.2 2.6 1.8 4.7 2.8 7.7 1.4 5.2-2.6 10.6-4.8 15.6-7.7 3.7-2.1 6.3-1.7 8.1 2.1 1.2 2.5 1.9 5.5 3.5 7.7 1.8 2.4 4.3 5.8 6.6 5.8 2.9 0 6.6-2.3 8.6-4.7 3.9-4.7 10-7.2 15.8-4.9 3.9 1.5 7.6 3.8 11.6 4.6 3.3.7 7-.1 10.4-.6 2.4-.3 4.7-.9 7-1.4 1.2-.3 2.4-.5 3.6-.7 1-.1 2.8.4 3.1 1.1 2 4.9 5.7 3.2 9.3 2.8 7.8-.9 14.4 2.2 20.7 6.6 3.5 2.5 7.8 4.8 11.9 5.1 3.4.2 7.1-2.4 10.5-4.1s6.4-2.2 9.3.4c7.2 6.6 13.3 4.1 19.9-3.9 5.1-6.2 9.7-12.7 17.8-15.3 1.1-.4 2.2-1.2 3.3-1.2 4.1.3 6.4-1.6 7.1-5.9h1.4c1.4 3.9 3.7 7.7 4.2 11.6 1.3 10.3 8 18.1 12 27.2 1.1 2.5 5.3 4.5 8.4 5.2 7.8 1.9 15.7 3.1 23.6 4.2 6.5.9 13.1 1.7 19.6 2 3.4.2 4.8 1.5 6.2 4.5s3.9 5.5 6 8.1c1.3 1.3 2.6 2.5 4.1 3.7l18.1 16c8.9 8.1 19.2 15 24 26.9 5 12.5 16.4 16.4 27.7 20 6.2 2 8.5 3.8 7.4 10.2-.7 3.5-2.1 6.9-4 10-2.2 3.7-4.7 7-2.4 11.5a3.31 3.31 0 0 1 0 2.4c-2.1 5-4 10.1-6.6 14.8-4 7.3-1.7 10.8 7.8 11.3 5.8.4 11.5.4 17.2 1.2 1.9.3 3.6 2.5 5.5 3.9h0z"/></g><path d="M491.9 374.7c-.3.7-.9 1.8-1.5 1.9-6.2 1.3-12.2 5.7-18.9 2-2.7-1.5-4.9-2.8-2.1-6.5 1.5-2 1.8-5.1 2.6-7.7l1.1-.5c-.9-1.4-1.8-2.7-2.8-4.1-5.9-8.1-5.5-7.6-13.1-1.1-2.5 2.1-7.5 2.3-11.1 1.8-7.1-.9-7-1.2-9.3 5.8-1.1 3.5-2.8 6.7-5 9.6-3 3.9-7.2 5-12.1 3.1-2.6-1.1-5.4-1.7-8.2-1.9-8.4-.3-13.7 7.2-11 15.1.9 2.5 2.1 5.1 2 7.6-.3 2.3-1.6 4.4-3.5 5.8-2.2 1.2-5.3 2-7.5-1.3-.7-1-3-1.3-4.5-1.1-8.7 1.1-14.3 7.3-20.5 12.5-6.4 5.4-13.8 4-17.9-3.3-2.6-4.6-6.1-6.1-10.9-3.6-5.8 3-11.3 4.8-17.5 1.1-.9-.4-1.9-.4-2.9-.1l-23.1 6.4c-5.2 1.5-16.7-5.9-17.4-11.3-.1-.8 0-1.7.4-2.4 5.3-9.5 2-19.1-3-26.4-4-5.8-8.4-13.2-16.9-15.3-2.9-.7-5.6-2.9-8.1-4.8-3-2.2-5.6-4.8-9.8-3.1-.5.2-2.8-1.8-2.8-2.8 0-5.9-5.5-7.2-8.5-10.4-1.8-1.9-5.5-2.6-8.3-2.5-3.1.2-6.1 2.1-10.5 3.7-1.7-3.7-5.2-8.6-6.2-14-1.1-5.9 0-12.2.4-18.4.3-4.9.9-9.8 1.6-14.7.8-5.7 4.2-9.9 8.1-13.9 8-8 7.2-18.7-1.6-25.5-1-.8-1.3-2.3-2.3-3.1-1.9-1.6-3.9-4-6.1-4.2-4.1-.5-5.9-2.6-6.8-6.1-.8-3.2-1.4-6.5-2.4-9.7-1.2-3.7-3.9-5.8-7.7-4.2-6.6 2.7-13.1 1.5-19.7.6-6.8-.9-12.8.3-18.2 4.7-3.2 2.6-6.9 1-7.5-3.6s-2-6.2-6.8-4.3c-1.8.7-4.4-.4-6.5-1.2-1.5-.5-2.7-2.2-4.2-2.6-7.9-2-12.8-8.6-19.5-12.3-2.2-1.1-4.7-1.6-7.2-1.5-4.6.2-7.4-2-9.7-5.7-2-3.4-4-7.8-7.1-9.2-2.4-1.1-6.5 1.9-11 3.5 7.2-6.4-.6-10.9-.7-16.8l-4.1.3c0-.7.2-1.4.5-2 5.6-7.4 3.2-15.1 1.1-22.9l-7.1-25.8c-.4-1.9-1.1-3.8-2-5.6C48.8 110.4 48.1 97 50 83c.8-5.9.5-12 .3-18-.1-2.9.9-3.8 3.6-4 9-.7 8.8-.9 11-9.5 2.3-9 7.3-15.2 17-17.7 1.2-.3 2.4-.8 3.5-1.4a72.18 72.18 0 0 0 7.7-5.6c3.7-2.9 7.3-4.9 12.2-4.9 2.6-.2 5.2-.9 7.6-2.1l32.1-15c2.1-.9 5.7-1 7.4.2 5.5 4 11.3 3 17.3 2.7 5.5-.3 11.1-1 16.4-.3 3.9.6 7.7 2.8 11 5.2 2.6 1.8 4.7 2.8 7.7 1.4 5.2-2.6 10.6-4.8 15.6-7.7 3.7-2.1 6.3-1.7 8.1 2.1 1.2 2.5 1.9 5.5 3.5 7.7 1.8 2.4 4.3 5.8 6.6 5.8 2.9 0 6.6-2.3 8.6-4.7 3.9-4.7 10-7.2 15.8-4.9 3.9 1.5 7.6 3.8 11.6 4.6 3.3.7 7-.1 10.4-.6 2.4-.3 4.7-.9 7-1.4 7.4 8.9 13.2 19 16.9 30 9.7 28.6 5.2 59.9 7.8 90 1.8 21 8.2 43.3 24.9 56.2 19.6 15.2 37.7 15.4 61.8 21.4 17.2 4.4 36.2 12.3 51.4 26.3l36.1 33.4c-.4.4-.8.7-1.2 1-1 .7-1.6 1.7-1.8 2.9-.1 8-1.2 16.3.2 24 1.6 8.8 1.9 11-5.6 15.9-4.5 2.9-4.7 7.6-4.9 11.9-.1 1.6-.3 3.2-.7 4.8-.7 3-2.2 5.7-4.3 7.8-.6.5-1.1 1.2-1.4 2-.4 3-1.9 6.9-.5 8.7s5.9 2.1 8.4 1.2c4.1-1.5 6.9-2.2 7.9 3.1.1.4.6.8.9 1.1 4.6 4.6 6.3 12.7 4 18.1h0z" fill="#4567de"/><g fill="#3356ce"> <use xlink:href="#B"/> <path d="M491.9 374.7c-.3.7-.9 1.8-1.5 1.9-6.2 1.3-12.2 5.7-18.9 2-2.7-1.5-4.9-2.8-2.1-6.5 1.5-2 1.8-5.1 2.6-7.7l1.1-.5c-.9-1.4-1.8-2.7-2.8-4.1-5.9-8.1-5.5-7.6-13.1-1.1-2.5 2.1-7.5 2.3-11.1 1.8-7.1-.9-7-1.2-9.3 5.8-1.1 3.5-2.8 6.7-5 9.6-3 3.9-7.2 5-12.1 3.1-2.6-1.1-5.4-1.7-8.2-1.9-8.4-.3-13.7 7.2-11 15.1.9 2.5 2.1 5.1 2 7.6-.3 2.3-1.6 4.4-3.5 5.8-2.2 1.2-5.3 2-7.5-1.3-.7-1-3-1.3-4.5-1.1-8.7 1.1-14.3 7.3-20.5 12.5-6.4 5.4-13.8 4-17.9-3.3-2.6-4.6-6.1-6.1-10.9-3.6-5.8 3-11.3 4.8-17.5 1.1-.9-.4-1.9-.4-2.9-.1l-23.1 6.4c-5.2 1.5-16.7-5.9-17.4-11.3-.1-.8 0-1.7.4-2.4 5.3-9.5 2-19.1-3-26.4-4-5.8-8.4-13.2-16.9-15.3-2.9-.7-5.6-2.9-8.1-4.8-3-2.2-5.6-4.8-9.8-3.1-.5.2-2.8-1.8-2.8-2.8 0-5.9-5.5-7.2-8.5-10.4-1.8-1.9-5.5-2.6-8.3-2.5-3.1.2-6.1 2.1-10.5 3.7-1.7-3.7-5.2-8.6-6.2-14-1.1-5.9 0-12.2.4-18.4.3-4.9.9-9.8 1.6-14.7.8-5.7 4.2-9.9 8.1-13.9 8-8 7.2-18.7-1.6-25.5-1-.8-1.3-2.3-2.3-3.1-1.9-1.6-3.9-4-6.1-4.2-4.1-.5-5.9-2.6-6.8-6.1-.8-3.2-1.4-6.5-2.4-9.7-1.2-3.7-3.9-5.8-7.7-4.2-6.6 2.7-13.1 1.5-19.7.6-6.8-.9-12.8.3-18.2 4.7-3.2 2.6-6.9 1-7.5-3.6s-2-6.2-6.8-4.3c-1.8.7-4.4-.4-6.5-1.2-1.5-.5-2.7-2.2-4.2-2.6-7.9-2-12.8-8.6-19.5-12.3-2.2-1.1-4.7-1.6-7.2-1.5-4.6.2-7.4-2-9.7-5.7-2-3.4-4-7.8-7.1-9.2-2.4-1.1-6.5 1.9-11 3.5 7.2-6.4-.6-10.9-.7-16.8l-4.1.3c0-.7.2-1.4.5-2 5.6-7.4 3.2-15.1 1.1-22.9l-7.1-25.8c-.4-1.9-1.1-3.8-2-5.6C48.8 110.4 48.1 97 50 83c.8-5.9.5-12 .3-18-.1-2.9.9-3.8 3.6-4 9-.7 8.8-.9 11-9.5 2.3-9 7.3-15.2 17-17.7 1.2-.3 2.4-.8 3.5-1.4 33.8-5.7 68.5 1.4 97.3 19.9 32.1 21.2 53.9 54.8 60.1 92.8 2.6 16.9 2.1 34.1 4.6 51s8.7 34.1 21.9 45c17.5 14.4 42.6 11.2 65 14 29.1 3.6 40.6 9.9 47.9 14.6 17.9 11.5 29.7 23.1 42.1 38.2 9.3 11.4 25.5 16.2 39.2 21.6 4.4 1.5 8.9 2.6 13.4 3.2-.7 3-2.2 5.7-4.3 7.8-.6.5-1.1 1.2-1.4 2-.4 3-1.9 6.9-.5 8.7s5.9 2.1 8.4 1.2c4.1-1.5 6.9-2.2 7.9 3.1.1.4.6.8.9 1.1 4.6 4.6 6.4 12.6 4 18.1h0z"/></g><path d="M54.8 125.4c.4 6.9 1.4 13.8.9 20.6-.4 6.4-3.5 12.7-3.4 19s-2.9 11-4.4 16.4c-1.2 4-4.1 7.5-6.4 11.1-.2.3-1.2.2-3.5.5 14-21.2 17.6-43.8 15.4-67.6h1.4z" fill="#4e6dd9"/><g class="city" id="klp"> <path d="M61.1 113.5l-7.6-9.3c-1.7-2-3.2-4.2-4.6-6.4-4-6.5-2-14.9 4.4-18.9 1.2-.8 2.6-1.3 4-1.7 5.9-1.4 11 .2 14.7 4.8 3.7 4.7 4.3 10 1.3 15.2-2 3.2-4.2 6.4-6.7 9.3-1.6 2.4-3.5 4.6-5.5 7h0z" class="N"/> <text transform="translate(58.574 125.34)" class="O P Q">Klaipėda</text> <circle cx="61.1" cy="90.6" r="11" class="R"/> <g class="popup"> <path d="M115.1 101.6H7.2A7.17 7.17 0 0 1 0 94.4V36.6a7.17 7.17 0 0 1 7.2-7.2H115a7.17 7.17 0 0 1 7.2 7.2v57.8c.1 4-3.2 7.2-7.1 7.2z" class="N"/> <text transform="translate(20.422 48.432)" class="S T">Population:</text> <text transform="translate(25.393 80.213)" class="O U">149 157</text> </g></g><g class="city" id="trg"><path d="M165.3 196l-7.6-9.3c-1.7-2.1-3.2-4.2-4.6-6.4-4-6.5-2-14.9 4.4-18.9 1.2-.8 2.6-1.3 4-1.7 5.9-1.4 11 .2 14.7 4.8s4.3 10 1.3 15.2c-2 3.2-4.2 6.4-6.7 9.3-1.6 2.4-3.6 4.6-5.5 7h0z" class="N"/><text transform="translate(137.494 208.86)" class="O P Q">Tauragė</text><circle cx="165.2" cy="173.1" r="11" class="R"/><g class="popup"><path d="M219.2 184.1H111.4a7.17 7.17 0 0 1-7.2-7.2v-57.8a7.17 7.17 0 0 1 7.2-7.2h107.8a7.17 7.17 0 0 1 7.2 7.2v57.8a7.17 7.17 0 0 1-7.2 7.2z" class="N"/><text transform="translate(124.582 130.962)" class="S T">Population:</text><text transform="translate(136.696 162.743)" class="O U">21 516</text></g></g><g class="city" id="alt"><path d="M333.1 341.7l-7.5-9.3c-1.7-2-3.2-4.2-4.6-6.4-4-6.5-2-14.9 4.4-18.9 1.2-.8 2.6-1.3 4-1.7 5.9-1.4 11 .2 14.7 4.8s4.3 10 1.3 15.2c-2 3.2-4.2 6.4-6.7 9.3-1.7 2.4-3.6 4.6-5.6 7h0z" class="N"/><text transform="translate(313.454 353.92)" class="O P Q">Alytus</text><circle cx="333.2" cy="318.8" r="11" class="R"/><g class="popup"><path d="M387.1 329.8H279.2a7.17 7.17 0 0 1-7.2-7.2v-57.8a7.17 7.17 0 0 1 7.2-7.2H387a7.17 7.17 0 0 1 7.2 7.2v57.8c.1 4-3.1 7.2-7.1 7.2z" class="N"/><text transform="translate(292.446 276.642)" class="S T">Population:</text><text transform="translate(297.948 308.423)" class="O U">49 888</text></g></g><g class="city" id="vln"><path d="M447 290.3l-7.5-9.3c-1.7-2.1-3.2-4.2-4.6-6.4-4-6.5-2-14.9 4.4-18.9 1.2-.8 2.6-1.3 4-1.7 5.9-1.4 11 .2 14.7 4.8 3.7 4.7 4.3 10 1.3 15.2-2 3.2-4.3 6.4-6.7 9.3l-5.6 7z" class="N"/><text transform="translate(425.804 304.84)" class="O P Q">Vilnius</text><circle cx="447" cy="267.4" r="11" class="R"/><g class="popup"><path d="M500.9 278.1H393.1a7.17 7.17 0 0 1-7.2-7.2v-57.8a7.17 7.17 0 0 1 7.2-7.2h107.8a7.17 7.17 0 0 1 7.2 7.2v57.8c0 3.9-3.2 7.2-7.2 7.2z" class="N"/><text transform="translate(406.284 224.902)" class="S T">Population:</text><text transform="translate(409.411 256.683)" class="O U">587 581</text></g></g><defs > <path id="B" d="M55.7 146c-.4 6.4-3.5 12.7-3.4 19s-2.9 11-4.4 16.4c-1.1 4-4.1 7.5-6.4 11.1-.2.3-1.2.2-3.5.5 14-21.2 17.6-43.8 15.4-67.6l1.5.1c.3 6.7 1.3 13.6.8 20.5h0z"/></defs></svg>
                 <p class="photo-desc"><b>Figure 7.</b>Cities that collaborates with our team </p>
+
                 <p class="photo-desc"><b>Figure 7.</b> Cities that collaborates with our team </p>
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
                     Each of these cities had the possibility to decide where they would like to position these 13 stops. Mainly they were placed in the central area of each city so that they would attract as many people as possible. The most common mode of implementation
+
                     Each of these cities had the possibility to decide where they would like to position these 13 stops. Mainly, they were placed in the central area of each city so that they would attract as many people as possible. The most common mode of implementation
                     of this project was to print out hundreds of large stickers and stick them on throughout the city, however, one city also put up stainless steel plates on benches. Spots like public transport, schools, cafés and etc. were chosen to
+
                     of this project was to print out hundreds of large stickers and stick them on throughout the city, however, one city also put up stainless steel plates on benches. Spots like public transport, schools, cafés, etc. were chosen to
 
                     place the stickers since it <b>maximizes the spread of the project</b>.
 
                     place the stickers since it <b>maximizes the spread of the project</b>.
 
                 </p>
 
                 </p>
Line 130: Line 130:
  
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
                     ‘The 6th SynBio sense’ is included in our other Human Practices project - children's colouring book about life sciences <a href="#colouring-book">‘The (Un)hidden Code of Life’</a>. The goal for combining these two learning activities
+
                     ‘The 6th SynBio sense’ is included in our other Human Practices project - <b>children's colouring book</b> about life sciences <a href="#colouring-book">‘The (Un)hidden Code of Life’</a> (Fig. 8). The goal for combining these two learning activities
                     was to create a mutual learning environment for primary school children and allow them to interact with life sciences directly. Even though some of the information might be too advanced for this audience, we believe that seeing and
+
                     was to create a <b>mutual learning</b> environment for primary school children and allow them to interact with life sciences directly. Even though some of the information might be too advanced for this audience, we believe that seeing and
 
                     analyzing these 3D models can be a great start for them to learn about science.
 
                     analyzing these 3D models can be a great start for them to learn about science.
 
                 </p>
 
                 </p>
Line 141: Line 141:
 
                     We were also happy to <b>collaborate with other iGEM teams</b> to involve more people in this project. We participated in the <a href="https://2020.igem.org/Team:Vilnius-Lithuania/Collaborations">International Postcard Project</a>                    curated by the iGEM Team Düsseldorf. Our team created a postcard that describes our lab project, invites other teams to follow our journey until Giant Jamboree and also includes a sneak peek to ‘The 6th SynBio sense’ project.
 
                     We were also happy to <b>collaborate with other iGEM teams</b> to involve more people in this project. We participated in the <a href="https://2020.igem.org/Team:Vilnius-Lithuania/Collaborations">International Postcard Project</a>                    curated by the iGEM Team Düsseldorf. Our team created a postcard that describes our lab project, invites other teams to follow our journey until Giant Jamboree and also includes a sneak peek to ‘The 6th SynBio sense’ project.
 
                 </p>
 
                 </p>
                <div class="photos-wrapper full-width">
+
 
                    <div class="photos photo-grid one-part"><img src="https://static.igem.org/mediawiki/2020/d/d4/T--Vilnius-Lithuania--ar-action.png"></div>
+
                </div>
+
                <p class="photo-desc"><b>Figure 9.</b>Model on postcard that was used for collaboration with other iGEM teams</p>
+
 
                 <div class="h3">CREATE YOUR OWN AR SCENE</div>
 
                 <div class="h3">CREATE YOUR OWN AR SCENE</div>
 
                 <p class="content-paragraph">
 
                 <p class="content-paragraph">
Line 160: Line 157:
 
                     <li>Downloading the model from 3D resource websites or creating your own with 3D modelling software;</li>
 
                     <li>Downloading the model from 3D resource websites or creating your own with 3D modelling software;</li>
 
                     <li>Converting or exporting (if you design it yourself) the model to .glb format;</li>
 
                     <li>Converting or exporting (if you design it yourself) the model to .glb format;</li>
                     <li>Uploading it on our website;</li>
+
                     <li>Uploading it to our website;</li>
 
                     <li>Writing the title and description for your AR scene;</li>
 
                     <li>Writing the title and description for your AR scene;</li>
 
                     <li>Setting up the 3D model so that it would be scaled, positioned and rotated correctly according to the marker.</li>
 
                     <li>Setting up the 3D model so that it would be scaled, positioned and rotated correctly according to the marker.</li>
Line 190: Line 187:
 
                 </ul>
 
                 </ul>
 
<div class="h4">3D modelling </div>
 
<div class="h4">3D modelling </div>
<p class="content-paragraph">Visually compelling learning material makes the process a few times more effective and can spark interest in the subject. Yet, in order to communicate science in particular, the provided information has to not only be interesting but also exclusively accurate. Therefore, we chose to use 3D models instead of 2D art, because this format can provide much more insight, help understand the material better all without losing the visual appeal.</p>
+
<p class="content-paragraph"><b>Visually compelling</b> learning material makes the process a few times more effective and can spark interest in the subject. Yet, in order to communicate science in particular, the provided information has to not only be interesting but also <b>exclusively accurate</b>. Therefore, we chose to use <b>3D models</b> instead of 2D art, because this format can provide much more insight, help understand the material better all without losing the visual appeal.</p>
<p class="content-paragraph">In the beginning, we wanted to use 3D models from popular databases, such as sketchfab, for our project. But we were quick to realize that there was a lack of visuals specifically tailored to educate the public on science. They were either overly simplified or in contrast, only available in databases used for protein mapping and complex calculations. Therefore a few of our team members decided to delve deeper into the process of creating a 3D model from scratch. To make the models more accurate, we used some of the protein models from databases. By using an open source software Blender and combining our knowledge of science, animation and graphic design we were able to produce high quality informative models and use them to augment reality.
+
<p class="content-paragraph">In the beginning, we wanted to use 3D models from popular databases, such as Sketchfab, for our project. But we were quick to realize that there was a lack of visuals specifically <b>tailored to educate</b> the public on science. They were either overly simplified or in contrast, only available in databases used for protein mapping and complex calculations. Therefore a few of our team members decided to delve deeper into the process of creating a 3D model from scratch. To make the models more accurate, we used some of the <b>protein models</b> from databases. By using an open source software <b>Blender</b> and combining our knowledge of science, animation and graphic design we were able to produce high quality informative models and use them to <b>augment reality</b>.
 
  </p>
 
  </p>
 
<div class="h4">Augmented Reality in Web</div>
 
<div class="h4">Augmented Reality in Web</div>
                 <p class="content-paragraph">Our main requirement while developing this project was to create a web app instead of a native app that you have to download from applications like Google Play or App Store. It was important for us, because it allows the user to access
+
                 <p class="content-paragraph">Our main requirement while developing this project was to create a <b>web app</b> instead of a native app that you have to download from applications like Google Play or App Store. It was important for us, because it allows the user to access
                     ‘The 6th SynBio Sense’ directly from their default browser rapidly instead of having to spend time downloading it. To do this we had to do an extensive research about WebAR since it is relatively new technology compared to Augmented
+
                     ‘The 6th SynBio Sense’ directly from their default browser <b>rapidly</b> instead of having to spend time downloading it. To do this we had to do an extensive research about <b>WebAR</b> since it is relatively new technology compared to Augmented
 
                     Reality in native applications.
 
                     Reality in native applications.
 
                 </p>
 
                 </p>
                 <p class="content-paragraph">Another problem that also came up is the lack of well-documented examples or already implemented platforms that we could use for free. Applications like Pokémon Go, Snapchat and others led to rapid development of Augmented Reality in native
+
                 <p class="content-paragraph">Another problem that also came up is the <b>lack of well-documented examples</b> or already implemented platforms that we could use for free. Applications like Pokémon Go, Snapchat and others led to rapid development of Augmented Reality in native
 
                     apps, therefore has all of those things. WebAR, on the other hand, is only now accelerating into new heights. When we started developing this project we tried numerous examples and modes of implementation, yet most of these did not
 
                     apps, therefore has all of those things. WebAR, on the other hand, is only now accelerating into new heights. When we started developing this project we tried numerous examples and modes of implementation, yet most of these did not
 
                     work on most of the modern browsers or operating systems as well as were not well-documented.
 
                     work on most of the modern browsers or operating systems as well as were not well-documented.
 
                 </p>
 
                 </p>
                 <p class="content-paragraph">Our final choice was using Three.JS - JavaScript library that creates and displays 3D graphics and its extension threex-artoolkit that builds Augmented Reality scenes. Because there were no projects similar to ours, we had to build everything
+
                 <p class="content-paragraph">Our final choice was using <b>Three.JS</b> - JavaScript library that creates and displays 3D graphics and its extension threex-artoolkit that builds Augmented Reality scenes. Because there were no projects similar to ours, we had to build everything
                     from many different examples and some of the code entirely from scratch. It was a great learning experience for us that drove our interest in AR and VR technologies even more.
+
                     from many different examples and some of the code entirely from scratch. It was a great learning experience for us that drove our interest in <b>AR and VR technologies</b> even more.
 
                 </p>
 
                 </p>
 
                 <a href="https://github.com/kvainiute/igem-vilnius-2020-ar" target="_blank"><button>GitHub</button></a>
 
                 <a href="https://github.com/kvainiute/igem-vilnius-2020-ar" target="_blank"><button>GitHub</button></a>
 
                 <div class="h4">Augmented Reality markers</div>
 
                 <div class="h4">Augmented Reality markers</div>
                 <p class="content-paragraph">In order to create robust and easily recognized markers by any device camera, we had to take into consideration black to white (B:W) ratio, edge sharpness and especially complexity of the inner illustration design. While designing inner
+
                 <p class="content-paragraph">In order to create <b>robust and easily recognized markers</b> by any device camera, we had to take into consideration black to white (B:W) ratio, edge sharpness and especially complexity of the inner illustration design. While designing inner
                     markers, we discovered that an asymmetrical illustration significantly increased AR marker's detectability and the user is able to scan the marker at any angle more successfully.
+
                     markers, we discovered that an <b>asymmetrical illustration</b> significantly increased AR marker's detectability and the user is able to scan the marker <b>at any angle</b> more successfully.
 
                 </p>
 
                 </p>
                 <p class="content-paragraph">Each AR scene has its own simplified illustration, which reflects what the user can expect from the marker. To attract people's attention, we have created colourful stickers with QR codes and AR markers, which has an intriguing title and
+
                 <p class="content-paragraph">Each AR scene has its own simplified illustration, which reflects what the user can expect from the marker. To attract people's attention, we have created colourful stickers with QR codes and AR markers (Fig. 9), which has an intriguing title and
 
                     a fun short fact.
 
                     a fun short fact.
 
                 </p>
 
                 </p>
Line 216: Line 213:
 
                     <div class="photos photo-grid two-part no-shadow"><img src="https://static.igem.org/mediawiki/2020/3/3e/T--Vilnius-Lithuania--ar-dnrmarker.png"><img src="https://static.igem.org/mediawiki/2020/c/c2/T--Vilnius-Lithuania--ar-dna.svg"></div>
 
                     <div class="photos photo-grid two-part no-shadow"><img src="https://static.igem.org/mediawiki/2020/3/3e/T--Vilnius-Lithuania--ar-dnrmarker.png"><img src="https://static.igem.org/mediawiki/2020/c/c2/T--Vilnius-Lithuania--ar-dna.svg"></div>
 
                 </div>
 
                 </div>
                 <p class="photo-desc"><b>Figure 10.</b>Augmented Reality markers and colourful stickers</p>
+
                 <p class="photo-desc"><b>Figure 9.</b>Augmented Reality markers and colourful stickers</p>
  
 
                 <div class="references beforeWave">
 
                 <div class="references beforeWave">

Latest revision as of 22:54, 18 December 2020

We are proud to present to you one of our biggest Human Practices projects this year - The 6th SynBio Sense. Why 6th, you ask? Well, each person learns about his or her environment through five senses: vision, hearing, smell, taste and touch. We wanted to dive deeper and introduce the sixth sense of seeing what is invisible to a naked eye - synthetic biology through the lens of Augmented Reality.

OVERVIEW

According to studies1, science education in different parts of the world has many problems, like the lack of motivation in students and mostly passive learning, which only consists of listening and writing. Research has shown2 that STEM students who demonstrated strong capabilities in this area have identified extracurricular activities such as childhood experiences as the main factor for their interest in this field. 'The 6th SynBio Sense' project seeks for that exact experience - to connect with future researchers through new and technologically advanced ways.

It is no secret that innovative technologies profoundly impact how we perceive and learn new information3. These days, where the education sector must keep up with the newest trends in this area, it is essential to provide tools for teachers to excite their students.

However, our focus did not stop with the education of young pupils - the still ongoing COVID-19 pandemic has heavily impacted the way that adults think about life sciences. Due to the interest of how viruses infect people, their testing procedures, and the development of vaccines, we thought that it was important to create a strong base of biology knowledge for all age groups.

Our way of reaching this goal was to use up-and-coming technology Augmented Reality (AR)(Fig. 1). Similarly to Virtual Reality (VR), this technology seeks to blur the lines between the digital and physical world3. However, instead of creating a separate reality as VR does, Augmented Reality complements our environment - or you could say augments it - by adding digital elements on top of it. Research done in 20194 has concluded that the usage of AR in mobile applications for learning purposes has increased students' attention span by 30.72% and overall experience by 14.43%.

Figure 1. The 6th SynBio Sense in action

While there are many ways to implement Augmented Reality, for our web application, we chose to use marker-based AR, where with a quick scan of a QR code and a custom-designed marker, you can experience the 6th sense of Synthetic Biology. The main idea was to create and implement 13 different 3D models that would depict the main themes of life sciences, such as DNA, protein translation, GFP, etc. Each of these models would then be placed in separate AR scenes that can be opened in 3 quick steps, explained later in the ‘Usage’ section.

The objective was to place these 13 stops with QR codes and AR markers (Fig. 2) in several cities of Lithuania as well as to collaborate with other iGEM teams and their projects.

Figure 2. QR codes and AR markers on stickers

USAGE

All 13 stops were distributed throughout the most popular city places and each one of them was designed in such a manner that it would be easy to use for everyone who has a smartphone in their pocket. Only three steps are required to be fully immersed into Augmented Reality scene (Fig. 3):

  1. Scan the QR code with your phone camera (or specific QR scanner app);
  2. Click ‘Allow’ in your browser when asked about camera usage permission;
  3. Scan the AR marker.

Figure 3.Three easy steps to experience Augmented Reality

When users finish these three steps, they can now examine the model. The next obvious step for us was to write descriptions for each of these models so that the users could also read about what they are seeing. This was also important because studies have shown that some adults prefer textual information rather than visual5. With the aim of attracting tourists and locals that do not speak Lithuanian, each description is available both in English and Lithuanian languages.

ACCESSIBILITY

To increase the usability of our website, we took several approaches: it was designed by conforming to the Web Content Accessibility Guidelines (WCAG), such as high colour contrast ratio for good text legibility and vibrant call-to-action buttons were placed at the bottom of the mobile screen, as it is easier for the user to press them compared to the upper corners. Also, we took into consideration people with dyslexia and implemented a unique typeface to improve readability6.

Keeping in mind people with low vision and those who better comprehend auditory information, we included audio recordings about the 3D models in previously mentioned languages. While most of these were recorded by our team member Liepa and instructor Povilas, we also invited some of the most distinguished scientists from Lithuania - dr. Urtė Neniškytė, dr. Linas Mažutis and prof. Aurelija Žvirblienė (Fig. 4). They were kind enough to not only help us to record some of these informational texts but also review them and make them even more understandable for the general public.

Figure 4. Lithuanian scientists, that contributed to 'The 6th SynBio Sense' project - Urtė Neniškytė, Linas Mažutis and Aurelija Žvirblienė (from right to left)

Although the technology that was used to develop this project is supported by most modern browsers, there are a few exceptions - Google Chrome and Mozilla Firefox on iOS devices. These browsers do not allow camera access, required for marker detection. To solve this problem, our solution was to create an additional option (Fig. 5) for users to analyze these 3D models without Augmented Reality implementation.

Figure 5. Accessibility and different features in our website

Another feature that seemed important in the light of the recent pandemic was the ability to examine all the stops without leaving the house. In the main menu, you can find a link (Fig. 6) that lets you download all markers that can be used in AR scenes (preferably printed out, but not necessary).

Figure 6. Feature that allows the user to examine all the stops without leaving the room

REALISATION & COLLABORATIONS

To spread our project as wide as possible, we decided to collaborate with various cities in our home country Lithuania, including densely and sparsely populated areas (Fig. 7). It was important for us to collaborate not only with the capital city Vilnius where we are from but also with smaller cities, whose habitants do not have as many choices for cultural and educational resources in their hometowns.

Klaipėda Population: 149 157 TauragėPopulation:21 516AlytusPopulation:49 888VilniusPopulation:587 581

Figure 7. Cities that collaborates with our team

Each of these cities had the possibility to decide where they would like to position these 13 stops. Mainly, they were placed in the central area of each city so that they would attract as many people as possible. The most common mode of implementation of this project was to print out hundreds of large stickers and stick them on throughout the city, however, one city also put up stainless steel plates on benches. Spots like public transport, schools, cafés, etc. were chosen to place the stickers since it maximizes the spread of the project.

‘The 6th SynBio sense’ is included in our other Human Practices project - children's colouring book about life sciences ‘The (Un)hidden Code of Life’ (Fig. 8). The goal for combining these two learning activities was to create a mutual learning environment for primary school children and allow them to interact with life sciences directly. Even though some of the information might be too advanced for this audience, we believe that seeing and analyzing these 3D models can be a great start for them to learn about science.

Figure 8.We incorporated 3D models in educational colouring book

We were also happy to collaborate with other iGEM teams to involve more people in this project. We participated in the International Postcard Project curated by the iGEM Team Düsseldorf. Our team created a postcard that describes our lab project, invites other teams to follow our journey until Giant Jamboree and also includes a sneak peek to ‘The 6th SynBio sense’ project.

CREATE YOUR OWN AR SCENE

While meeting up with the administrations of cities where we wanted to implement our project, we received several requests to add a few more AR scenes that would capture the link between biology and the city itself (might be famous scientists, local plants, etc.). From there, we thought: “Why don’t we create a tool that would allow anyone to create their own AR scene with no coding or 3D modelling skills?”. And that is what we did.

The main inspiration for this additional project was to allow teachers of any subject to create their own Augmented Reality scenes with descriptions so that their students could still experience engaging lessons even in the midst of a pandemic. Creating the scene then generates a simple 6-digit code, which later can be sent to anyone and used on the same website with a default AR marker provided by us.

The creation of the scene includes several simple steps (you can find full instructions in our website):

  1. Downloading the model from 3D resource websites or creating your own with 3D modelling software;
  2. Converting or exporting (if you design it yourself) the model to .glb format;
  3. Uploading it to our website;
  4. Writing the title and description for your AR scene;
  5. Setting up the 3D model so that it would be scaled, positioned and rotated correctly according to the marker.

When finished, the user receives a code that he can later send to his friends, pupils - or anyone else. The user also receives additional code that he can later use to update the information about the scene or setup details about the 3D model.

This platform is quick and easy to use because it does not require login information or IT and 3D modelling skills. We hope that future iGEM teams could use it to improve their Human Practices and especially Education projects since it is a fast and exciting new way to pass their knowledge to other people.

TECHNICAL IMPLEMENTATION

Vilnius-Lithuania iGEM team strongly believes that the best way to spread the word about synthetic biology and life sciences in general is to share the knowledge about the technical implementation of projects like this one. ‘The 6th SynBio sense’ is made up of three main parts:

  • 3D models design;

  • Augmented Reality implementation in a web app;

  • Markers for Augmented Reality scenes.

3D modelling

Visually compelling learning material makes the process a few times more effective and can spark interest in the subject. Yet, in order to communicate science in particular, the provided information has to not only be interesting but also exclusively accurate. Therefore, we chose to use 3D models instead of 2D art, because this format can provide much more insight, help understand the material better all without losing the visual appeal.

In the beginning, we wanted to use 3D models from popular databases, such as Sketchfab, for our project. But we were quick to realize that there was a lack of visuals specifically tailored to educate the public on science. They were either overly simplified or in contrast, only available in databases used for protein mapping and complex calculations. Therefore a few of our team members decided to delve deeper into the process of creating a 3D model from scratch. To make the models more accurate, we used some of the protein models from databases. By using an open source software Blender and combining our knowledge of science, animation and graphic design we were able to produce high quality informative models and use them to augment reality.

Augmented Reality in Web

Our main requirement while developing this project was to create a web app instead of a native app that you have to download from applications like Google Play or App Store. It was important for us, because it allows the user to access ‘The 6th SynBio Sense’ directly from their default browser rapidly instead of having to spend time downloading it. To do this we had to do an extensive research about WebAR since it is relatively new technology compared to Augmented Reality in native applications.

Another problem that also came up is the lack of well-documented examples or already implemented platforms that we could use for free. Applications like Pokémon Go, Snapchat and others led to rapid development of Augmented Reality in native apps, therefore has all of those things. WebAR, on the other hand, is only now accelerating into new heights. When we started developing this project we tried numerous examples and modes of implementation, yet most of these did not work on most of the modern browsers or operating systems as well as were not well-documented.

Our final choice was using Three.JS - JavaScript library that creates and displays 3D graphics and its extension threex-artoolkit that builds Augmented Reality scenes. Because there were no projects similar to ours, we had to build everything from many different examples and some of the code entirely from scratch. It was a great learning experience for us that drove our interest in AR and VR technologies even more.

Augmented Reality markers

In order to create robust and easily recognized markers by any device camera, we had to take into consideration black to white (B:W) ratio, edge sharpness and especially complexity of the inner illustration design. While designing inner markers, we discovered that an asymmetrical illustration significantly increased AR marker's detectability and the user is able to scan the marker at any angle more successfully.

Each AR scene has its own simplified illustration, which reflects what the user can expect from the marker. To attract people's attention, we have created colourful stickers with QR codes and AR markers (Fig. 9), which has an intriguing title and a fun short fact.

Figure 9.Augmented Reality markers and colourful stickers

References

  1. Kaptan, K. & Timurlenk, O. Challenges for Science Education. Procedia - Social and Behavioral Sciences 51, 763–771 (2012).
  2. VanMeter-Adams, A., Frankenfeld, C. L., Bases, J., Espina, V. & Liotta, L. A. Students who demonstrate strong talent and interest in STEM are initially attracted to STEM through extracurricular experiences.. CBE life sciences education 13, 687–697 (2014).
  3. Kiryakova, G. The Immersive Power of Augmented Reality. in Human-Computer Interaction [Working Title] (2020). doi:10.5772/intechopen.92361.
  4. Khan, T., Johnston, K. & Ophoff, J. The Impact of an Augmented Reality Application on Learning Motivation of Students. Advances in Human-Computer Interaction 2019, 7208494 (2019).
  5. Vera, F., Sánchez, J. A. & Cervantes, O. Enhancing User Experience in Points of Interest with Augmented Reality. International Journal of Computer Theory and Engineering 8, 450–457 (2016).
  6. Rello, L. & Baeza-Yates, R. Good Fonts for Dyslexia. Proceedings of the 15th International ACM SIGACCESS Conference on Computers and Accessibility 14:1-14:8 (2013). doi:10.1145/2513383.2513447