본문 바로가기

분류 전체보기

 (46)
색상 보간 Color InterpolationSummary Often you have more than one color going into the output you want to draw to the screen. A simple way of combining two colors is to interpolate between them based on other parameters. This tutorial will build on the simple textured shader, but youwww.ronja-tutorials.comRonja 님의 허락을 받고 번역한 튜토리얼입니다. 원문은 위 링크에서 확인하실 수 있습니다.몇몇 부분은 생략·추가하였습니다.의역과 오역이 넘쳐날 수 있으니 편하게 봐주시고 잘못된 ..
Color Blend Mode 개요Color 블렌딩은 원리 자체는 간단한 블렌딩 모드입니다.HSV를 사용해 색상에서 색조와 채도 값을 얻어 블렌딩에 사용하는 방식입니다. 베이스 색상에 블렌딩할 색상의 HSV 값 중 Hue 값과 Saturation 값만 가져와 섞어주는 것이죠.먼저 베이스 색상과 블렌딩할 색상의 RGB 값을 HSV로 바꿔줍니다. 그 다음 베이스 색상의 H와 S값을 블렌딩할 색상의 H와 S값으로 바꿔줍니다. 이제 Hue와 Saturation 값이 바뀐 HSV 값을 다시 RGB 값으로 변환해주면 컬러 블렌딩이 완료됩니다!  RGB값을 HSV 값으로 변환하기앞서 이야기했듯, 먼저 베이스 색상과 블렌딩할 색상 두가지 모두 HSV값으로 변환해줍니다. float3 RGBToHSV(float3 c){ float4 k = flo..
평면 매핑 Planar MappingSummary Sometimes you don’t have texture coordinates on your object, you want to make the Textures of multiple Objects align or you have a different reason to generate your own UV coordinates… In this tutorial we’ll start with the simplest way to genwww.ronja-tutorials.comRonja 님의 허락을 받고 번역한 튜토리얼입니다. 원문은 위 링크에서 확인하실 수 있습니다.몇몇 부분은 생략·추가하였습니다.의역과 오역이 넘쳐날 수 있으니 편하게 봐주시고 잘못된 부분은 알려주시면 ..
언리얼 LED 화면 효과 메테리얼 만들기 (Unreal 5.1 버전 사용) 개요 이번 글에서는 언리얼 메테리얼로 LED 화면 효과를 만들어보겠습니다. 아래 순서와 같이, 텍스처를 먼저 모자이크화(픽셀화)하고, LED 화소 텍스처와 곱해주면, 짠 하고 만들어지는 간단한 효과입니다! 🎉 아래의 LCD 화면 효과 유니티 셰이더 제작 글을 참고했습니다. LCD Display Shader Effect - Alan Zucconi Learn how to make a photorealistic LCD Shader Effect in Unity. Full code and downloadable Unity package are provided. www.alanzucconi.com 텍스처 모자이크 처리하기 먼저 텍스처를 모자이크 처리해줄 차례입니다. 사실 모자이크 ..
Unity - 메테리얼을 애니메이션에서 조작 가능하게 만들기 (Unity URP 사용) 목차 개요 스크립트로 메테리얼을 감싸 애니메이션 키로 조작 가능하게 만들기 원본 메테리얼 값에 접근 막기 개요 UI 연출을 작업하다 보면, 셰이더를 활용한 연출이 들어가면 좋을 것 같은 때가 있습니다. 저는 위와 같은 링 형태의 이펙트 연출을 할 때 SDF 방식의 셰이더를 주로 사용하는 편입니다. 물론 프레임 애니메이션 방식으로 링의 두께가 줄어드는 프레임 여러 장을 통해 유사한 느낌을 낼 수 있지만, 프레임 애니메이션 특성상 끊겨 보이는 문제가 있어 개인적으로는 셰이더로 처리하는 걸 선호하는 편입니다. 하지만 이러한 셰이더 연출을 사용할 때 단점이 있는데, 유니티에선 애니메이션에서 메테리얼에 접근하는 것이 불가능하다는 것입니다. (언리얼 엔진에서는 애니메이션에서 직접 메테리얼..
스프라이트 셰이더 Sprite Shaders Summary In unity the way sprites are rendered is very similar to the way 3d objects are rendered. Most of the work is done by the sprite renderer component. I’ll go a bit over what the component is doing and how we can change our shader to do some of the www.ronja-tutorials.com Ronja 님의 허락을 받고 번역한 튜토리얼입니다. 원문은 위 링크에서 확인하실 수 있습니다. 몇몇 부분은 생략·추가하였습니다. 의역과 오역이 넘쳐날 수 있으니 편하게 봐주시고 잘못된 부..
기본 투명 셰이더 Basic Transparency Summary In addition to just painting color onto the screen, we can also preserve some of the color that was on the screen previously, making the object seem see-through. I’ll explain how we can archieve this effect in a basic shader without lighting. To www.ronja-tutorials.com Ronja 님의 허락을 받고 번역한 튜토리얼입니다. 원문은 위 링크에서 확인하실 수 있습니다. 몇몇 부분은 생략·추가하였습니다. 의역과 오역이 넘쳐날 수 있으니 편하게 봐주시고 잘못..
색수차 효과 셰이더 만들기 (Unity URP / Unreal 5.1 버전 사용) 개요 이번 글에서는, 색수차 (Chromatic aberration) 효과를 셰이더와 메테리얼로 만들어보려 합니다. 유니티와 언리얼 모두 후처리 (Post processing) 효과에서 색수차 효과를 기능으로 제공하곤 있지만, 제공되는 기본적인 기능에 노이즈를 더한다던지 등의 기능을 추가해 더 커스텀하게 만들어보고 싶었어요. 🔧 먼저 언리얼 메테리얼 노드를 통해 보기 쉽게 색수차 효과를 만들어보고, 바로 이어서 유니티 셰이더 코드로도 작성해보겠습니다. 색수차 효과란 색수차 효과를 적용한 샘플 이미지들을 가져와봤습니다. 위의 이미지들에서 보이듯, 색상의 잔상이 보이는 느낌의 효과입니다. 유명한 틱톡 로고 또한 이러한 색수차 효과의 일종이라고 봐도 될 ..
유니티 서피스 셰이더 기본 Surface Shader Basics Summary In addition to writing shaders almost from the ground up, unity also allows us to define some parameters and let unity generate the code which does the complex light calculations. Those shaders are called “surface shaders”. To understand surfac www.ronja-tutorials.com Ronja 님의 허락을 받고 번역한 튜토리얼입니다. 원문은 위 링크에서 확인하실 수 있습니다. 몇몇 부분은 생략·추가하였습니다. 의역과 오역이 넘쳐날 수 있으니 편하게 봐주시고 ..
셰이더에서의 Sin(time) 그래프의 이해 개요 일반적으로 셰이더에서 애니메이션 효과를 줄 때, 단골로 등장하는 함수가 있습니다. 삼각함수 중 하나인 sin() 입니다. 물론 sin() 함수를 사용하지 않고도 애니메이션 효과는 만들 수 있겠지만, 사람은 일반적으로 보간이 들어간 커브 형태의 움직임을 더 자연스럽게 느끼고는 하니까요. 이번 포스트에서는 sin() 함수를 통해서 부드럽게 알파가 깜빡이는 효과를 언리얼 메테리얼 노드로 만들어 보겠습니다. 글 순서는 이론적인 부분부터 예제까지 차례대로 적기는 했지만, 저같은 수포자는 예제를 따라해본 뒤 이론적인 부분을 보며 원리를 이해하는게 더 와닿았었습니다. 만약 저와 같은 수포자시라면, 실전부터 박치기하고 역주행하는 쪽을 추천드립니다. 학창시절에 수학을 등 뒤로 했던 업보가 이렇게... 😂 그럼 si..

티스토리툴바