Due: Thursday, September 24 (see the class late policy on the Syllabus)
Synopsis: You will implement 3D drawing using the JavaScript 2D canvas – this means you will implement your own complete 3D pipeline. 3D transformations, viewing transformation, perspective divide, … For now, everything will be wireframe, so you don’t have to worry about visibility computations.
Learning Objectives: This assignment will give you the opportunity to see how 3D graphics really works. What you learn by implementing the transformation pipeline will come in handy in the future – since you’ll implement it again when we do WebGL. You will also either learn to use a matrix library, or implement one yourself.
Evaluation: Check/No Check/Above and Beyond. You get a check if you turn in a viable, and complete submission. It must draw something (at least a cube) in 3D, and allow for the camera to be moved around enough that we can tell there is a perspective transformation (including division) happening. We will mark above and beyond for people who make particularly cool pictures or for a good interface. There is an opportunity
Handin: Will be as a Canvas (the course management system, not the JavaScript drawing library) assignment. (Link). Make sure that you turn in all files needed for your program to run. Note: if you have completed optional things for project points, be sure to say so in the typein box for the handin. Also, please list any dependencies your program needs to run (e.g. if you only tested it in a specific browser, or if it needs to access libraries over the web).
Note: please use the new handin instructions – turn you program in as a single .zip file.
This assignment is part of Program Assignment Group 1.
Description
In this project, you will do some drawing in 3D. Except that you’ll use the JavaScript 2D drawing canvas. This means that you’ll have to implement your own transformations between 3D and 2D (since the Canvas 2D transformations are only 2D affine and cannot represent the perspective transformations).
For this assignment, you’ll only need to draw wireframes (lines). Since there are only lines, everything is “see through” and might not look so great. But the main thing is to get the lines in the right place, using a perspective projection (and optionally an orthographic one as well). As long as you’re implementing the transformations, you might as well implement modeling transformations so you can make hierarchical objects.
The requirements:
- Your program must do all drawing in a 2D Canvas.
- Your program must implement perspective projections.
- Your program must allow the camera to be moved interactively (so we can see that the transforms are correct)
- The requirements above mean that you will implement 3D homogeneous transformations – most likely as 4×4 matrices (this is the right way to do it). You may implement matrices yourself (matrix multiply, matrix*vector, …). Or you can use a matrix library (we recommend twgl, but glmatrix is OK).
You can earn project points by:
- Having your program be able to switch between orthographic and perspective projection (for example with a toggle button). To get points for this, switching the button should make the difference between the two projections clear.
- Providing a better interface for controlling the camera, and/or an interface for adding and moving objects around.
Note: in next week’s program, you will extend this one to draw solid objects. You might want to plan ahead so that you can re-use your work as much as possible.
Here is a very simple sample solution (the code is obfuscated – so don’t try to look at it – write your own). It’s less than 100 lines of code – including a decent amount of comments. It just draws a checkerboard and has the simplest possible UI. It does the project/orthographic switch (I didn’t know how to make a button easily, so I used a slider – set it to zero for orthographic). If you want to see a cool assignment, try this one made by Yusef, a student who took 559 last year. It loads models so he can try different objects. We’ll give you the model loading code for a future assignment.
Please remember to follow the handin instructions.
Some Hints
The big part here is, obviously, building the machinery for transforming the points on your 3D objects into the 2D positions that you need for Canvas 2D. Since this is the same you’ll need later for WebGL, it will be good practice.
You’ll need transformations for the projection, viewing (the camera transform), and any modeling (transformations of the objects to put them into the right place). You could special case hack each one. Or, you can build matrix transformations (including a matrix stack) to do it all in a nice uniform manner. You can guess which one we recommend.
It is instructive to implement the matrix operations yourself, and also to implement all of the transformations. However, it is also instructive to learn to use a library and to get this assignment done in a reasonable amount of time so you can move on. This is your choice, although we recommend the library route.
If you choose to use a matrix library, we recommend using the matrix part of twgl (the documentation is hidden here). We have a Getting started with twgl tutorial. Most of twgl is an interface to WebGL (which you’ll use later in the semester). But for now, it provides a decent 4×4 matrix (and 3 vector) class. For now, you should only use twgl’s m4 and v3 parts. There are other matrix libraries (like glmatrix) that are OK as well. If you want to use a library other than twgl or glmatrix, please ask first (send email to cs559.staff@gmail.com).
If you use a library, it’s OK if you access it over the web. That way you won’t have to turn it in. But make sure you load it from a stable place.
If you use a matrix library, it will probably use the GL ordering convention which can be confusing. Read my tutorial (will be posted soon) or the brief explanation on the glmatrix page.
Don’t forget to do the steps in the right order. Model your object it in 3D. Transform it. Apply the camera transform. Apply the projection transform. Do clipping (for this, you only need to check that w is not zero, but you might want to only draw things in front of the camera. Do the divide by w. Use these 2D coordinates to draw lines.
You can use the functions in the matrix library to create a camera from lookfrom/lookat/vup information. Or you can create the camera transformation yourself.
An easy interface to control the camera is to make a bunch of sliders for all of the parameters of the camera model (lookfrom, …). You can see my tutorial on easy HTML5 sliders (see the part on “Draw on Update”). Or try out DAT.GUI for nicer and even easier sliders. (tutorial hopefully coming soon).
There are more hints (based on my experience with the sample solution) here.
You can even try using my arcball code for a spiffier camera interface. (link and tutorial coming soon)
Coming Attractions
Next week, you’ll extend this assignment to draw solid objects. You might want to plan ahead so that you can re-use as much of the code as possible. All of the transformations stuff will be useful again.
Some differences:
- next week, you’ll be drawing triangles – not just lines. of course, you could draw triangles for this week (just as stroked outlines)
- next week, you’ll want to be able to sort the triangles to control the drawing order (for the painter’s algorithm)
- next week, you’ll need to be able to show hierarchical objects (that move) – so maybe you’ll want to have them this week too
