FIT ČVUT

Adam Vesecký

NI-APH
Přednáška 9

APHGAMES.CZ

Grafika

Literatura

Gambetta, Gabriel. Computer Graphics From Scratch (Free)

Prostor

Herní grafika je o tom namačkat obří kvantum lineární algebry do těch několika milisekund, které nám herní smyčka dává.

Herní prostor

2D

  • top-down nebo side view
  • sprity jsou vykresleny jako dvojice trojúhelníků
  • rovnoběžná projekce

Izometrické 2D

  • odhalí hráči více informací než top-down
  • vícero typů projekce: 104°-135°

Falešné 3D

  • raycasting
  • Mode 7 z konzole SNES

2.5D

  • 3D hra s omezenými stupni volnosti (např. sidescrollery)

3D

  • regulární 3D hra

Prostor

Model Space

  • počátek se obvykle umístí do geometrického středu objektu
  • osy jsou zarovnány s přirozeným pozicováním modelu

World Space

  • fixní prostor, ve kterém jsou vyjádřeny transformace všech objektů herního světa

View/Camera Space

  • fixní vzhledem ke kameře
  • počátek je v ohnisku kamery
  • OpenGL: kamera se dívá ve směru záporné osy z

Clip Space

  • hranol se souřadnicemi od -1 do 1 (OpenGL)

View/Screen Space

  • oblast obrazovky, ve které se bude vykreslovat finální obraz

World-Model-View

Clip Space

View Volume

  • View volume - oblast prostoru, kterou vidí kamera
  • Frustum - komolý jehlan, tvar prostoru viditelný kamerou v perspektivní projekci
  • Rectangular prism - obdélníkový hranol, tvar prostoru viditelný kamerou v rovnoběžné projekci
  • Field of View (FOV) - úhel mezi levou a pravou stěnou view volume

Perspektivní projekce

Rovnoběžná projekce

Lookat Vektor

  • jednotkový vektor který má stejný směr jako kamera
  • pokud je skalární součin mezi lookAt vektorem a normálovým vektorem polygonu záporný, polygon je natočený ke kameře

Rotace ve 3D prostoru

Reprezentace rotací

Eulerovy úhly

  • Pitch, Yaw, Roll (výška, kurz, natočení)
  • stačí 3 floaty, intuitivní
  • záleží na tom, v jakém pořadí rotace aplikujeme
  • problém tzv. "gimbal locku" - když rotace způsobí sloučení dvou os

Kvaterniony

  • osa + úhel + trochu lineární algebry
  • q = [q_x, q_y, q_z, q_w]
  • alternativní forma: q = a + b\boldsymbol{i} + c\boldsymbol{j} + d\boldsymbol{k}
  • jednotková délka: (q_x^2 + q_y^2 + q_z^2 + q_w^2 = 1)
  • jednotkový kvaternion se dá vizualizovat jako 3D vektor + skalár
  • Q = (\cos{\frac{\varphi}{2}}, i \cdot \sin{\frac{\varphi}{2}}, j \cdot \sin{\frac{\varphi}{2}}, k \cdot \sin{\frac{\varphi}{2}})
  • rotace je možno jednoduše interpolovat
  • umožňuje pouze jednu plnou rotaci mezi dvěma klíčovými snímky
Používejte eulerovy úhly pro rychlou rotaci okolo jedné osy a kvaterniony pro komplexní rotace okolo více os.

Animace

Animace

Rotoskopingová animace

  • předdefinované sprity
  • jednoduché ale statické (při změně rychlosti je potřeba přidat/ubrat sprity)

Keyframy

  • keyframy (klíčové snímky) obsahují hodnoty (pozice, barva) v daném čase
  • mezisnímky jsou interpolované

Skeletální animace

  • objekt má kostru (rigging) připojenou k meshi pomocí vah (skinning)

Kombinované animace

  • transformace částí spritů, zkreslení textur,...

Rotoskopie

Klíčové snímky

Skeletální 2D

Skeletální 3D

Kombinovaná

Interpolace

  • metoda, která spočte mezibody uvnitř intervalu dvou bodů

Aplikace

  • grafika - změna velikosti obrázku
  • animace - transformace
  • multiplayer - interpolace dynamiky
  • video - interpolace klíčových snímků

