程序代写代做代考 js html C GPU graph CSCI-396 Jeff Bush

CSCI-396 Jeff Bush

¡ Standard projections project onto a plane ¡ The projections all meet at the center of
projection (COP)
§ The COP can be at infinity causing all projections to be parallel and then there is a direction of projection (DOP)
§ Difference between perspective and parallel views
¡ Both types preserve lines but not necessarily
angles
¡ Non-planar projections are needed for special
applications

¡ GPU treats all projections the same and implements them with a single pipeline
¡ Classical viewing developed different techniques for drawing each type of project
¡ Even “fundamental” distinction between parallel and perspective is mathematically the same
§ Just with a COP at infinity

parallel
perspective
1 point 2 point 3 point oblique
trimetric
orthographic axonometric
isometric dimetric

Projectors are orthogonal to projection surface

¡ Projection plane parallel to principal face ¡ Usually form front, top, side views
isometric (not part of mv orthographic)
In CAD and architectural design often display three multiviews plus isometric

¡ Preserves both distances and angles
§ Shapes preserved
§ Can be used for measurements ▪ Building plans
▪ Manuals
¡ Cannot see what object really looks like because many surfaces hidden from view
§ Why the isometric view is often added

Projectors converge at center of projection

¡ Actual parallel lines within objects converge at a single point in the projection (the vanishing point)
¡ Drawing simple perspectives by hand uses these vanishing point(s)
vanishing point

¡ No principal face parallel to projection plane ¡ Three vanishing points for cube

¡ On principal dir parallel to projection plane ¡ Two vanishing points for cube

¡ One principal face parallel to projection plane ¡ One vanishing point for cube

¡ Objects further from viewer are projected smaller than same sized objects closer to the viewer (diminution)
§ Looks realistic
¡ Equal distances along a line are not projected into
equal distances (nonuniform foreshortening)
¡ Angles preserved only in planes parallel to the
projection plane
¡ More difficult to construct by hand than parallel
projections (but not more difficult by computer)

¡ Three aspects of viewing process: § Positioning the camera
▪ Setting the model-view matrix § Selecting a lens
▪ Setting the projection matrix
§ Clipping
▪ Setting the view volume
¡ All implemented in the pipeline

¡ Technically everything is fixed so that:
§ Camera is located at the origin looking down the
negative z direction
§ Orthogonal projection
§ Clipping volume is the cube with sides of length 2 centered at the origin
▪ So from (-1,-1,-1) to (1,1,1)
¡ We implement the model-view, projection, and
clipping matrices to force our model in into the fixed WebGL frame
§ All of them get multiplied together and applied in the vertex shader

So far we have been mainly using the identity matrix for each one resulting in all models needing to be in the clipping box, shown with a parallel projection, and more negative z values being further away (and positive z values being behind the camera)

2
clipped out
z=0

¡ WebGL (and most graphics systems) use view normalization
§ All views must be converted to the default view via transformations
§ Means a single pipeline regardless of view

!” = ! $” = $ %” = 0 ‘” = 1
Whyis%” =0?
)” = *)
1000 0100 0000 0001
In practice we can use
* = + and let the GPU set %” to zero so it can record depth of fragments
*=

¡ Ultimately we translate and scale the clipping box to make the view the same as the default view
¡ We can develop a system where we specify the faces of the parallelepiped of the clipping box

¡ Two steps
§ Move center to origin
§ Scale to have sides of length 2 200−&+(
&−( &−( 020−++,
! = #$ =
002−.+-
-−. .−-
0001
Where &, (, +, ,, -, . are the right, left, top, bottom, near, far values of the orthogonal region
+−, +−,

glMatrix.mat4.ortho(out,
left, right, bottom, top, near, far)
normalization means using the transformation to convert specified clipping volume to default

¡ Need to add a new matrix to our vertex shader § It only applies to the gl_Position, no other
computations
¡ Need to update the value
§ In this case in the updateProjectionMatrix() which is called in response to the boxes changing
§ Make an orthographic projection matrix: mat4.ortho(out,
left, right, bottom, top, near, far)

¡ Want to maintain “aspect ratio” § What is aspect ratio?
§ How can we control it?

¡ Center of projection at the origin ¡ Projection plane ! = # with # < 0 Top View Side View '" = ' !" = ! $/& $/& $" = & !" =$!where$= ) 1000 0100 0010 0 0 1⁄( 0 ) * + +⁄( Thus ! = *+ is transformed to !" = 1 #% & ¡ Must divide by ' to get homogeneous coords back ¡ The perspective division yields: +/ -⁄. -⁄. § Which is the desired perspective equations derived earlier § The projected values of + and / are now inversely dependent on the point’s depth (-) ! " # $%istransformedto ! " # ¡ However ' ≠ 1 so no longer have a point § Also ' ≠ 0 so not a vector either... .1 Consider a perspective with the COP at the origin, the near clipping plane at ! = −1, and a 90 ̊ field of view (FOV) determined by the side planes making % = ±! and ' = ±! 1000 0100 0010 0 0 −1 0 The matrix is independent of the far clipping plane location != 1000 0100 00%& 0 0 −1 0 ¡ After perspective division (), +, ,, 1) goes to ).. = )⁄, +.. = +⁄, ,.. = − % + &⁄, ¡ Which projects orthogonally to the desired point regardless of % and & != ¡ If we pick ! = − $%& + ()%& * = − 2 ∗ ()%& ∗ $%& $%& − ()%& $%& − ()%& ¡ Then: § the near plane is mapped to - = −1 § the far plane is mapped to - = 1 § the sides are mapped to / = ±1, 2 = ±1 ¡ Hence the new clipping volume is the default clipping volume 1000 0100 0 0 −&+( −2(& != 00−1 0 &−( &−( After perspective division (+, -, ., 1) goes to +00 = +⁄. -00 = -⁄. .00= 1 &+(+2(& &−( . Original Clipping Volume New Clipping Vol. and Original Object and Projected Object ¡ Previous example still fixed the right, left, top, and bottom clipping planes ¡ How can we make these adjustable? § Need to incorporate shearing and scaling transformations ! = #$% = 2' 0 (+* 0 (−* (−* 0 2' -+. 0 -−. -−. 0 0 −/+'−2/' /−' /−' 0 0 −1 0 (, *, -, . are the right, left, top, bottom coords of near plane and ', / distances to the near and far planes ¡ glMatrix.mat4.frustum function: § out argument it a mat4 to save to § left, right, bottom, top: specify corners of near plane § near, far: distances from the COP (fixed to the origin) and must be !"# > %&”# > 0

¡ This is a bit too general for most situations and hard to get all the parameters just right
¡ If we assume the near plane is symmetrical
about the ! axis :
“#$% = −()*h%
,-%%-. = −%-/
then we can simplify the matrix
§ This eliminates the shearing component of the matrix

%& 0 0 0
0 %( 0 0
! = #$ =
0 0 −*+% −2*%
*−% *−% 00−1 0

¡ Having to determine the positions of the top and right clipping planes is still a bit unnatural
¡ We can redefine !”# and $%&h! in terms of more logical values:
!=)∗tan .”/0
$ = ! ∗ 12#34!
¡ where .”/0 is the angle between the top and
bottom planes and 12#34! is the ratio of width to height of the near (or far) plane

near plane
aspect = !”

! = #$ =
cot ()*+
,-./01 0
000
cot ()*+ 0 0
0 −(+5 −2(5
0
0 0 −1 0
glMatrix.mat4 function:
perpsective(out, fovy, aspect, near, far)
(−5 (−5

perpective(out, fovy, aspect, near, far)
§ out is the mat4 to save to
§ fovy is the FOV angle in the y (or up) direction (angle between top and bottom planes)
§ aspect is the ratio of width to height of the clipping planes
§ near and far are distances from COP to near and far planes

¡ Start with the static cube
¡ Add twouniformmat4variables to the vertex shader
for the model-view and perspective matrices
§ Then set gl_Position to the projection matrix times the model-view matrix times the position
¡ Grab the uniform locations of the matrices in JS
¡ Add sliders to control the camera position using lookAt:
§ theta (-90 to 90), phi (-90 to 90), distance (0.05 to 10)
¡ Add sliders that control the perspective matrix:
§ near (0.01 to 3), far (3 to 10), aspect (0.5 to 2), FOV (10 to 120)
¡ Whenever a slider changes re-render the scene with the
new matrices

¡ If we want to visualize objects with both positive and negative z values we can either:
§ Move the camera in the positive z direction ▪ Translate the camera
§ Move the objects in the negative z direction ▪ Translate all objects
¡ These are equivalent since everything is relative so we want to incorporate this into our model- view matrix
translate(0, 0, -d) with d > 0

default frame frames after translation by –d

¡ We can move the camera to any desired position by a sequence of rotations and translations
¡ Example: side view
§ Rotate the camera
§ Move it away from origin § Model-view matrix C = TR

¡ Difference between moving/rotating the object or moving rotating the camera?
§No
¡ Results in the same view

¡ We can modify the PHIGS/GKS-3D viewing specification slightly to get lookAt which takes:
§ Position of eye/camera
§ Position to look at
§ The vector describing the up direction
¡ Used to be included in OpenGL but now we have a method
in MV.js to create the model-view matrix:
let eye = vec3(1, 1, 1);
let at = vec3(0, 0, 0);
let up = vec3(0, 1, 0);
let mv = lookAt(eye, at, up);
§ This is an isometric view of cube aligned with axis § Internally still just a translation and rotation

¡ Depending on situation others might be useful:
§ Flight simulator: yaw, pitch, and roll
§ Sky coordinates: elevation, azimuth, twist
§ Direction angles
¡ In the end they all just create a translation
and rotation for our camera/object, difference is in what values are given

¡ Copy the full rotating cube example
¡ Add a