이 글에서는 Raymarching과 GLSL 셰이더를 사용하여 3D 장면을 만드는 방법을 자세히 설명합니다. 레이마칭과 부호가 있는 거리 함수(SDF)와 같은 기본 개념부터 시작하여 간단한 도형을 만들고 SDF 연산자(min 및 smoothmin 등)를 사용하여 도형을 결합하여 복잡한 장면을 만드는 방법을 단계적으로 설명합니다. 조명 모델, 소프트 섀도우, 무한히 반복되는 장면 생성, 노이즈 도함수를 사용한 사실적인 지형 생성 등의 고급 주제도 다룹니다. 마지막으로, 무한히 펼쳐지는 화성 풍경이라는 멋진 예시를 통해 저자의 창작 과정과 통찰력을 공유합니다.
더 보기
이 글에서는 포스트 프로세싱과 볼륨 레이마칭을 결합하여 React Three Fiber에서 사실적인 볼륨 라이팅 효과를 만드는 방법을 자세히 설명합니다. 저자는 좌표계 변환, 스크린 공간에서 3D 레이 재구성, 성능 최적화를 위한 깊이 버퍼 사용법을 꼼꼼하게 설명합니다. SDF를 이용한 조명 모양 만들기, 섀도우 매핑, 광 산란과 같은 고급 기술도 다루며, 그림자와 안개 효과가 있는 동적인 볼륨 라이팅 효과를 만들어냅니다. 아치형 구조물과 우주 공간 장면 등 여러 데모에서 이 기법을 보여주고, 멀티 라이트 소스와 모든 방향의 그림자 처리도 탐구합니다.
더 보기
이 글에서는 저자가 2024년에 셰이더 기법을 배우고 후처리에 적용한 경험을 자세히 설명합니다. @samdape와 @hahajohnx 같은 아티스트의 작품에서 영감을 얻어 복잡한 픽셀 패턴, 트롱프뢰유 효과, 인터랙티브한 후처리 효과를 만들었습니다. 이 글에서는 픽셀화, SDF 및 임계값 행렬을 사용한 패턴 생성, LED 패널, 직물, 레고 블록, 서리 유리 등의 효과를 구현하는 기술에 대해 자세히 설명하고 코드 스니펫과 데모를 제공합니다.
더 보기
작성자는 몇 달 동안 개인 웹사이트를 구축하면서 셰이더와 WebGL 기술을 보여주기 위해 3D 작업을 통합했습니다. 이 기사에서는 3D 장면의 시각적 효과를 향상시키는 데 있어서 후처리가 하는 중요한 역할, 특히 레트로 효과 생성에 중점을 두고 자세히 설명합니다. 다양한 디더링 기법(화이트 노이즈, 정렬된 노이즈, 블루 노이즈)을 다루고 셰이더를 사용한 구현 방법을 설명합니다. 또한 사용자 지정 팔레트를 허용하는 색상 양자화 기술에 대해서도 자세히 설명합니다. 이 기사는 픽셀화와 CRT 모니터 에뮬레이션을 결합한 인상적인 레트로 3D 웹사이트 효과로 마무리됩니다.
더 보기