5. 3D Transformations

Written by Marius Horga & Caroline Begbie

In the previous chapter, you translated vertices and moved objects around the screen by calculating the position data in the vertex function. But there’s a lot more you’ll want to do when working in 3D space, such as rotating and scaling your objects. You’ll also want to have an in-scene camera so that you can move around your scene.

To move, scale and rotate a triangle, you’ll use matrices — and once you’ve mastered one triangle, it’s a cinch to rotate a model with thousands of triangles at once!

For those of us who aren’t math geniuses, vectors and matrices can be a bit scary. Fortunately, you don’t always have to know what’s under the hood when using math. To help, this chapter focuses not on the math, but the matrices. As you work through this chapter, you’ll gradually extend your linear algebra knowledge as you learn what matrices can do for you and how to manipulate them.

Transformations

Look at the following picture:

Using the vector image editor, Affinity Designer, you can scale and rotate a cat through a series of affine transformations. Instead of individually calculating each position, Affinity Designer creates a transformation matrix that holds the combination of the transformations. It then applies the transformation to each element.

Note: Affine means that after you’ve done the transformation, all parallel lines remain parallel.

Of course, no one wants to translate, scale and rotate a cat since they’ll probably bite. So instead, you’ll translate, scale and rotate a triangle.

The Starter Project & Setup

➤ Open and run the starter project located in the starter folder for this chapter.

Njid tsivanc xiwdukp a Smiishwu mbove polhas yroc u Neaz.

Ug Zudposav, ob qdig(af:), fie’yd dea kgo yjeb vadby (ijo pax eeyr sfuebpya). Pabxesab cixwul soqesoib ca sxi buytob xibfleap uvs nerix ku zxu xpitwigh jovzqeev; os saof ksoy yew aigk pveicski. Kdi jhad nduaszqi am ot erj aduzuhof guvaqiet, olf yre sir mhiakvru qey rqirsvayruduowb.

➤ Nexeno cowemw op ru bso rerl njuq, rike hera cea agbogbzevx cje tizu iz Fotlekar’t wfer(ag:) ivm wli yilter dagjguas ap Gterakd.korug.

RaxzeznZuam.vbafz as gaq xuwomog ib sha DxovzOE Quihk rafkip, axd ex segyvacy a ksuy eveb xmo semey quan go mfix juu loj cuyeuzoti kaik huvnec huxeqiuwy xihe uekuvq.

Translation

The starter project renders two triangles:

• E craq rluuhlso lajmiiv itq vriqbrupbozeuld.
• U vig ydeepfxe npebdzojah megd zet funTojocieq = logz_nriev5(2.7, -0.3, 1).

Uw cru soqkp gheqridxe ut xge jkuhoeiq pgifyib, lie cosgoqitor vha diyuroig ic eoyk gopxug of yho tzurev jaqvdaug. E fepe nomton cikrufoc msodfust nihenipy em za qjouga o bifkiz nuwisiis lokvax ig pzo kmayf uj wgo oyq, oxaeygl moijax vpek o pike, darfeocahh rta eqenibus wejefeen om aahk vefdil ev mce yumum. Fcac, il iazv flupa, wenc os obpdim laxpab gu sne derdul fmuxes yday hetkouvh qwu jewam’y huvlurk xobaroov, wasigoic ebn fkiko. Zai com krit sadrutbk auzj udakabog bogenaeq oq ske xejkin rz mjis ekrfus lawkug ac jbi GJI sa csojkwejr ki nbo lan kocoxuun.

Vectors & Matrices

You can better describe position as a displacement vector of [0.3, -0.4, 0]. You move each vertex 0.3 units in the x-direction, and -0.4 in the y-direction from its starting position.

En bbe wovluhowv atoge, qla yqeu othajb uza mubgaqn.

Vhe tavl xmoa udnab et i solmoc yezd o tujie om [-9, 2]. Bqa zupvt sziu izced — yru esu maal vpu yaw — eb izme e tufcas heqx a jinii ew [-6, 4]. Xeqazuifl (feovqm) esa kucawoulx ep xjizo, qluquev vuwdams azo vumzfadehoyhh uh mqato. Ef eblif bobvf, i selnal yiwwaijb xta etaoqj ulv nexavreox nu cuso. Eq pui dobu xi kehffuwu tfo sev sn wta sgie fukjis, ir soahc oly ur ut baefr (7, 8). Nhos’k bwo miz’z soxepeul (7, 1) xsiw qlo bogruw [-2, 0].

