{"id":2035,"date":"2024-02-02T23:03:50","date_gmt":"2024-02-02T23:03:50","guid":{"rendered":"https:\/\/guillembruix.com\/store\/?p=2035"},"modified":"2024-02-15T07:58:32","modified_gmt":"2024-02-15T07:58:32","slug":"developing-my-first-visionos-app","status":"publish","type":"post","link":"https:\/\/guillembruix.com\/store\/developing-my-first-visionos-app\/","title":{"rendered":"Developing my first visionOS app: 4 steps I followed"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\" id=\"66f2\">Thinking of making your own visionOS apps? I\u2019ve spent this entire January learning how to design and program for this new platform. With the help of ChatGPT and a lot of coffee, I\u2019ve managed to publish my first visionOS app, as of today, February 2nd. My app,&nbsp;<a href=\"https:\/\/apps.apple.com\/us\/app\/neu-ski-resorts\/id6476763152\" target=\"_blank\" rel=\"noreferrer noopener\">Neu, is now available for download on the App Store<\/a>&nbsp;for the first users who bought the Apple\u2019s headset. In this article, I explain my experience making this ski app using 3D maps in augmented reality for the Apple Vision Pro. In the following lines, I share the 4 steps I followed to design and code it with some tips and recommendations with a particular focus on the UX Design. Also, you will find a free asset to download that could light the path for your own Spatial Computing app development journey!<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-vimeo wp-block-embed-vimeo\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Neu Ski Resorts\" src=\"https:\/\/player.vimeo.com\/video\/907264300?dnt=1&amp;app_id=122963\" width=\"1140\" height=\"855\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"345a\">New platform, new opportunities<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"41bc\">Since Apple introduced the Vision Pro in the WWDC in June 2023. I\u2019ve been obsessed thinking about the opportunities this new platform will bring us. Seems like the next logical step in the computing evolution. First, computers were workstations on our desks, where the apps were floating in 2D inside the screen. Next, apps were embedded on the small screens of our mobile devices that could conveniently fit in our pockets, and now the apps can be in 3D floating in our real room at home, office or wherever we are.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"d9da\">While it\u2019s true that the VR\/AR headset is not something that Apple has invented, other companies have explored this technology for years. The question remains: Is Apple going to do it again? Can Apple do the same to the current AR\/VR industry as it did with the iPhone to the mobile phone industry? Or will it be a bluff, similar to Meta\u2019s Metaverse. I don\u2019t know. 2023 has been the year of AI with ChatGPT, Midjourney, Gemini\u2026 and the tech world doesn\u2019t seem so excited about the Apple Spatial Computing of the Vision Pro. It is true that a few lucky tech journalists and influencers who had the opportunity to try the Apple\u2019s headset are saying that the quality is impressive. But, what will be the response of the people once it is in the market? Will it be worth paying the expensive price? We don\u2019t know it, but as a UX designer and indie developer, it\u2019s exciting for me to start creating in this new world where everything is to be done, but everything is possible! I was too young in 2008 when Apple released the App Store to have the knowledge to develop apps for the iPhone. Simple indie apps like iBeer or Virtual Lighter became so popular due to their novelty and ability to showcase the interactive capabilities of the iPhone. While not necessarily groundbreaking in terms of functionality, they captured the playful and creative spirit of early app development on the platform. It feels that today we have similar opportunities with the new App Store for visionOS as indie developers had in 2008 with the iPhone\u2019s App Store. Also, Instagram, Whatsapp, Uber, Twitter, Glovo, N26 none of these apps with huge business behind exist before the iPhone. Enough reasons for me to start developing for visionOS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"fa96\">The challenge<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"38ca\">It\u2019s January 2024 at the moment I\u2019m starting to write this. Apple has just announced the US release of the Vision Pro for February 2nd. I\u2019ve set a personal goal to release my app in February, making it available for the initial Vision Pro users. However, the real challenge here is to develop a Vision Pro app without actually having a Vision Pro. Being among the first to release spatial computing apps is tricky because there isn\u2019t much documentation available yet. Nevertheless, being a trailblazer is always exciting! Let\u2019s start this journey together!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"263\" height=\"274\" src=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image.gif\" alt=\"\" class=\"wp-image-2075\"\/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"981c\">1. App idea<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"3ea0\">My initial thought when I saw the presentation of the Apple Vision Pro was: it looks like a ski goggles. Then, I started to imagine myself skiing with this augmented goggles that apart from protecting my eyes from the cold wind and the sunlight, it will provide me some useful information. Like the ski resort map, my current speed, and maybe some 3D fake obstacles to avoid like in a video game\u2026 I didn\u2019t imagine myself wearing the headset when I\u2019m commuting in the bus or walking on the street with friends or family. Sports and activities in the nature have always been my interest, so it seems to be a good fit for me. Now, that it\u2019s the ski season, it could be an excellent excuse to go to ski more often, and I would be able to say: \u201c<em>I have to go to ski, because of work!\u201d<\/em>&nbsp;I love this idea! I\u2019ve already had the topic of my app idea, but the scope of the idea will be defined as a result of the UX Design process.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"f858\">2. UX Design<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"08cb\">Making apps that users loves means spending the time in designing the User Experience (UX). A user-centric development approach starts to understand who are the users. Some of the people who can afford the initial price of the Apple Vision Pro, probably are the same ones who go to ski regularly, so it seems like a good audience to start researching for, but who are they? What it is important for these folks? Why will they use a Vision Pro app instead of an iPhone app or a website to find what they are looking for? Which are their problems or pain points? And how can I make a better experience for them? All this questions is what I tried to answer in my user research that I did in a whiteboard using FigJam. I followed a design thinking approach based on the Double Diamond methodology that I adapted to fit my VisionOS needs. Before jumping to Xcode to start coding, we need to have a clear understanding what features do we want to build and which ones we want to discard or build later. That\u2019s why I personally like the Double Diamond because it is simple and helps me to choose and discard features for my MVP. Here is the link to download the FigJam file if you want to use it for your projects as well.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"1479\" src=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1.png\" alt=\"\" class=\"wp-image-2071\" srcset=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1.png 1400w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1-284x300.png 284w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1-969x1024.png 969w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1-768x811.png 768w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1-1140x1204.png 1140w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1-920x972.png 920w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1-575x607.png 575w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1-380x401.png 380w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1-420x444.png 420w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1-800x845.png 800w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"774\" src=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5.png\" alt=\"\" class=\"wp-image-2076\" srcset=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5.png 1400w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5-300x166.png 300w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5-1024x566.png 1024w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5-768x425.png 768w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5-1140x630.png 1140w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5-920x509.png 920w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5-575x318.png 575w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5-380x210.png 380w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5-420x232.png 420w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-5-800x442.png 800w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/figure>\n\n\n\n<p class=\"has-larger-font-size wp-block-paragraph\"><span style=\"text-decoration: underline;\"><a href=\"https:\/\/guillembruix.com\/store\/free-double-diamond-template\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Download the FREE Double Diamond <\/strong>Figma file<\/a><\/span><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>2<\/strong>.1. <strong>Discover<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"0e6f\">I asked people I know who belong to this user group (including myself) to help me fill the \u2018Discover\u2019 section of this whiteboard with accurate information. A good thing to be an indie developer or building your personal projects is that you have the freedom to decide the topics that you want to work or the problems that you want to solve. So, you can scratch your own itch! At the same time, it has the disadvantage that it\u2019s easy to avoid what is difficult for you, but useful for the user. I tried to limit the app in a reasonable scope and adapted in a possible business model that can scale later on. Earning money from this app isn\u2019t my primary focus right now (especially not in the MVP stage), but I like to start thinking about ways to monetize it if it gains significant traction in the future.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"b7cf\">2.2. Define<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"4240\">From all the problems that I found in my discovery phase, I had to converge and select the one that I prioritize, or it makes more sense to start working on. The main problem (or the \u2018<em>problem definition\u2019<\/em>&nbsp;using the Double Diamond terms) that I decided I want to fix for my MVP is:&nbsp;<strong>Finding the right ski resort for your next ski or snowboarding trip.<\/strong>&nbsp;Organizing a ski trip, whether for a weekend or a winter vacation, can be a nightmare when trying to find the perfect resort. My app aims to provide a delightful experience by answering the following questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Which ski resorts are nearest to me?&nbsp;<\/strong>I\u2019m based in Barcelona, so I decided to focus on the Catalan Pyrenees resorts first for the MVP. Later, I can expand to include more countries.<\/li>\n\n\n\n<li><strong>Which ski resorts are suitable for me or my group?&nbsp;<\/strong>Am I traveling with family, kids, my partner, beginner skier friends, or sporty colleagues? Do I prefer challenging black slopes, or are a few beginner-friendly green slopes sufficient?<\/li>\n\n\n\n<li><strong>What will the weather be like?<\/strong>&nbsp;Will it snow in the previous days to my trip and be sunny on the day I go, or will it rain throughout and spoil the snow and my plans?<\/li>\n\n\n\n<li><strong>How much will it cost?<\/strong><\/li>\n\n\n\n<li><strong>How far is it from Barcelona or my home location?<\/strong><\/li>\n\n\n\n<li><strong>Why am I using an Apple Vision Pro for this instead of typical ski websites?<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"14df\">I decided to stop the scope here for the MVP. Since we are in the Define phase, we need to choose, so the problems or questions that I decided to discard for know are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Where I will sleep or eat? Hospitality.<\/li>\n\n\n\n<li>What are the current snow conditions? Snow live condition data.<\/li>\n\n\n\n<li>How many slopes and lift are open? Resort live data.<\/li>\n\n\n\n<li>What slopes I want to ski, and how fast I am? Ski tracking capabilities.<\/li>\n\n\n\n<li>\u2026<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"23ef\">Why I decided to fix these problems and discard the other ones? Well, in my case, I wanted to keep it simple for the MVP and focus on the 3D objects like the augmented reality resort maps that can be so handy for an AR Headset. Also, my personal skills and preferences. I wanted this app to be UX focus instead of data focus. I\u2019m better in design than dealing with external APIs, and I don\u2019t want to pay for live data, neither. So, I decided to focus on the trip discovery and discard the data tracking and live snow data focus.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">2.3. Develop <em>(UI Design)<\/em><\/h5>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1096\" height=\"462\" src=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image.png\" alt=\"\" class=\"wp-image-2070\" srcset=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image.png 1096w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-300x126.png 300w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-1024x432.png 1024w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-768x324.png 768w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-920x388.png 920w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-575x242.png 575w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-380x160.png 380w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-420x177.png 420w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-800x337.png 800w\" sizes=\"auto, (max-width: 1096px) 100vw, 1096px\" \/><figcaption class=\"wp-element-caption\">Source: Apple<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"006e\">In the context of UX, we are referring to develop stage to start designing the UI. The main difference of a visionOS app than a mobile app or a website is the 3D elements in an immersion virtual space or an augmented reality one. Other differences are: the interaction design (gestures and eyes tracking) and the spatial audio. VisionOS apps have 3 types of content: 2D windows floating in the 3D space, volumes or 3D objects and full space taht is where different windows and volumes can coeexist. According to what is better for the type of information that we want to show. For instance, all the ski resorts navigation and data makes sense to display in a 2D floating window in a shape of a dashboard similar to an iPad app, but using the new frosted glass materials and UI elements. The resort map with all the slopes is perfect to display as a 3d object to appreciate the relief of the mountainous terrain.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"ad2c\"><strong>2.4. Deliver<\/strong>&nbsp;<em>(UI Design)<\/em><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"ba26\">For the 2D windows, I will follow Apple\u2019s recommendation. After watching the&nbsp;<a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10072\" rel=\"noreferrer noopener\" target=\"_blank\">Principles of spatial design<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10076\" rel=\"noreferrer noopener\" target=\"_blank\">Design for spatial user interfaces<\/a>&nbsp;WWDC videos, I\u2019ve downloaded&nbsp;<a href=\"https:\/\/www.figma.com\/community\/file\/1253443272911187215\" rel=\"noreferrer noopener\" target=\"_blank\">Apple\u2019s Figma templates for VisionOS<\/a>&nbsp;and I started to try different possible UI designs in Figma that answer the questions of the Define phase.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"522\" src=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6.png\" alt=\"\" class=\"wp-image-2077\" srcset=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6.png 1400w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6-300x112.png 300w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6-1024x382.png 1024w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6-768x286.png 768w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6-1140x425.png 1140w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6-920x343.png 920w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6-575x214.png 575w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6-380x142.png 380w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6-420x157.png 420w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-6-800x298.png 800w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\">Figma UI Design for Neu visionOS app<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"787\" src=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3.png\" alt=\"\" class=\"wp-image-2073\" srcset=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3.png 1400w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3-300x169.png 300w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3-1024x576.png 1024w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3-768x432.png 768w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3-1140x641.png 1140w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3-920x517.png 920w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3-575x323.png 575w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3-380x214.png 380w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3-420x236.png 420w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-3-800x450.png 800w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\">Final UI Design in Figma for Neu visionOS app<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"55cb\">3. 3D Design<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"d471\">VisionOS offers two modes for app development: passthrough and immersive.&nbsp;<strong>Passthrough mode<\/strong>&nbsp;involves using the Apple Vision Pro headset\u2019s external cameras to view the real world. In this mode, applications and windows appear as if they are suspended in mid-air. Users can interact with the interface using gestures and eye movements. Conversely,&nbsp;<strong>immersive mode<\/strong>&nbsp;transports the user into a fully 3D virtual environment. This mode submerges the user in a digitally created scene populated with 3D objects. Apps in immersive mode can include games where the user becomes part of the game\u2019s virtual space. Basically, what all other brands call AR for Apple is passthrough mode and VR is Immersive mode.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"550\" src=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2.png\" alt=\"\" class=\"wp-image-2072\" srcset=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2.png 1400w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2-300x118.png 300w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2-1024x402.png 1024w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2-768x302.png 768w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2-1140x448.png 1140w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2-920x361.png 920w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2-575x226.png 575w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2-380x149.png 380w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2-420x165.png 420w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-2-800x314.png 800w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\">Immersion Styles. Source: Apple<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"cf2c\">For my Neu app, I needed to create 10 3D maps of the 10 Ski resorts of the Catalan Pyrenees with all the slopes and lifts represented as well as the mountain elevation. This has been a very manual process where I first needed to find the right open source map data and later craft it all together in Blender and export to the right format for Xcode. I\u2019m not used to work with maps, but it was kind of fun to learn all these tools:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/opentopography.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">OpenTopography<\/a>&nbsp;to get the data for the 3D elevation mesh of each resort.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.ign.es\/\" rel=\"noreferrer noopener\" target=\"_blank\">IGN (<em>Instituto geogr\u00e1fico Nacional<\/em>)<\/a>&nbsp;to get the aerial photos that later I manually edited in&nbsp;<a href=\"https:\/\/www.photopea.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Photopea<\/a>&nbsp;to convert to this black and white look to simulate a snowy landscape.<\/li>\n\n\n\n<li><a href=\"https:\/\/openskimap.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">OpenSkiMap<\/a>&nbsp;to get the slopes and lift vectors for all the ski resorts.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.figma.com\/design-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a>\u00a0to mix the IGN\u2019s photos with the OpenSkiMap\u2019s vectors.<\/li>\n\n\n\n<li><a href=\"https:\/\/spline.design\/\" target=\"_blank\" rel=\"noopener\">Spline<\/a> to easily prototype my 3D object.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.blender.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">Blender<\/a>&nbsp;to put everything together in one 3D object and export it to&nbsp;<a href=\"https:\/\/es.wikipedia.org\/wiki\/GlTF\" rel=\"noreferrer noopener\" target=\"_blank\">GLB format<\/a>.<\/li>\n\n\n\n<li>Finally, I used Apple\u2019s&nbsp;<a href=\"https:\/\/developer.apple.com\/news\/?id=01132020a\" target=\"_blank\" rel=\"noreferrer noopener\">Reality Converter<\/a>&nbsp;to export the GLB to USDz for importing in&nbsp;<a href=\"https:\/\/developer.apple.com\/augmented-reality\/tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">Reality Composer Pro<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/developer.apple.com\/xcode\/\" target=\"_blank\" rel=\"noreferrer noopener\">Xcode<\/a>.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/my.spline.design\/valldenuriav2-224cb47b2edc8507289fef01fc735fe6\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-1024x490.png\" alt=\"Spline 3D map\" class=\"wp-image-2134\" style=\"width:301px;height:auto\" srcset=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-1024x490.png 1024w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-300x144.png 300w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-768x368.png 768w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-1536x735.png 1536w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-2048x980.png 2048w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-1140x546.png 1140w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-920x440.png 920w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-575x275.png 575w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-380x182.png 380w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-420x201.png 420w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-at-13.41.33-800x383.png 800w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h5 class=\"wp-block-heading has-text-align-center\"><a href=\"https:\/\/my.spline.design\/valldenuriav2-224cb47b2edc8507289fef01fc735fe6\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Check a 3D Map online in Spline<\/span><\/strong><\/a><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After doing this process 10 times, here are some&nbsp;<strong>3D creation recommendation<\/strong>&nbsp;that can help you in your 3D asset creation process<strong>:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Keep it as simple as possible<\/strong>: Few meshes and few materials per object. Avoid complex hierarchy with multiple group inside groups.<\/li>\n\n\n\n<li><strong>Be careful with the measurements:<\/strong>&nbsp;Try to keep the objects between 1 or 2 meters in Blender or in your 3D software. So many times happened to me to not be able to see the object due to the enormous sizes in Reality Composer Pro.<\/li>\n\n\n\n<li><strong>Create your objects in your 3D software:<\/strong>&nbsp;export them using .GLB extension and convert them into USDz in Reality Converter app. Don\u2019t export USD from Blender and directly open them in Reality Composer Pro. It didn\u2019t work very well for me.<\/li>\n\n\n\n<li><strong>Re-create your materials in Reality Composer Pro:<\/strong>&nbsp;Probably, you will need to import your texture images in Reality Composer Pro too. For some reason, the ones that come with the USDz from Reality Converter have warnings and issues.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-vimeo wp-block-embed-vimeo\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Bequeira Beret in 3D Blender - Neu app\" src=\"https:\/\/player.vimeo.com\/video\/907282097?dnt=1&amp;app_id=122963\" width=\"1140\" height=\"641\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2868\">4. Coding<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"d785\">Now that we have a clear UI Design as a result of our UX exploration and the 3D assets ready, we can start thinking about how we cook all of this in Xcode. Programming for visionOS in this early stage have two positive things and a negative one. First, we can use the same languages that we use to code iPhone apps (Swift and SwiftUI), the same IDE (Xcode) and the same distribution platform (App Store) this is a huuuge competitive advantge respect Apple\u2019s competior like the Meta Quest. Second, since it is the first version of visionOS we don\u2019t need to care about compatibility with old visionOS versions. However, the bad thing is that we don\u2019t have a lot of documentation available, only the Apple\u2019s one. Luckyly for all of us, this will start changing soon, but for now, we have to watch the Apple\u2019s WWDC23 videos related to SwiftUI and Reality Kit for visionOS. My recomendation here is to follow this order:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10203\/\" rel=\"noreferrer noopener\" target=\"_blank\">Develop your first immersive app \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10109\" rel=\"noreferrer noopener\" target=\"_blank\">Meet SwiftUI for spatial computing \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10110\" rel=\"noreferrer noopener\" target=\"_blank\">Elevate your windowed app for spatial computing \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10080\" rel=\"noreferrer noopener\" target=\"_blank\">Build spatial experiences with RealityKit \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10113\" rel=\"noreferrer noopener\" target=\"_blank\">Take SwiftUI to the next dimension \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10111\" rel=\"noreferrer noopener\" target=\"_blank\">Go beyond the window with SwiftUI \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10083\" rel=\"noreferrer noopener\" target=\"_blank\">Meet Reality Composer Pro \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10081\" rel=\"noreferrer noopener\" target=\"_blank\">Enhance your spatial computing app with RealityKit \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10091\/\" rel=\"noreferrer noopener\" target=\"_blank\">Evolve your ARKit app for spatial experiences \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10202\" rel=\"noreferrer noopener\" target=\"_blank\">Explore materials in Reality Composer Pro \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10273\" rel=\"noreferrer noopener\" target=\"_blank\">Work with Reality Composer Pro content in Xcode \u2014 WWDC23 \u2014 Video<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2023\/10082\" rel=\"noreferrer noopener\" target=\"_blank\">Meet ARKit for spatial computing \u2014 WWDC23 \u2014 Video<\/a><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"5c2b\">For the coding of the Neu app, I decided to utilize SwiftData along with the new observation framework powered by Swift macros to persist resort data. I employed the standard NavigationSplitView for the sidebar menu. All weather data are sourced from Apple&#8217;s WeatherKit. Apple Maps was used for the 2D map (the one inside the 2D window). Lastly, SwiftCharts was used for the sector mark chart, also known as a donut chart, which I used to represent the different numbers associated with the slopes&#8217; colors. Each 3D map was added as an immersive space. Something I want to change for the next version is to add them as independent 3D volumes using ARKit, allowing them to coexist simultaneously.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"944\" src=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4.png\" alt=\"\" class=\"wp-image-2074\" srcset=\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4.png 1400w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4-300x202.png 300w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4-1024x690.png 1024w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4-768x518.png 768w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4-1140x769.png 1140w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4-920x620.png 920w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4-575x388.png 575w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4-380x256.png 380w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4-420x283.png 420w, https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/01\/image-4-800x539.png 800w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Thinking of making your own visionOS apps? I\u2019ve spent this entire January learning how to design and program for this new platform. With the help of ChatGPT and a lot [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2166,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[31],"tags":[24,26,25],"class_list":["post-2035","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visionos","tag-swiftui","tag-ux-design","tag-visionos"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/02\/neuMan.jpeg","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pdrLSU-wP","_links":{"self":[{"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/posts\/2035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/comments?post=2035"}],"version-history":[{"count":21,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/posts\/2035\/revisions"}],"predecessor-version":[{"id":2147,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/posts\/2035\/revisions\/2147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/media\/2166"}],"wp:attachment":[{"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/media?parent=2035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/categories?post=2035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/tags?post=2035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}