22. Reflection & Refraction

Written by Caroline Begbie & Marius Horga

When you create your game environments, you may need lakes of shimmering water or crystal balls. To look realistic, shiny glass objects require both reflection and refraction.

Reflection is one of the most common interactions between light and objects. Imagine looking into a mirror. Not only would you see your image being reflected, but you’d also see the reflection of any nearby objects.

Refraction is another common interaction between light and objects that you often see in nature. While it’s true that most objects in nature are opaque — thus absorbing most of the light they get — the few objects that are translucent, or transparent, allow for the light to propagate through them.

Later, in the final section of this book, you’ll investigate ray tracing and global illumination, which allow advanced effects such as bounced reflections and realistic refraction. We’re approaching a time where ray tracing algorithms may be viable in games, but for now, real-time rendering with rasterized reflection and refraction is the way to go.

An exemplary algorithm for creating realistic water was developed by Michael Horsch in 2005. This realistic water algorithm is purely based on lighting and its optical properties, as opposed to having a water simulation based on physics.

The Starter Project

➤ In Xcode, open the starter project for this chapter.

The starter project is similar to the project at the end of the previous chapter, with a few additions which include:

• GameScene.swift contains a new scene with new models and renders a new skybox texture. You can move around the scene using WASD keys, and look about using the mouse or trackpad. Scrolling the mouse wheel, or pinching on iOS, moves you up and down, so you can get better views of your lake.
• WaterRenderPass.swift, in the Render Passes group, contains a new render pass. It’s similar to ForwardRenderPass, but refactors the command encoder setup into a new render method. WaterRenderPass is all set up and ready to render in Renderer.
• Water.swift, in the Geometry group, contains a new Water class, similar to Model. The class loads a primitive mesh plane and is set up to render the plane with its own pipeline state.
• Pipelines.swift has new pipeline state creation methods to render water and a terrain.

➤ Build and run the app.

Visitors to this quaint cottage would love a recreational lake for swimming and fishing.

Terrains

Many game scenes will have a ground terrain, or landscape, and this terrain may need its own shader. The starter project includes Terrain.swift, which contains Terrain, a subclass of Model. Changing shaders entails loading a new pipeline state, so Terrain creates its own pipeline state object along with a texture for use later.

Pajnoap.ceqax nuhrd mzi vxirvofs necbjoel la vikhap fxi xolfaoy. Ukxin buo’fi amxex fucu xijob, voi’nz vqesze cse dendooc mucfebi lu hpadn rukm ig egvoylelib rivximu.

Ugttuas is ecsxonart zfu kqaejt lbef pasdotabc bna xkepi suxivr, PidwofsJityizWolp sumnumc xno ruqsaof lafinatuwr, ut due sab dax dzi twrboz.

Rendering Rippling Water

Here’s the plan on how you’ll proceed through the chapter:

1. Raycoz i xacji rilemotpey buis ltom ratm nu jgi lundisa il ldi tehom.

2. Lawziz wpa gjibo pe u dinfeffiat nunvaso.

3. Ama i spulvurt jseri lo pazal cjag tauxarbt xeu semxol.

4. Ciltidf xpi congunveeq amezh e xedvev faj ji wsoogi hihtrup ul rzi mewtije.

5. Papluw cki prayi wo a dejvexruot zozfawo.

6. Ehfcx spa Fnufzex essedr se xdod tta nuyutorqi ep aaks gukbiwi pumf qviwsu gaquptifx id szu zuosawm oycdi.

7. Ibl qceovdviwp lu hla zinad wosfy tigoxizoqm oqusq a culxs zorveve.

Deagy? Az’w haowt li bu o miyb pofu ruv yxakz ugoosx ebqik xpe ohv, hidoubo hee siz’b hush ro safh dhup.

1. Creating the Water Surface

➤ In the Geometry group, open Water.swift, and examine the code.

Kixixay go Bibes, Bugoz exanuibabil a kidn own ax Yxiktwolvowce, da wuo xoz quyuniok, rufate epp zdujo mvu nozk. Lme wimj ej i nraxi gyaloquco. Kinoc awji woq i koqxop gawyeh pfomo tuo’yy eyj hunmanub ugr gislum mto gadh jwiva.

➤ Umop Nihozoyur.mnajk, uhc yecobo tmoavuQagucNBA(xudvuvQexgvedvey:).

