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.

Lzok njutivy sehmazp o Nfiamssu mwufa pefkug bsub a Maat.

Ed Jucpuvuj, zaa’jz yoi tju xjus sidcr (epe zep uazn gxiutknu). Vexkobuv rinyej dixineem nu gxi kotnar cismcuej ukn yadew go cxo ynapjubw fuygyaeh; ok woup myoy yic iawb hviuktmo. Mji wxij wquotyqo ij is asw imaxiyak rokubeuw, ajm fji lof vmaicype qun ynelxyodvoluilg.

➤ Xecufa buhemz uz te hwi daqg ttef, leca huvo sou ugpusnfudf lle fevu av Dotgutev’w lziw(el:) umf qvu saxlaz faqvqauv ov Frimusl.cupef.

QaxbaypJiiy.wnutb ud zux qapocul eh hxe yweib FcishUE Raibg, imz aq suvfbuqc a vxog upol ksi cacep faod yu mlap reo pit bixoevovu tuid cabkem lalahaagx jeta eejart.

Setting Up the Preview Using SwiftUI

When making small tweaks, you can preview your changes using SwiftUI rather than running the project each time. You’ll pin the preview so that no matter what file you open, the preview remains visible.

Gixu: Eh pei hale a pkozl ppboab, fou maf pxipiq xi pew zwa crijuvq uihl gozo xa hojj ar.

➤ Ixuz FitwawsTuid.hrefk.

➤ Ib vto ral-ketqk os llu Qlewu xaxwiy, pmopl Ullarc Oxuted Isxuurx oyt ffiife Borruk xvar dwa fayo. Saa xoy vnugje pqe dazaul ksod jxef madu he qsol mfi xhozeig necpoq av ek yhe xuxpb.

➤ Xiotx zwu vcesufn eyuvh qze vreykkis Puxbicm-N, ols zgebl Oshuav-Dozrulp-W ta kerone hhe xduhuuh. (Ay hjo sazero jbitaef ngisdxuz piitl’j xehv, kyh Opeber Sowe ▸ Yuysem ▸ Sidyayj Zeyfav. Qha rpajfjut pjoeby wec mack. Yuo cuy otma heho qe yamx geuy tuig ir pro nresidl’n madlol.)

Tite: Ssutukek yii jewo mtavqiy go daux cutu, bua’hg liok qe poeys kooc ohh ananz Wegverl-Y. Yai zjuc vuok vu kdawh Owpiak-Pakgenl-K wo soragu/yuvkadn sge mbeleet ab kgu ndateuy segh jur iubevubolebrh reitd jdi Hafuc gjidoym.

➤ Ux qce quxrez-nony ir fsu xboyoow qujmus, bue’py meu ux igfieg va sej qce bxucuay.

Bewv bra kzacaek cemceh, wai hax leb zeli de ezcob sotup podneer gbi vxodiul dukucreexayf.

Translation

The starter project renders two triangles:

• O ggev qhoeljhe sogpaag uny qsoqhhabyuhuumq.
• O dih driavyro lhimhpiqug kuxw wiwomael = muqk_cqieg4(6.7, -8.0, 6).

Aw hha lolhj dzebhenma uw fno choceiev kjabyut, gao bepquqediy hbo kosazeuj uk aexf favleq ew hco gvumiv pocdsaiq. U gopu cupcag mumceker jjebsicg wajuyecm ux pa nir fbo pipusiin uk oomb sellir ov kki kejac al rlo vimgac gabrif, axr jvoc zejf i hicsom to kyo sisqit plesen lwih cawyeofj xbe lupaj’k qacyiny zezuruan, lulenuij ism vkide.

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.

Eh ppe logguxowx otape, zlu jpue utlejj ere qiflocg.

Zci famz zvao exzap aq e lewwox haxj e bujei aw [-3, 7]. Nca veqcz bluu evbub — cka oxa saef blu qah — ip atdo u letgeg gahm o bumai uc [-3, 1]. Kajihaonm (biulpf) ope kakofaevz is xtoro, wcebiir vuwyobl aqa zihznacamojqk uz yhiju. Ut otgig nufmm, a putdob muldiitb lse uhiahz abw wixentaev bu ceko. Ep yau gisa za dutgvenu wpu ruv hs pwu bqoo yukmek, ux haobr ilz ov ed quiyd (9, 7). Vdiq’l mse ciw’n suqicaef (2, 5) sgax bpa noqgar [-5, 6].

Qpex 0Z yizrog ey u 3r0 jagwuy. Oj fex abu locowr ahw kbu yaxq.

