Graphics 레퍼런스

렌더링 기초

4 cards

렌더링 기초

렌더링 파이프라인 큰 흐름

CPU가 장면 데이터를 준비하고 GPU가 정점 처리, 래스터라이즈, fragment 처리, 출력 병합을 거쳐 화면을 만드는 흐름을 정리합니다.

scene data
-> CPU setup
-> vertex shader
-> primitive assembly
-> rasterization
-> fragment shader
-> depth/blend/output
-> framebuffer

렌더링 기초

정점, 메시, primitive

정점 데이터가 position, normal, UV 같은 attribute를 담고, GPU가 이를 primitive로 조립해 래스터라이즈하는 구조를 정리합니다.

vertex buffer:
  position, normal, uv

index buffer:
  0, 1, 2
  2, 3, 0

렌더링 기초

래스터라이제이션과 fragment

래스터라이제이션이 삼각형을 화면 샘플 후보인 fragment로 바꾸는 과정이며, fragment가 최종 픽셀과 같지 않은 이유를 정리합니다.

triangle on screen
-> covered samples
-> fragments
-> tests/blending
-> framebuffer pixels

렌더링 기초

깊이 버퍼와 z-fighting

깊이 버퍼가 가까운 fragment만 남기는 방식과, 깊이 정밀도 부족으로 표면이 깜빡이는 z-fighting이 생기는 이유를 정리합니다.

if newDepth < storedDepth:
    color = fragmentColor
    storedDepth = newDepth

변환과 공간

3 cards

변환과 공간

좌표 공간과 변환

object, world, view, clip, screen space를 구분하고, 그래픽스에서 좌표가 행렬 곱을 거치며 의미를 바꾸는 흐름을 정리합니다.

object -> world -> view -> clip -> NDC -> screen

변환과 공간

모델·뷰·프로젝션 행렬

MVP 행렬이 object space 정점을 clip space로 옮기는 역할을 하고, model, view, projection 각각이 어떤 기준 변환을 맡는지 정리합니다.

gl_Position = projection * view * model * vec4(position, 1.0);

변환과 공간

Clip space, NDC, viewport 변환

projection 이후 좌표가 clip space, NDC, viewport transform을 거쳐 화면 좌표와 depth 값으로 바뀌는 흐름을 정리합니다.

view space
-> projection
-> clip space
-> clipping
-> perspective divide
-> NDC
-> viewport transform
-> screen/depth

텍스처와 색

4 cards

텍스처와 색

텍스처 좌표와 샘플링

UV 좌표가 텍스처의 위치를 가리키고, filtering, wrapping, mipmap이 샘플 품질과 성능에 어떤 영향을 주는지 정리합니다.

fragment UV -> sampler state -> texture sample -> color/material value

텍스처와 색

색 공간, 감마, linear

sRGB와 linear color space의 차이를 구분하고, 조명 계산은 linear에서 해야 하는 이유와 감마 보정의 위치를 정리합니다.

sRGB texture -> decode to linear -> lighting -> encode to sRGB output

텍스처와 색

Mipmap, sampler, texture compression

mipmap, sampler state, anisotropic filtering, texture compression이 텍스처 품질과 GPU bandwidth에 미치는 영향을 정리합니다.

1024x1024
-> 512x512
-> 256x256
-> ...

텍스처와 색

Texture atlas와 texture array

여러 텍스처를 한 번에 다루기 위해 texture atlas와 texture array를 쓰는 이유, UV 경계, mipmap, batching 기준을 정리합니다.

atlas:
one texture, many UV rectangles

array:
one texture object, many layers

셰이딩과 조명

5 cards

셰이딩과 조명

노멀, 탄젠트 공간, 노멀맵

normal이 표면 방향을 나타내고, tangent space가 노멀맵 벡터를 표면 기준으로 해석하게 해주는 구조를 정리합니다.

normal map RGB
-> [-1, 1] vector
-> TBN transform
-> lighting normal

셰이딩과 조명

