레이마칭 조각 셰이더 디자인

픽셀로 만든 히어로

레이마칭 조각 셰이더 디자인은 짙은 네이비 배경 위에 커다란 초록색 절차적 형태를 보여 줍니다. 화면에 보이는 제목 “3D that lives in a fragment shader.”는 이미지를 일반적인 3D 에셋이 아니라 렌더링 연구로 읽게 합니다. 이 조합 덕분에 방문자는 조각의 표면을 살펴보기 전에 기술적 전제를 이해할 수 있습니다.

프래그먼트 셰이더는 중심이 시간에 따라 공전하는 다섯 개의 구체 거리장을 부드러운 합집합으로 결합해 스피어 트레이싱합니다. 더 짧은 두 번째 트레이스는 부드러운 그림자를 추정하고, 유한 차분 법선은 하이라이트와 프레넬 방식의 림을 뒷받침합니다. 느린 자동 카메라 궤도가 시점을 바꿉니다. 초록색 형태는 조각처럼 보이지만 조각 메시, 이미지 텍스처, 유체 시뮬레이션은 제공되지 않습니다.

디자인은 기술 설명을 큰 제목 아래에 둡니다. “No meshes”가 렌더링 방식으로 이어지고, 그다음 명시된 공전 모션이 나옵니다. 이 순서 덕분에 시각적 아이디어가 한눈에 읽히지만, 셰이더 용어는 그래픽스 프로그래밍에 어느 정도 익숙하다는 전제를 둔다는 절충이 있습니다.

이 구성이 어울리는 곳

이 디자인은 촘촘한 내비게이션보다 분위기와 기술적 정체성이 더 중요한 첫 화면 히어로에 적합합니다. 조각이 시각 영역 대부분을 차지하고, 좌측 하단의 라벨과 문단은 무엇을 보고 있는지 알고 싶은 독자에게 진입점을 제공합니다.

제공된 세 상태는 같은 텍스트 시스템을 유지하면서 렌더링된 형태의 배치만 바뀝니다. 한 상태는 큰 둥근 형태를 중앙에 두고, 다른 상태는 겹쳐진 형태를 보여 주며, 세 번째 상태는 밝은 테두리의 형태를 상단 영역을 가로질러 밀어 올립니다. 같은 카피가 반복되므로 별도 컨트롤이나 개별 장면 갤러리 없이 모션 자체가 주제가 됩니다.

상태 배지 읽기

우측 상단 배지는 GPU와 Raymarch 라벨을 유지하고, 로컬에서 계산한 FPS 추정치를 덧붙입니다. 세 캡처는 이 환경에서 2FPS로 표시되지만, 설명 카피에는 60fps라고 적혀 있습니다. 이 둘은 동등한 근거가 아닙니다. 카운터는 캡처 세션의 다시 그리기 주기를 나타내며, 원본 문구가 다른 기기에도 적용되는 성능 보장을 뒷받침하지는 않습니다.

빛과 스케일로 만든 구성

조각은 의도적으로 크게 잡혀 있습니다. 첫 캡처에서는 둥근 몸체가 상단과 우측 가장자리에서 들어와 타이포그래피 주변에 네이비 여백을 남기고, 이후 상태에서는 여러 형태가 더 가깝게 맞닿습니다. 뷰포트 경계에서 형태를 잘라 내면 오브젝트가 페이지보다 커 보이지만, 독자가 살펴볼 수 있는 윤곽의 양은 줄어듭니다.

초록에서 거의 검정에 이르는 음영이 주된 깊이 단서를 제공합니다. 밝은 점은 형태의 좌상단이나 우상단 가장자리 근처에 놓이고, 옅은 림은 일부 윤곽을 따라갑니다. 덕분에 어두운 형태들 주위로 시선이 움직일 경로가 생깁니다. 절충점은 대비입니다. 네온 초록이 시각적으로 강하므로 차분한 기술 문단은 짧고 신중하게 배치되어야 합니다.

에디토리얼 레이어는 작은 대문자 “RAYMARCHED HERO” 라벨, 매우 큰 두 줄 제목, 간결한 설명 문단으로 구성됩니다. 라벨은 카테고리를, 제목은 아이디어를, 문단은 기법을 말합니다. 각 텍스트 레이어가 일반적인 히어로가 아니라 레이마칭 조각을 직접 가리키므로, 이 세 단계 순서는 이 작업물에 특화되어 있습니다.

1. 화면부터 시작하기

   어두운 네이비 캔버스와 크게 키운 초록색 형태 하나를 먼저 놓아, 다른 형태가 주의를 끌기 전에 조명 모델이 읽히도록 하세요.

2. 볼륨 단서 더하기

   부드러운 그림자, 집중된 하이라이트, 절제된 프레넬 가장자리를 사용해 메시 고유의 디테일 없이 부호 있는 거리 함수 형태를 표현하세요.

3. 설명 배치하기

   카테고리 라벨, 주요 문장, 기술 문장을 이 순서로 두어 모션이 멈춰도 시각 실험이 이해되도록 하세요.

기능의 한계

이 공식 OpenDesign 예제는 단순한 모의 렌더링 라벨이 아니라 실제 로컬 WebGL2 구현을 담고 있습니다. 전체 화면 삼각형이 픽셀마다 최대 90단계의 스피어 트레이스를 실행하고, 0.001 거리 임계값에 도달하거나 범위가 8을 넘으면 멈추며, 부드러운 그림자에는 최대 24단계를 사용합니다. 이는 소스에서 확인되는 사실일 뿐, 프로덕션 준비 상태나 연결된 서비스를 입증하지는 않습니다.

장면과 카메라는 자동으로 움직입니다. 입력 이벤트는 리사이즈뿐이며, 픽셀당 연산량을 제한하기 위해 렌더 DPR은 1.5로 제한됩니다. 포인터, 키보드, 카메라 조작, 재질 편집, 파라미터 컨트롤은 없습니다. 로컬 FPS 추정치는 대략 반 초 단위 구간으로 갱신되며, 이 값도 소스의 60fps 문구도 기기 간 벤치마크를 입증하지 않습니다.