Typy interpolací

  • Konstantní interpolace (none/hold)
  • Lineární interpolace
  • Cosinová interpolace
  • Kubická interpolace
  • Bézierova interpolace
  • Hermitovská interpolace
  • SLERP (spherical linear interpolation)

Lineární interpolace

Lineární interpolace

  • y=y_1 + (y_2 - y_1) \cdot \frac{x - x_1}{x_2 - x_1}
  • pro 1D hodnoty (dynamika)

Bilineární interpolace

  • na obdélníkovém prostoru
  • pro 2D hodnoty (pixely)
  • Q - známé body (nejbližší pixely)
  • P - neznámý bod

Trilineární interpolace

  • na 3D prostoru
  • pro 3D hodnoty (mipmapy)

Příklad: 2D interpolace

Žádná interpolace

Konstantní (nejbližší soused)

Bilineární

Kubická

Grafické karty

Historie GPU

Historie GPU

  • 1981 - IBM MDA, Monochrome Display Adapter
  • 1982 - IBM CGA, Color Graphics Adapter, 4/16 barev
  • 1984 - IBM EGA, Enhanced Graphics Adapter, 16/64 barev
  • 1987 - VGA - Video Graphics Array, 256 barev
  • 1994 - S3 Trio64 - zlatá éra DOS her
  • 1996 - 3dfx Voodoo - vzestup 3D akcelerátorů
  • 1999 - Geforce 256 - renderovací pipeline
  • 2003 - Geforce 3 - nástup shaderů
  • 2006 - Geforce 8 - SM architektura, CUDA
  • 2016 - Oculus Rift - VR headsety
  • 2018 - Geforce 10 - Tensor core a Raytracing

Grafické API

DirectX

  • od roku 1995
  • především pro Windows a Xbox hry
  • současná verze DirectX 12 Ultimate

OpenGL

  • od roku 1992
  • koncept stavového automatu
  • multi-platformní
  • OpenGL ES - odnož pro Android, iOS

Vulkan

  • od roku 2015
  • prezentován jako OpenGL nové generace
  • nabízí větší kontrolu nad GPU oproti OpenGL

Renderovací pipeline

  • Vertex Fetch: ovladač vloží data do pushbufferu
  • Poly Morph Engine v SM načte vertexy
  • spustí se warp vláken v SM
  • spustí se Vertex shadery
  • spustí se H/D/G shadery (nepovinně)
  • Pixel(fragment) shader vygeneruje informaci o pixelu
  • data se pošlou do ROP (Render Output Unit)
  • ROP spustí hloubkový test, antialiasing a vykreslí pixel

Renderovací pipeline

Shadery

  • programy, které jsou spouštěny na GPU a aplikují efekty nad grafickými elementy (osvětlení, efekty, post-processing, fyzika, AI)

Vertex shader

  • vstupem je vertex, výstupem je transformovaný vertex

Geometry shader (nepovinný)

  • vstupem je primitivum, výstupem je 0-n primitiv

Teselační shader (nepovinný)

  • vstupem je primitivum, výstupem je rozdělené primitivum

Pixel (fragment) shader

  • vstupem je fragment, výstupem je barva a další hodnoty
  • používá se především pro vizuální efekty

ASCIIdent

Compute shader

  • shader který běží mimo renderovací pipelie (např. CUDA)

Aplikace shaderů

Vertex shader

  • 3D-2D transformace
  • displacement mapping
  • skinning

Teselační shader

  • Hull Shader - tessellation control
  • Domain Shader - tessellation evaluation

Teselace povrchu

Geometry shader

  • bod-sprite konverze
  • particle systémy

Tráva

Pixel (fragment) shader

  • bump mapping
  • particle systémy
  • vizuální efekty

Screen Effect

