Forum Discussion
Mars Base Demo: Storyline Integration with Blender 360° Panoramic Renders UPDATED March 2026
I created this short e-learning demo for my Upwork portfolio, showcasing how to integrate custom-modeled 360° environments into Articulate Storyline. I wanted something unique, short, and interesting.
Project Rationale:
I chose a 3D-printed Mars habitat because the concept aligns with realistic solutions for future human life on Mars, making the demo feel grounded and relevant.
To give the base a compelling and genuine purpose, I focused the learning content on growing crops on Mars (Martian agriculture). This subject was a natural fit, leveraging the extensive agriculture knowledge I've gained working with a client over the years, which is also why the base is appropriately named Rhizome Station.
Technical Breakdown:
3D Modeling (updated March 2026): The Mars base was modeled in Blender (free and open-source software). I created procedural textures for most of the scene and Quixel Megascans assets for distant rocks and lab flora. Quixel megascan assets have now been replaced with my own. I also used Blender to model the 3D landscape you see as a backdrop on the computer screens.
Interaction Assets: For the icons and images seen within the interactions, these were all done in Storyline using the built-in icons and AI images.
Interaction: The experience uses seven linked 360° renders. To track progress, I rendered the images with a start/finish state, allowing a 'completion' green tick to display when the user returns to the main lab view.
Audio: Narration was created using Storyline's AI voices.
Future Plans: I'm planning to expand this into a full e-learning experience. The expanded course will start with the user in Earth's orbit learning about the Hohmann Transfer Orbit, and once they reach the base, they'll be able to explore different rooms (the living quarters are already built) and go on outdoor missions. I'll update the community when that larger version is complete, but it likely won't be until next year.
17 Replies
This is incredible work! If you don't mind how did you import from blender? was it a 360 render of a frame ?
Also did you make the holographic plant, where you look the roots and fruit , etc. ?
Hi Howard,
Thanks for the comments!
To do a 360° image in Blender, you first need to change the following:
Render Engine: Switch the engine to Cycles in the Render tab, as the panoramic camera options are specific to Cycles.
Output: Set your resolution in the Output tab. I personally use X4000 x Y2000. To make this a true 8k render, simply change the resolution percentage to 200%.
Camera: Select your camera and change these two properties in the Data tab:
Type: Panoramic
Panorama Type: Equirectangular
Once those are set, just Render Image as usual and you'll have your 360° panorama.
Regarding the tree, I modelled it in Blender using the built-in Sapling Tree Gen addon and exported it as a glTF file for use in Three.js. The hologram effect is a tweaked version of a shader I learned from a well-known Three.js course by Bruno Simon. Although Bruno mentioned that students are free to use these without credit, I definitely want to give him a shout-out here for the technique.
I love this thing! I so want to build out a replica of this just for the experience. It would make a great exercise for practicing skills. My Blender-fu is weak, but this is motivating.
May I ask if this was built entirely by you? Could you share how many total hours went into the production? Thanks for sharing.
Hi Nathan,
Thanks so much for the kind words! It’s great to hear that it’s motivating you to dive deeper into Blender.
To answer your question: yes, everything in the 3D environment was built by me. The assets within the UI (like the tabbed interaction and the 3D cube images) were generated in Storyline.
Regarding the timeline, I’ve put about 250 hours into this project across the initial build and this recent remaster. A significant portion of that time was actually R&D, experimenting with lighting, procedural textures for the Martian regolith, and base architecture that I ultimately scrapped to get it just right.
I also spent about 8 hours specifically on accessibility. Integrating screen-reader support and keyboard navigation into a 360° environment required some creative hacks to bypass standard limitations. It’s currently optimized for keyboard-only navigation but it breaks if you use the mouse. The process was a huge learning curve that will make my future 3D/Web projects more efficient from the start.
Thanks again!
Such a brilliant concept. I don't suppose you'd please share the story file with me would you so I can see how this is built?
Hi John, the link has now been updated with the latest build. When you get to the end you will be invited to view some of the assets on ArtStation.
Hi John,
Thanks for the kind words!Since this is a core portfolio piece, I’m not able to share the source files. However, I’m actually preparing to relaunch an improved version in the next couple of weeks and will also be posting some of the 3D assets and materials on ArtStation.
The overhauled version uses a hybrid 3D approach: Blender for the high-fidelity 360° environment renders and Three.js to handle some real-time 3D object interactions. I’ve also layered in audio logs from the crew and hidden narrative bits throughout the lab to deepen the experience.
I’ll be sharing the update on LinkedIn, and I’ll make sure to post the updated version here as well.
Fab stuff, I'm fascinated by the display interfaces, looks like a few layers there, but an hints and tips JohnMcNichol to avoid the pitfalls would be appreciated
Hi Dan. I've updated the link with the latest version if you want to have another look. There is an ArtStation link at the end detailing a lot of the assets and how they were built but I just realized I didn't explain how I built that screen! I created that landscape in Blender and applied a material to the geometry to make it look like a hologram. Then I rendered the landscape as a transparent image and imported the image into Storyline so I could layer a UI over it. Then I exported that out as an image and imported it back into Blender as the texture you see in the 3d scene for the compter screen. I've udpated these screens in the latest version.
JohnMcNichol Really liked the module. I like the simple card interaction. Nice effect and easy to build.
Hi Tom, I've updated the link to the latest build. Added a lot of content I built in three.js and some optional / hidden lore bits around the lab.
This is a great example of 3d, design and, interactivity! Inspired!
Hi Larry, The link has been udpated to the latest version. Added loads more stuff to it, a lot of it is hidden. Let me know what you think.
You have really put a lot attention into the details and love how the look and feel is consistent through out, and the audio and interactions are great. Let me know when you make other updates. thanks for sharing.
JohnMcNichol, wow!! This is such a cool build. 🤩
I can totally see this approach working for many variations of projects too (safety walk-throughs, virtual field trips, or even onboarding tours).
Thanks so much for sharing this!
Just a heads-up: we’ll be featuring this in an upcoming ELH Weekly newsletter. Be sure you’re subscribed if you want to get it in your inbox. 🎉
Hi Katie-Jordan, I've just updated the link to the latest build. Added loads of stuff and reworked all the assets. There are now optional.hidden lore dotted around the lab. When you get a moment, let me know what you think of this new version.
Thanks for the kind words Katie-Jordan!
I did a walk-through for a client in the same style, you can view that demo here. And thank you for featuring this in the newsletter, I'm now subscribed 🙂
