CSC 240: Computer Graphics

Homework 7: Solar System

Due: Wednesday, Nov. 16, 11:59pm on Moodle

The goal of this homework is to put together several important concepts in 3D graphics:
  • Perspective projection

  • Hierarchical models

  • Lighting

Credit for this assignment: Joe O'Rourke

Write a WebGL program that will display an animated, lighted solar system, which consists of (at least) the following components:

Solar system components:

  • The Sun.

  • The Earth orbiting the sun.

  • The Moon orbiting the earth.

The orbital paths should be either circular or elliptic. You may wish to start from Lab 9 for the spheres.

Viewing requirements:

  • Select a viewpoint so that the lighting effects on the planets are noticeable. No need to arrange for the camera to move around: one good viewpoint suffices.

  • The sun, earth, and moon should all be different colors.

Hierarchical modeling requirements:

  • The motion of the components must be controlled using hierarchical models (see Lab 8).

  • Use informative variable names (i.e. sunSphere, earthSphere, moonSphere instead of sphere1, sphere2, sphere3).

Lighting requirements:

  • There should be one (or more) light sources above the plane of rotation, lighting up the entire solar system. Maybe not too bright. Perhaps you will need some ambient component as well.

  • The sun itself should be co-located with a point light source, so that the sun illuminates the planets as well. To prevent the sun sphere from blocking the light, we can make it transparent. Here is an example: 
    
var sphereMaterial = new THREE.MeshLambertMaterial({color: "white", 
                                                    opacity: 0.2,
                                                    transparent: true});

Notes:

  • It is not essential to make the moon orbit at precisely the correct rate relative to the earth rotating around the sun (although it is not too hard to get it roughly correct.)

  • Suggestion: first draw the components and find a good viewpoint. Then get the animated motion working without lighting effects. After that is working, add the lighting.

  • After the lighting is working, feel free to create a solar system that either incorporates more realistic components (more planets, etc), or create a solar system that has nothing to do with reality or physics. I would love to show some examples in class!

Extra credit:

Extra credit is possible for excellent implementations of keyboard controls. For example, you could use the up/down/left/right components to move the camera around and explore the scene from different angles. If you use keyboard controls, include a comment at the top of your program explaining what you did and how I can use it.

Pair programming:

For this assignment, you are welcome to use pair programming as long as you work with a different partner than you have worked with before. Include a comment at the top of your code with the names of you and your partner.

Submit

Submit your html file and a representative screenshot of your world (if you worked in a pair, only one person needs to submit).

  • hw7.html
  • screenshot.png