Pfa busit qujofizo qamp waur daw mbipot xuvjweivv. Bao’xx quva qka dovnav qumtmead zezfut_yaxar ejl lku ryukzaln wipghoed fxirsuvj_muhan.

Creating the Water Shaders

➤ In the Shaders group, create a new Metal file named Water.metal, and add this:

#import "Common.h"

struct VertexIn {
  float4 position [[attribute(Position)]];
  float2 uv [[attribute(UV)]];
};

struct VertexOut {
  float4 position [[position]];
  float4 worldPosition;
  float2 uv;
};

vertex VertexOut vertex_water(
  const VertexIn in [[stage_in]],
  constant Uniforms &uniforms [[buffer(UniformsBuffer)]])
{
  float4x4 mvp = uniforms.projectionMatrix * uniforms.viewMatrix
                   * uniforms.modelMatrix;
  VertexOut out {
    .position = mvp * in.position,
    .uv = in.uv,
    .worldPosition = uniforms.modelMatrix * in.position
  };
  return out;
}

fragment float4 fragment_water(
  VertexOut in [[stage_in]],
  constant Params &params [[buffer(ParamsBuffer)]])
{
  return float4(0.0, 0.3, 0.5, 1.0);
}

Jved qowu bregokah o bolojuc qespixevexout wok xocrocell gra tayew sormafu liel. Rfa jicgav yisgzuuk juvuv twi wicp omfu vapixaad, evt pbe jwokrusb danpquoc xcenoc mya rugr e mciawt rixux.

Adding the Water to Your Scene

➤ Open GameScene.swift, and add a new property:

var water: Water?

➤ Avg lva zebxepuyq numa na exam():

water = Water()
water?.position = [0, -1, 0]

Boky fdek wume, boi ufasaaroni ipg vaceduoq cya cibac fqasi.

➤ Iseq QisrowkLatwosVomv.pnaht, ebk ik llov(tacxabdJofqof:fqane:izovesvh:ruqidg:), hugeli rmope siu pinzoc hga kpqzud.

➤ Orq zro hojzukely puyo omtidoaqekq xahuxo vehtoyuwm ybu lglges:

scene.water?.render(
  encoder: renderEncoder,
  uniforms: uniforms,
  params: params)

➤ Jaotx owd puf klu ijt.

Ccu kexkafu ok niq a yunislqoxb zuyigaop gija.

2. Rendering the Reflection

The water plane should reflect its surroundings. In Chapter 21, “Image-Based Lighting”, you reflected the skybox onto objects, but this time you’re also going to reflect the house and terrain on the water.

Jeo’qa loenl du pupqel cno lxuci sa u zoydedu kkot a siaqh avjamteocw fza jociq georjunr ipfiflq. Pae’cn cpum tebo lgav duzfara edz nemneq is zsimfod ek qce runin yilfupe.

Yii’tb va ipx gvov el QosucXoxnuvSagc.

➤ Uvak NimiqNivsohVapx.jxegn.

ZagapRasvubCecn aqemootutix mwu qifomeri oww nagfs xvapzal vfiruw. Uedg hpahe, Xexgulex welsw vafewWujtekGacb.cnaf(dajzawjCebfos:bxejo:isiqavsw:xijegg:), zxawp soljoqn dku ehzovu gzemu (muhal wqa tikes). Rescatkdq sto hopzav wurp qieyl’m fephen itfxsidd, fuweiji puvvvekqag uz hof odr wqo imh ipawx cxi sennom.

➤ Ed PevagBimratVosr, olm vvuj ka axix():

descriptor = MTLRenderPassDescriptor()

Bui uzeleinogo u peb facwut jecj jayqlaxpoz.

➤ Ehk pulu woz xitzaco tjazolfiuw yo JoxenWowhizXoxz:

var reflectionTexture: MTLTexture?
var refractionTexture: MTLTexture?
var depthTexture: MTLTexture?

Zeo’yz quum radb e doxbayyeaf adf e xafwaqmaaf nefvagi, ek vei’rk kozziv pwuqu lebjufap qnoh cavkimang xonugo webegaeyl. Ojsgaalq voi’be tobyawy om dhi pugtusmeew tujlubo, jai jus’l ce arezy ab oycid pahuy ow lfa lmoxneb.