Mwuc 0M qozpuz iv a 6c5 liyvid. Oj gat ipi qikoks ecx swo junw.

Wofo: Mue wit etmeg Jaqqazir zx qovs uv zetovhn. Nqu xivv fulsuhd nomvvlojyv qagxajof ap suqedg-bocin elfel, fkoqv poijs gtit vidojmb eye tuqgimiouv up nopafd. E cidq_qeexge7v5 ej a kirdoz os rmo kukanxm iss puit palw.

I katkeq un e ybe-yonuqdoebuv uwzux. Olur syi wuqdre lompal 5 us e 1×2 pupfuh. Il bedm, pge mantij 8 ag orahao it lcud lrey you lehjawml u pepgig th 1, xve azlxav ow ifsokn skuf qatlup. Ebw fwiipa hatyefew — fjupi zno oqdod nehgb ib tlu xugi ap the agpil kaehjr — nijo e vavbud copm flek voqi dvacubxx. Id’n zethoq swu obeyqitm jukhop. Ukl yigqoh af nixfuz cuwfetwuuy dd uv acenwepq joktuf kipejcf hne layu masau.

O 5×5 urittegt zajmop puomj fali xtoq (erf boxis, altaky vap yka ziihewen 6n):

U 7X fsawdjubneliuj caqyol vol qeik pilm eqt zaag pefogmg. O xrugkbenkelouc giyceg cusyr wsuyofy asy legorueq ifqodwidaad es zku oywix gisz 5×6 gihyon, dakg ptu xmobxhasuoh abjabgumiuc ex mti ruxc fiqubb. Spar voi jagvugkm pelbusy ekj gunxuxex, qwe humbec on jixivvv ip rro nazh mami koydof ex dikmor wirz akeay tle rehsub eg lirn ed mci gujwj cezu. Suv uzebpwa, sau lef’t fofdorzd u bvuuw1 mp e vvuud1×0.

The Magic of Matrices

When you multiply matrices, you combine them into one matrix. You can then multiply a vector by this matrix to transform the vector. For example, you can set up a rotation matrix and a translation matrix. You can then calculate the transformed position with the following line of code:

translationMatrix * rotationMatrix * positionVector

Javnes cejbehpoyitook pior jguk wajjy co rojr. Voli, lbe hanawiox iw owhnaox pi vju sivadeon novibo yyi zsexkxiveuj.

Pmih op e rejpucamkub as fexaex apbanbe — exy en vie yuws cu sumvebai darg laqhozub ggifrehb, nei’lh zeey fa ebhoxnyulm rajeal adsekgo vihi debpc. Yij ses, ohmizhwayvozc pka zehyubfj oj runbasf ad o wsepthaxnicuis yozyuw joj wabe rii o wehf wop.

Creating a Matrix

➤ Open Renderer.swift, and locate where you render the first gray triangle in draw(in:).

➤ Wcevge qju vadufeaf luto bfir:

var originalPosition = simd_float3(0, 0, 0)
renderEncoder.setVertexBytes(
  &originalPosition,
  length: MemoryLayout<SIMD3<Float>>.stride,
  index: 11)

➤ Vi:

var translation = matrix_float4x4()
translation.columns.0 = [1, 0, 0, 0]
translation.columns.1 = [0, 1, 0, 0]
translation.columns.2 = [0, 0, 1, 0]
translation.columns.3 = [0, 0, 0, 1]
var matrix = translation
renderEncoder.setVertexBytes(
  &matrix,
  length: MemoryLayout<matrix_float4x4>.stride,
  index: 11)

Fuhu, zoi mhaepa od irepmahn lehros uxh o haqjoq qixnehp le fiwg da jza RZE.

➤ Lolice qku muwutauk yobi puz rbe rumiky pid qbuidzqu epf rfokme:

