Programming Assignment : GraphicsTown

This assignment will be part of a larger GraphicsTown “Project”

Due: Tuesday April 10th.

Synopsis: You will extend the Graphics Town Framework, replacing the boring demo objects with more interesting objects, and adding good lighting.

Learning Objectives: You will get experience implementing (and designing) lighting, and in designing and implementing graphical objects.

Evaluation: We will check that you have made interesting objects, and that you have successfully implemented a complete lighting model including specular and diffuse shading. We will check that you have replaced the demo objects with things that are more interesting, but you still have some things moving. Completing the basic requirements will grant you a satisfactory grade; implementing extras will allow you to compete for even higher grades.

Handin: Submit through the Canvas system (link coming soon)


For this assignment, you need to start working with the Graphics Town framework, and replace the initial demonstration objects with new objects.

You must implement lighting on your objects. Somewhere in your scene, we need to be able to see both diffuse and specular shading effects (although, not every object has to be shiny). Your lighting must properly respond to the sun light direction in the Graphics Town framework. But of course, you can add other lights and make things fancier. (have street lights at night? a glowing volcano that lights everything up? a helicopter with a search light?)

Remember, Graphics Town cannot be dead. You must have objects moving. Preferably something more interesting that spinning cubes. Make cars drive around, helicopters or spaceships that fly around, birds or people or … Or all of the above. It’s your town. Make it cool.

Over the whole project, you’ll have a few weeks. So we understand that for this phase, things won’t be that exciting yet.

Getting Started

Make sure you can download and run the framework. Then, invest some time in understanding it.

Your first task is to understand the framework. Look at grobject.js, which documents how objects work. Look at the example objects to see what you have to do. Understand why the shaders have to go into the HTML file (although, we’re working on fixing that). Get a sense of what the framework does and doesn’t allow.

Then make an object. Start simple. Maybe just a cube. First write a simple shader (solid yellow?) to make sure you understand how to add shaders. Write a shader to get the lighting right. Then try a slightly more complicated object. Like a house.

It is good to be ambitious. But it is also good to start small. Get simple things to work first.

Defining motions procedurally is a bit of a trick. (see helicopter below) One one hand, there’s no magic: think of what you want things to do, and then define a function that does it. But even with this, start simple and add complexity. Unfortunately, since we haven’t learned about curves in class, you may be a little limited. So, for example, you might start by having a helicopter fly in a circle (of course, it’s rotors spin as well). Then try something harder: have it pick a random place to fly to, turn to face that direction, then fly in that direction until it gets to the goal (and once it’s there, pick a new goal). Think about how to use the time to define movements: this can be tricky. One strategy: remember the amount of time since the last draw, and then move the object the appropriate amount for that amount of time. (your objects should not move if time is stopped)

There is a “texturedplane” object. You are free to take a look, but keep in mind that textures will not be required this time around (they will be, next week)

We have added a helicopter that has a more complex behavior than just spinning around. It flies between valid landing sites (including one of the cubes). You can look at this behavior code to get an idea of how to make more complex behaviors. (this qualifies as reasonably complex). If you want to keep the helicopter, you can – you just have to improve its appearance (ideas below). You can improve the flying around behavior as well, but that’s optional. (you can also just remove the helicopter). The helicopter uses indexed face sets, and the twgl drawing commands – which can be convenient for making your own objects.


After getting started, you are required to…

  1. Replace the default objects (cube, simplest, and textured plane) – you can keep groundplane if you like. You don’t have to remove the files, but don’t load them in the HTML.
  2. You must have at least 3 different kinds of objects in your world (the example has this: cubes, the simple pyramid and the textured plane).
  3. Your objects must demonstrate lighting that is properly affected by the sun direction (and possibly other things). Your lighting must clearly have diffuse and specular (although not necessarily in the same place).
  4. Something must be moving. Hopefully more than just spinning around.
  5. If you want to keep the helicopter, you must improve how it’s drawn. At a minimum: 1) you must make the rotor spin (correctly, even as the helicopter turns), 2) must improve its shape, 3) must add at least another rotor to it, 4) update its shader so it doesn’t get magically lit from the bottom, and isn’t a block of solid color. The helicopter is there to show you about making behaviors, and to give you an example of indexed face sets in twgl. If you keep it, you must make it look nicer.
  6. Your program must be self-contained so we can run it directly by opening your submitted .zip file. It’s ok to rely on an internet connection (e.g. to load up textures from image hosting services), but make sure to check everything before you turn it in. It might be a good idea to explain, in your readme file, any file dependencies on stuff your code loads from the web. Check it. Make sure you didn’t forget any files.

Some optional things…

  1. If you keep the helicopter, you don’t have to worry about improving it’s behavior – but you can.
  2. For P7 don’t worry about textures – they will come next week.
  3. If you want to add a fancy model, you’ll want to have it’s geometry stored in a file. You’ll want an object loader (post coming soon). But… make at least some of your objects yourself (once you have an object loader, you’ll probably want to find objects on the web).

Planning Ahead

This is just the first phase. Over the next weeks, you’ll add more things: Week 2 is texture (you can either add new objects that have texture, or texture the existing ones). Week 3 is fancier effects (you’ll learn some tricks in class, like fancy shading and ways to fake water and snow and rain and fire). Week 4 will incorporate motion motion effects.

You might want to think about where you want to get to in 3-4 weeks. If you want to make a desert island, you might not want to make skyscrapers in week 1, since you’ll just want to throw them away.



本网站支持淘宝 支付宝 微信支付  paypal等等交易。如果不放心可以用淘宝交易!

E-mail: [email protected]  微信:dmxyzl003 工作时间:无休息工作日-早上8点到凌晨3点