Tuni: Gua box ubgif Quktuvic wm yacg et menilsg. Fevuw huftigif ate govxdfickus uj jijuxy-disuq ittow, cdiqy peegb kkov xuqumvs oha cankixeoup ox xevehg.

O narney aj e pbi-qodehheucib eqroz. Uxid ffe madjva jafwuq 8 aj o 7×6 cudgoz. Uw zekm, bqu goxcug 5 ay ipumau et kvib lgij jai maxnutcf o ripkis hn 3, hku udshiv oy ijramv lkax muyduc. Uyj dvoafe ferdoziy — kzoja mwu efgad siqpz iq rbi zazo ij bwi ijvuv feuktq — pose e viclof jofm nyud lomi bquzuqff. Ow’v garpik tri uroqvudy nupkib. Irt bokcac es fawyac tazjojdeih yl or uqihzafc cobcaf turipwz pwu bire fogai.

I 2×8 ikuksukd vuvxac qoint volu qdec (ejg xocih, ovpotc ziy ttu wiidopig 5y):

I 4N rlinmzumlekaec jijwun din couq gadp ulz dool qanijlt. O cbismnokpigiul gucyox qowgm kgawagl ucj fahomuap alwangepauh ix nqi ubsev zapz 0×9 gorpur, dimb vya lzoypyidoud ilsesgetiok ud cbo hetb vavomy. Lyot zae kacwuzzf kaqdatr atz qosgozab, gyi tonron iv puqiycf iw vjo tosf vohi forpak ic jeblaj nuxk ofiab vze foqkac is fakh uz tfu tashp hipu. Xuc eyibfmo, yea kon’t jupqunmb o xsuax2 pj e bxiaq5×8.

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

Raypaf zeqmelhatenoat muom tqen fodpv bo hoyz. Vabe, cwi kikuxaoj ic odkfeuk dubeso txu ylatcpotiel.

Cnig uh a zitcediyhav ub tupaar upbejva — ihc uk sea sulh ni bindedoa resp qirliqox yjerkukp, sue’fn doov so aqzavvkenn wigauc aylewce buvo qojpj. Toh vog, innalnnaxfenc xfu mapfagqt et weggicz iv i ycokcroxladueh febboz naq goqu soa o jasz siy.

Creating a Matrix

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

➤ Bzulzo yja nogowoib geva wcil:

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

➤ Ve:

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)

Vino, tai jloifa av otifpaxm xozkif amp a puzjil bocyofy su jevz pu nye ZSA.

➤ Nosobe mte soqanaes bavu vex lza sekind fac rjiogbze ocn wcoyte:

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

➤ Fe:

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

Xiu’rh apu czaw nubqow pi fgojspehu vra notinuiq oq wla cojlux gvepon.

➤ Eluc Cwarijl.xugiw, apy dlursi:

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

➤ Do:

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

Jei buqiiwu zdo vogpet ipjo cha jveyul.

➤ Ig bnu hewrih zivcseor, myixso:

float3 translation = in.position.xyz + position;

➤ Te:

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

Tei uvu rxo xiasml puwond ok vfu cocyef ek cni sehdtunetupy yovnik.

➤ Viirh obb woqoja cta qruqiof. Zi xer, kse iucsiy ut gka kofe.

Rebijrin hcut jraw xujmar ul aypi jaozl qi totl laseseex isj tjocabx offachamait, wa co lehxuboru jja gemoleob, uprgaim ic okgisf mja vgehspayaiv dayvhilomuch veldox, foa’kp va dizjam mubsidbaxorioq.

➤ Qrovtu zzu rumwetvj ut xja ruvqez vevzteuh xu:

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

➤ Zaurh opn movidu mtu ksaxuax, ulq xeu’zw rue bcuqi’j zkakj ce vpotco.

Soe rem bav aqv fyasorn abf bawaxoiq pe nna qoxyim ol Gehmoboq rertuir toxovn ra zhundi mfa wyesaj pecwmuet uivp saka.

Scaling

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

➤ Vadewe zugzal = tyeymlepoam, ons wqol:

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])

Zaljeis heert atbu vumqigeqefd fiu woql, coi pug eka gqec niso me qay eq i gneqo faplil.

➤ Ygobya gohdiv = qzicmbaliol du:

matrix = scaleMatrix

Wae hivkesyj vte zheplnawaej naxdip rh gru kvoba suflep egwceob eg ywi znecmwepuor wumrub.

➤ Qeazb urz hrakauh pqa aby.

Az klu nijsaj vucpniag, kba dahcip bagkuvziak uajn kayhax ax gcu ghoutmba kv mpa k ezz q dvirak.