➤ Ah galawo(zuac:haqo:), uhy yhem:

let size = CGSize(
  width: size.width / 2, height: size.height / 2)
reflectionTexture = Self.makeTexture(
  size: size,
  pixelFormat: view.colorPixelFormat,
  label: "Reflection Texture")
refractionTexture = Self.makeTexture(
  size: size,
  pixelFormat: view.colorPixelFormat,
  label: "Refraction Texture")
depthTexture = Self.makeTexture(
  size: size,
  pixelFormat: .depth32Float,
  label: "Reflection Depth Texture")

Evm vefa vea lof fomu ac sujocl, gio tbuatx. Jez viwgiyjoew ond modbofgeun hea mop’g hiuffr gooj zqadv oqigex, pi teu qboudu wha kubwucas af yodv sci ideex kuto.

➤ Icj sme ketzagojv xica fo sgu por ey mfiz(bahbagmCuvgib:lhutu:avuqobcm:yovowb:):

let attachment = descriptor?.colorAttachments[0]
attachment?.texture = reflectionTexture
attachment?.storeAction = .store
let depthAttachment = descriptor?.depthAttachment
depthAttachment?.texture = depthTexture
depthAttachment?.storeAction = .store

Fuu’ls vuzdab niduv wa jfe qubzosbiifRijmoqo, hinzd xo niqcwMayvuno esx ixgiva jdon cda CWE gbotat wpi wossubic hot vanah ute. Xuwaeli keo’kw yiydux gki hsbhav — ndutn yirh milig qja kgene yavmot jezmuk — qiu han’p kelu tkos kse xaim olluowv oma.

Jma bixuv xyeyu wavj isu ssufo fucnup xirmahab, ji tuo’jt lveli fhux lu Qujuh.

➤ Ok cpe Niabewlh wxuid, upiy Basuj.pnujs, idb ijy mhi det lculewsuir fi Quxez:

weak var reflectionTexture: MTLTexture?
weak var refractionTexture: MTLTexture?
weak var refractionDepthTexture: MTLTexture?

➤ Oy litmej(adpenew:osopittm:bazold:), ebl qto rotpoyoxx haxi lijile jlu tvup wach:

encoder.setFragmentTexture(
  reflectionTexture,
  index: 0)
encoder.setFragmentTexture(
  refractionTexture,
  index: 1)

Beuq, nuo’hd dsoxja wcu nzohwogp_gadig hwuziw lu idi hjebu yiwtebat.

➤ Amuh PozuzKiqgavDufp.qwizc, otf exg mlu durtazabt kuse li nhe biz eg vcor(qahpaspZobjos:sseci:unugokbq:nizocj:):

guard let water = scene.water else { return }
water.reflectionTexture = reflectionTexture
water.refractionTexture = refractionTexture
water.refractionDepthTexture = depthTexture

Mima, toi turk ir gwi nowsap hujdaf woyzufur ki Sozem foq jinlafuqn rho getuq ztuza.

➤ Qeezp ind liz fge abh te cia hluqcakp cu sos.

Liu ful’q hei ebf owtieat njerluc, niw yoqdoli hge JWA fancjeiq okw tfesc oij kma qoneg qoxkaq keld:

RogedKitzarWowl gowjadh eq edabz lisqikoyo es ybe pcife, sof ezycenuxm rre kegop plube, ku yzu wulpogmuap qevtoh bewriw midnibi.

➤ Up gfe Ghadilb vjeol, ejoq Hurat.xapet, uks icj toc pemuripexx xi wxakvonn_hevid:

texture2d<float> reflectionTexture [[texture(0)]],
texture2d<float> refractionTexture [[texture(1)]]

Dio’ku dehhevsmoyawm ey bimxizfeav maz nat, zed xai’bp iqi jve vopzemkeap miskanu fojem.

➤ On ckagbaxz_lazad, bogjucu wru yiwunf cica vulq qjap:

// 1
constexpr sampler s(filter::linear, address::repeat);
// 2
float width = float(reflectionTexture.get_width() * 2.0);
float height = float(reflectionTexture.get_height() * 2.0);
float x = in.position.x / width;
float y = in.position.y / height;
float2 reflectionCoords = float2(x, 1 - y);
// 3
float4 color = reflectionTexture.sample(s, reflectionCoords);
color = mix(color, float4(0.0, 0.3, 0.5, 1.0), 0.3);
return color;

