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

 (benpence.com)
1P by GN⁺ | ★ favorite | 댓글 1개
  • 사이키델릭한 애니메이션·게임 비주얼을 만들기 위한 입문편으로, 사전 지식이 없어도 따라갈 수 있게 UV와 색상 계산부터 출발함
  • 3D 모델의 색 입히기는 2D 이미지 영역을 3D 면에 연결하는 UV 매핑/텍스처링을 이해하는 것이 핵심임
  • UV 좌표는 텍스처 위 위치를 나타내는 0.0~1.0 범위의 두 값이며, (0.5, 1.0)은 가로 50%, 세로 100% 지점에 해당함
  • 그래픽스 색상은 보통 RGB 세 값으로 표현되고, UV의 X·Y를 빨강·초록으로 바꾸면 좌표 변화가 색상 그라디언트로 보임
  • 예제 코드는 화면 전체를 덮는 하나의 3D 면에서 픽셀별 독립 계산으로 색을 정하므로, 일반적인 프로그램 작성과 다른 사고방식이 필요함

시리즈의 목표와 전제

  • 사이키델릭 그래픽스 시리즈는 애니메이션과 게임에 쓸 수 있는 사이키델릭 비주얼을 만드는 방법을 다룸
  • 그래픽스나 프로그래밍 사전 지식은 요구하지 않지만, 삼각법과 프로그래밍 경험이 있으면 이해에 도움이 됨
  • 목표는 영상 예제에 쓰인 사이키델릭 그래픽스의 기본 원리를 익히는 것임
  • 영상 대부분은 Blender로 만들었지만, 이 시리즈의 기법은 다른 환경으로 옮기기 쉬우며 Blender는 part 3에서 다룸
  • 0편과 part 1은 웹에서 실행되는 예제를 향해 진행함

3D 모델과 UV 매핑

  • 3D 모델은 점과 면으로 된 표면

    • 컴퓨터 그래픽스는 3D처럼 보이지만, 그래픽스 코드를 쓸 때는 2D로 생각해야 하는 경우가 많음
    • 3D 편집 프로그램에서 모델을 만들면 실제로는 공간에 떠 있는 점인 정점(vertices)과, 그 정점들을 연결한 면(faces)을 만드는 것임
    • 모델은 속이 빈 표면이며, 화면에 보이는 것은 표면뿐임
    • 게임과 애니메이션의 거의 모든 3D 형태는 이런 점과 면으로 귀결됨
    • 매끄럽게 보이는 모델도 점과 면이 충분히 많아 경계를 알아보기 어려운 경우가 많음

  • 텍스처는 3D 표면에 붙일 2D 이미지

    • 3D 표면에 색을 더하는 표준 방식으로 UV 매핑/텍스처링을 사용함
    • 지구의 2D 투영도가 일부 영역에서 늘어나거나 찌그러져 보이듯, 3D 모델의 색을 2D로 펼친 이미지도 왜곡될 수 있음
    • 펼쳐진 2D 이미지는 나중에 3D 모델 표면에 입힐 색을 담는 텍스처(texture) 임
    • 이미지 텍스처를 만드는 한 방식은 빈 이미지 파일을 만든 뒤, 3D 오브젝트의 각 면마다 그 이미지의 어느 부분을 쓸지 정하는 것임
    • 서로 다른 3D 면이 같은 텍스처 영역을 공유해도 되며, 대칭 몸체처럼 한쪽만 칠하고 양쪽 면에 같은 영역을 배정하는 방식이 흔함
    • 각 면이 쓰는 텍스처 영역은 실제 3D 면과 크기나 비율이 같을 필요가 없음