Příklad: Geometry shader

   1 #version 150 core


   2 layout(points) in;


   3 layout(line_strip, max_vertices = 11) out;


   4 in vec3 vColor[];


   5 out vec3 fColor;


   6 const float PI = 3.1415926;


   7  


   8 void main() {


   9     fColor = vColor[0];


  10  


  11     for (int i = 0; i <= 10; i++) {


  12         // Angle between each side in radians


  13         float ang = PI * 2.0 / 10.0 * i;


  14  


  15         // Offset from center of point (0.3 to accomodate for aspect ratio)


  16         vec4 offset = vec4(cos(ang) * 0.3, -sin(ang) * 0.4, 0.0, 0.0);


  17         gl_Position = gl_in[0].gl_Position + offset;


  18  


  19         EmitVertex();


  20     }


  21  


  22     EndPrimitive();


  23 }

Rendering

Renderovací techniky

Sprite placement

Raycasting

Rasterizace

Raytracing

Raycasting

  • používal se v době, kdy hardwarové limity neumožňovaly 3D rendering
  • vyšleme paprsek a vykreslíme čtyřúhelník, který protne
  • rozlišujeme raycasting horizontální (závodní a bojové hry) a vertikální (FPS)

1992: Outrunners

1992: Wolfenstein 3D

Vrchol raycastingové éry

SW: Dark Forces
1995
Duke Nukem 3D
1996
Shadow Warrior
1997

Raycasting

  1. vyšleme paprsek směrem od hráče
  2. paprsek krokujeme ve stejném směru
  3. pokud paprsek narazí do objektu, zpracujeme jej

Princip

Přesné samplování

Fixní samplování

Rasterizace

  • zkonvertuje každý trojúhelník do pixelů na 2D obrazovce
  • stíny jsou zapečené, nebo dopočítané přes shadow mapy nebo shadow volumes
  • světlo se počítá v shaderech

Vertex sh.

Fragment sh.

Shadow mapping

Hry využívající rasterizaci

Grand Theft Auto 5 (2013)
The Witcher 3: Wild Hunt (2015)
Read Dead Redemption 2 (2018)

Raytracing

  • simuluje fyzikální vlastnosti světla
  • několik fází: ray-triangle test, BVH traversal, denoising
  • použití: odlesky, stíny, globální osvětlovací model, "prasátka" (caustics)
  • světlo prochází scénou, odráží se od objektů, případně vniká do průhledných objektů (refrakce)
  • API: OptiX, DXR

Příklady raytracing her

Minecraft (2011)
Metro Exodus (2019)
Cyberpunk 2077 (2020)

Pomocné techniky

LOD

  • level of detail, urychluje vykreslení vzdálených objektů
  • průkopnická hra - Spyro the Dragon na PSX

Texture mapping

  • mapování 2D textury na 3D objekt
  • hry z 90. let měly problémy s perspektivní korektností
  • používá se tzv. UV mapování

Baking

  • vykreslování do textury
  • vygenerujeme texturu, která obsahuje i fyzikální vlastnosti objektu
  • šetří výpočetní čas

Light baking

  • technika na vytváření před-renderovaných statických světel
  • používá se, když scéna obsahuje příliš mnoho světel
  • funguje pouze pro statické scény

Texturovaná scéna

Zapečená světla

Výsledek

Filtrování textur

  • je potřeba mapovat texely a pixely (skoro nikdy to není 1:1)
  • GPU sampluje několik texelů a složí výslednou barvu pro pixel

    • Mipmapping

    • pro každou texturu vytvoříme sekvenci bitmap s nižším rozlišením
    • objekty dále od kamery použijí textury s nižším rozlišením

    Nejbližší soused

    • zvolí se nejbližší texel ke středu pixelu

    Bilineární filtrování

    • nasamplují se 4 texely okolo středu pixelu a výsledná barva bude váženým součtem jejich barev

    Trilineární filtrování

    • použije se bilineární filtrování přes mipmap úrovně

    Anisotropické filtrování

    • bere v potaz natočení kamery

Co jsme si řekli

  • Rozdíl mezi prostory model/view/world/clip/screen
  • V čem se liší eulerovy úhly a kvaterniony
  • Co je to interpolace
  • K čemu se používají shadery, baking a filtrování textur
  • Něco o renderovacích technikách jako raycasting, rasterizace a raytracing

Hláška na závěr

Sám dobře víte, že pan náčelník Ištok leží doma s ošklivou tuberou...
To se nestydíte takhle mluvit o jeho choti?Polda 1