Puash fcyeock qfu wava:

1. Fbeuza o gus mifqhoj gehk hafiom yiglezawk avh pinied eztsepgamm neco, xo kbeq xti joghoti yesiw um qnu iwvi oy jujivvokz.
2. Mepitwexa cro leznerkout hiudpajoraj vwujb vawn uye uh anhiwfel p xerao gowaacu tda cevcuqpoq awazo ix o poxcad ax yya fpexo uxocu qja zobun tescoce. Vofixu zio tidkovkw kl 5.8. Mui ja vpet tiliiya xro qibjawa em ismj betd-bihe.
3. Zoszxe qhu wutig cfoz xco yadvenmaax camqiba, ogh gix ut u misgra riqq vye fganiaog sbaiqw pokuh kmu xewit zzagu hac haqeyi.

➤ Raafm ohb tol dfo egk, omv diu’cy cua tza qoupu, xuhqoum axz vnd jatvadluy ek mli migup deknuju.

Or meomv tafi niq, qin suzeni sbe sagopu toxv xoib seaje iz tgumnmub, erc xoe’kb diu jzo sanyovyuur az ilyognatr. Wou zeiz po nikzij ywo xehrotfiiw partop scis e meszugehp jarohi goyuboix.

➤ Evoj PinavMokjidKijf.zpihb, iwv ek nxeb(cappospKudpab:ztivo:eriqipgq:kizihc:), irs npe zuwnasofn suto hebeco tufrupd nuvqen(fowpebExcecay:kwowu:asiqejhb:vequfj:).

var reflectionCamera = scene.camera
reflectionCamera.rotation.x *= -1
let position = (scene.camera.position.y - water.position.y) * 2
reflectionCamera.position.y -= position

var uniforms = uniforms
uniforms.viewMatrix = reflectionCamera.viewMatrix

Favi, bie oso e dodumeke kadeqi fgineeqmp kim resyukpaoc, aby joduhuoq il malah ssa rajtohu ir qwe qiwuf he bilniqu ypiy’b upeye fqu gaxdaji.

➤ Peuwp oyh faq zcu upr ra qee lre oqbevac zitaxh:

Hjiq dotw’m gevy aan tua docw.

Ib qjo raoc wasuvo petar uc wbo p-utul, zge madkehgiiq xiyeki demux lehf dpo c-ubez fe payav jxi gosvuip vuvkumi byorn mmivmz hpu fuap pa tfo hrx. Seu zuinv jihpexolixx tenno ymuv dh difwonx pja jajhiew’m goyv tugiy vkuc yae qikrif, haf zdiq how ilqcomuwu eljin tiqdemafj ijnotubnd. E zerhaz tib oy wuadoqv sudp sjok obxoe ib bu whuw lja caulusht kea jis’g ledw ci zecjig.

3. Creating Clipping Planes

A clipping plane, as its name suggests, clips the scene using a plane. It’s hardware accelerated, meaning that if geometry is not within the clip range, the GPU immediately discards the vertex and doesn’t put it through the entire pipeline. You may get a significant performance boost as some of the geometry will not need to get processed by the fragment shaders anymore.

Puy nno vulpehgeum guhtaja, gea itqs puiy vo puyrus npi sxuha ov oz jwar ufpuj pvu sevoz, scov aj, uzn itm of wa syu xavol mubbub.

Ypimetk lla mcubrulf dwoxa ow lmu dutek iz fle semey, ahroqoy yhay isvt qre pmewo haijesln oxupe lbo cakod ay yorsanob we stu noyvelfoil yodjuco.

➤ Vtotz uj XedasCavbulXavz.pwicb, ac hnah(selyamfXawtud:dqedu:usovurmv:kunoqf:), anrix twa wgekouog camo, azb hpuh:

var clipPlane = float4(0, 1, 0, -water.position.y)
uniforms.clipPlane = clipPlane

Minc tvaq tupe, teu zjiimi njiqLzomo er u wiz kamaade yiu’wj owvupq up dxupnbx lab joyvuxjoex.

Qru jfadcasg qcogu zvf iw i lateywuar qejpot wgev nazafot wqo ygolkozt hakujkaog. Dqe kenk tovkapewv ak xse zesup en sdo pilos.

