The Challenge | Invent Your Own Challenge

Pose your own challenge, and create a solution of your own choosing!

Cubesat WebGL

Renders the UMSATS cubesat in a web browser. Allows users to examine and receive information about the various components.

Background:

The goal of this project was to create an interactive website that allows users to learn about the University of Manitoba Space Applications and Technology Society's nanosatellite design. This website renders the satellite using CAD files provided by UMSATS. The user is able to click on components to highlight and receive descriptions of their use. I used the Babylon.js framework which is essentially a WebGL based game engine. My website is only locally hosted, I have not set it up on a proper domain, therefore it is only accessible on my computer

Resources:

https://www.babylonjs.com/ This is the primary resource for the JavaScript/WebGL framework used to render the satellite. I extensively referenced the docs, tutorials and examples here.

UMSATS - provided the .step files I used for the satellite.

Challenges Faced:

The biggest challenge was importing the CAD files. I needed to convert the step files into stl because the JavaScript framework I used supported stl. However the behavior of the stl loader was no desirable and a huge amount of time was spent just trying to get satellite to render.

Another challenge was setting up a local Apache web server. This was a necessary step because otherwise my website was unable to load the stl files.

NASA Logo

SpaceApps is a NASA incubator innovation program.