{"id":374,"date":"2025-07-20T10:12:18","date_gmt":"2025-07-20T10:12:18","guid":{"rendered":"https:\/\/www.itgoesboink.com\/home\/?page_id=374"},"modified":"2025-07-24T22:29:05","modified_gmt":"2025-07-24T22:29:05","slug":"vr-track-painter","status":"publish","type":"page","link":"https:\/\/www.itgoesboink.com\/home\/vr-track-painter\/","title":{"rendered":"VR Track Painter"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Freehand VR Design App for &#8220;Painting&#8221; Spline-Based Experiences<\/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=\"VRTrackPainter Short\" width=\"525\" height=\"295\" src=\"https:\/\/www.youtube.com\/embed\/Nem1-WmcPw4?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<p class=\"wp-block-paragraph\"><em>VR Track Painter<\/em> is a work-in-progress demonstrating the potential of painting track and spline-based experiences <em>in<\/em> VR, but not just for VR.  The initial idea came from the frustration of designing game levels and other 3D environments, even with the aid of multiple views.  The immersion and stereography of VR makes spatial creation significantly, and given my affinity for creative VR apps such as Google&#8217;s <em>TiltBrush<\/em>, this seemed like an interesting hybrid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Combining spatial painting and the creation of a comfortably ridable track presents many significant challenges.  One of the greatest is maintaining the smoothness of the ride, without sacrificing too much creative freedom from the track&#8217;s architect, the player.  Proxy splines, and redistribution algorithms are currently improving the experience significantly, but there&#8217;s a lot of room for improvement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One of <em>VR Track Painter<\/em>&#8216;s most entertaining features is the ability to lock certain elements to an existing track, such as tunnels.  While it&#8217;s permitted to paint fully in freeform, <em>VR Track Painter<\/em> makes it effortless to add an accompanying structural element which aligns perfectly with the track, significantly improving the resulting ride experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"674\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM-1024x674.png\" alt=\"\" class=\"wp-image-194\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM-1024x674.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM-300x198.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM-768x506.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM.png 1412w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption class=\"wp-element-caption\">Tunnel locking to track<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>VR Track Painter<\/em> requires a complex UI to be both fun and functional. Getting the right result requires iteration, and below is some of the work that&#8217;s gone into <em>VR Track Painter<\/em>&#8216;s Spatial UI system. The current build uses standard Unity UI panels with Grid Layouts to drive 3D icon wells rendered with stencil shaders. This actually looks rather nice, but I think we can do better, which is why I&#8217;ve also been working on this <a href=\"https:\/\/www.itgoesboink.com\/home\/radial-spatial-ui-grid-component\/\" data-type=\"page\" data-id=\"347\">Radial Grid-Layout Spatial UI Component<\/a>, which will likely be implemented later. <\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"767\" data-id=\"197\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.37.27-PM-1024x767.png\" alt=\"\" class=\"wp-image-197\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.37.27-PM-1024x767.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.37.27-PM-300x225.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.37.27-PM-768x575.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.37.27-PM.png 1034w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"505\" data-id=\"195\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.36.00-PM.png\" alt=\"\" class=\"wp-image-195\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.36.00-PM.png 941w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.36.00-PM-300x161.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.36.00-PM-768x412.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\">Examples of UI<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Currently there is an Object Placement Tool, which is how the brick cubes and trees are added to the scene.  At present, it&#8217;s very limited.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"840\" data-id=\"205\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/vrtp_sq-1024x840.png\" alt=\"\" class=\"wp-image-205\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/vrtp_sq-1024x840.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/vrtp_sq-300x246.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/vrtp_sq-768x630.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/vrtp_sq.png 1138w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"714\" data-id=\"204\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.40.06-PM-1024x714.png\" alt=\"\" class=\"wp-image-204\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.40.06-PM-1024x714.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.40.06-PM-300x209.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.40.06-PM-768x536.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.40.06-PM.png 1272w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"717\" data-id=\"202\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.59-PM-1024x717.png\" alt=\"\" class=\"wp-image-202\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.59-PM-1024x717.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.59-PM-300x210.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.59-PM-768x538.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.59-PM.png 1339w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" data-id=\"200\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.22-PM-1024x604.png\" alt=\"\" class=\"wp-image-200\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.22-PM-1024x604.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.22-PM-300x177.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.22-PM-768x453.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.22-PM-1536x906.png 1536w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.22-PM.png 1576w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" data-id=\"201\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.46-PM-1024x609.png\" alt=\"\" class=\"wp-image-201\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.46-PM-1024x609.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.46-PM-300x178.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.46-PM-768x457.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.46-PM-1536x914.png 1536w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.46-PM.png 1555w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A few more examples of Track-Bound Tunnels, and blocks and trees placed with the Object Tool.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"674\" data-id=\"194\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM-1024x674.png\" alt=\"\" class=\"wp-image-194\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM-1024x674.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM-300x198.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM-768x506.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.33-PM.png 1412w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"753\" data-id=\"192\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.34.47-PM-1024x753.png\" alt=\"\" class=\"wp-image-192\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.34.47-PM-1024x753.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.34.47-PM-300x221.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.34.47-PM-768x565.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.34.47-PM.png 1265w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1009\" height=\"703\" data-id=\"193\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.17-PM.png\" alt=\"\" class=\"wp-image-193\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.17-PM.png 1009w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.17-PM-300x209.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.35.17-PM-768x535.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"858\" height=\"738\" data-id=\"199\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.04-PM.png\" alt=\"\" class=\"wp-image-199\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.04-PM.png 858w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.04-PM-300x258.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.38.04-PM-768x661.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"834\" data-id=\"203\" src=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.39.17-PM-1024x834.png\" alt=\"\" class=\"wp-image-203\" srcset=\"https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.39.17-PM-1024x834.png 1024w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.39.17-PM-300x244.png 300w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.39.17-PM-768x626.png 768w, https:\/\/www.itgoesboink.com\/home\/wp-content\/uploads\/2025\/07\/Screenshot-2025-06-20-at-7.39.17-PM.png 1145w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Freehand VR Design App for &#8220;Painting&#8221; Spline-Based Experiences VR Track Painter is a work-in-progress demonstrating the potential of painting track and spline-based experiences in VR, but not just for VR. The initial idea came from the frustration of designing game levels and other 3D environments, even with the aid of multiple views. The immersion and &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.itgoesboink.com\/home\/vr-track-painter\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;VR Track Painter&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-374","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/pages\/374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/comments?post=374"}],"version-history":[{"count":8,"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/pages\/374\/revisions"}],"predecessor-version":[{"id":487,"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/pages\/374\/revisions\/487"}],"wp:attachment":[{"href":"https:\/\/www.itgoesboink.com\/home\/wp-json\/wp\/v2\/media?parent=374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}