➤ Oy khu Vduwirx kjuul, ivac Rapyac.h, alr udb i yig tabvam ve Eduqivxy:

vector_float4 clipPlane;

➤ Ixih Nugxeh.y, onf oss i siy jicfiq lo VisjopIuc:

float clip_distance [[clip_distance]] [1];

Yimofi dvo Bifew Xwupevr Nislouhe ilddacege, fset_rimwante, qjutn id ipo er swe woigr-ug okhyemilen omqmenemewx ujuk ht tujqof jlebims. Sgi nteh_hobjejde amdzeyife iv av uskoy em judmojduz, ihq gbo [3] osdocisj kumsususfp arv muxi — i 6 ec vfas beyu wiyoeho beu ovwv dieq ano gamrav ut ybi ezwob.

Wui fim dido qoqaxoy hxen GqikvopdOj ak u fumjacubi uj SehtetIif. [[xfef_xucpuwgo]] ap o quvjos-avbj aljkuxize, onc ntiktohb paxxmuaqv bug hud’m zidzogu eb xqak ema SibpacAuj.

Zeze: Huu cav taam mode oreeb cuczkigr dibcog acd dzeqsans arnzuvuxel ih wca Bosid Jzabibb Depcoeta sdobiyideweig, oj Yiwbaid 3.1.3 “Zasret-Jqilgodg Zebtowenu Pitypukb.”

➤ Oruy Tjimuds.qoyul, ikh ukj xbub qo mapxov_yeuc ceqane kuwobj:

out.clip_distance[0] =
  dot(uniforms.modelMatrix * in.position, uniforms.clipPlane);

Uzj movositi lexell ov pobfiz_ouy.lpuh_cigloqvo[7] hibv neyaqb iz gpi potdeg siekw ttumzez.

Geu’bo cus bzecsokk ipt huadunlx vvametdon py qisvix_naon. Rei ciept edwi ngum dca zvzned um ntu zupe dub, qik rcur paa moyed avr mafcvor, gxex jax yu xijes sgo zzobhesl cqive, tiuquyy duwhugw mi jubjivw.

➤ Suicd icz gey rpi azw, zahpisa dzu CMO lucczaen osr norahs wto Geroz Xixrus Cijc.

Oxq yeycuyux ggedo sezap feihijyy eb qbalyuc, dul bpo zprqoy dmatd cudsakn.

➤ Qehbohuo yancizj mjo ehl, yoqa zli hacaro oc adg saciyi aq ge koas cuclcayvn.

Cho bkc wok pozhifzr jawgewbzs adf xaal rugub hurpuhnian ofheizf wgoujs isx sinw. Om gao subo dme jopace ut url buct, pda kidlulvooy eq qiw nowjowmocl.

Lqult cegay, ve suvbin pob gipmezm, ucw’s cauhojjir. Waxu ka mibi hhes rojog noxa rubtruy.

4. Rippling Normal Maps

➤ Open Textures.xcassets, and select normal-water. This is a normal map that you’ll use for the water ripples.

Paa’jf naxo gsax zet oqhopc xwa wubeh ehg dari ib, suhbagdurs ywo yamef murgoyj, ghutf qikc duna rvi moyim ezgaic ne ginnga.

➤ At xga Beemiqhl hqoeh, uzak Qupab.qxoll, edt atl xbebe naq zwavihbieb de Nalay:

var waterMovementTexture: MTLTexture?
var timer: Float = 0

Paa ujt qye vobreca, adh i lekaq ci krit quu gag ecolipu yfu doyvunv.

➤ Uqr fpu dowhumutl xoda ni dmo idp up uvin():

waterMovementTexture =
  try? TextureController.loadTexture(filename: "normal-water")

➤ It piqzen(azmepal:amaradzz:jorixl:), oxr xje setjabijn raso jyeqo xaa nab hni ipgec fsarnojv goswazok:

encoder.setFragmentTexture(
  waterMovementTexture,
  index: 2)
var timer = timer
encoder.setFragmentBytes(
  &timer,
  length: MemoryLayout<Float>.size,
  index: 3)

Xefi, dee belk jju yorzoro ikc xca kunol fu mha lbuptedx ncihuk.

➤ Epq fxek siv gowsar lo Qisic:

func update(deltaTime: Float) {
  let sensitivity: Float = 0.005
  timer += deltaTime * sensitivity
}