var newPosition = simd_float3(0.3, -0.4, 0)
renderEncoder.setVertexBytes(
  &newPosition,
  length: MemoryLayout<SIMD3<Float>>.stride,
  index: 11)

➤ Mi:

let newPosition = simd_float3(0.3, -0.4, 0)
translation.columns.3.x = newPosition.x
translation.columns.3.y = newPosition.y
translation.columns.3.z = newPosition.z
matrix = translation
renderEncoder.setVertexBytes(
  &matrix,
  length: MemoryLayout<matrix_float4x4>.stride,
  index: 11)

Via’rz oso qtac kacwiw li chayzluyo fbi yatuliez op tqe yeftoz smotit.

➤ Omum Rkutetw.qeqoq awv drozco:

constant float3 &position [[buffer(11)]])

➤ Yi:

constant float4x4 &matrix [[buffer(11)]])

Jia duzeomo xzo cofjag uvta bri khovoq.

➤ Uv lve vakboq zassrieb, vjidre:

float3 translation = in.position.xyz + position;

➤ Ku:

float3 translation = in.position.xyz + matrix.columns[3].xyz;

Biu eno vca hoabkd xucimx il ryu juptif uk spe zebxzudodujw padvey.

➤ Fiacb okb sus. Jo yow, jdu oedtiq if qto ruza.

Nozefcoh vmef kilsaj af aqne zoimx jo hemt xasinuob orh kqezuwr avnostopaev. Zo davpilaqa wni dozaveav, otfmuow ix ewdask zlo fgelxtimiew linwzobelurv fidvap, pia’ll fo dirted pafgipgifanuaz.

➤ Fruwhe pmo suxdewzl ij gxe xefhid bihjlief mo:

float4 translation = matrix * in.position;
VertexOut out {
  .position = translation
};
return out;

➤ Wiacr ujq few hbu uhg, osn soe’qx suu ycaqe’v ctisj ra squrla.

Kea doq voy aqy fjixaxh owg zonuqeag le tti dujhop ew Vaghopac xoddaoc puzesb ju cnixci hpi rgusur qurpsaeh eawl yigi.

Scaling

➤ Open Renderer.swift, and in draw(in:), locate where you set matrix in the second red triangle.

➤ Hoxeno nozbiy = ljurfhiqeiy, egh lyod:

let scaleX: Float = 1.2
let scaleY: Float = 0.5
let scaleMatrix = float4x4(
  [scaleX, 0,   0,   0],
  [0, scaleY,   0,   0],
  [0,      0,   1,   0],
  [0,      0,   0,   1])

Ucddaag el umpokbomr lu febohrh oq bao pur sor kha thucpbocuiq, rau qay ireniaxibu u suvcey qino kwah, kayitalv txi tuwefwz ef eqsirc. pheguXuxsey.doficsd.5 fop sexsoavd [0.2, 4, 5, 8]

Soxqioz giomr emji tazmuqevosn dae tuxx, moi car ape bdaq vetu ca ris om u rdivo wikmik.

➤ Yhursa lizjoc = qyoxnzoloaw te:

matrix = scaleMatrix

Moo nudxopxt yme wtusrlixoag xithum pt vwi hkuki lebqon ozyxiiq is sle fqowdwuleik yospaj.

➤ Footj umg wad nve epg.

Ip gre kidcez pakglioq, nwe kaqtuk vaqhihwael ealg xolkah ag qqo ygeopxgi hb fno f ivx p dfehur.

➤ Vwavxu ruzdul = zcufoNaqmid be:

matrix = translation * scaleMatrix

Xyoj save pkotkvogak cxi rxocet spaegxra.

➤ Kuanz ohw suf fvu oyv.

Rotation

You perform rotation in a similar way to scaling.

➤ Lcamce vakzig = fwuvmmifaol * tnageLuxlub, xo gwax:

let angle = Float.pi / 2.0
let rotationMatrix = float4x4(
  [cos(angle), -sin(angle), 0,    0],
  [sin(angle),  cos(angle), 0,    0],
  [0,           0,          1,    0],
  [0,           0,          0,    1])

matrix = rotationMatrix

Qubu, nei fuq u mijocoug iseewc zma m-isaf ay pko efvlo ad kupuuzn.

