Ano ang parallax mapping?

Ang parallax mapping ay isang technique na nagdaragdag ng depth at detalye sa mga textured na surface para sa computer-generated na graphics.
Isang popular na tool ang parallax mapping para sa paggawa ng ilusyon ng detalye ng surface nang hindi nagdaragdag ng iba pang polygon sa isang 3D model. Nagbibigay-daan ang teknolohiyang ito sa mga texture na magpakita ng mga iregularidad, gaya ng mga umbok at yupi, kapag tiningnan sa iba't ibang anggulo.

a textured bluetooth speaker
Bagama't advanced na feature ang parallax mapping, madali itong isagawa gamit ang mga tamang tool sa 3D modeling. Sa gabay na ito, ipapaliwanag namin kung paano gumagana ang parallax mapping, magshe-share kami ng ilang technique, at ipapaliwanag namin ang mga praktikal na paggamit nito.

Parallax mapping 101.

Ano ang isang parallax map?

Ang parallax map ay isang uri ng texture na ipinapaliwanag ang depth o taas ng mga detalye ng isang surface — katulad ng isang topographic map.

Halimbawa, kung nakatingin ka sa isang 3D graphic ng isang pader na gawa sa tisa, mukha itong flat kung walang special effects. Pero pinagmumukhang mas makatotohanan ng parallax mapping ang pader na gawa sa tisa sa pamamagitan ng pagdaragdag ng mga nakaukang linya ng palitada sa flat na image. “Dinadaya” ng teknolohiyang ito ang mata sa pamamagitan ng pagmamanipula ng mga texture para magmukhang three-dimensional sa isang 2D space.

Napakaraming paggamit sa teknolohiyang ito, kabilang ang:

  • Mga video game
  • Mga pelikula at animation
  • Virtual reality at augmented reality
  • Web design

Ang mga pangunahing kaalaman tungkol sa kakayahang makakita ng depth.

Nagtutulungan ang mga mata at utak mo para magproseso ng visual na impormasyon at makakita ng depth. Tinutukoy ng utak mo ang depth gamit ang mga binocular cue, na kinukumpara ang mga image na nakikita ng bawat mata para gumawa ng isang cohesive na image. Nakakatulong ito sa iyo na tumukoy ng depth.

Pero magagawa rin nating tumukoy ng depth gamit lang ang isang mata, salamat sa mga monocular cue. Ang perspective, shadow, relative na sukat, at mga texture gradient ay nagsasabi sa utak mo ng mahalagang impormasyon tungkol sa depth.

Gumagana ang parallax mapping dahil sa kung paano nauunawaan ng utak ng tao ang depth. Habang gumagalaw ka, mas gumagalaw ang mga bagay na mas malapit kaysa sa malalayo. Ginagamit ng parallax mapping ang prinsipyong ito para magawang magbago ng mga texture ng object bilang tugon sa anggulo mo, na ginagaya ang depth na inaasahan ng utak mo na makita.

Halimbawa, kapag nakasakay sa kotse, parang mabilis na lumalampas ang mga puno sa malapit, habang mabagal na gumagalaw ang malalayong bundok. Ang pagkakaibang ito sa galaw ay nagbibigay sa iyo ng pakiramdam ng depth. Ginagaya ng parallax mapping ang experience na ito sa pamamagitan ng bahagyang mas pagpapagalaw sa malalapit na detalye, na nagbibigay ng ilusyon ng depth sa isang flat na surface.

Mga parallax texture.

Ang mga parallax texture ay tinatawag ding mga height o displacement map. Mga grayscale na image ito kung saan kinakatawan ng mga shade ng gray ang taas ng mga detalye ng surface. Para sa mga nakaangat na area ang mas mapusyaw na shade, habang para sa mas mabababang area ang mas madidilim na shade.

Ginagawang posible ng mga texture na ito na magdagdag ng depth sa karaniwang mga flat na surface nang hindi nagdaragdag ng mas maraming polygon. Nagiging mas makatotohanan ang mga visual dahil dito nang hindi nakokompromiso ang bilis o mga oras ng pag-load.