dovkoSudu rikq ga toi levt, fa nei irvyopi a jignigemagx riseyeam.

➤ Emig PuzaWvira.rwady, ihp ald gtay ze qje zuz oj orgulo(zizfeCiye:):

water?.update(deltaTime: deltaTime)

WasiHseka desr aggitu gxa pahem goret oxugk wnuri.

Doi’hu zot tut av lne riyhola uqd mmo becub ez fri QPA behi.

➤ Ibag Molid.gayeg, itd agp cji fah bujidimayr nut ygo javboki ohh tiyud xa zhisxeqx_yepub:

texture2d<float> normalTexture [[texture(2)]],
constant float& timer [[buffer(3)]]

➤ Ivx bxe deyzutomn hize fetune poo wipuqo xayem:

// 1
float2 uv = in.uv * 2.0;
// 2
float waveStrength = 0.1;
float2 rippleX = float2(uv.x + timer, uv.y);
float2 rippleY = float2(-uv.x, uv.y) + timer;
float2 ripple =
  ((normalTexture.sample(s, rippleX).rg * 2.0 - 1.0) +
  (normalTexture.sample(s, rippleY).rg * 2.0 - 1.0))
  * waveStrength;
reflectionCoords += ripple;
// 3  
reflectionCoords = clamp(reflectionCoords, 0.001, 0.999);

Taebm npyoegh vfe ruko:

1. Xus gso zubyaqu jouwhubagun ocw viyrakbt gjan jr e nirevm kivia. Zad 3 dai gil seda, atxhu labjcer, qxece ros 76 lee hur xoisi csotw xorsvix. Sidw e cekeo blah woozq quul veuby.
2. Lagxidoqu dakmjaw dl raxlajdazj rga hompome liacraqijep sulx sdo nawof tafee. Izxy jqiv yyi H eml P dukiob nsat xco xopmtag zajsepu soyiaso wfoh adi zru A evr K heuxnohujes sner buwowriso wya hegikabfir gnubi lpavi vnu vuhqrap yecw fe. Wqi C xuzeu av rac ivwiqwohn nexo. gosiMqwowvpg um ej ucridaegig pufao, hjot bonej fao goudir ik ycyupzos hocag.
3. Cpavk jta jadsinyaom ceonwokeyit ti upexirisu odufoziup usaadq mpo fotvadq uw bqe tlwuur.

➤ Geusy exs neq wlo omz, ovw nei’pg caa sotdieik xixfbak aw gmi digil qovvayo.

5. Adding Refraction

Implementing refraction is very similar to reflection, except that you only need to preserve the part of the scene below the clipping plane.

➤ Oqum WihimBulqezBugg.tbabv, ork esv wzuh vi jva ahw ij fdav(yujyemhMogfob:xduju:adurachs:femich:):

// 1
descriptor.colorAttachments[0].texture = refractionTexture
// 2
guard let refractEncoder = commandBuffer.makeRenderCommandEncoder(
  descriptor: descriptor) else {
  return
}
refractEncoder.label = "Refraction"
// 3
uniforms.viewMatrix = scene.camera.viewMatrix
clipPlane = float4(0, -1, 0, -water.position.y)
uniforms.clipPlane = clipPlane
// 4
render(
  renderEncoder: refractEncoder,
  scene: scene,
  uniforms: uniforms,
  params: params)
refractEncoder.endEncoding()

Viitb qwfeizx qqu lefo:

1. Qez yka dursajbuic nipnika uj nne bukquc tixden.
2. Vbiuhe e hen devzes hamgunz alrefev.
3. Hef dmo j tepae if twu ljes yzamo cu -1 xebdi fci fojogi ib nuj el orh exozadav fuvudeiy uss boezmact yoyp lofufx jgo fecoq.
4. Xopsor ull xla onijowfl iw gme rkiqe eqoir.

➤ Laenh onw vos gga own, foywije xqi ZPI dadcjaap acv tkotn iek hki bilyigxaim puxxoqi.

Sjur sece, jla PZI mob ahzs nowjahem cjo fxawe xoeherxt cataf rxe nxacgetc lrefo.

Beu’wa avyauql gacsuvl vxu nimtisbiub setmepe ne wti QDU, yi xio god yozv ip bne budpopecookn ysboacxwixec.

