Computer Graphics: Principles and Practices 3rd Edition. A trip down memory lane.

12. August 2013

 

So today on Safari Books Online came a book that was a complete flash from my past.  Computer Graphics: Principles and Practices 3rd edition has been released.  What’s so special about this book?

cgpap3

Three things… 

 

First, it was the textbook I used to learn computer graphics a very long time ago.

Second, it was one of the only ( incredibly expensive ) books I had to purchase for school that I actually found valuable.  ( Code Complete was the other book, if you were curious )

Third, it’s one of the only dead tree books I have kept.  I am almost entirely digital these days, so you have to be a good book for me to keep you around, especially given the size of a few of the condos I’ve moved into over time, I’ve gone through a lot of book purges!  When you consider how incredibly out-dated it had become, the world of graphics has changed a great deal since the second edition of the book was released in 1990!  On top of that, all of the code examples where in Pascal, using a library I’d never heard of at the time, or used since.

 

Fortunately with the release of the 3rd edition, I now have one less piece of dead tree fighting for space in my house!  There are a few things to know about this book, it’s has no code for OpenGL or Direct3D, it’s not really about that.  The book actually uses WPF for it’s examples, but don’t worry, the concepts are easily applied elsewhere. The entire point of this book is to teach graphics programming concepts, not really about the implementation.  If you don’t already know one of those APIs, you are going to want to pick up an additional book on your graphics library of choice ( if needed. )  That said, this will make you **understand** what you are doing with either of those graphics libraries.  You will find when reading this book, it doesn’t really matter what programming languages or library you use, you will be able to digest and adapt to your tools of choice without a lot of effort.  This book has been almost completely re-written at this point, and does cover the modern graphics pipeline.

 

What does it cover?  Well, just about everything actually.  That’s why I kept it around all these years.  For example, here is the Table of Contents:

  1. Introduction
  2. Introduction to 2D Graphics Using WPF
  3. An Ancient Renderer Made Modern
  4. A 2D Graphics Test Bed
  5. An Introduction to Human Visual Perception
  6. Introduction to Fixed-Function 3D Graphics and Hierarchical Modeling
  7. Essential Mathematics and the Geometry of 2-Space and 3-Space
  8. A Simple Way to Describe Shape in 2D and 3D
  9. Functions on Meshes
  10. Transformations in Two Dimensions
  11. Transformations in Three Dimensions
  12. A 2D and 3D Transformation Library for Graphics
  13. Camera Specifications and Transformations
  14. Standard Approximations and Representations
  15. Ray Casting and Rasterizations
  16. Survey of Real-Time 3D Graphics Platforms
  17. Image Representation and Manipulation
  18. Images and Signal Processing
  19. Enlarging and Shrinking Images
  20. Textures and Texture Mapping
  21. Interaction Techniques
  22. Splines and Subdivision Curves
  23. Splines and Subdivision Surfaces
  24. Implicit Representations of Shape
  25. Meshes
  26. Light
  27. Materials and Scattering
  28. Color
  29. Light Transport
  30. Probability and Monte Carlo Integration
  31. Computing Solutions to the Rendering Equation: Theoretical Approaches
  32. Rendering in Practice
  33. Shaders
  34. Expressive Rendering
  35. Motion
  36. Visibility Determination
  37. Spatial Data Structures
  38. Modern Graphics Hardware

 

… so as you may be able to tell, this isn’t a short book.  In fact it’s 1264 pages in length, which would be why this isn’t a proper review, I am not done the book.  In fact, it’s one of those book I will probably never read entirely front to back.  Instead I jump in to the areas I need, unless of course I struggle with the concepts being taught, then I tend to read the entire chapter until I’ve gotten the subject down.  Of course, I read chapters from time to time just for something to do.

 

That’s another great part of this book.  I am no math wiz, I have forgotten far too much, so with many pure math texts I struggle.  This is why this book is very good.  It’s not simple by any means, but it doesn’t just throw an equation at you and leave you scratching your head.  Things are introduced in escalating difficulty, but if you have a late high school or first year university math education, you should be OK.

 

The math is fully explained over the course of the book.  If you have trouble parsing out equations, they are explained fairly well in the book including how to decipher them.   The book doesn’t magically make math easy, but it does do an effective job of explaining it, so that even a non-genius can make sense of things.  Here for example is the excerpt on Euler Angles, and is typical of how things are explained:

 

Example taken from book:


 

11.2.2. Euler Angles

Euler angles are a mechanism for creating a rotation through a sequence of three simpler rotations (called roll, pitch, and yaw). This decomposition into three simpler rotations can be done in several ways (yaw first, roll first, etc.); unfortunately, just about every possible way is used in some discipline. You’ll need to get used to the idea that there’s no single correct definition of Euler angles.

The most commonly used definition in graphics describes a rotation by Euler angles (φ, θ, ψ) as a product of three rotations. The matrix M for the rotation is therefore a product of three others:

1

Thus, objects are first rotated by angle φ in the xy-plane, then by angle θ in the zx-plane, and then by angle ψ in the yz-plane. The number φ is called pitch, θ is called yaw, and ψ is called roll. If you imagine yourself flying in an airplane (see Figure 11.1) along the x-axis (with the y-axis pointing upward) there are three direction changes you can make: Turning left or right is called yawing,pointing up or down is called pitching, and rotating about the direction of travel is called rolling.These three are independent in the sense that you can apply any one without the others. You can, of course, also apply them in sequence.

jet

 

Figure 11.1: An airplane that flies along the x-axis can change direction by turning to the left or right (yawing), pointing up or down (pitching), or simply spinning about its axis (rolling).

Writing this out in matrices, we have

2

3