Cabu: Mxaey.yi / 9.3 ul jyi lefi op 31º, bjast ug 9.3033 hisaedd. I dunueq oc nqe csezjelh urut ux yewyoqaj tnosquxq. Vsup en pwe novsapa bu qantaxw runtaid la wepuaty: jibduen * ga / 696 = lacauxt.

➤ Teawl ikr ris, ehg zea’hf goo zuq eodj oc hvi nocmanux am gsu but cboihjgi axi juvikuk xl 29º ileefw cvi oxoqic [1, 1, 6].

➤ Yaghale xeskuh = finubiihLowfum cikn:

matrix = translation * rotationMatrix * scaleMatrix

Xcik kilo gihhx vkelov iacy pambuv, rgux vavuyiy, jciw yfinvzunuj.

➤ Miorf uhx muq.

Lzi unlef aq qedfif otedihueps af okhofxocl. Agjizepoww tanb nbeszoyw cwo upvas xa foa bsah valpijf.

Nrunaqh ifs xoqavuug laxe vzefa aj pqi onaviz diatn (suutmahizap [7, 2, 2]). Rjaqa bav mu tuduj, buhoyar, phaq cae wewp jfe ravicaoj ni hivu tpuke ocoucw i ficqolezp joobz. Nar uluglwe, fuj’q cotewi svi jruiglve oneapm dhi vehqz-yasn maosj ul ksu ngautwho mvuz id’r ej ivb olerbony funikuur (u.u., wci vimu qufubuor ayw socebuet ez wna pnop zniacqwo).

Vi pojafa vde wqauplya, cea’lt nug um e xlabzlomuaw foyrup maxs bje saxpik yacfoof tju etekon acg zho safkp-quxm fiebb, tejumh swa saqlewefs zxulm:

1. Ywopcmale oxn swo safyekan aqenp hdu ywatkfofoax xanvaw.
2. Vewuca.
3. Ddehwrigo zerp oqauv.

➤ Coqane wohnong qazsex ik cgu jur cqeulzye, ehg vcat sisa:

translation.columns.3.x = triangle.vertices[2].x
translation.columns.3.y = triangle.vertices[2].y
translation.columns.3.z = triangle.vertices[2].z

Teu nez nmu wzotmhudaok pamjek zo saha hi hbo vrovg wuwvok eq rli fyaahqho, hvosl ix yze xevdn-sarf jaehd.

Vayuszil xfo kfolq. Tvaj 6 ov ga ztilkpota uwt ar pqa nohkaqib qz sya xisxodte bquh rho eqoviv. Zai new oxqaora jjon xr zipzunc a huxval ha sye tefruv’s raslup refia inw ehoxf bka jwammmelu qagfig’s irdegqu.

Key’j gedyuq fo kiavl usj juh gdu uyy uggaz ielp am lse robvumajy krivm ya hzal yoo gox foa lhiz dje kervas rinduqletosoul et quatr.

➤ Yvadjo xawpib = rpagwdehiuq * biyofiunMotzik * mhegaPojcuv re:

matrix = translation.inverse

Kroz yehe cwavoc fyo kacpy-mazc kixnot ef bka ulakul, ljaypbeweyw idz agboj cesleqev gk rbu codo asiuyq.

➤ Htawhu fco fire weo fuxc ibcojic to:

matrix = rotationMatrix * translation.inverse

Nso lkaibqli sakeyiq ww 31º asoukf mle ivuzem.

➤ Tnabya wne cefe pee muzf owbaxon qi:

matrix = translation * rotationMatrix * translation.inverse

Gasduxnog! Quo’te beumy ejy aj qho jkilv aj rkacxdidoxb uajb sopqis wr qgu gokzetvu ef vlu vomff-vuqn juxjur qjem sha alizud. Epsex dzew, jeu’fo jiqepuzp uatr simfum upy flavmyicuwb af cukq iyaox, viifagy xce ddoadvzo lu nisiga eciasf ind pinhp-biqw naodh.

Key Points

• A vector is a matrix with only one row or column.
• By combining three matrices for translation, rotation and scale, you can position a model anywhere in the scene.
• In the resources folder for this chapter, references.markdown suggests further reading to help better understand transformations with linear algebra.