텍스처 페인팅과 UV 좌표

  • 텍스처에 칠하면 모델에 나타남

    • 텍스처 위에 칠한 모든 것은 3D 모델 위에 표시됨
    • 대부분의 소프트웨어는 3D 모델에 직접 칠하면 이미지 텍스처를 대신 색칠해 주는 기능을 제공함

  • UV 좌표는 텍스처 위의 2D 위치

    • 3D 모델의 각 면에 대해 예약한 텍스처 영역은 UV 맵이며, 이미지 텍스처의 일부와 3D 모델을 연결하는 데이터임
    • UV는 이미지 텍스처 위의 위치를 나타내는 2D 좌표로 볼 수 있음
    • 각 3D 면은 여러 점으로 정의되고, 그 점들이 이미지 텍스처 위에 배치되면서 각 점은 UV 좌표를 가짐
    • (0.5, 1.0)에서 첫 값 0.5는 좌우 방향의 절반 지점, 둘째 값 1.0은 세로 방향의 맨 위를 뜻함
    • UV 값은 둘 다 보통 0.0부터 1.0 사이이며, (0, 0)과 (1, 1)을 둘러싼 사각형 안의 좌표 공간을 주로 사용함
    • 픽셀 위치 대신 0과 1을 쓰면 좌우·상하로 얼마나 이동했는지를 비율로 표현할 수 있고, 100을 곱하면 퍼센트처럼 이해할 수 있음
    • 실제 두 차원 이름은 U와 V이며, X·Y·Z는 3D 위치에 이미 쓰이기 때문에 UV라는 이름을 사용함

그래픽스에서 색과 자료형

  • RGB는 세 값으로 색을 표현함

    • 컴퓨터 그래픽스의 색은 보통 RGB, 즉 빨강·초록·파랑으로 표현됨
    • 단일 색의 빨강, 초록, 파랑 양은 보통 0.0부터 1.0 사이의 값임
    • 빨강은 (1.0, 0.0, 0.0), 검정은 (0.0, 0.0, 0.0), 흰색은 (1.0, 1.0, 1.0)으로 표현됨
    • 웹 그래픽스에서 쓰는 0xff0000 같은 16진수 표기도 같은 정보를 다른 방식으로 나타냄

  • UV를 색으로 보면 좌표가 보임

    • UV 좌표를 시각화할 때는 관례적으로 첫 값인 X를 빨강, 둘째 값인 Y를 초록으로 쓰고, 파랑은 0.0으로 둠
    • UV (0, 1)은 색 (0.0, 1.0, 0.0)이 되어 초록으로 보임
    • UV (1, 0)은 색 (1.0, 0.0, 0.0)이 되어 빨강으로 보임
    • 사각형을 UV 위치에 따라 색칠하면, 왼쪽 위로 갈수록 초록이 강해지고 오른쪽 아래는 빨강이 됨
    • 왼쪽 아래는 빨강과 초록이 모두 0이라 검정이 되고, 오른쪽 위는 빨강과 초록이 모두 들어가 노랑이 됨

  • float, vec2, vec3

    • float는 하나의 소수점 숫자, 즉 부동소수점 수임
    • vec은 벡터를 뜻하며, vec2는 두 개의 소수점 숫자 쌍, vec3는 세 개의 소수점 숫자 묶음임
    • RGB 색상은 빨강·초록·파랑 세 값이 있으므로 vec3로 표현됨
    • UV는 X와 Y 두 값이 있으므로 vec2에 해당함

