▲

GN⁺: 사이키델릭 그래픽스 0: 소개

 (benpence.com)
1P by neo 1달전 | ★ favorite | 댓글 1개

Psychedelic Graphics 0: 소개

  • 이 시리즈는 애니메이션과 게임을 위한 사이키델릭한 비주얼을 만드는 방법을 소개함. 그래픽이나 프로그래밍에 대한 사전 지식이 없어도 이해할 수 있도록 구성되었음. 삼각함수와 프로그래밍에 대한 기본 지식이 있다면 도움이 될 것임.
  • 이 시리즈를 통해 비디오에 사용된 사이키델릭 그래픽의 기본을 이해할 수 있기를 바람. 대부분의 비디오는 Blender를 사용하여 제작되었지만, 이 시리즈에서 가르치는 기술은 쉽게 전환할 수 있으며, 나중에 Blender에 대해 더 깊이 다룰 예정임.

UV란 무엇인가?

3D 모델

  • 컴퓨터 그래픽은 종종 3D로 보이지만, 그래픽 코드를 작성할 때는 종종 2D로 생각해야 함. 3D 모델링 프로그램에서 아름다운 모양을 만들었다면, 사실 공간에 떠 있는 점(정점)을 만들고 일부를 연결하여 고체 모양(면)을 만든 것임.
  • 3D 모델은 대부분 비어 있으며, 우리는 표면만 볼 수 있음. 3D 모델에 색상을 입히는 표준 방법은 UV 매핑/텍스처링임. 지구의 2D 투영이 약간 늘어나고 압축된 것처럼 보이는 것처럼, 3D 모델의 색상이 2D로 투영될 때도 비슷하게 보임.

텍스처 페인팅

  • 텍스처를 페인팅하면 3D 모델에 나타남. 대부분의 소프트웨어는 3D 모델에 직접 페인팅하여 이미지 텍스처를 색칠할 수 있도록 함.

UV 좌표

  • UV는 위치, 즉 2D 좌표로 생각할 수 있음. (0, 0)부터 (1, 1)까지의 공간을 사용하여 UV 좌표를 정의함. UV 맵은 색상 이미지 텍스처와 3D 모델의 면을 연결하는 데이터임.

그래픽 코드의 작동 방식

그래픽의 색상

  • 컴퓨터 그래픽 색상은 종종 RGB로 표현됨. 빨강, 초록, 파랑의 혼합으로 인간이 인식할 수 있는 거의 모든 색상을 만들 수 있음. 컴퓨터 그래픽에서 빨강, 초록, 파랑의 양은 보통 0.0에서 1.0까지 범위임.

UV의 색상

  • UV 좌표를 색상으로 변환하여 시각화 및 문제 해결에 도움을 줌. UV의 첫 번째 값(X 값)은 빨강, 두 번째 값(Y 값)은 초록으로 사용함.

부동 소수점과 벡터 vec2, vec3

  • float는 단일 소수점 숫자임. vec는 벡터를 의미하며, vec2는 두 개의 소수점 숫자, vec3는 세 개의 소수점 숫자로 구성됨.

그래픽 프로그램의 구조

  • 그래픽은 분산된 방식으로 조정해야 함. 코드가 한 번 실행되어 모든 색상을 생성하는 것이 아니라, 화면의 각 작은 부분에 대해 수백만 번 실행됨. 프로그래밍 경험이 있다면 매우 다른 사고방식임.

  • 이제 1부를 시작할 준비가 되었음. 이러한 제약 조건에도 불구하고 흥미로운 비주얼을 만드는 방법을 1부에서 볼 수 있음.

▲
neo 1달전  [-]
Hacker News 의견

  • David Tristram은 1990년대 컴퓨터 그래픽 퍼포먼스 그룹 Raster Masters의 창립 멤버로, Silicon Graphics 워크스테이션을 사용하여 Grateful Dead, Herbie Hancock, Graham Nash 등의 라이브 음악에 맞춘 합성 이미지를 제작했음

    • 현재는 주로 Resolume Avenue와 TouchDesigner를 사용하여 2D 비디오 처리 환경에서 작업 중임
    • Hydra는 저수준으로 가지 않고도 환각적인 그래픽을 실험할 수 있는 쿨한 자바스크립트 기반 라이브코딩 환경임

  • 과거에는 UV 텍스처 좌표를 변형하는 방법을 연구했으며, 현재는 ShaderToy와 같은 프래그먼트 셰이더를 사용함

    • 텍스처 좌표를 흐름 필드에 따라 변위시키는 과정이 흥미로움
    • 좌표가 원래 위치로 돌아오도록 "복원" 힘을 적용하는 간단한 방법도 있음
    • 피드백과 변위 효과를 결합하여 유체 흐름과 같은 모션을 생성함

  • HTML에서 이미지를 처리하는 셰이더 작성이 쉬워서 좋음

    • 깊이 맵의 단순한 근사치만으로도 흥미로운 결과를 얻을 수 있음
    • 과거에 WebGL을 사용하여 이미지 간의 크로스페이드를 부드럽게 하는 프로젝트를 진행했음

  • 환각적인 경험을 시각적으로 재현하는 데 관심이 많음

    • Rolling Hills 기사에서 시각적 환각을 재현하는 방법에 대해 설명함
    • 현대 기술을 사용하여 환각적인 비주얼을 잘 구현하는 아티스트가 있음

  • Todd Rundgren은 1990년대 초에 Flowfazer라는 Mac 앱을 개발했으며, 이는 사용자가 창작에 영감을 받을 수 있도록 도와줌

  • Tipper와 Fractaled Visions의 공연은 환각적인 비주얼의 가장 정확한 묘사 중 하나였음

    • Fractaled Vision의 비주얼은 복잡하고 풍부하여 놀라움을 줌

  • 웹GL 셰이더를 작성하면서 물리적 카메라 효과를 구현하려고 노력 중임

    • 그래픽, 수학, GPU, 메모리, CPU, 애니메이션 및 시간 처리에 대한 이해를 높이는 데 도움이 됨

  • Jim Crutchfield의 비디오 피드백 시스템 연구는 복잡한 공간 및 시간 역학을 연구하는 데 유용한 실험 시스템을 제공함

답변달기