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
Instructions
Write a WebGL program that will display an animated, lighted solar system, which consists of (bronze goal) the following components:
- The Sun.
- The Earth orbiting the sun.
- The Moon orbiting the earth.
The viewpoint (at least initially; see below) should be from above and to one side, so that the orbits appear as ovals at some distance. (See minimal example below.)
For silver, add either additional planets, or additional moons, so that some body has at least three objects orbiting at different speeds.
The orbital paths should be either circular or elliptic, and each object should move independently at its own speed. There is no starter code for this assignment. You may wish to begin with your solution to 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. They should look round and three dimensional (i.e., spheres). The sun should appear both bright and round. (This will probably require a mix of light emission for brightness and diffuse shading for roundness; see below.)
Hierarchical Modeling Requirements
- The motion of the components must be controlled using hierarchical models (see Lab 8) such that each has its own independent motion relative to its parent body. It should both orbit and spin on its own axis, and the orbital speed should be independent of the spin of its parent object. (To take a real-world example, the earth spins once every 24 hours, but the moon takes 29 and a half days to orbit.) You should achieve this without any use of trigonometic functions.
- 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, because you want most of the light on the planets coming from the sun itself. I recommend a DirectionalLight, although you could experiment with a dim AmbientLight as well.
- The sun itself should be co-located with a point light source, so that the sun illuminates the planets on the daytime side.
- Because the sun's surface doesn't face its inner point light, it
will not be illuminated by it and will only be lit by the dim
system-wide light. A dark sun won't look right, so we need to make
the material of the sun itself emit light. Here is an example:
var sphereMaterial = new THREE.MeshLambertMaterial({color: "white", emissive: "yellow", emissiveIntensity: 0.8});You can modify the colors, and adjust the intensity as you like. The important thing is to have a balance between the emitted light and the diffuse reflection of the directional light that gives a sense of roundness.
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.) You can render a fictional solar system.
- Suggestion: first draw the components and find a good viewpoint. Then get the animated motion working without lighting effects, using simple ambient light. After that is working, add the lighting.
- The lights in Three.js all have adjustable intensities. The normal range for these is between 0 and 1. Anything above 1 (adding up the contributions from all the lights shining on a surface) will cause overexposure. Some of the lights may have ranges beyond which their intensity falls off or drops to zero. Read the documentation for the light in question to learn more.
- 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! Some people choose to incorporate texture mapping for this assignment (see below), although it is not required.
Gold Standard
For a gold solution and full credit on the assignment, select at least one of the extensions below:
- Surface texture on the planets. Since we're only just getting to this topic, you may need to do some advance work to apply it on this homework assignment. Please subit the texture files with the rest of your work.
- Camera movement. This could be a pre-programmed tour of the system, with the camera swooping in for closeup views of different planets, much as a space probe might see as it flew through the solar system. (Something like this beautiful example, although you don't need to be quite so elaborate!) Or you could use keyboard or mouse controls to move the camera around and explore the scene from different angles. A controllable camera should allow the user to fairly easily view the scene from any desired viewpoint and angle. (See Three.js orbit controls for an example.) If you create keyboard controls, include a comment at the top of your program (or on the page itself) explaining what you did and how I can use it.
- Object-oriented program design. This is a good chance to experiment with Javascript's support for objects. Make and use a constructor for your heavenly bodies, including all the information needed to add them to the scene. Since we haven't studied this systematically in class, you may have to do some research on your own to complete this option. Discuss your strategy in the readme comment at the top of your file.
Extra credit is possible for work that truly stands out in one or more ways for visuals and design.
Pair Programming
For this assignment, you are welcome to use pair programming . Include a comment at the top of your code with the names of you and your partner. Both should write their own reflection on the assignment. Only one partner should submit the work.
Submit
Submit your html file and a representative screenshot of your world (if you worked in a pair, only one person needs to submit). If you use textures on your planets (not required) you should also submit any texture files necessary to view the scene.
- hw7.html
- screenshot.png