디자인 아틀라스◈3D · WebGL
three.js로 만드는 파티클, 셰이더, 블룸, 디스플레이스먼트 등 3D 그래픽 기법. — 40개 항목
플로우 필드 파티클Flow-field particles
노이즈로 만든 흐름장을 따라 수천 개의 입자가 움직이며 자연스러운 소용돌이를 그리는 기법.
GPGPU 파티클 시뮬레이션GPGPU particle simulation
파티클 위치를 CPU가 아니라 텍스처에 저장하고 GPU 셰이더로 갱신해서 수만 개를 매끄럽게 굴리는 기법.
포털(다른 세계로 창)Portal (window into another world)
한 장면을 미리 텍스처로 찍어서 다른 장면의 문·거울·창 표면에 실시간으로 붙이는 기법.
리플렉터(거울) 바닥Reflector (mirror) floor
평면 하나를 거울처럼 만들어, 그 위에 있는 물체를 실시간으로 비춰 보여주는 기법.
물 셰이더Water shader
사인파로 표면 높이를 흔들고 프레넬·스페큘러를 더해 물결치는 수면을 흉내 내는 커스텀 셰이더.
유체(잉크) 시뮬레이션Fluid (ink) simulation
실제 유체 방정식 대신, 노이즈를 여러 겹 뒤틀어(domain warping) 잉크가 물에 번지는 느낌을 흉내 내는 기법.
스카이박스(절차적 하늘)Skybox (procedural sky)
이미지 없이, 대기 산란 물리를 흉내 낸 셰이더 하나로 시간대에 따라 변하는 하늘을 그리는 기법.
아지랑이(열기 굴절)Heat distortion (haze)
화면을 한 번 텍스처로 찍어두고, 그 텍스처를 노이즈로 흔들며 다시 그려서 뜨거운 공기에 비친 상이 일렁이는 걸 흉내 내는 기법.
디졸브(소멸) 셰이더Dissolve shader
노이즈 값이 기준선보다 낮은 픽셀을 통째로 지워서, 표면이 타들어가듯 사라지고 다시 나타나게 만드는 기법.
홀로그램 셰이더Hologram shader
프레넬 림 라이트 + 스캔라인 + 깜빡임을 더해서 영화 속 파란 홀로그램 영상을 흉내 내는 셰이더.
오디오 반응형 비주얼Audio-reactive visual
음악의 주파수 대역별 세기(스펙트럼)에 맞춰 막대나 오브젝트의 크기를 실시간으로 흔드는 시각화 기법.
텍스트 파티클Text particles
2D 캔버스에 글자를 그린 뒤 픽셀을 샘플링해서, 그 모양대로 입자들이 모였다 흩어지는 걸 반복하는 기법.
무한 터널Infinite tunnel
카메라가 링들을 통과하며 계속 앞으로 나아가지만, 위치를 나머지 연산으로 되감아 영원히 끝나지 않는 것처럼 보이게 하는 기법.
노이즈 구체Noise sphere
3D 노이즈로 구의 표면을 정점 방향으로 밀고 당겨서, 행성이나 유기적인 덩어리처럼 울퉁불퉁하게 만드는 기법.
마칭 큐브(메타볼)Marching cubes (metaballs)
보이지 않는 "밀도 필드"에서 일정 농도 이상인 경계면만 뽑아내, 방울들이 서로 뭉치고 떨어지는 메타볼을 만드는 기법.
라인 아트 셰이더Line art shader
두께가 살아있는 3D 선으로 리사주 곡선을 여러 겹 그려, 손으로 그린 듯한 생성적 라인 아트를 만드는 기법.
파티클 필드Particle field
수천 개의 점을 한 번에 그려 별이 흐르는 공간이나 먼지 같은 분위기를 만드는 기법.
와이어프레임Wireframe
면을 채우지 않고 폴리곤의 모서리 선만 그려서 메시의 구조를 드러내는 렌더링 방식.
매트캡Matcap
조명 계산 없이, 구를 미리 찍어둔 텍스처 하나로 재질의 명암·반사를 흉내 내는 기법.
PBR 머티리얼PBR material
금속성(metalness)과 거칠기(roughness) 두 값으로 실제 빛 반사 물리에 가깝게 재질을 표현하는 방식.
환경 맵Environment map
주변 공간을 담은 텍스처로 물체를 비추고 반사시키는 기법. 사실적인 반사와 조명을 한 번에 해결합니다.
블룸Bloom
밝은 부분이 주변으로 번져 나오는 후처리 효과. 카메라 렌즈가 강한 빛을 포화시키는 현상을 흉내 냅니다.
커스텀 셰이더 머티리얼Custom shader material
내장 머티리얼 대신 직접 GLSL 코드를 짜서 정점·픽셀 단위로 색과 모양을 완전히 제어하는 방법.
버텍스 디스플레이스먼트Vertex displacement
정점 셰이더 안에서 노이즈 값으로 정점의 위치 자체를 밀어 움직이는 기법. 지형·물결·유기적 변형에 씁니다.
인스턴스드 메시Instanced mesh
같은 지오메트리를 가진 수천 개의 오브젝트를 단 한 번의 드로우콜로 그리는 기법.
포그Fog
카메라에서 멀어질수록 물체를 배경색에 섞어 흐릿하게 만드는 기법. 깊이감을 주고 먼 오브젝트의 팝인을 감춥니다.
레이캐스팅Raycasting
화면의 한 점(마우스 위치 등)에서 3D 공간으로 광선을 쏴서 어떤 오브젝트와 부딪히는지 찾는 기법.
오빗 컨트롤Orbit controls
드래그로 카메라를 대상 주위로 회전시키고 휠로 줌인·아웃하게 만드는, 3D 뷰어의 가장 기본적인 카메라 조작.
포스트 프로세싱Post-processing
렌더링이 끝난 화면 이미지를 여러 패스에 걸쳐 다시 처리해 색·질감·왜곡을 더하는 파이프라인.
툰 셰이딩Toon shading
부드러운 명암 대신 몇 단계의 뚜렷한 색 밴드로 음영을 표현해 만화·애니메이션처럼 보이게 하는 셰이딩.
프레넬 림 라이트Fresnel rim light
표면을 정면으로 볼 때는 흐리고 비스듬히(가장자리)로 볼 때는 밝게 빛나 보이게 만드는 셰이더 효과.
유리 트랜스미션Glass transmission
투명한 척 알파값으로 흐리게 하는 대신, 뒤 배경을 실제로 굴절시켜 비치게 만드는 물리 기반 유리 재질.
신스웨이브 그리드Synthwave grid
네온 격자 바닥과 줄무늬 태양이 지평선으로 사라지는, 80년대 레트로퓨처리즘 특유의 장면 구성.
레이마칭Raymarching
삼각형 메시 없이, 화면의 모든 픽셀에서 광선을 조금씩 전진시켜 수학 함수로 정의된 형태를 직접 그리는 기법.
절차적 지형Procedural terrain
노이즈 함수를 겹겹이 쌓아 산·언덕 같은 자연스러운 높낮이를 자동으로 만들어내는 지형 생성 기법.
피사계 심도Depth of field
카메라의 초점 거리에서 벗어난 앞뒤 물체를 흐리게 만들어, 초점이 맞은 피사체를 시선으로 유도하는 효과.
아웃라인 패스Outline pass
선택된 오브젝트의 실루엣을 화면 공간에서 감지해 발광하는 테두리로 강조하는 후처리 기법.
모프 타겟Morph targets
같은 정점 개수를 가진 두 형태 사이를 부드럽게 보간해 하나의 메시가 다른 모양으로 변형되게 하는 기법.
섀도 매핑Shadow mapping
광원 시점에서 한 번 더 렌더링해 "빛이 닿지 않는 곳"을 미리 기록해두고, 그걸로 그림자를 그리는 표준 기법.
GPU 파티클GPU particles
파티클의 위치를 매 프레임 CPU에서 계산하지 않고, 정점 셰이더 안에서 GPU가 통째로 계산하게 하는 기법.