▲

GN⁺: 릭 앤 모티 SDF 애니메이션 프로그래밍

 (danielchasehooper.com)
2P by neo 21일전 | ★ favorite | 댓글 1개

셰이더 프로그래밍 배우기

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

셰이더 기초

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

기본 도형 그리기

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

다양한 도형 함수

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

Rick 그리기

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

도형 결합 및 미러링

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

고급 기법

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

무한한 치아 그리기

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

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

▲
neo 21일전  [-]
Hacker News 의견

  • 정말 멋진 작업과 훌륭한 게시물임. SDF에서 매끄러운 안티앨리어싱을 위해 'aastep'을 사용하면 좋음

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

  • 매우 좋은 게시물임. Inigo Quilez의 관련 YouTube 재생 목록 추천

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

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

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

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

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

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

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

답변달기