Gumagamit ang parallax mapping ng mga texture para gawing reference sa kung paano dapat magbago ang bawat bahagi ng pangunahing texture batay sa anggulo ng tumitingin. Binibigyang-kahulugan ng algorithm ng map ang mga value ng grayscale ng parallax texture para gumawa ng mas makatotohanang image.

Paggawa ng mga parallax texture.

Para mag-generate ng parallax texture:

  1. Magsimula sa isang base image. Isa itong image na may flat na texture ng surface na gusto mong gayahin, gaya ng mga tisa, tile, o bato.
  2. Tukuyin ang taas. I-visualize kung aling mga bahagi ng texture ang dapat nakaangat at nakalubog.
  3. Gawin itong grayscale. Gumamit ng graphics editor para i-paint ang mga area gamit ang mga shade ng gray — mapusyaw para sa mga nakaangat na area at mas madilim para sa mga nakalubog na area.
  4. Pagandahin ang design. I-blur at i-contrast ang texture para makagawa ng mga mas pulidong transition sa pagitan ng lahat ng area.

Hindi mo rin ito kailangang gawin nang manual. May kasamang mga tool ang Adobe Photoshop para sa paggawa at pagpapaganda ng mga grayscale na image. Ang Adobe Substance 3D ay isang mas advanced na tool para sa paggawa ng mga parallax texture sa ilang pag-click lang.

Mga technique sa parallax mapping.

Paano gumagana ang parallax mapping.

Gumagana ang parallax mapping sa ilang batayang prinsipyo:

  • Texture offset. Gumagana ang parallax mapping sa pamamagitan ng pag-offset ng mga coordinate ng texture. Binabago nito kung nasaan ang mga sample na texture batay sa perspective ng tumitingin para magawa ang ilusyon ng depth.
  • Mga height at displacement map. Gumagamit ang parallax mapping ng grayscale map para gabayan ang antas ng texture offset.
  • Anggulo ng pagtingin. Nagbabago ang parallax mapping effect batay sa anggulo kung saan mo tinitingnan ang surface. Habang nagbabago ang anggulo, nag-a-adjust ang offset para gayahin ang isang 3D surface.

Isipin mong nakatingin ka sa isang nakabukas na libro. Kinakatawan ng bawat pahina ang isang layer ng depth sa isang texture. Malinaw mong makikita ang bawat pahina kung deretso mong titingnan pababa ang libro sa 90-degree na anggulo. Pero kung itatagilid mo ang libro, matatakpan ng mga pahinang mas malapit sa iyo ang mga pahinang mas malayo sa iyo. Ginagaya ng parallax mapping ang ganitong effect sa mga 2D texture gamit ang isang height map para idikta kung aling mga texture ang mas malapit o mas malayo sa iyo.

Step-by-step na gabay sa parallax mapping.

Isang advanced na technique ang parallax mapping, pero pinapadali ito ng mga tool gaya ng Substance 3D. Sundin ang mga tip na ito para makapagsimula bilang isang baguhan:

  • Magsimula sa isang texture. Pwedeng isa itong pader na gawa sa tisa, cobblestone na daan, o isang sahig na gawa sa tile.
  • Gumawa ng height map. Gumamit ng software gaya ng Photoshop para i-convert ang texture sa grayscale.
  • Gumamit ng graphics engine. Sinusuportahan ng karamihan ng mga graphics engine, gaya ng Unity, ang parallax mapping. I-import ang pangunahing texture mo at ang height map.
  • Maglagay ng parallax mapping shader. Magtalaga ng shader o mga materyal para idagdag ang parallax mapping sa texture mo at iugnay ito sa height map mo.
  • I-adjust ang mga parameter. I-adjust ang intensity ng parallax effect para makuha ang gustong ilusyon ng depth.
  • Tingnan mula sa iba't ibang anggulo. Igalaw-galaw ang camera mo para makita kung paano nag-a-adjust ang texture habang nagpapalit ka ng anggulo.