With the proper choice of φ, θ, and ψ, such products represent all possible rotations. To see this, we’ll show how to find φ, θ, and ψ from a rotation matrix M. In other words, having shown how to convert a (φ, θ, ψ) triple to a matrix, we’ll show how to convert a matrix M to a triple (φ′, θ′, ψ′), a triple with the property that if we convert it to a matrix, we’ll get M.

The (1, 3) entry of M, according to Equation 11.14, must be sin θ, so θ is just the arcsine of this entry; the number thus computed will have a non-negative cosine. When cos θ ≠ = 0, the (1, 1) and (1, 2) entries of M are positive multiples of cos φ and – sin φ by the same multiplier; that means φ = atan2(–m21, m11). We can similarly compute ψ from the last entries in the second and third rows. In the case where cos θ = 0, the angles φ and ψ are not unique (much as the longitude of the North Pole is not unique). But if we pick φ = 0, we can use the lower-left corner and atan2 to compute a value for ψ. The code is given in Listing 11.1, where we are assuming the existence of a 3 × 3 matrix class, Mat33, which uses zero-based indexing. The angles returned are in radians, not degrees.

Listing 11.1: Code to convert a rotation matrix to a set of Euler angles.


  1  void EulerFromRot(Mat33 m, out double psi,
  2                             out double theta,
  3                             out double phi)
  4   {
  5    theta = Math.asin(m[0,2]) 
//using C# 0-based indexing!
  6    double costheta = Math.cos(th);
  7    if (Math.abs(costheta) == 0){
  8       phi = 0;
  9       psi = Math.atan2(m[2,1], m[1,1]);
10    }
11    else
12    {
13       phi = atan2(-m[0,1], m[0,0]);
14       psi = atan2(-m[1,2], m[2,2]);
15    }
16
  }


It remains to verify that the values of θ, φ, and ψ determined produce matrices which, when multiplied together, really do produce the given rotation matrix M, but this is a straightforward computation.


Inline Exercise 11.3:

Write a short program that creates a rotation matrix from Rodrigues’ formula (Equation 11.17 below) and computes from it the three Euler angles. Then use Equation 11.14 to build a matrix from these three angles, and confirm that it is, in fact, your original matrix. Use a random unit direction vector and rotation amount in Rodrigues’ formula.


Aside from the special case where cos θ = 0 in the code above, we have a one-to-one mapping from rotations to (θ, φ, ψ) triples with –π/2 < θ ≤ π/2 and –π < φ, ψ ≤ π. Thus, the set of rotations in 3-space is three-dimensional.

In general, you can imagine controlling the attitude of an object by specifying a rotation using θ, φ, and ψ. If you change any one of them, the rotation matrix changes a little, so you have a way of maneuvering around in SO(3). The cos θ = 0 situation is tricky, though. If θ = π/2, for instance, we find that multiple (φ, ψ) pairs give the same result; varying φ and ψ turns out to not produce independent changes in the attitude of the object. This phenomenon, in various forms, is called gimbal lock, and is one reason that Euler angles are not considered an ideal way to characterize rotations.

 



If you can make sense of the above, you will be good with this book.  This sample is pretty typical of how things in this book are covered.  So if you are looking for a text for learning or brushing up on computer graphics Computer Graphics: Principles and Practices is probably one of the best.  With the exception of Physics, and library specific instructions, this book has pretty much everything you might need to know.

General, Programming , , ,







blog comments powered by Disqus
A simple JavaScript app using Node, cocos2D, YUI and Heroku

A simple JavaScript app using Node, cocos2D, YUI and Heroku

25. July 2012

 

This post is a table of contents of sorts for the recently completed series documenting the creation of a simple game (web application) for my daughter.  Although the game is quite simple, the application itself covers quite a bit.  There are a ton of tutorials on the internet about the various individual pieces I use, but very few illustrating putting them all together to create a complete app.

 

In this tutorial, we cover:

 

Part 1 -- Node and cocos2D

Setting up a NodeJS server, that is able to serve both static and dynamic content using express.  By the end of this part we are successfully hosting a cocos2D application.

 

Part 2 -- Deploying to Heroku

This part covers deploying your Node application into the cloud, using Heroku’s completely free tier.  This part is optional, you can run your application anywhere you want so long as Node is supported.

 

Part 3 – The guts and plumbing

This part is the heart of the application itself.  It illustrates how to upload and serve data from a Node server.  The upload portion is managed using the YUI framework from Yahoo.  This is how you could make a more traditional web application using JavaScript and illustrates.

 

Part 4 – The Game

This part creates the actual “game” if you can call it that.  It illustrates creating a simple cocos2D HTML game that interacts with the NodeJS server side.

 

Part 5 – Adding a Database to the mix

Losing all your data every time Node restarts or Heroku feels like erasing them gets old quick, so I added a database to the mix.  In this case I used the CouchDB NoSQL database, hosted on IrisCouch using the Nano library.

 

Part 6 – Phonegap?

Ok, this part is actually TBD.  I am in the process of porting to PhoneGap, to bundle this application as a native phone application.  Will update here if it was successful with another tutorial post

 

 

 

The Results

 

You can see the application running here

 

It is pretty simple over all.  Choose a pair of images using the dropdowns at the top.  Then you can click to cycle through the various images.  Additionally, you can click the settings button, which will bring you to the settings app we created in Part 3.  Here you can upload new images and manage existing one.   Warning, anyone can upload images, so I take no responsibility for what they might contain!  Anyone can also delete images at any times, so if it is empty or your images disappear, this is probably why.

 

Finally, I have pushed the complete source tree up to GitHub, which is available here.

General , , , ,







blog comments powered by Disqus