Coordinate Systems - Essentials of Interactive Computer Graphics - page 244

10.1 Understanding Tutorial 3.1

Recall that in the first tutorial of Chapter 3, we began by measuring and discussing
how to draw two squares with the following measurements:

⎧
⎨

=( , ) ,

V a 160 122

V b =( 80 , 122 ) ,

LargeSquare wc = (10.1)

⎩ V c =( 80 , 42 ) ,

V d =( 160 , 42 ) ,

and wc. Abbreviation for world

coordinate. We will study the
details of this coordinate sys-
tem in Section 10.3.

⎧
⎨

V a =( 160 , 122 ) ,

V e =( 210 , 122 ) ,

SmallSquare wc = (10.2)

⎩ V f =( 210 , 172 ) ,

V g =( 160 , 172 ) .

Tutorial 3.1 displayed these squares where each millimeter was represented with
a pixel on the application window.

Tutorial 10.1. The world2ndc ( w2n ) Transform

Tutorial 10.1.
Project Name
D3D _ ViewTransform0

• Goal. Understand the w2n transformation operator we have encountered in
all of the tutorials.

• Approach. Analyze the simplest tutorials we have worked with and study
the effect of the operator.

Figure 10.1 is a screenshot of running Tutorial 10.1. This tutorial is identical to
Tutorial 3.1 except that the UI drawing area is 200 pixels 160 pixels. We can

verify that vertices V e , V f ,and V g are outside of the UI drawing area and are not
visible. Recall that before we developed the UWBGL _ D3D _ Lib support, drawing
was performed during the GrfxWindowD3D::OnPaint() function call, as shown
in Listing 10.1. We are now equipped with sufficient knowledge to completely
understand this very first graphics API tutorial. In particular, we are interested in
understanding the mysterious Step 2 of setting and computing the parameters for
the coordinate systems. Based on the knowledge learned from the previous chap-
ters, we understand that in Step 2, we first initialize all three of the D3D matrix
processors ( WORLD , VIEW ,and PROJECTION ) to the identity matrix. We then com-
pute the w2n matrix by concatenating a translation and a scaling matrix. Finally,
we load the w2n matrix into the VIEW matrix processor. In fact, a similar code

×

Figure 10.1.

Tutorial

10.1: Re-implement Tu-

×

torial 3.1 with 200 160

drawing area.