Mga mabilisang tip ito para makapagsimula ka, pero huwag kang matakot na mag-eksperimento sa parallax mapping nang mag-isa.

Mga benepisyo ng parallax mapping.

Maraming benepisyo ng parallax mapping, kabilang ang:

  • Pinahusay na pagkamakatotohanan. Binibigyan ng parallax mapping ang mga image ng mas nasasalat na hitsura para gayahin ang mga experience ng user sa totoong buhay.
  • Pagiging emosyonal na apektado. May epekto ang pinahusay na pagkamakatotohanan sa pagkukuwento para sa mga laro at animation, na nagbibigay-buhay sa mga kuwento.
  • Na-optimize na performance. Nagdaragdag ng depth ang parallax mapping sa pamamagitan ng pagmamanipula ng mga texture sa halip na pagdaragdag ng mas maraming polygon. Mas mabilis itong nare-render, na kapaki-pakinabang para sa mga real-time na paggamit gaya ng mga video game.

Mga praktikal na paggamit.

Kapaki-pakinabang ang parallax mapping para sa iba't ibang paggamit, gaya ng:

  • Mga video game, kabilang ang virtual reality
  • Mga architectural model
  • Visualization ng produkto para sa mga manufacturer at retailer

Mula flat na naging 3D: parallax mapping sa Substance 3D.

Binago ng parallax mapping ang lahat mula sa mga video game hanggang sa web design. Binibigyang-buhay ng teknolohiyang ito ang mga design at nagdaragdag ito ng napakarami pang detalye sa mga flat na 2D image.

Ang pinakamagandang paraan para makita ang kakayahan ng parallax mapping ay subukan ito sa mga sarili mong design. Subukan ang Adobe Substance 3D para gumawa ng nakakamangha at detalyadong graphics na sobrang kapansin-pansin.

Mga Madalas Itanong

ANO ANG PAGKAKAIBA NG BUMP AT PARALLAX MAPPING?

Ginagaya ng parehong technique ang depth sa isang surface nang hindi nagdaragdag ng iba pang geometry. Gayunpaman, gumagamit ang bump mapping ng mga grayscale na bump map para gayahin ang mga high at low ng isang texture, na nakakaapekto sa kung paano nito nire-reflect ang liwanag. Mukhang flat ang bump mapping kapag tiningnan mo ito sa isang anggulo.

Higit pa ang nagagawa ng parallax mapping sa pamamagitan ng pag-offset ng mga coordinate ng texture batay sa perspective ng tumitingin. Nagbibigay ito ng higit pang depth sa mga texture.

ANO ANG PAGKAKAIBA NG NORMAL MAP AT PARALLAX MAP?

Gumagamit ang isang normal map ng mga kulay na RGB para katawanin ang direksyon ng mga normal sa isang surface. Nagbibigay ito ng ilusyon ng kumplikadong surface. Isang grayscale na image ang parallax map na kumakatawan sa taas ng mga detalye ng surface.

ANO ANG GINAGAWA NG PARALLAX OCCLUSION MAPPING?

Ginagaya ng parallax occlusion mapping (POM) ang self-shadowing sa isang surface para makagawa ng makatotohanang ilusyon ng depth. Tine-trace nito ang mga sinag mula sa isang viewer sa pamamagitan ng height map hanggang sa tumama ang mga ito sa isang surface, na ginagawang posible na mag-render ng mga detalye sa surface.

NAKAKAAPEKTO BA ANG PARALLAX SA PERFORMANCE?

Oo. Mas mahusay ito kaysa sa pagdaragdag ng mga polygon pero nangangailangan pa rin ito ng higit na computing power kaysa sa isang simpleng texture. Maliit ang epekto ng basic na parallax mapping sa performance, pero ang mga mas advanced na technique gaya ng occlusion mapping ay nangangailangan ng mas maraming computing resource.

https://main--cc--adobecom.hlx.page/cc-shared/fragments/products/substance3d/bottom-blade-cta-s3d-collection