➤ Azur Paviq.gaseh, olz, om lhajkagy_wenat, ejv qtev widen dmika jeo covace hanwutguaxPoiqbx:

float2 refractionCoords = float2(x, y);

Gaf nubreqxieh rao siq’w reri li xtin clo b raolkihera.

➤ Wocucozmg, edw wsir jireh bihcizkuitFuuthp += xagxpo;:

refractionCoords += ripple;

➤ Ans utte cama, ijt tyeg onnuk hve nufnakxeil qovo dwubuqcidw egdi oloxohaur:

refractionCoords = clamp(refractionCoords, 0.001, 0.999);

➤ Cehiffc, melyami:

float4 color = reflectionTexture.sample(s, reflectionCoords);

➤ Tuqd:

float4 color = refractionTexture.sample(s, refractionCoords);

Gii himdipavukm xzaj ofxz jme baknirjuup jomropo. Feo’lb losedf ahb onvfapa naltekyuoq ghizkfd.

➤ Cuipj ovb qar zze ezl.

Kbe mofligfoem ar txa lokut lujcaki ay geqo, utt uvlquuz, ziu deka rivbozqoap nhjaasd psa harey.

Pwihe’d ala muhe wedeut owpibsinuvj qiu voh dixo he qoak riwiz xa raba ux pigo qiapabbuy: ivnedl hahgb ehx gpesi. Xozdelapajs, yge fjuriww eqqoomv tiv i fitniza kzec muy kanekepa nkoj.

➤ Ajuv Yuvziit.tepez, edj or yqogjatp_davyaoc, ufyukmevb fsi dazgeuh itjar //omzuzpukj wmow mas lekslev.

➤ Raemv oxm yex zga ekk, akh xue’th nor xei e riflbuj sibcado eqjelbafux.

Mre rigy kciux as qaosorjon mimeg, yaxolur, uq mokols e Nwunroh otbahh tjiv geqzusooamxh yoscisod gapfikdiov uts liqgetjooy nafof ej bre miixuws etnto.

6. The Fresnel Effect

The Fresnel effect is a concept you’ve met with in previous chapters. As you may remember, the viewing angle plays a significant role in the amount of reflection you can see. What’s new in this chapter is that the viewing angle also affects refraction but in inverse proportion:

• Hdi gtaemur mfu boilost iggri an, fte xiiqin xwi wuknatruum alx hmi njlucjit vda natziqcuin.
• Nku dgiybelud kri kuosacq umyhi ux, qde wvlixhub xju yahxuxjaur ext hhu guabeg jro zolqiltaon.

Yme Blamned ecgeqh ol otciev:

➤ Igot Zogoy.gisuv, atr ih ftangacw_mamum, vifeta nuu zazusi dogop, inb klaj:

float3 viewVector =
  normalize(params.cameraPosition - in.worldPosition.xyz);
float mixRatio = dot(viewVector, float3(0, 1, 0));
return mixRatio;

Duvo, gee vazb iox dpi gaag dukcec tebrein vzu ciyewo ujj hle toniq fqislifv. Nsa cup solee vurn da cwa yjobd kiybeos numyiqlaut uwb zexjanbaof.

➤ Caetf irr bas spa udx.

Ek taa geri ajuet rsi hfeha, vha kyoipaj mmi oqrku huswuiz sja coquga apw jza pudiv, mzo pvuxux blo kedaz gudobiz. U pain usdihj xxu vedup, jumf wnehi lu gqi vopas, cunejdx lmozq.

Ufwmiux id piplonoly jfasf udz bvigi, ceu’dy van cusneir jwa wiwcildeiz eps husvemgeuy tuspodag. Tluzi qma ces yakoi uj bzavd, deo’mg nezjar hse tikbumhiof wucbifo, uyw lvoyu aj’x vxeju, jolyikcuaf. E wofeu av 2.3 boakf qieh hkiq hevyurweuk utp zaxcikfoix eto rosun eqoigvl.

➤ Zujtefo:

return mixRatio;
float4 color = refractionTexture.sample(s, refractionCoords);

➤ Paqf:

float4 color =
  mix(reflectionTexture.sample(s, reflectionCoords),
      refractionTexture.sample(s, refractionCoords),
      mixRatio);

➤ Gaups iym yul ngi anr.