예제 그래픽스 코드의 실행 방식

  • 이 시리즈의 코드 예제는 별도의 3D 모델을 쓰지 않고, 화면 전체를 차지하는 하나의 3D 면을 사용함
  • 이미지 텍스처로 색을 더하지 않고, 코드가 이미지 텍스처 위 색상을 직접 결정함
  • 처리 흐름은 다음과 같음
    • 3D 장면의 카메라가 어떤 3D 면이 보이는지 계산함
    • 각 면에 예약된 텍스처 영역, 즉 UV 매핑을 이용해 UV 좌표를 계산함
    • 계산된 UV 좌표와 3D 위치 같은 정보를 코드에 넘김
    • 코드는 해당 위치의 색을 결정함
  • 이런 처리는 초당 수백만 번 일어나는 방식으로 이해할 수 있음
  • 그래픽스 코드는 화면의 한 점에서 다른 점까지 연속된 선을 직접 그리는 방식이 아니라, 각 위치가 선택될 때 그 위치의 색을 답하는 방식에 가까움
  • 작성하는 코드는 전체 색을 만들기 위해 한 번만 실행되지 않고, 화면의 작은 부분인 각 픽셀마다 실행됨
  • 다른 화면 영역의 색을 확인할 수 없다는 제약 때문에, 그래픽스 프로그래밍은 일반적인 프로그래밍 경험이 있어도 다른 사고방식이 필요함
  • part 1에서는 이런 제약 안에서도 흥미로운 비주얼을 만드는 방법으로 이어짐

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • David Tristram임. 1990년대 컴퓨터 그래픽 퍼포먼스 그룹 Raster Masters의 창립 멤버였고, @hopkins가 말했듯 고급 Silicon Graphics 워크스테이션으로 Grateful Dead, Herbie Hancock, Graham Nash 같은 라이브 음악에 맞춘 합성 영상을 만들었음
    여러 번의 변화를 거쳐 지금은 주로 2D 영상 처리 환경인 Resolume Avenue와 TouchDesigner에서 작업 중임. 여기 링크들이 영감을 줌

    • Raster Masters의 다른 멤버가 누구였는지, Grateful Dead 공연에서 겪은 미친 일화가 궁금함
      요즘 발표 때 노트북에 프로젝터만 꽂아도 화면이 뜰지 매번 주사위 굴리는 느낌이라 스트레스인데, 당시 밴드 위 스크린에 라이브 고해상도 SGI 영상을 띄우려면 어떤 프로젝터, 보정, 준비가 필요했는지도 궁금함
    • 볼 수 있는 작업 링크가 있는지 궁금함
    • 1992년쯤 몇몇 Dead 공연에서 작업물을 본 것 같음

  • 너무 저수준으로 내려가지 않고 사이키델릭 그래픽을 만져보고 싶다면 hydra가 괜찮음. JavaScript 기반 라이브 코딩 환경이고 학습 곡선도 완만함

    • 음악 입력을 지원하는 것도 있는지 궁금함. Winamp 시절 시각화 플러그인을 좋아했는데, 요즘은 그런 예술이 죽은 것처럼 보임
    • dwitter.net에도 JavaScript로 만든 사이키델릭 그래픽 예제가 많음

  • 원문 문서와 UV 좌표에 대해 말하자면, 예전에는 사각형 메시의 각 꼭짓점에 대한 UV 텍스처 좌표를 흥미롭게 변위시키는 방법을 많이 탐구했음
    당시에는 꼭짓점별 색을 썼고, 요즘이라면 ShaderToy에 있는 것처럼 프래그먼트(픽셀) 셰이더를 쓸 것임. 특히 흥미로운 방식은 흐름장(flow field)을 따라 텍스처 좌표를 이류(advection)시키는 것임. 아무 2D 벡터장이나 쓰고 각 좌표에 반복적으로 변위를 적용하면 됨. 부정확한 명시적 방법만으로도 결과가 좋음
    좌표가 멀리 왜곡되면 이미지는 알아볼 수 없게 되는데, 간단한 해법은 좌표에 원래 위치로 돌아가게 하는 “복원” 힘을 주는 것임. 그러면 거울 호일 조각을 펴는 것처럼 원래 자리로 튕겨 돌아감
    지금은 이런 변위 효과와 함께 피드백을 쓰고 있음. 아주 작은 변위를 반복 적용하면 유체 흐름과 꽤 비슷한 움직임이 나옴

    • Jeremy Huxtable이 만든 PostScript melt도 같은 방식이었음. 원래 NeWS의 “Big Brother” Eyes를 만든 사람이고, 그게 XEyes에 영감을 줬음
      임의의 사각형을 고르고 임의 오프셋으로 복사하는 과정을 반복하면, 아주 디지털적이고 네모나며 날카로운 효과도 약간의 무작위성(디더링)을 통해 부드럽고 유기적인 효과로 바뀜. 흑백에서도 잘 동작했고, 결국 그냥 PostScript였음
      https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
      Jeremy의 원래 “Big Brother” eye.ps도 있음. 둥근 NeWS 눈알 창을 보여주는 전형적인 데모였음
      https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
    • Kai Power Goo의 단순하고 직접 조작하는 재미가 떠오름
      LGR: Kai's Power Goo – Classic 90s Funware for PC!
      https://www.youtube.com/watch?v=xt06OSIQ0PE

  • HTML에서 이미지에 작동하는 셰이더를 쉽게 쓸 수 있다는 점이 좋음. 이 분야 실력은 평범하지만 사람들이 어디까지 밀어붙이는지 보는 게 즐거움
    간단한 깊이 지도 근사만 제공해도 결과가 훨씬 흥미로워짐. 몇 년 전 비슷한 기법으로 이미지 간을 “흥미로운 효과”와 함께 부드럽게 크로스페이드하는 프로젝트를 했고, 글과 데모가 있음
    https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

  • 솔직히 이 글과 함께 있는 Rolling Hills 글이 훨씬 더 흥미로움
    특히 중간쯤에서 정적인 이미지에 아래 코드를 적용하는 부분이 인상적임
    uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
    uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
    여러 사이키델릭 경험을 해본 입장에서, 적어도 낮은 비영웅적 용량에서는 실제 시각 경험에 가장 가까워 보임. 파동을 조금 느리게 하고 움직임 범위를 살짝 줄이면 더 비슷할 듯함
    공연용 멋진 시각 효과보다 사이키델릭 물질이 유도하는 시각 환각을 재현하는 데 더 관심이 있음. 물론 양쪽 예술가 모두 존중함
    현대적인 도구로 사이키델릭 영상을 훌륭하게 만드는 아티스트가 있는데 계정명이 도무지 떠오르지 않음. 찾으면 아래에 남기겠음
    Rolling Hills 글의 이 부분과 비교하자면 Midsommar의 버섯차 장면, 특히 나무껍질 장면이 떠오름. 사물이 “숨 쉬고” 흐르는 효과는 정말 독특한 시각 경험이고, 여러 방식으로 구현하는 걸 보는 게 좋음

    • 말한 계정은 아닐 수 있지만, 이 YouTube 계정은 시각 경험을 잘 재현하면서 다른 효과도 함께 다룸
      자연을 볼 때 영상, 기하학적 패턴이 형성되기 시작하는 방식, 그리고 “숨 쉬는” 효과가 강력함. 여러 물질을 다루고, 표면이 살짝 숨 쉬거나 맥동하는 정도부터 DMT 같은 물질에서 나오는 완전한 기하학적 “세계”까지 폭넓게 보여줌
      https://www.youtube.com/@josikinz

  • 90년대 초 Todd Rundgren이 Mac 앱 Flowfazer를 출시했음. 경험을 시뮬레이션하진 않았지만, 주의를 다른 데로 돌려 흐름을 이어가게 하는 데 도움이 됐음
    어떤 사람들은 자기 창작을 위한 가이드로 쓰기도 했음
    [1] https://grokware.com/
    [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
    그때는 화면 보호기와 팔레트 애니메이션의 시대였음

  • 이런 류를 좋아하고 음악가 Tipper 공연에서 Fractaled Visions가 영상을 담당하는 걸 볼 기회가 있다면 엄청난 경험이 될 것임
    지금까지 본 사이키델릭 아티팩트의 시각적 묘사 중 가장 정확했음. 작년에 같이 하는 공연을 봤고, 내 인생 최고의 예술 경험이었음. Fractaled Visions의 영상은 풍부함과 복잡성이 거의 믿기 어려울 정도였음
    셰이더 프로그래밍 등을 꽤 알아도 몇몇 효과는 “대체 어떻게 한 거지” 싶었음. 아래 세트 영상은 경험을 완전히 담진 못하지만 분위기는 전해줌. 4K 60fps로 본 건 완전히 다른 수준이었음
    https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

  • 여기에 ShaderToy 링크가 필요함: https://www.shadertoy.com

  • 이 분야의 오래된 Flash 고전 Flashback.swf가 떠오름. 영상 렌더링은 여기 있음: https://m.youtube.com/watch?v=KaSqrx93rS0

    • Flash 시절 이 영상 덕분에 전자음악 그룹 Shpongle을 알게 됐음
      이 애니메이션에는 Divine Moments of Truth 리믹스가 쓰였고, 아마 “Russian Bootleg” 버전일 것임. 그 전에도 전자음악을 듣긴 했지만, 이 장르의 전자음악은 처음 들었을 때 정말 머리가 날아가는 느낌이었음

  • 이번 주에 일하면서 WebGL 셰이더를 작성하고, 물리적 카메라 효과처럼 보이게 세부를 만지고 있었음
    그런데 가끔 뭔가를 잘못 만들면 이 글에 나온 것과 비슷한 결과가 나오는데, 솔직히 표준 이미지 효과보다 훨씬 재미있음
    시각적으로 쓸 수 있는 경우는 제한적일 수 있지만, 컴퓨터 그래픽이 작동하는 방식에 대해 우리가 만든 모델을 가지고 노는 건 각 시스템을 배우는 데 아주 좋은 방법임. 그래픽뿐 아니라 프로그래밍의 기본 수학, GPU가 동작하는 방식과 메모리·CPU와의 연결, 눈이 작동하는 방식, 애니메이션과 시간을 다루는 법까지 배울 수 있음

답변달기