조명 모델

ambient, diffuse, specular 조명의 의미와 Lambert, Blinn-Phong 같은 기본 조명 모델이 표면 방향과 시선 방향을 어떻게 쓰는지 정리합니다.

diffuse = max(dot(normal, lightDir), 0)

셰이딩과 조명

BRDF와 PBR 기초

BRDF가 빛이 표면에서 어느 방향으로 얼마나 반사되는지 설명하는 함수이고, PBR이 에너지 보존과 재질 파라미터를 일관되게 다루는 방식을 정리합니다.

baseColor + metallic + roughness + normal
-> BRDF
-> lighting result

셰이딩과 조명

Global Illumination 기초

Global Illumination이 직접광뿐 아니라 표면에서 반사되어 다시 들어오는 간접광까지 다루는 개념이며, baked, probe, screen-space, ray-traced GI의 차이를 정리합니다.

direct light: light -> surface
indirect light: light -> surface A -> surface B -> camera

셰이딩과 조명

Microfacet PBR과 IBL

microfacet BRDF가 NDF, geometry, Fresnel 항으로 specular를 계산하고, IBL이 환경광 반사를 보강하는 흐름을 정리합니다.

specular ~= NDF * Geometry * Fresnel

GPU와 최적화

10 cards

GPU와 최적화

셰이더 단계와 GPU 파이프라인

vertex, fragment, compute shader가 맡는 역할을 구분하고, GPU 파이프라인에서 병렬 처리와 메모리 접근이 성능에 미치는 영향을 정리합니다.

vertex count -> vertex shader invocation
covered samples -> fragment shader invocation
workgroup/thread -> compute shader invocation

GPU와 최적화

GPU 성능 병목

GPU 병목을 draw call, vertex, fragment, texture, bandwidth, synchronization으로 나누고, 어떤 지표를 먼저 볼지 정리합니다.

CPU prepares commands
-> GPU vertex work
-> raster/fragment work
-> memory read/write
-> presentation

GPU와 최적화

Occlusion Culling

Occlusion culling이 다른 물체에 가려져 보이지 않는 물체의 렌더링을 건너뛰는 최적화이며, frustum culling과의 차이를 정리합니다.

object in frustum
-> check occluders/depth
-> hidden?
-> skip draw or skip detailed pass

GPU와 최적화

LOD와 impostor

LOD가 거리나 화면 크기에 따라 더 싼 표현을 선택하는 방식이며, mesh LOD, texture LOD, impostor의 차이와 전환 문제를 정리합니다.

near  -> high detail mesh/material
mid   -> simplified mesh
far   -> billboard/impostor

GPU와 최적화

Meshlet과 clustered rendering

Meshlet이 메시를 작은 기하 클러스터로 나눠 culling과 GPU-driven 렌더링에 활용하는 단위이며, clustered rendering과의 관계를 정리합니다.

mesh
-> meshlet 0
-> meshlet 1
-> meshlet 2

GPU와 최적화

Early-Z와 depth prepass

depth test를 fragment shader 전에 수행해 overdraw 비용을 줄이는 early-z와, 깊이만 먼저 채우는 depth prepass의 기준을 정리합니다.

depth prepass
-> depth buffer filled
-> color pass
-> hidden fragments rejected before expensive shading

GPU와 최적화

Frustum culling과 bounding volume

카메라 frustum 밖의 객체를 렌더 후보에서 제거하기 위해 bounding sphere, AABB, OBB를 쓰는 기준과 실패 지점을 정리합니다.

object bounds
-> test against six frustum planes
-> outside any plane?
-> skip draw candidate

GPU와 최적화

Compute shader 기본

Compute shader가 그래픽 파이프라인의 vertex/fragment 단계와 분리되어 병렬 계산을 수행하는 방식과 적합한 작업 기준을 정리합니다.

CPU dispatch
-> workgroups
-> many shader invocations
-> buffer 또는 texture에 결과 기록
-> 다음 pass에서 사용

GPU와 최적화

