Assignment 4: 3D in SVG

by Mike Gleicher on September 20, 2014

So far in class, we’ve used SVG to do our drawing for us. It’s completely a 2D drawing system.

But, we’ve also learned that one way to draw in 3D is to convert the primitives to 2D, and use 2D drawing. We need to use viewing and projection to do this transformation.

That’s the idea here: we’ll make some 3D pictures and draw them using SVG as a way to make sure we’ve learned about viewing transformations. And you can even try to do visibility (using the painters algorithm) if you are ambitious.

As in Assignment 3, you will need to write a program that writes out SVG. As in assignment 3, you can use any programming language you like.

This assignment is due on Wednesday, October 1st. You will turn this assignment in on Moodle.


The goal of this assignment is to give you a chance to figure out how the viewing transformations work. And to do a little programming involving matrix computations.

The advanced parts will let you think about how visibility was done in the old days, and why its so challenging

The Description

You should write a program that takes in the description of the camera (lookfrom, lookat, up vector, field of view angle), a list of lines in 3D (2 points for each), and outputs an SVG file that draws where those lines would be seen in the camera.

A nice version of the program would take a file with 10 numbers of the first line (lookfrom, lookat, up vector, field of view angle). Each line after that should have 6 numbers (x,y,z for each of the 2 points of the line).

You will turn in your program, and some examples showing how it works (both inputs and outputs).

The bonus parts

If you want to get fancier, allow your program to also (in addition to lines) accept triangles. You could extend your file format to have 12 numbers on each line (XYZ for each of 3 points, and 3 for the RGB color). Or you can just have the color be a hex string. But you should be able to specify a color.

If you draw the the triangles filled in with color (which you should), you will get cases where the object in back gets drawn on top of a closer object.  (since you aren’t taking care of visibility, yet).

The easiest way to handle visibility is the painters algorithm: sort the triangles by how far they are from the eye point. Draw the farther ones first, the closer ones last. (for a simple heuristic, sort the triangles by the vertex that is farthest from the camera)

You should create some pictures (turn in the triangle files and the output) that show that this works. Put some boxes on top of a checkerboard. And then do something more interesting. (people have been doing some interesting stuff in the previous assignments!)

About Programming

For this assignment, you need to write a program that outputs SVG files. (based on reading text files)

Be sure to turn in your entire program. We won’t actually run it, but we should be able to tell that it works.

You may pick any programming language that you want. You might want to practice using C++ since you’ll need that for the project coming up. If you use C++, you might want to try the GLM matrix library (which we will use later in the class). If you use GLM, do not use the built in functions for generating projection matrices. You can use the built in matrix multiplication.


This is an ungraded assignment. The scale is:

  • Nothing – if you don’t turn anything in
  • Something – you turn in a program that does actually produce SVG files and seems to have some of the projection operations in them. You turn in some plausible outputs.
  • Everything – you turn in a program that clearly does the right things for lines (or triangles). Along with your program you turn in some example SVGs (and data files) that show that you can place the camera in different configurations and get appropriate pictures.
  • Above and Beyond – if your program does visibility via the painters algorithm (so it has to have filled triangles). Your example SVGs should show off cases where it works. You might even try to come up with cases where the painters algorithm fails (even though your implementation is correct)

Note: the way that grading works in the class, Above and Beyond doesn’t help you that much for your grade. But it’s more fun.

A More Basic Version

If programming to manipulate SVGs is too much for you, write a program that given the camera configuration (lookat, lookfrom, vup, FoV) and the position of a point, says where the point would go on the image plane (and state your assumptions about what the screen coordinate system is). You could write out the matrices by hand and do the multiplies by hand, but that’s probably more painful than writing code. We’ll give you a few examples to try.

For those of you who are more ambitous…

There are several of you (more than I was expecting) who seem to like to find ways of making the assignments more interesting than I could possibly assign. For the previous assignment, people turned in web pages with several javascript things that interactively manipulate SVG and …

If you are a skilled Javascript programmer (or are trying to learn) – by all means do something cooler than what is required if you want! The intent of this assignment is that you think about the camera transform and projection, and a little bit about visibility. If you want to demonstrate this in a creative way, great!

What to turn in

Please turn in your program (with enough info that we can read it and understand it – we will not need to run it), and some examples of input/output pairs. All in one ZIP file.

If you write some interactive thing that is an HTML page, please give us what we need to run it so we can try it out. (this includes some instructions). If your program is interactively constructing SVGs in the browser, you don’t have to write them out as files (but if you can, that’s extra cool, and I might ask you how you do it since I want to know).

Writing HTML and Javascript is not required. It does not help with your grade. It is above and beyond the call of duty. But, doing more ambitious assignments can be fun, and you might learn more. And hopefully, those are your goals.

Previous post:

Next post: