/3/5 Computer Graphics D Transforma5ons Review Verte Transforma5ons posi+on the model posi+on the camera adjust the zoom verte shader input verte shader output, transformed
/3/5 From Object to World Space Graphics Coordinate Sstems Right hand (or counterclockwise) coordinate sstem
/3/5 Object to World Transforma5ons D Transformations Required background reading: https://open.gl/transformations 3
/3/5 Translate (t, t) ʹ + t ʹ + t t p p t t T(t,t ) t Note: 3 rd dimension needed to encode transla+ons in matri Translate (t, t) OpenGL Implementa5on Verte shader: t t t p t p in vec3 vert; uniform mat4 model; gl_position model * vec4(vert, ); OpenGL: using namespace glm; mat4 tmat translate(mat4(.f), vec3(t,t,.f)); // Set the uniform model in the verte shader. Using tdogl: gprogram->setuniform("model", tmat); 4
/3/5 Transla5on of Objects How do en+re objects get translated? Individual ver+ces get translated The transforma+on applies to all ver+ces in the currentl bound verte arra object (VAO) " # % " # s s Scale (s, s) % ( ʹ, ʹ ) (, ) s s S(s,s ) fied point (pivot) 5
/3/5 6 Scale, then translate (note the order of calls in OpenGL): Actual transforma.on order should be read in reverse using namespace glm; mat4 tmat scale(mat4(.), vec3(s,s,.f)); OpenGL: Scale (s, s) OpenGL Implementation s s ( ), ( ) ʹ ʹ, pivot mat4 tmat(.f); tmat translate(tmat, vec3(.f,.f,.f)); tmat scale(tmat, vec3(.f,.f,.f)); Reflec5on as Scale Along X- ais Along Y- ais ʹ ʹ ʹ ʹ
/3/5 Rota5on cosθ sinθ sinθ + cosθ ( ʹ, ʹ ) θ (, ) cos θ sin θ -sin θ cos θ R(θ) pivot In D, rota+on is about the z- ais vec3(,,) Rota5on Pivot Default rota+on center is world origin (,) θ > : Rotate counterclockwise θ < : Rotate clockwise 7
/3/5 Rotation OpenGL Implementation cos θ sin θ -sin θ cos θ ( ʹ, ʹ ) θ (, ) OpenGL: pivot using namespace glm; mat4 tmat(.f); tmat rotate(tmat, radians(45.f), vec3(,,)); First scale, then rotate, then translate: mat4 tmat(.f); tmat translate(tmat, vec3(.f,.f,.f)); tmat rotate(tmat, radians(45.f), vec3(,,)); tmat scale(tmat, vec3(.f,.f,.f)); Rota5ng an En5re Object 8
/3/5 Arbitrar Rota5on Center Where is the rotation center here? Arbitrar Rota5on Center To rotate about arbitrar point P ( r, r ) b θ: Translate object b (- r, - r ) so that P is at origin Rotate the object b θ Translate object back b ( r, r ) In matri form: T( r, r) R( θ ) T( r, r) 9
/3/5 Arbitrar Rota5on Center T(r, r) r # # r # " % " # R(θ) cosθ sinθ sinθ cosθ % T( r, r) " r r # " cosθ sinθ r( cosθ) + r sinθ % sinθ cosθ r( cosθ) rsinθ # % Non- Commuta5ve Transforms Scale then Translate: (,) (,) Scale(,) (,) (,) Translate(3,) (3,) (5,3) Translate then Scale: (8,4) (,) Translate(3,) (4,) (3,) Scale(,) (6,) (,)
/3/5 Non- Commuta5ve Transforms Scale then Translate: p T ( S p ) TS p T(3,)*S(,) 3 3 Translate then Scale: p S ( T p ) ST p S(,)*T(3,) 3 6 Suppose we want Eample What are the transforma+ons?
/3/5 Composing Transforma5ons Matri mul+plica+on is not commuta+ve R( 9 ) T(,3) T(,3) R( 9 ) Rotation followed b translation Translation followed b rotation Hands- On Prac5ce D Transforma+on Applet at hdp://www.wile.com/legac/products/subject/life/biological_anthropolog/ 47579_virtual_reconstruc+on/chapter5_trafo.html Handout distributed b instructor
/3/5 Hands- On Ac5vit Modif _tetures to scale and rotate our tetured image to produce this image: a) Update the verte shader to input a model matri into a uniform mat4 variable, and use it to transform the input verte (see lecture notes) b) Switch to the main program. Reset the verte coordinates in vertedata to represent a square, then focus on the Render func+on. c) Before drawing the image (with DrawArras), create the transforma+on matri and use it to set the model shader variable. The transforma+on is a uniform scale (b.5), follow b a counterclockwise 9 - rota+on. Recall that ou need to list these transforma+ons in reverse order (see notes) d) To be able to use matri opera+ons in our code, include <glm/gtc/ matri_transform.hpp> in our main program Hands- On Ac5vit Lets rotate our image over +me and for fun well also reposi+on it at the bodom- right side of the window: We will use the func+on glfwgettime, which returns the +me elapsed since GLFW has been ini+alized To rotate the image over +me, use a rota+on transforma+on similar to model rotate(model, (float)glfwgettime()*5.f, vec3(.f,.f,.f)); In addi+on to rota+on, scale and translate our image to appear similar to the one above. Pa careful aden+on to the order of transforma+ons Note that the model transforma+on matri gets recreated each +me the Render func+on is called (ever frame) 3
/3/5 Hands- On Ac5vit 3 Lets draw a second image with another call to gldrawarras, using transforma+ons onl: Add a second call to gldrawarras for the second image Before this second gldrawarras call, set the transforma+on matri to scale and posi+on the image at the top- lel of our window Readjust the transforma+on matri to scale this second image over +me, using the sin func+on for eample, the scale factor could be sin(glfwgettime()) note that sin will cause the object to invert as soon as the scale turns nega+ve Hands- On Ac5vit 4 Create a D image of our choice. You will need to tell the verte shader how to transform the verte data (b senng the model uniform) and draw it mul+ple +mes with gldrawarras You are free to choose our own design, or ou ma tr the birthda cake shown below. The teture images are available on the class website.. (,).4.4.4.6.4.8 4