GPU instancing과 batching

같은 메시나 같은 렌더 상태를 여러 번 그릴 때 draw call 비용을 줄이기 위해 instancing과 batching을 고르는 기준을 정리합니다.

one mesh
many transforms/material params
-> one instanced draw

GPU와 최적화

Resource state와 barrier

texture와 buffer가 render target, shader resource, copy source처럼 역할을 바꿀 때 필요한 state transition과 barrier의 실패 지점을 정리합니다.

offscreen render target write
-> barrier / layout transition
-> shader resource read in post-process

렌더 타깃과 효과

8 cards

렌더 타깃과 효과

렌더 타깃과 framebuffer

렌더 타깃과 framebuffer가 최종 화면이 아닌 중간 이미지에 렌더링하게 해주는 구조이며, color/depth attachment와 texture sampling 연결을 정리합니다.

scene -> offscreen render target -> texture sample -> final framebuffer

렌더 타깃과 효과

안티앨리어싱 기초

앨리어싱이 샘플 수 부족으로 생기는 계단 현상이며, MSAA, FXAA, TAA 같은 안티앨리어싱 방식의 차이를 정리합니다.

샘플 수 부족
-> 실제 경계와 픽셀 격자가 어긋남
-> jagged edge, shimmering

렌더 타깃과 효과

그림자 매핑

그림자 매핑이 빛의 시점에서 depth map을 만든 뒤, 현재 표면이 빛에서 보이는지 비교하는 방식임을 정리합니다.

1. 빛의 시점에서 scene depth를 shadow map에 렌더링
2. 카메라 렌더링 중 표면 위치를 light space로 변환
3. shadow map depth와 현재 depth를 비교
4. 더 뒤에 있으면 그림자

렌더 타깃과 효과

후처리 기본 구조

후처리가 장면을 렌더 타깃에 먼저 그린 뒤 화면 공간에서 이미지를 다시 처리하는 방식이며, bloom, tone mapping, color grading의 위치를 정리합니다.

scene render
-> HDR render target
-> post-process passes
-> tone mapping
-> gamma/output transform
-> display

렌더 타깃과 효과

Alpha blending과 투명도

alpha 값이 불투명도와 합성에 쓰이는 방식, blending 순서, alpha test와 premultiplied alpha의 차이를 정리합니다.

final = srcColor * srcFactor + dstColor * dstFactor

렌더 타깃과 효과

Cascade shadow와 filtering

넓은 장면에서 shadow map 품질을 유지하기 위해 cascade를 나누고, PCF와 안정화로 그림자 품질을 조정하는 기준을 정리합니다.

near cascade  -> high detail shadows
middle cascade
far cascade   -> wider, lower detail shadows

렌더 타깃과 효과

HDR, exposure, tone mapping

HDR 렌더 타깃에 1보다 큰 밝기를 저장하고, exposure와 tone mapping으로 display 범위에 압축하는 흐름을 정리합니다.

linear lighting
-> HDR color buffer
-> exposure
-> tone mapping
-> output transform
-> display

렌더 타깃과 효과

Stencil buffer와 masking

stencil buffer가 픽셀별 작은 정수 마스크를 저장하고, outline, portal, mirror, UI mask 같은 영역 제한에 쓰이는 방식을 정리합니다.

pass 1: object area writes stencil = 1
pass 2: draw effect only where stencil == 1

렌더링 아키텍처

6 cards

렌더링 아키텍처

Forward와 Deferred 렌더링

Forward rendering과 Deferred rendering이 조명 계산을 어느 단계에서 하느냐로 갈리며, 투명도, 메모리, 다중 조명 비용의 차이를 정리합니다.

geometry pass -> G-buffer
lighting pass -> shaded image

렌더링 아키텍처

레이 트레이싱 기초

레이 트레이싱을 카메라나 빛에서 광선을 쏘아 교차, 그림자, 반사, 굴절을 계산하는 방식으로 이해하고, rasterization과의 차이를 정리합니다.