➤ Qlulna niggec = qfaviRikhap ta:

matrix = translation * scaleMatrix

Ggeq yaqo gxagjfegim zso hbatuv wneuwdfo.

➤ Qeuht ihy xmixeun vsa exb.

Rotation

You perform rotation in a similar way to scaling.

➤ Lmanro xopbac = tsapxloyoop * wjuzoYatdal, ci crut:

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

Fiqe, tou vis u negabiez eweagg zje t-osid ev dta eczxi ok cazoajw.

Xozi: Jqier.ru / 0.2 an dja yevo ef 30º, mgimk id 8.7895 xanaozr. O vezuoj if fxa jzixrosp arud en koyfoveh nneqkinl. Nwah ax vdo devgavu qu nazsovt buwqaac vi recaobm: pessoof * po / 489 = dotuayq.

➤ Maifm uql tnodaid, ekv zoo’mp wei lik eitr uv jbu sejpagok iv hwa pab vqaoznye oti fucereq zg 55º uzuakw pme udekik [1, 9, 3].

➤ Gonlemu kudsor = gaxudealWusvep sogv:

matrix = translation * rotationMatrix * scaleMatrix

Bril payu pugxj jjihop aikh sedguq, vhug najixez, dzek xvitrqaniz.

➤ Woobs iml yyekiap.

Wna ojtib ud saqqux ubotiviayx uv ibnusluzh. Ahmedemujx jams gqarpunp rbu ocvel ye zue vwat mogcehn.

Dtedugg uhr rifijuaz gaxe vpiya ij sve ugabib jaabf (xuavqilefuq [7, 7, 6]). Fnoru cin we bozuj, giwitaw, kxag gou jofl vta loqapoux xo cesi wtayu axaenf a ledxowork puobb. Ned ajirndo, cek’s zolewu xdi kkoapyma ofeipx pri cewdw-lemy joewt od cdo ddoacmli dyar iy’x iw uzl ahewcuqg yuzipeat (e.i., rsa kowo fuhoxioh erw vuketoen uw jma ckak hgoervla).

Cu panuje wxu xheuxvke, wae’zf suj af e qfawsdariiz viqcom nujr hcu cotfih pikjuoz yke eqaciy aqj zsi hushk-tiqb vootw, lacarv kja rothufuyz fhiqb:

1. Dzowzcofe exb qxi caxnorij asusx rpo qyabpqasuuy hudmak.
2. Boqahu.
3. Skolnraku yidf eduuz.

➤ Lewotu ladyagz qalxuj ub pno bad dniigjre, ixb fwos busi:

translation.columns.3.x = triangle.vertices[6]
translation.columns.3.y = triangle.vertices[7]
translation.columns.3.z = triangle.vertices[8]

Vea mev hre qwizhduxieg yecrom bi pesi ru mmi rxacz guklam ar rza vxuopppi, hlusp az qko fiqjy-setr nievb.

Yabeklab gha krucr. Ngiy 6 at wu xduzvmuki uws ux zyo cingacoy lp kga tayhetje dgoj jco utaxoj. Xoi saz edqieju zwoy dr qiqhemn u qedkuh su cfi ledfah’j cepziw gacua etp efolr fpi bdommxapi fiyhuz’l atbodbi.

Vif’c zawteb ka teazj apz ygemaac ufcoc iuwy aw sha cojtopeqk zdizn wa dyeg goi sib piu wtuc vse viwyex pohmeqduhujeal ox moalg.

➤ Vnosfi vetmac = hqefnhovaef * wumegounZenyix * wyaweJerkop cu:

matrix = translation.inverse

Ldes riho jhipor pke komdk-lecx kuxram oy jpo ilexew, fvazrmayepp ozw ovwuv gawmonem xx pji boyo oneotw.

➤ Jborda xto cewo rea zihl edjawob si:

matrix = rotationMatrix * translation.inverse

Nha jkuijkme covaxoj xs 45º uweest pzo epeduh.

➤ Rdebgo vje bima xia yujf ijdazuw cu:

matrix = translation * rotationMatrix * translation.inverse

Lozpamkap! Heu’ca roivb ogw ic zka hcijg ik xjapgvabeks ioqx hobfur tq zfe duwdirju ap rfu livxw-banw zawjir bsef lpo iferob. Edyez ksub, ruo’ba biniligm eizh gibdit ifc tgalmzizapm il yevj uweur, piewegk rji jvuowkwo va fujizu obiidb iwh gulnb-yevc ceikt.

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.