docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,179 @@
|
||||
---
|
||||
id: wiki-2026-0508-fragment-shading
|
||||
title: Fragment Shading
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [Pixel Shader, Fragment Shader]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [graphics, gpu, shaders, webgl]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: glsl
|
||||
framework: webgl
|
||||
---
|
||||
|
||||
# Fragment Shading
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 rasterized fragment 마다 매 한 번 실행되어 final color 를 계산"**. 매 GPU pipeline (vertex → primitive assembly → rasterization → **fragment** → blending) 의 final programmable stage. 2026 시점 WebGPU + WGSL 가 WebGL2 + GLSL 의 후속, native 는 Metal MSL / HLSL SM 6.x / Vulkan SPIR-V.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 input / output
|
||||
- **Input**: interpolated vertex output (UV, normal, world pos), uniforms, textures.
|
||||
- **Output**: 매 RGBA color (+ optional depth, MRT).
|
||||
- 매 fragment ≠ pixel — 매 multi-sampling / overdraw 시 매 fragment 가 pixel 보다 많을 수 있다.
|
||||
|
||||
### 매 pipeline (rasterization)
|
||||
1. Vertex shader → clip space.
|
||||
2. Primitive assembly + clipping.
|
||||
3. Rasterization → 매 fragment 생성.
|
||||
4. **Fragment shader** → color.
|
||||
5. Depth/stencil test + blending → framebuffer.
|
||||
|
||||
### 매 cost factor
|
||||
- **Overdraw**: 매 같은 pixel 이 여러 번 shaded.
|
||||
- **Texture bandwidth**: 매 sample count + filter.
|
||||
- **ALU**: 매 복잡한 BRDF, lighting loop.
|
||||
- **Branch divergence**: warp / wave 내 분기.
|
||||
|
||||
### 매 응용
|
||||
1. PBR lighting (Cook-Torrance, GGX).
|
||||
2. Post-processing (bloom, SSAO, FXAA, TAA).
|
||||
3. Procedural texture / SDF.
|
||||
4. Compute-like (pre-WebGPU 의 GPGPU hack).
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### GLSL — basic textured + Lambert
|
||||
```glsl
|
||||
// fragment.glsl (WebGL2 / GLSL ES 3.00)
|
||||
#version 300 es
|
||||
precision highp float;
|
||||
in vec2 vUV;
|
||||
in vec3 vNormalW;
|
||||
in vec3 vPosW;
|
||||
uniform sampler2D uAlbedo;
|
||||
uniform vec3 uLightDirW;
|
||||
out vec4 outColor;
|
||||
|
||||
void main() {
|
||||
vec3 albedo = texture(uAlbedo, vUV).rgb;
|
||||
float ndl = max(dot(normalize(vNormalW), -normalize(uLightDirW)), 0.0);
|
||||
outColor = vec4(albedo * (0.1 + 0.9 * ndl), 1.0);
|
||||
}
|
||||
```
|
||||
|
||||
### GLSL — GGX specular (PBR)
|
||||
```glsl
|
||||
float D_GGX(float NoH, float a) {
|
||||
float a2 = a * a;
|
||||
float f = (NoH * a2 - NoH) * NoH + 1.0;
|
||||
return a2 / (3.14159 * f * f);
|
||||
}
|
||||
float V_SmithGGXCorrelated(float NoV, float NoL, float a) {
|
||||
float a2 = a * a;
|
||||
float gv = NoL * sqrt(NoV * NoV * (1.0 - a2) + a2);
|
||||
float gl = NoV * sqrt(NoL * NoL * (1.0 - a2) + a2);
|
||||
return 0.5 / (gv + gl);
|
||||
}
|
||||
```
|
||||
|
||||
### WGSL — fragment (WebGPU 2026)
|
||||
```wgsl
|
||||
struct VsOut { @builtin(position) pos: vec4f, @location(0) uv: vec2f };
|
||||
@group(0) @binding(0) var samp: sampler;
|
||||
@group(0) @binding(1) var tex: texture_2d<f32>;
|
||||
|
||||
@fragment
|
||||
fn fs_main(in: VsOut) -> @location(0) vec4f {
|
||||
return textureSample(tex, samp, in.uv);
|
||||
}
|
||||
```
|
||||
|
||||
### GLSL — SDF circle (procedural)
|
||||
```glsl
|
||||
float sdCircle(vec2 p, float r) { return length(p) - r; }
|
||||
void main() {
|
||||
vec2 uv = gl_FragCoord.xy / uResolution.xy * 2.0 - 1.0;
|
||||
float d = sdCircle(uv, 0.5);
|
||||
float a = smoothstep(0.0, 0.005, -d);
|
||||
outColor = vec4(vec3(1.0), a);
|
||||
}
|
||||
```
|
||||
|
||||
### Three.js custom material
|
||||
```ts
|
||||
import * as THREE from "three";
|
||||
const mat = new THREE.ShaderMaterial({
|
||||
uniforms: { uTime: { value: 0 } },
|
||||
vertexShader: `varying vec2 vUv; void main() {
|
||||
vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}`,
|
||||
fragmentShader: `uniform float uTime; varying vec2 vUv;
|
||||
void main() { gl_FragColor = vec4(vUv, 0.5 + 0.5*sin(uTime), 1.0); }`,
|
||||
});
|
||||
```
|
||||
|
||||
### Discard for cutout (alpha test)
|
||||
```glsl
|
||||
vec4 c = texture(uAlbedo, vUV);
|
||||
if (c.a < 0.5) discard; // 매 early-Z 깨질 수 있음 — 매 주의
|
||||
outColor = c;
|
||||
```
|
||||
|
||||
### Post-process (full-screen quad)
|
||||
```glsl
|
||||
// FXAA-lite
|
||||
vec3 rgbNW = texture(uTex, vUV + vec2(-1.0, -1.0)/uRes).rgb;
|
||||
vec3 rgbNE = texture(uTex, vUV + vec2( 1.0, -1.0)/uRes).rgb;
|
||||
vec3 rgbSW = texture(uTex, vUV + vec2(-1.0, 1.0)/uRes).rgb;
|
||||
vec3 rgbSE = texture(uTex, vUV + vec2( 1.0, 1.0)/uRes).rgb;
|
||||
vec3 rgbM = texture(uTex, vUV).rgb;
|
||||
outColor = vec4((rgbNW + rgbNE + rgbSW + rgbSE + rgbM) / 5.0, 1.0);
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| Web 2026 | WebGPU + WGSL (Chrome/Edge/Safari 17+) |
|
||||
| Web legacy | WebGL2 + GLSL ES 3.00 |
|
||||
| Native Apple | Metal + MSL |
|
||||
| Native cross-plat | Vulkan + SPIR-V (cross-compile from HLSL/Slang) |
|
||||
| Heavy overdraw | Z-prepass / depth sort / Hi-Z |
|
||||
| Branch-heavy | uniform branch 또는 per-tile compute |
|
||||
|
||||
**기본값**: 2026 신규 web project 는 WebGPU. 매 wide compatibility 필요하면 WebGL2 fallback.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[GPU Pipeline]] · [[Computer Graphics]]
|
||||
- 변형: [[Vertex Shader]] · [[Compute Shader]]
|
||||
- 응용: [[PBR]] · [[Post-Processing]]
|
||||
- Adjacent: [[GPGPU]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: shader code review / lighting model 도출 / WebGL→WebGPU 마이그레이션.
|
||||
**언제 X**: 매 raw rendering loop 의 micro-perf — 매 GPU profiler (Nsight, Xcode GPU) 가 우선.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Texture sample in non-uniform branch**: 매 derivative 깨짐 (mipmap LOD).
|
||||
- **discard everywhere**: 매 early-Z 무력화 → fillrate 폭증.
|
||||
- **High precision 남용**: 매 mobile 에서 highp 필요 부분만.
|
||||
- **CPU readback every frame**: 매 GPU sync stall.
|
||||
- **Loop count = uniform without unroll hint**: 매 driver 별 perf 변동.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (Khronos GLSL 4.60 spec, WebGPU spec 2025, Real-Time Rendering 4ed, Filament docs).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — fragment shader + WebGPU/WGSL 2026 정리 |
|
||||
Reference in New Issue
Block a user