{"id":986,"date":"2020-12-14T12:48:50","date_gmt":"2020-12-14T12:48:50","guid":{"rendered":"http:\/\/osiris.itabc.cnr.it\/scenebaker\/?p=986"},"modified":"2020-12-14T12:52:08","modified_gmt":"2020-12-14T12:52:08","slug":"real-time-3d-collaboration-on-the-web","status":"publish","type":"post","link":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/2020\/12\/14\/real-time-3d-collaboration-on-the-web\/","title":{"rendered":"Real-time 3D collaboration on the Web"},"content":{"rendered":"\n<p class=\"has-text-align-justify\">The new version of <a href=\"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/projects\/aton\/\" class=\"ek-link\">ATON 3.0 framework<\/a> includes a completely renewed &#8220;<strong>VRoadcast<\/strong>&#8221; component &#8211; that allows multiple remote users to <em>collaborate in real-time<\/em> inside the same online 3D scene (no installation required).<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The development of VRoadcast started 3 years ago, initially to experiment collaborative features (basic chat messages) and then visualize other users as basic avatars in the 3D space. In this demo (2018) a quick communication test using VRoadcast was made involving different web browsers and&#8230; a running instance of <a aria-label=\"Unreal Engine 4 (opens in a new tab)\" rel=\"noreferrer noopener\" href=\"https:\/\/www.unrealengine.com\/\" target=\"_blank\" class=\"ek-link\">Unreal Engine 4<\/a> with a centralized chat panel:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"NodeJS and Unreal Engine 4\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/zEm7AHAp_xk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">VRoadcast already offered incredible opportunities in the previous ATON 2.0, enabling remote users to interact in the same scene and even perform collaborative tasks right inside a standard browser. For instance it was employed to study <strong>attentional synchrony<\/strong> in online, collaborative immersive VR environments (<a aria-label=\"B.Fanini, chapter 6 in Digital &amp; Documentation vol.2 (opens in a new tab)\" class=\"ek-link ek-link\" rel=\"noreferrer noopener\" href=\"http:\/\/www.paviauniversitypress.it\/catalogo\/digital-e-documentation\/1588\" target=\"_blank\">Chapter 6 in &#8220;Digital &amp; Documentation, volume 2&#8221;<\/a> &#8211; open access book). VRoadcast was also used for <strong>virtual classrooms<\/strong> during the pandemic, allowing remote students to collaboratively populate sample 3D scenes in online sessions:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"352\" src=\"https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/10\/vrc-collab-school-2020-04-20-1024x352.jpg\" alt=\"\" class=\"wp-image-1049\" srcset=\"https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/10\/vrc-collab-school-2020-04-20-1024x352.jpg 1024w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/10\/vrc-collab-school-2020-04-20-300x103.jpg 300w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/10\/vrc-collab-school-2020-04-20-768x264.jpg 768w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/10\/vrc-collab-school-2020-04-20.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">The new VRoadcast in <strong>ATON 3.0<\/strong> offers improved performances, scalability, out-of-the-box collaborative features targeting CH and a simple <a rel=\"noreferrer noopener\" href=\"http:\/\/seth.itabc.cnr.it:8080\/apidoc\/client\/VRoadcast.html\" target=\"_blank\" class=\"ek-link\">API <\/a>to create <em>custom <\/em>replicable events within web-apps (<strong>mobile<\/strong>, <strong>desktop <\/strong>and <strong>immersive VR\/AR<\/strong>). It is now fully integrated in the official ATON front-end, so remote users and general public can already access it. More details soon in upcoming demos and papers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"511\" src=\"https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/09\/vrc-montebelluna1-1024x511.jpg\" alt=\"\" class=\"wp-image-991\" srcset=\"https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/09\/vrc-montebelluna1-1024x511.jpg 1024w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/09\/vrc-montebelluna1-300x150.jpg 300w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/09\/vrc-montebelluna1-768x383.jpg 768w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/09\/vrc-montebelluna1-1536x766.jpg 1536w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/09\/vrc-montebelluna1.jpg 1895w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">These features were also employed during <a href=\"https:\/\/2020.archeofoss.org\/workshops#aton-an-open-source-framework-for-creating-liquid-3d-web-apps-for-ch\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">ArcheoFOSS workshop on ATON 3.0<\/a> to collaboratively populate a sample 3D forest and annotate together a few 3D models. Check out what ArcheoFOSS participants annotated together on <a aria-label=\"this sample Venus statue (opens in a new tab)\" href=\"http:\/\/seth.itabc.cnr.it:8080\/fe\/?s=archeofoss\/venus\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">this sample Venus statue<\/a>!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/12\/archeofoss-vrc-populate.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"502\" src=\"https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/12\/archeofoss-vrc-populate-1024x502.jpg\" alt=\"\" class=\"wp-image-1123\" srcset=\"https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/12\/archeofoss-vrc-populate-1024x502.jpg 1024w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/12\/archeofoss-vrc-populate-300x147.jpg 300w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/12\/archeofoss-vrc-populate-768x377.jpg 768w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/12\/archeofoss-vrc-populate-1536x754.jpg 1536w, https:\/\/osiris.itabc.cnr.it\/scenebaker\/wp-content\/uploads\/2020\/12\/archeofoss-vrc-populate.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Stay tuned<\/strong>: we are planning a few open-access collaborative events!<br>You can join <a href=\"https:\/\/t.me\/ATON_Framework\" target=\"_blank\" aria-label=\"our public ATON open group on telegram (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">our public ATON open group on telegram<\/a> for more information<\/p>\n\n\n\n<h2>Developer perspective<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">If you are a developer, here&#8217;s a quick example to easily create a <strong>completely custom<\/strong> event using the <a aria-label=\"new API (opens in a new tab)\" href=\"http:\/\/seth.itabc.cnr.it:8080\/apidoc\/client\/VRoadcast.html\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">new API<\/a>. In this case we fire a network event called &#8220;<em>chatmessage<\/em>&#8221; containing data &#8220;<em>hi<\/em>&#8221; to other users in the same scene:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>ATON.VRoadcast.fireEvent<\/strong>(\"chatmessage\", \"hi\");<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-justify\">In order to handle such events, we simply subscribe to the event using:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>ATON.VRoadcast.on<\/strong>(\"chatmessage\", (m)=&gt;{ \n   alert(\"Received message: \"+ m)\n})<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-justify\">In this example, when one user fires the event, other remote users will handle the event by showing up an alert with the received &#8220;hi&#8221;. Notice the broadcasted data can be an arbirary object. Have a look also at <a aria-label=\"ATON 3.0 examples (opens in a new tab)\" href=\"https:\/\/github.com\/phoenixbf\/aton\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">ATON 3.0 examples<\/a> on github, and start creating your own collaborative web-app.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The new version of ATON 3.0 framework includes a completely renewed &#8220;VRoadcast&#8221; component &#8211; that allows multiple remote users to collaborate in real-time inside the same online 3D scene (no installation required). The development of VRoadcast started 3 years ago, initially to experiment collaborative features (basic chat messages) and then visualize other users as basic &#8230; <a title=\"Real-time 3D collaboration on the Web\" class=\"read-more\" href=\"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/2020\/12\/14\/real-time-3d-collaboration-on-the-web\/\" aria-label=\"More on Real-time 3D collaboration on the Web\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20,4,25],"tags":[14,24,15,22,23],"_links":{"self":[{"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/posts\/986"}],"collection":[{"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/comments?post=986"}],"version-history":[{"count":95,"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/posts\/986\/revisions"}],"predecessor-version":[{"id":1153,"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/posts\/986\/revisions\/1153"}],"wp:attachment":[{"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/media?parent=986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/categories?post=986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/scenebaker\/index.php\/wp-json\/wp\/v2\/tags?post=986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}