# 릭 앤 모티 SDF 애니메이션 프로그래밍

> Clean Markdown view of GeekNews topic #19111. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19111](https://news.hada.io/topic?id=19111)
- GeekNews Markdown: [https://news.hada.io/topic/19111.md](https://news.hada.io/topic/19111.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-02-08T09:53:46+09:00
- Updated: 2025-02-08T09:53:46+09:00
- Original source: [danielchasehooper.com](https://danielchasehooper.com/posts/code-animated-rick/)
- Points: 2
- Comments: 1

## Topic Body

### 셰이더 프로그래밍 배우기

- **Rick와 Morty 애니메이션 제작**: 이 애니메이션은 240줄의 코드로 만들어졌으며, 라이브러리나 이미지 없이 GPU 셰이더와 서명 거리 필드를 사용하여 비디오, 비디오 게임 또는 재미를 위해 애니메이션을 만드는 방법을 설명함.
- **라이브 코딩 에디터**: 페이지에 내장된 라이브 코딩 에디터를 통해 예제를 실행하고 수정할 수 있음.

#### 셰이더 기초

- **GLSL 사용**: OpenGL 셰이딩 언어(GLSL)로 작성된 코드로, 각 픽셀에 대해 GPU에서 실행되는 `color_for_pixel` 함수가 필요함.
- **픽셀 색상 결정**: 시간에 따라 픽셀의 색상을 결정하는 함수가 애니메이션 제작의 핵심임.

#### 기본 도형 그리기

- **원 그리기**: 픽셀의 중심에서의 거리를 시각화하여 원을 그릴 수 있음.
- **서명 거리 필드(SDF)**: 도형 내부의 거리는 음수, 외부는 양수로 표시하여 다양한 효과를 줄 수 있음.

#### 다양한 도형 함수

- **베지어 곡선, 별, 둥근 사각형**: 다양한 SDF 함수를 사용하여 복잡한 도형을 그릴 수 있음.

#### Rick 그리기

- **얼굴 재현**: Rick의 얼굴을 코드로 재현하기 위해 많은 시도와 오류를 거쳤으며, 참조 이미지를 사용하여 정확성을 높임.
- **윤곽선 추가**: 서명 거리 함수를 사용하여 도형의 윤곽선을 그릴 수 있음.

#### 도형 결합 및 미러링

- **도형 결합**: 두 도형을 결합하여 윤곽선을 그릴 때 `min()` 함수를 사용함.
- **미러링**: `abs()` 함수를 사용하여 도형을 축을 기준으로 대칭시킬 수 있음.

#### 고급 기법

- **도메인 왜곡**: 픽셀 위치를 무작위로 오프셋하여 도형을 왜곡할 수 있음.
- **애니메이션 효과**: 도메인 왜곡을 애니메이션화하여 독특한 시각 효과를 만들 수 있음.

#### 무한한 치아 그리기

- **포물선 사용**: 포물선을 사용하여 치아 모양을 그릴 수 있으며, 여러 개의 치아를 그릴 때 코드 중복을 피할 수 있음.

이 글은 셰이더 프로그래밍을 통해 복잡한 애니메이션을 만드는 방법을 설명하며, 다양한 기법과 도구를 활용하여 창의적인 결과물을 얻을 수 있음을 보여줌.

## Comments



### Comment 34299

- Author: neo
- Created: 2025-02-08T09:53:46+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=42958696) 
- 정말 멋진 작업과 훌륭한 게시물임. SDF에서 매끄러운 안티앨리어싱을 위해 'aastep'을 사용하면 좋음
  - 참고 링크: [glsl-aastep GitHub](https://github.com/glslify/glsl-aastep)

- 셰이더 개발은 정말 차원이 다름. 부동 소수점을 변경하고 결과를 즉시 확인하는 과정이 매우 만족스러움

- 매우 좋은 게시물임. Inigo Quilez의 관련 YouTube 재생 목록 추천
  - 참고 링크: [YouTube Playlist](https://www.youtube.com/watch?v=0ifChJ0nJfM&list=PL0EpikNmjs2CYUMePMGh3IjjP4tQlYqji&index=5)

- 작업의 질과 설명의 품질, 독자에게 주는 도전 과제가 모두 최고 수준임. 공유해줘서 고마움

- GLSL에 대한 매우 잘 구조화된 소개였음. Vulkan이나 WebGPU/WebGL에서는 어떤지 궁금함

- 8개월 동안 이 애니메이션을 완성한 것은 엄청난 인내심을 반영함

- 개발 과정에서 소수 값을 조정하는 반복 작업을 했는지, 아니면 어떤 에디터를 사용했는지 궁금함. 240줄의 적절한 소수 값을 찾는 과정이 시간이 많이 걸릴 수 있음

- 페이지의 완성도가 놀라울 정도임

- 셰이더 프로그래밍은 차원이 다름. 애니메이션을 만드는 데 들어가는 노력과 세부 사항에 대한 주의가 놀라움. 전통적인 개발보다 훨씬 더 손이 많이 감

- 이 작업의 인상적인 정도를 표현하기 어려움