This assignment is the first phase of Project Group 2 – Graphics Town.
Edit: 10/18 – added helicopter – which is optional, but recommended. If you downloaded the framework before there was a helicopter, we recommend updating it. If you haven’t already created your objects, you might start by modifying the helicopter.
Due: Thursday, October 22nd
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. While this assignment is graded check/no check, the overall project will have lots of grading opportunities.
Handin: We will use the new handing mechanism – where you upload your files to a directory on the CS server. You will also provide an explanation of what you did on Canvas in the type-in box for the assignment. (link to handin instructions) Note: please check that your program runs by trying your handin link.
Description
Read the Graphics Town 2015 (Project 2) description first.
For this assignment, you need to start working with the Graphics Town framework, and replace the initial demonstration objects with new objects.
For some of your objects, you may use a “model loader” (in fact, we’ll provide one – a separate posting is coming soon), and find objects on the web. However, you must make at least 2 of the objects yourself. (yes, part of this is seeing how hard this can be without good tools).
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
The first thing to do… try it out! Go to the example installation (here) and kick the tires a little bit. Figure out how to “drive” and look around. (it uses the WASD keys for driving, and WASD and the up and down arrows for flying. try the left mouse button for arcball.)
Make sure you can download and run the framework. Then, invest some time in understanding it.
To download the framework, you go to it’s GitHub page.From this page, you’ll see a “Download ZIP button – which will give you a ZIP file archive of the whole thing. If you are familiar with GIT, you know your other choices. Make sure you can run the framework locally (open the file index.html in your browser of choice).
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)
Don’t worry about understanding the texturedplane object – we’ll do textures 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.
Requirements
After getting started, you are required to…
- Replace the default objects (cube, simplest, and texturedplane) – you can keep groundplane if you like. You don’t have to remove the files, but don’t load them in the HTML. (you don’t have to remove to remove the helicopter — see below)
- 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).
- 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).
- Something must be moving. Hopefully more than just spinning around.
- 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.
- Your program must work from the web server in your handin directory. Check it. Try running it by using the link you will turn in. Make sure you didn’t forget any files.
Some optional things…
- If you keep the helicopter, you don’t have to worry about improving it’s behavior – but you can.
- For P7 don’t do textures – they will come next week.
- 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, you’ll get some time to just have fun and make the world cooler and add more complicated behaviors/movements.
You might want to think about where you want to get to in 3 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.
