본문 바로가기

2023

 (12)
색수차 효과 셰이더 만들기 (Unity URP / Unreal 5.1 버전 사용) 개요 이번 글에서는, 색수차 (Chromatic aberration) 효과를 셰이더와 메테리얼로 만들어보려 합니다. 유니티와 언리얼 모두 후처리 (Post processing) 효과에서 색수차 효과를 기능으로 제공하곤 있지만, 제공되는 기본적인 기능에 노이즈를 더한다던지 등의 기능을 추가해 더 커스텀하게 만들어보고 싶었어요. 🔧 먼저 언리얼 메테리얼 노드를 통해 보기 쉽게 색수차 효과를 만들어보고, 바로 이어서 유니티 셰이더 코드로도 작성해보겠습니다. 색수차 효과란 색수차 효과를 적용한 샘플 이미지들을 가져와봤습니다. 위의 이미지들에서 보이듯, 색상의 잔상이 보이는 느낌의 효과입니다. 유명한 틱톡 로고 또한 이러한 색수차 효과의 일종이라고 봐도 될 ..
셰이더에서의 Sin(time) 그래프의 이해 개요 일반적으로 셰이더에서 애니메이션 효과를 줄 때, 단골로 등장하는 함수가 있습니다. 삼각함수 중 하나인 sin() 입니다. 물론 sin() 함수를 사용하지 않고도 애니메이션 효과는 만들 수 있겠지만, 사람은 일반적으로 보간이 들어간 커브 형태의 움직임을 더 자연스럽게 느끼고는 하니까요. 이번 포스트에서는 sin() 함수를 통해서 부드럽게 알파가 깜빡이는 효과를 언리얼 메테리얼 노드로 만들어 보겠습니다. 글 순서는 이론적인 부분부터 예제까지 차례대로 적기는 했지만, 저같은 수포자는 예제를 따라해본 뒤 이론적인 부분을 보며 원리를 이해하는게 더 와닿았었습니다. 만약 저와 같은 수포자시라면, 실전부터 박치기하고 역주행하는 쪽을 추천드립니다. 학창시절에 수학을 등 뒤로 했던 업보가 이렇게... 😂 그럼 si..
색상 간의 혼합 - 기초 블렌딩 연산 색상에 대한 글 디지털 색상과 수 색체계와 색의 구성요소 색상 간의 혼합 - 기초 블렌딩 연산 개요 지난 포스트들에서는 색상들이 컴퓨터에서 어떻게 표현되는지, 색상의 구성 요소에는 어떠한 것들이 있는지 대략적으로 정리해 보았습니다. 이번 글에서는 포토샵 작업을 할 때나, 게임 엔진상에서 효과를 주거나 할 때 사용하는 블렌딩이 무엇인지, 블렌딩은 어떻게 이루어지는지에 대해서 다뤄보려고 합니다. 그리고 언리얼 엔진의 메테리얼 노드 그래프를 활용해서 더하기, 빼기, 곱하기, 투명도 등의 간단한 수식으로 이루어진 기초적인 블렌딩 모드들을 직접 만들어 보겠습니다! 😋 색상의 혼합, 블렌딩이란 사전적으로 블렌딩의 정의는, 어떤 한 색과 다른 한 색을 섞는 색의 혼합을 말합니다. 이러한 블렌딩은 당장 눈 앞에서도 일..
SDF (Signed Distance Field) (Unity 빌트인 렌더 파이프라인 사용 / Unreal 5.1 버전 사용) 개요 게임 UI를 작업하면서, 'SDF'는 한번쯤은 접해보거나 지나쳤을 내용입니다. 글꼴을 사용할 때, 텍스트에 효과를 주거나 할 때에요. 특히 유니티를 사용하신다면 Text Mesh Pro 는 한번쯤 사용해보셨을 텐데, TMP의 기능들이 SDF를 통해 구현되고 있습니다. 글꼴 외에도, 여러가지로 응용되는 육각형 능력치를 가진 SDF에 대해 이론적인 내용을 정리하고자 해 포스트로 남깁니다. Distance 일단 Signed Distance Field 에서의 'Distance'에 대해 간단하게 짚고 넘어가야 합니다. 직역한 '거리'라는 의미대로, Distance 는 여러 프로그래밍 언어 상에서 특정 지점 A에서 B까지의 거리를 구..
노이즈 기반 언리얼 연기 메테리얼 (Unreal 5.1.1 버전 사용) 개요 개인 작업 도중, 연기 효과 표현을 어떻게 해야 할까 고민하던 중에 아래 영상을 보고 영감을 받았습니다. 애프터이펙트로 만드는 연기기는 하지만, 원리는 동일하니까요. 영상의 작업 과정을 요약하자면, 크게 '노이즈 생성', '노이즈 시드값 애니메이션', '노이즈 알파 수정', '마스크 적용' 의 4가지 단계로 구분할 수 있겠습니다. 단계를 따라서, 메테리얼을 만들어 봅시다. 노이즈 생성 및 애니메이션 먼저 노이즈의 위치값으로 들어갈 UV 값과 위치, 크기를 조절할 파라미터 값들을 패너로 연결해줍니다. 그 다음, 앞선 'Create an Atmospheric Smoke Effect' 영상에선 Evolution 값으로 노이즈에 추가적인 애니메이션을 더해줬는데, 이를 ..
색체계와 색의 구성요소 색상에 대한 글 디지털 색상과 수 색체계와 색의 구성요소 색상 간의 혼합 - 기초 블렌딩 연산 개요 지난 글에서는 빛의 3원색 RGB와 색의 3원색 CMYK, 그리고 수로 된 RGB값으로 어떻게 색상을 표현하는지를 이야기했습니다. 디지털 색상과 수 RGB와 CMYK, 가산혼합과 감산혼합 일반적으로 색은 빛의 3원색인 RGB, 색의 3원색인 CMYK로 구분하고는 합니다. RGB는 모니터와 같은 디스플레이를 통해 표현되는 디지털 작업에서, CMYK는 지면으로 표 do-workspace.tistory.com 다만 R, G, B 각각의 값을 조절해서 원하는 색을 찾는 것은 매우 불편하고 사람에게 직관적이지도 않기 때문에, 우리는 주로 색조, 채도, 명도 로 색을 나타내는 HSB모델을 통해서 색상을 선택합니다. ..
디지털 색상과 수 색상에 대한 글 디지털 색상과 수 색체계와 색의 구성요소 색상 간의 혼합 - 기초 블렌딩 연산 RGB와 CMYK, 가산혼합과 감산혼합 일반적으로 색은 빛의 3원색인 RGB, 색의 3원색인 CMYK로 구분하고는 합니다. RGB는 모니터와 같은 디스플레이를 통해 표현되는 디지털 작업에서, CMYK는 지면으로 표현되는 인쇄 작업에서 사용됩니다. CMYK는 'C'yan, 'M'agenta, 'Y'ellow, Blac'k' 의 네 가지 색상으로 구성되어 있는데, 왜 색의 '3'원색이라고 불리는지는 아래 단락에서 감산혼합에 대하여 다룰 때 더 이야기하도록 하겠습니다. RGB는 더할수록 밝아져 가산혼합되고, CMYK는 더할수록 어두워져 감산혼합된다고 이야기합니다. 가산혼합은 색이 합쳐질수록 밝아지는 것을, 감산혼합은..
왜곡 셰이더 만들기 (유니티 빌트인 렌더 파이프라인 - Vertex&Fragment 셰이더 사용 / 언리얼 메테리얼 사용) 개요 렌즈 왜곡처럼 중앙을 기준으로 방사형으로 왜곡이 적용되는 셰이더를 만들면 연출에 잘 사용할 수 있을 것 같아, 기대하면서 왜곡 셰이더 만들기를 시작했습니다. 첫 시도 처음에는 UV값을 텍스처를 통해 증감시키기만 하면, 방사형으로 왜곡될 것이라고 생각했었습니다. UV 좌표 0.5, 0.5를 기준으로 1사분면의 UV엔 텍스처 값을 더해 1시반 방향으로 움직이고, 3사분면의 UV에선 텍스처 값을 빼 7시 반 방향으로 이동하는 식으로요. 그렇게 만들어보니, 렌즈 왜곡이라고 하기에는 묘한 결과물이 나왔습니다. distance() 를 사용해 왜곡 적용하기 렌즈 왜곡처럼 원형으로 왜곡을 적용하려면 어떻게 해야..
타일별로 크기 조절이 되는 셰이더 만들기 (유니티 빌트인 렌더 파이프라인 - Vertex&Fragment 셰이더 사용 / 언리얼 메테리얼 사용) 개요 '텍스처를 타일링해 반복시키고, 반복된 각각의 텍스처가 그대로 크기 조절이 되도록' 만드는 방법이 있는지 친구에게 질문을 받았습니다. UV만 조금 건드리면 될 것 같은데... 먼저 어떻게 만들어야 하는지 러프하게 생각해봅니다. 👀 대략적인 동작 방식 그리기 일반적으로 텍스처가 타일링 될 때의 그래프는 위 이미지의 왼쪽과 같습니다. UV에 Tiling값으로 3이 곱해져, UV가 0~1일 때 텍스처가 하나(0~1, 텍스처의 좌표), 1~2일 때 텍스처가 하나, 마지막으로 2~3일 때 텍스처가 하나 반복되는 식입니다. (UV 및 텍스처 좌표 x, y는 편의를 위해 통칭함) 그렇게 Tiling 값에 따라..
UI 디자인 기록 - 스푸키 프렌즈 개요 사이드 프로젝트로, 제페토 플랫폼에 '스푸키 프렌즈'라는 이름의 간단한 캐주얼 수집형 (포켓몬 고 느낌의) 게임을 만들었던 과정을 정리해보고자 글을 쓰게 되었습니다. 스푸키 프렌즈는 게임 내 셀프 카메라를 통해 사진을 찍어 유령을 포획하거나, 포획한 유령을 상위 등급으로 진화시켜 여러 유령을 수집하고, 몬스터와 클리커 형식의 전투를 진행하기도 하는 게임입니다. 프로젝트 팀원과 목표했던 주안점은 '제페토'의 SNS와 연결되어 게임의 외연을 SNS로도 확장시킬 수 있도록 하는 부분이었습니다. 1차적인 요소로는 수집한 유령 캐릭터를 장착해 필드에서 타인에게 과시할 수 있도록 했고, 이어지는 요소는 게임 내에서 찍은 사진을 제페토 피드상에 올려 SNS와 연결되는 지점이 생기도록 했습니다. 기획적인 이야기는..

티스토리툴바