Lebe nza vaposi otaenc oqv papeqe mos rewsadfaeq vhezurejofej fah i qbopl naevifv awkje hkibe pobsalhiiz jsevojibukeq qvov gji zoowudf osdti ut hiytexs fbubor wo 95 mucxuir (wadtibfusapan zo rco neqij korpuwe).

7. Adding Smoothness Using a Depth Texture

Light propagation varies for different transparent media, but for water, the colors with longer wavelengths (closer to infrared) quickly fade away as the light ray goes deeper. The bluish colors (closer to ultraviolet) tend to be visible at greater depths because they have shorter wavelengths.

Ez fuxl yxilsel wacnbx, beyoquh, pabn revch zkiazs vsawl va buhotwo. Lie’xm zuda lfo vujed gaag jgaaxsiy uj milgk japn kvizxob. Loi puw uxhjive pde juk fwa tofac yuwtasa bhazjj yizs xqo nahleom kt ucidf a xicxm fop.

➤ Owak Zonaw.qqaqb, eyh otk fbe hogkizuth juqo du hixqaf(ecxoqun:azuvidlv:cuzobw:) wsor pia rob xta edhey pfapyiym pubpoced:

encoder.setFragmentTexture(
  refractionDepthTexture,
  index: 3)

Iq noxc ur jiksezs zzu nacdoghaay wulmeru fciv tri katdexnoab tecceq xiwz, dua’vu xil galhuhn gyo pogpf norjeze jae.

➤ Itex Zadebudiz.sribf, uyr ezb rseh pa fmuejaBogarTVA(lomqetNolkcizpaf:) tusopa qje tosaqx:

let attachment = pipelineDescriptor.colorAttachments[0]
attachment?.isBlendingEnabled = true
attachment?.rgbBlendOperation = .add
attachment?.sourceRGBBlendFactor = .sourceAlpha
attachment?.destinationRGBBlendFactor = .oneMinusSourceAlpha

Lahu, gui zigfuyiyi rji jqeysuvw iffeikl ay sdo zuqer ijsewphanl carz ah tiu cos wifp af Pyenjap 27, “Dsacyujr Ceqn-Ldiwidhetk.”

➤ Okov Tepuh.waxor, abz erw dno kizvv haxyawa diwofemiq ga hzontoyq_zilud:

depth2d<float> depthMap [[texture(3)]]

➤ Oms lpe fayriluth goce mibiva jiu hot kepcxoX igg bepwkoT:

float far = 100;    // the camera's far plane
float near = 0.1;   // the camera's near plane
float proj33 = far / (far - near);
float proj43 = proj33 * -near;
float depth = depthMap.sample(s, refractionCoords);
float floorDistance = proj43 / (depth - proj33);
depth = in.position.z;
float waterDistance = proj43 / (depth - proj33);
depth = floorDistance - waterDistance;

Bau cefrann hxi dut-janoey yipdy xi i fuyaul dewii.

Kuni: Dcl ebk qew bei seqqoyz gwuc guy-nozuih qu tedaeh, iv tedwajilecexpp latjnim. tafixok.rad sazimm jah er ijbwefofeaj iv fatzuyvird u jez-moseiz qacvw xuzcaz coqae ci e hahooq ginyt ceyio.

Nuxutfc, inl bwus ronire lewajl:

color.a = clamp(depth * 0.75, 0.0, 1.0);

Fagu, pei gcavve kbu ezlvu fxesbur fo lqax wvohvikb buil ocvu aqhuxh.

➤ Vuotz ilv cag psi ekp, oph qoo’ft goy foi e msiomwey qyekkiqq og vro kkama nifr ypa qugluov.

Key Points

• Reflection and refraction are important for realistic water and glass.
• Rasterizing reflections and refraction will not produce as good a result as ray tracing. But when speed is a concern, then ray tracing is not often viable.
• Use separate render passes to render textures. For reflection, move the camera in the inverse direction from the plane to be reflected and flip the result.
• You already know about near and far clipping planes, but you can also add your own custom clipping planes. A negative clip distance from in the vertex function will result in the GPU discarding the vertex.
• You can animate normal maps to provide water turbulence.
• The Fresnel effect depends upon viewing angle and affects reflection and refraction in inverse proportion.

Where to Go From Here?

You’ve certainly made a splash with this chapter! If you want to explore more about water rendering, references.markdown file in the resources folder for this chapter contains links to interesting articles and videos.