/

/

loading...
Enter Fullscreen Leave Fullscreen


The above is an interactive solar system simulator. This simulator represents the actual positions of the planets and satellites, offering various interactions through the right panel. You can change the camera viewpoint using mouse or touch controls, and clicking on a planet or satellite will bring that object to the center of the screen. This series introduces the foundational knowledge required to build this simulator. The posts will be serialized in the order of contents below.

  1. Three.js basics
    1. Installation
    2. Create scene
    3. Coordinates
    4. PBR (Physical-based rendering) material
    5. Shader material
  2. GLSL basics
    1. Shader program
    2. Vertex and fragment
    3. Shader patterns
  3. Create realistic Earth
  4. Create realistic Sun with glow
  5. Create realistic Saturn with rings
  6. Create realistic Phobos with irregular shape
  7. Make the Sun shine
  8. Create Milky Way skybox
  9. Compute the elliptical orbit