camera ray
-> closest hit
-> material evaluation
-> shadow/reflection/refraction rays
-> accumulated color

렌더링 아키텍처

Render graph와 pass 의존성

render graph가 렌더링 pass, resource, dependency를 명시해 복잡한 프레임 구성을 관리하는 구조임을 정리합니다.

shadow pass -> shadow map
gbuffer pass -> gbuffer textures
lighting pass -> hdr color
post pass -> back buffer

렌더링 아키텍처

Path tracing, sampling, denoising

path tracing이 빛의 경로를 확률적으로 샘플링해 이미지를 만들고, noise를 줄이기 위해 accumulation과 denoising을 쓰는 흐름을 정리합니다.

camera ray
-> hit surface
-> sample material/light direction
-> bounce
-> accumulate contribution
-> denoise

렌더링 아키텍처

G-buffer layout 설계

Deferred rendering에서 G-buffer에 어떤 material 정보를 저장할지 고르고, 포맷·정밀도·대역폭 비용을 조정하는 기준을 정리합니다.

geometry pass
-> albedo + normal + material params + depth
-> lighting pass
-> shaded image

렌더링 아키텍처

Pipeline state와 resource binding

shader, rasterizer, depth/blend 상태를 묶는 pipeline state와 texture, buffer, sampler를 연결하는 resource binding의 경계를 정리합니다.

pipeline state
  -> 어떤 shader와 고정 기능 상태로 그릴지

resource binding
  -> 그 shader가 어떤 texture/buffer/sampler를 읽을지

Graphics

렌더링 기초

렌더링 파이프라인 큰 흐름

정점, 메시, primitive

래스터라이제이션과 fragment

깊이 버퍼와 z-fighting

변환과 공간

좌표 공간과 변환

모델·뷰·프로젝션 행렬

Clip space, NDC, viewport 변환

텍스처와 색

텍스처 좌표와 샘플링

색 공간, 감마, linear

Mipmap, sampler, texture compression

Texture atlas와 texture array

셰이딩과 조명

노멀, 탄젠트 공간, 노멀맵

조명 모델

BRDF와 PBR 기초

Global Illumination 기초

Microfacet PBR과 IBL

GPU와 최적화

셰이더 단계와 GPU 파이프라인

GPU 성능 병목

Occlusion Culling

LOD와 impostor

Meshlet과 clustered rendering

Early-Z와 depth prepass

Frustum culling과 bounding volume

Compute shader 기본

GPU instancing과 batching

Resource state와 barrier

렌더 타깃과 효과

렌더 타깃과 framebuffer

안티앨리어싱 기초

그림자 매핑

후처리 기본 구조

Alpha blending과 투명도

Cascade shadow와 filtering

HDR, exposure, tone mapping

Stencil buffer와 masking

렌더링 아키텍처

Forward와 Deferred 렌더링

레이 트레이싱 기초

Render graph와 pass 의존성

Path tracing, sampling, denoising

G-buffer layout 설계

Pipeline state와 resource binding

Loading category cards

Graphics

렌더링 기초

렌더링 파이프라인 큰 흐름

정점, 메시, primitive

래스터라이제이션과 fragment

깊이 버퍼와 z-fighting

변환과 공간

좌표 공간과 변환

모델·뷰·프로젝션 행렬

Clip space, NDC, viewport 변환

텍스처와 색

텍스처 좌표와 샘플링

색 공간, 감마, linear

Mipmap, sampler, texture compression

Texture atlas와 texture array

셰이딩과 조명

노멀, 탄젠트 공간, 노멀맵

조명 모델

BRDF와 PBR 기초

Global Illumination 기초

Microfacet PBR과 IBL

GPU와 최적화

셰이더 단계와 GPU 파이프라인

GPU 성능 병목

Occlusion Culling

LOD와 impostor

Meshlet과 clustered rendering

Early-Z와 depth prepass

Frustum culling과 bounding volume

Compute shader 기본

GPU instancing과 batching