ISS WebGL: The International Space Station (ISS) WebGL Project

Jump to TOC

Click and drag ! Live 3D (HTML5 WebGL using Three.js) ISS Columbus module. If you see nothing here then your browser either does not support WebGL, or the facility is turned off.

Follow @ISS_WebGL Twitter page

Inspired and supported (unofficially) by the Nasa Space Flight forum. Forum thread is here.

Click on the image below to load the latest ISS-WebGL model into a browser that supports WebGL. Please don't load on low end systems or any system with minimal system memory available as this is currently a large unoptimised model.

Lightwave reference render of official NASA model.

NASA reference render provided with official model.

Table of Contents

  1. The Project.
  2. News
  3. One Small Step: Starting with the ESA Columbus Module.
    1. Stage 1.
    2. Simple Columbus model loader ... Done !.
      1. Testing on Samsung Galaxy Tab 3 7" & Samsung Ace 2 mobile.
      2. Video of interesting touch screen navigation of Columbus model.
      3. Add loader to this page in HTML5 page context ... Done !.
      4. Add texture.
    3. Stage 2.
      1. Improved Columbus scene navigation.
    4. Stage 3.
      1. Level of Detail (LOD).
    5. Stage 4.
      1. Add simple information showing abilities and interaction.

The Project

The aim of the ISS WebGL project is to eventually implement the entire official NASA ISS model in WebGL for educational and visualisation purposes. The ISS is a large international project and there is currently a lot of information spread around amongst different websites about the specifics of engineering operation and the history of the station. The project will provide information in as clear a form as possible using the advanced features of HTML5/WebGL. This will make navigating the station model for information, overview, context, operation and history as simple as possible. An important focus will be the highlighting of the international nature of the station by emphasising which elements of the station are built by which countries, who they are operated by and the history of the international cooperation which goes back to the early days of Skylab in the early 1980's. It was from cooperation between NASA, the Shuttle, and the European Space Agency with Skylab that the entire concept of the ISS originated. For example see ESA Bulletin November 2013 article "THE FIRST: SPACELAB AND ULF MERBOLD - A history of US/European cooperation in space - Carl Walker" (Online or PDF).


One Small Step: Starting with the ESA Columbus Module

As always projects start small. I live in the UK and it makes sense to start with the European Space Agency (ESA) Columbus module. There is also another reason. Columbus is "Spacelab v2". Spacelab was an international project between the USA/NASA and Europe/ESA, from which the entire concept of the ISS originated. So it makes sense starting with this module.

  1. Stage 1 
    1. Simple Columbus model loader ... Done !
      1. Testing on Samsung Galaxy Tab 3 7".

        Samsung Ace 2 mobile.

        Shows good mobile device compatibility of Three.js. Mind you, I had to enable GPU acceleration in Google Chrome to make the WebGL show.

      2. Video of interesting touch screen navigation of Columbus model.

      3. Add loader to this page in HTML5 page context ... Done ! See top of page. It's rendered in the full "DOM" context (geeky types will know what this means). In laymans terms it means that the 3D becomes part of the page along with text, images and everything else. I prefer this style of WebGL as it get's away from the "everything in a 3D box" approach (this is a style as old as the first browser plugins that could not really mix the 3D content with the page) and as this is a scientific/educational project it should be easy to copy and paste descriptions and so forth.


      4. Add texture ... DONE ! Uses original NASA texture and UV Map. More to do here. Texture rest of model including reflective material.

  2. Stage 2
  3. Stage 3
    1. Level of Detail (LOD). This is basically one simplified model that stands in for distance viewing. Closer examination "pops in" a more complex model. This will be crucial later on when the entire ISS has to be shown in the browser.
  4. Stage 4
    1. Add simple information showing abilities and interaction, in HTML5 and WebgL for the ISS Columbus module.


Please acknowledge the ISS WebGL project and NASA if you use this model. The NASA model is not copyrighted but is covered by their usage guidelines. See internal Blender editor for Readme.


Please follow and support the project.

Follow @ISS_WebGL

WebGL and the WebGL logo are trademarks of the Khronos Group Inc.

ISS WebGL project logo source and copyright information.